官网图标怎么选？线性与面性的取舍

图标是官网上最小的元素，一套可能也就十几个二十个，单个不到三十像素。但它对整体气质的影响，比很多人想象的大。

有个很典型的对比：同样的排版、同样的配色，把图标从线性换成面性，整个页面立刻从"克制专业"变成了"活泼亲民"；反过来也一样。改的只是几 KB 的图形，观感却像换了个网站。

所以图标风格不是细节，是定位决策。这篇文章讲怎么选，以及选完之后怎么把它管住。

先明确：图标在页面里干什么

选风格之前，先按用途把图标分分类。不同用途，评价标准不一样。

导航和功能图标是"要被快速理解"的，风格必须保守；装饰图标是"要营造氛围"的，可以放开一点。这两类如果混在一起用同一套标准，要么导航太花，要么装饰太素。

两种风格到底差在哪

线性图标是轮廓，靠线条勾勒；面性图标是剪影，靠形状填充。差异不只是视觉，还影响三件实际的事。

• 视觉重量。面性图标更"重"，页面上会先被看到；线性更"轻"，退到背景里。信息密集的页面用面性，容易显得拥挤
• 识别速度。在小尺寸下，面性因为色块面积大，往往比线性更快被辨认；但形状复杂的图形，线性反而更清楚，因为线之间留了空隙
• 语义表达。面性适合表达"实体"和"状态"（对勾、警告、盾牌）；线性适合表达"动作"和"概念"（上传、设置、筛选）

还有一点容易忽略：线性图标对线宽非常敏感。同样是线性，1.5px 和 2px 的观感完全不同——1.5px 精致，2px 扎实。一套图标里线宽必须统一，混用一眼就能看出来。

判断标准一：看页面的信息密度

这是**条，也是最客观的一条。

页面上信息多、文字密、模块小（比如后台系统、参数表、多级导航），用线性。线性图标占用的视觉资源少，不会和文字抢注意力。

页面上留白多、模块大、图形本身是主角（比如首页的能力板块、行业解决方案入口），面性更合适。大块留白配细线图标，会显得单薄撑不住。

一个简单的检验方法：把页面缩小到手机屏幕上看。如果图标在小屏上变成一团糊，说明它的线条太细或内部结构太复杂，该换成更简洁的版本或改用面性。

判断标准二：看品牌气质

图标风格要和品牌调性一致。粗略地分：

• 科技、制造、金融、专业服务——偏理性、克制，线性更契合
• 母婴、餐饮、美业、教育、消费品——偏亲和、活力，面性或圆润的双色更契合
• 工业、工程、物流——需要稳重，粗线性或实心面性都可以，但避免细线

这不是硬规则，是倾向。实际做的时候，可以把两套图标各放一版到首页首屏，让内部几个人看一眼，通常判断是一致的。视觉这件事，直觉比分析准。

关于官网整体风格该往哪走，可以看看《》，图标是这套形象里颗粒度最小、但一致性要求**的部分。

判断标准三：看使用场景

同一套图标，在不同场景下表现差别很大。定风格前把实际场景列出来：

• 尺寸。最小会用到多大？16px 的图标用线性，内部细节基本糊掉；面性反而清楚
• 底色。会放在深色背景上吗？深色底上的线性图标要用反色，面性通常要留边界
• 是否单色印刷。有些企业的画册和名片会用到同一套图形，单色印刷时面性更保险
• 是否做动效。线性图标做描边动画很容易，面性做形变动画更自然。想做动效的话，这个会影响选择

第二条经常出问题。网站有深色区块（比如页脚、深色 banner），线性图标直接放上去，线条颜色没单独适配，结果几乎看不见。这种问题不是设计能力问题，是规范没列全。

判断标准四：能不能长期维护

这一条最实际。官网上线之后一定会加功能、加页面，就要加新图标。这时候谁来画？

• 用成熟的图标库。数量多、风格统一、成本低。缺点是容易和别人"撞脸"，而且库里的图标不一定覆盖你的业务场景
• 设计师全套自绘。独特、贴合业务。缺点是后续要加图标时还得找同一位设计师，否则风格接不上
• 库用为主 + 关键图标自绘。折中方案。通用功能用库，业务专属的几个（比如你们特有的产品类别）自绘

第三种最实用。但要提前约定：自绘的图标必须遵循库里那套的参数（线宽、圆角、栅格、视觉大小），否则放一起还是不协调。

费用上，用图标库多数是免费或一次性授权；全套自绘按图标数量计费，一套二三十个的定制图标通常在几千元量级。以上为深圳市场公开参考区间，并非本站报价。

四个常见错误

• 语义不清。为了好看用了一个抽象图形，用户不知道那是什么。图标的**职责是表意，第二才是好看
• 风格混用。同一排里三个线性两个面性，视觉立刻散掉。这是**频的问题
• 线宽不一致。线性图标里 1.5px 和 2px 混着用，远看就说不出的别扭
• 过度装饰。加了渐变、投影、多色、复杂纹理。小尺寸下这些全是噪音，只留轮廓反而清楚

**个错误最常见，也最影响效果。检验方法很简单：把图标单独拿出来，不给任何文字，让没参与项目的人猜是什么意思。猜不出来就换掉，不要指望用户能理解。

选完之后，把这些参数定死

风格定了只是开始。要把它变成可执行的东西，需要一份规范。至少要写清：

• 栅格与画布尺寸：比如 24×24 栅格，主体内容留 2px 安全边距
• 线宽：线性统一 1.5px 或 2px，不混用
• 圆角：端点与转角统一为圆角或直角，圆角半径固定
• 视觉大小：不同形状的图标视觉重量要平衡，方形和圆形不能按同样的物理尺寸画
• 颜色：默认色、hover 色、禁用色、深色底反色各一种
• 最小使用尺寸：低于这个尺寸就不使用，或换简化版
• 命名规则：便于后续查找和扩展

规范文档不用长，一页就够。但没有它，三个月后新加的图标一定和原来的对不上。界面设计的其他通用标准，可以参考《》。

风格是手段，一致才是目的

线性还是面性，其实没有**的对错。真正决定观感的是一致性——同一套图标，同样的线宽、同样的圆角、同样的视觉大小、同样的颜色规则，放在哪里都认得出是一家人。

反过来，就算选了所谓"更高级"的风格，只要混用、只要线宽不统一，页面立刻廉价。这部分投入很小，见效却很明显，是官网设计里性价比**的一处细节。

如果你正在改版或者新做官网，可以把参考站点和品牌调性发过来，我们给一套图标方向和规范建议，后续不管谁来做都能接得上。

咨询电话：13928418795（工作日 9:00-18:00）｜微信扫码添加，备注"图标规范"。