图标、配色与 UI 设计资源站

后端程序员的自救书签

我主业写后端，前端样式一直是短板，但小工具和后台页面总得自己拼。这一组站点就是用来补短板的：不追求学会设计，只求在需要时能在十分钟内找到能用的图标、不出错的配色和一套说得过去的间距。判断标准很功利，能不能直接复制、有没有明确的授权说明、下载前要不要注册。

我把它们和导航页其它组分开，是因为使用频率不高但一旦要用就很急。平时一个月不打开，真接了个要自己画页面的活，又希望一进来就全在眼前，所以宁可单独占一个分组，也不塞进杂项里。

具体在用的几个

• Iconify 与聚合图标搜索：一次搜遍多套图标库，按风格统一后再选一套用。留着它是因为同一个项目里混用三套图标的线条粗细，比不用图标还难看，统一来源能直接省掉这个坑。
• Heroicons、Lucide 这类单套图标：确定风格后固定用一套，尺寸和描边天然一致，直接拿 SVG 内联进模板，不额外引一整个图标字体。
• 配色生成与对比度检查工具：给它一个主色，生成深浅阶梯，并直接给出对比度是否达标。我主要用后者，纯靠眼睛判断浅灰字在白底上够不够清楚非常不可靠。
• 现成调色板站点：不知道从哪下手时找一组现成配色，但我只借主色和强调色，不整盘照搬，否则页面会带上别人的气质。
• 组件与版式参考站：看表单、表格、空状态这些后台常见块别人怎么排，属于照着摆而不是照着抄。

对比度检查这一条我想多说一句：以前我做的后台页面，次要文字一律用浅灰，自以为很克制，后来用工具一测才发现大面积不达标，在笔记本屏幕上根本看不清。从那以后配色站就常驻书签栏了，它对我不是审美工具，是可访问性检查工具，每次定完色都跑一遍。

我的使用套路

接到一个小页面，先定一个主色，用配色工具生成五到六级明度阶梯，把正文、边框、背景三个位置固定下来；再从一套图标库里挑需要的四五个图标，统一尺寸导出成 SVG；间距只记两个数，比如 8 和 16，其余一律不引入新值。约束越少，成品越不容易失控，这一步对不擅长设计的人特别管用。

授权是另一件必须当场确认的事。图标和字体都有各自的许可证，有的要求署名，有的禁止再分发，商用项目里我只在图标页当场看清楚并记进项目说明文件，绝不先用了再说。资源站通常把许可证放在下载按钮旁边，这一点比素材本身更值得留意。顺带一提，导出 SVG 后我会顺手删掉里面多余的元数据和内联样式，体积能小一截，也避免别人的样式覆盖我的页面。