导航站栏目图标与配色怎么定：编辑自定规范

先定图标来源：自制、图标库还是站点截图

栏目图标这件事，最怕一开始就陷入「哪个好看」的争论。更实用的顺序是：先定来源，再谈风格。来源定了，后面的工作量、统一难度、维护成本基本就锁死了。导航站常见的来源无非三种：自绘、图标库、站点截图。三者不是审美差异，而是三种不同的管理模型。

自绘图标自由度最高，适合栏目数量少、调性需要强区分的站。缺点是耗时，且一旦换人维护，笔触很难接上。图标库是折中方案，成套下载、风格一致，适合栏目在十个以上、需要快速铺开的场景。站点截图最省事，直接从收录站点里截 favicon 或首页局部，但风险也最大：清晰度参差、版权边界模糊、风格完全不可控，多数情况下只适合做临时占位，不适合长期挂在正式栏目上。

我的建议是分两层：一级栏目用图标库成套方案，二级或临时入口允许截图顶着用，但要标注为待替换。这样既不会卡在起步阶段，也不会让截图慢慢变成事实标准。

图标风格怎么统一：线宽、圆角与留白的三条硬规矩

风格不统一，往往不是图标本身丑，而是参数在打架。一条 2px 的线和一个 1.5px 的线放在一起，单看都不错，并排就露馅。所以规范里必须写死几个数值，而不是写「尽量保持一致」这种没法执行的句子。

第一条硬规矩是线宽。全线图标统一到一个线宽数值，描边类图标不要混入实心图标，除非实心图标承担明确的「选中」状态。第二条是圆角。拐角半径要么统一为直角，要么统一到一个小圆角值，别一半方一半圆。圆角图标和直角图标混用，视觉上会显得整排图标歪歪扭扭。

第三条是留白，也就是图标在画布里的安全边距。常见做法是给每个图标留出相同的四周余量，让视觉重量接近。很多图标看起来「一个大一个小」，问题不在图形，而在留白不一致。写规范时可以这样落笔：画布尺寸统一、线宽统一、圆角统一、四周留白统一，四条写进文档，新人照着做就不会跑偏。

风格统一是约束出来的，不是挑出来的。规范的价值在于让别人不用猜你的审美。

配色不是审美题：栏目色怎么选才不抢正文

导航站的正文是站点卡片和项目条目，栏目色只是「分区标签」。所以栏目配色的第一原则是低饱和、低对比，第二原则是彼此可区分。这两条经常冲突：颜色太淡，栏目之间分不开；颜色太浓，又压过正文。解决办法是把栏目色限制在浅色系里做区分，靠色相拉开差距，而不是靠明度和饱和度硬顶。

具体做法上，每个栏目给一个主色，再配一个浅底色用于区块背景，主色只出现在图标和小面积标识上。文字不要用栏目色，除非是标题级强调。多数情况下，栏目色一旦用在正文文字上，阅读负担立刻上来，尤其在条目密集的列表页。

栏目主色控制在少量几个色相内，避免整站像调色盘。
相邻栏目避免用相近色相，否则分区意义消失。
栏目色不参与正文文字颜色，只做标识和背景。
深色模式下栏目色需要单独校验，不能直接沿用亮色值。

还有一点容易被忽略：栏目色要能承受「同时出现」。首页往往多个栏目并排，单看每个颜色都合格，摆在一起却互相打架。定色时就把所有栏目色排成一行看整体，比逐个挑色靠谱得多。

栏目图标与站点卡片怎么协调：主次关系与点击区

栏目图标是导航，站点卡片是内容，两者在页面上是主次关系，不是并列关系。图标负责「告诉你在哪」，卡片负责「让你点进去」。所以图标的视觉重量应当低于卡片标题，尺寸也要克制。图标做得比卡片标题还抢眼，用户视线会先落在栏目上，反而拖慢找站点的效率。

点击区是另一个实际问题。栏目图标如果可点，就要有明确的点击范围和状态反馈；如果只是装饰，就不要做成看起来能点的样子。很多导航站在这里含糊，用户点了没反应，体验就打折。规范里应当写清楚：哪些图标可点、点击后发生什么、悬停与选中状态怎么表现。

协调的具体手段包括：图标与卡片之间保持稳定的间距，栏目区块之间用留白或浅底色分隔而不是粗边框，选中态用底色或描边变化而不是放大图标。放大图标是最容易做坏的一招，既破坏对齐，又让布局跳动。

改版迁移：旧图标旧配色怎么替换、怎么回滚

图标和配色的改版，风险不在设计，而在迁移。旧图标可能散落在多个页面模板、多个栏目配置里，直接替换很容易漏。更稳的做法是先盘点：把所有用到图标和栏目色的位置列出来，确认哪些是模板级、哪些是配置级，再决定替换顺序。

替换时建议保留旧资源一段时间，不要立刻删除。新图标先在小范围栏目上线，观察对齐、清晰度、深色模式表现，确认无问题再铺开。回滚预案要提前想好：配置项是否支持一键切回旧色值，旧图标文件是否还在，模板是否留有开关。没有回滚方案的改版，本质上是在赌。

另外，改版期间要避免新旧混用太久。半新半旧的图标风格，比统一用旧风格更伤观感。设定一个明确的切换窗口，窗口内完成替换，窗口结束就清理残留。

上线前自查清单：手机端、深色模式与加载速度

图标和配色定完，不等于能上线。导航站的流量里移动端占比不低，图标在小屏上是否还认得出、点击区是否够大，必须实际看一遍。细线图标在手机上容易糊，圆角和留白在小尺寸下也会变形，这些在桌面端看不出来。

深色模式要单独过一遍。浅色底上的栏目色换到深色底，对比度、饱和度都会变，原本柔和的颜色可能发灰或者刺眼。图标也是同理，深色描边图标放在深色背景上基本等于消失。加载速度方面，图标尽量用矢量或统一尺寸的位图，避免每个栏目挂一张大图；截图类图标尤其要压，别让首屏被图片拖住。

手机端逐栏目检查图标辨识度与点击区大小。
深色模式下核对栏目色对比度与图标可见性。
确认图标资源体积可控，首屏不被图片拖慢。
检查新旧资源是否有残留混用。
确认回滚开关可用。

小结

栏目图标与配色，本质是一套编辑规范，不是一次设计发挥。下一步可以这样走：先把图标来源和三条风格硬规矩写成一页文档，再把栏目色收敛到少量色相并排看整体，然后做一次小范围上线验证手机端与深色模式，最后补上回滚开关和残留清理的时间点。规范写下来、能执行、能回退，这套东西才算定住。

登录富贵导航