打开很多中小企业的官网,第一眼觉得还行,第二眼就觉得哪里不对:导航图标是线性描边,功能区块却是彩色面性图标;同一页面里,有的图标圆角四像素,有的完全直角;插画一会儿扁平一会儿立体,人物比例各不相同。
颜色和 logo 往往是老板盯得最紧的两件事,图形却没人管。而图形恰恰是页面里数量最多、最容易暴露管理水平的元素——一页二十个图标,只要三个风格不一致,整页的专业感就漏掉了。
图形语言是什么
图形语言是品牌在图标、插画、示意图、装饰纹样上的统一规则。它和 logo 的关系,类似字体和字标的关系:logo 是那一个字,图形语言是整套书写方式。
没有图形语言的公司,每做一张新图都要重新决策一次——用不用圆角、用几号线、上不上色、人物画不画脸。决策成本高,结果自然不统一。定下规则之后,设计师和外包都能按同一把尺子出活,返工率会明显下降。
规则一:先定一套绘制参数
不要谈风格,先谈数字。图形的不一致,八成来自参数不一致。至少把这五项写死:
- 画布尺寸:统一 24×24 的画板,关键元素落在 20×20 安全区内,四周留 2 像素呼吸。
- 线宽:线性图标统一 1.5 或 2 像素,全站只允许一个值。线宽一变,图标就像来自两家公司。
- 圆角:端点用圆头,转角半径统一 2 像素。圆头和方头混用是最常见的破绽。
- 留白:图形实际占比控制在画布六到七成。太满显笨重,太空显虚弱。
- 对齐:所有图标共用同一条视觉基线。按视觉重心微调,不要机械地数学居中。
这五项写进一页纸,配三个正确示例和三个错误示例,比写十页风格说明有用。
规则二:统一视角与透视
图标和插画都隐含一个观察角度。线性图标通常是正视平面,等距插画通常是四十五度俯视。两种都可以,但不能在同一组里混用。
常见错误是同一个功能区块里,前三个图标是平面正视,第四个突然变成带厚度的立体物件。单看每个都没问题,放在一起就像拼贴。
规则三:控制风格数量
中小企业不需要一整套图形系统,只需要两套:一套功能图标,一套场景插画。多一套就多一份维护成本,也多一处走样风险。
功能图标负责指路——导航、按钮、列表前缀,要求识别快、笔画少、单色。场景插画负责解释——空状态、引导页、行业方案,允许有细节和情绪,但要固定人物比例、配色和笔触。
第三套通常出现在活动页和老板临时要的那张图上。解决办法不是禁止,而是规定:活动页只能用现有两套重组,不得新造风格。这条规矩能省掉大量返工,也是让页面长期看起来像一家公司的关键。
规则四:写一张取用清单
规则只有被查得到才有用。做一张一页的清单,写清四件事:
- 场景对照:哪些场景用线性图标,哪些用插画,边界写清楚,不留解释空间。
- 尺寸下限:线性图标小于 16 像素线宽会糊,规定最小尺寸,避免在小按钮里硬塞。
- 颜色规则:默认单色,用品牌中性色;只有关键动作的图标可用主色,一屏不超过两个。
- 禁用清单:不用渐变、不用投影、不用超过三色的插画、不用把文字嵌进图标。禁用项比推荐项更能防止走样。
颜色怎么用才不掉价
图形用色最常见的两个极端:一是全黑白,看起来像素材库拼的;二是每个图标一种颜色,像儿童乐园。
比较稳的是三级用法:默认态用中性灰或品牌深色,承担九成信息量;强调态用主色,只标注当下最重要的一两个动作;状态态用语义色,成功、警告、错误各一个,不参与品牌表达。
插画可以放开用色,但要把色板限定在品牌色加两三个辅助色之内,并固定每个颜色的使用比例——比如主色不超过三成。比例固定,插画换题材也不会跑偏。
四个常见坑
- 直接买图标包。同一个包里风格统一,但买三个包混着用就散了。要买就买一套,并确认能覆盖八成使用场景。
- 让每个设计师自由发挥。不是能力问题,是标准问题。没有参数,专业设计师也会做出不同结果。
- 只做图标不做插画。空状态、引导页、方案页迟早要用插画,临时找图必然跑偏。哪怕只定三个人物姿势,也比没有强。
- 规则写完就锁进文件夹。把清单放到协作工具的首页,或做成组件库的说明页,让人不用找就能看到。