在资料中并排使用图标时,如何让外观统一

与插画不同,图标是单独承载含义的记号。并排放置时,只要有一个线条更粗、或只有一个是填充的,那一项就会被读作被强调的内容。本文整理混用不同来源的图标时容易出现的误会,以及回避的方法。

排列出界面设计流程的插画
下载该素材 →

不要混用填充与描边

首先要决定的是使用填充图标还是只有轮廓的图标。这两者属于不同的记号体系,混在一起时,填充的那一方看起来像是在表示「选中」「已启用」之类的状态。在导航或检查清单中,这种误读会直接变成操作错误。

同一个形状同时备有填充版与轮廓版的情况并不少见。请选定其中一种,并贯穿整份资料。需要切换时,只限于用来表示状态差异的场合。

线条粗细在一份资料中只用一种

使用轮廓图标时,左右印象最大的既不是颜色也不是形状,而是线条的粗细。细线显得精密而克制,粗线显得明快而强烈。问题在于,这种差异会被读作含义上的差异。

步骤清单中若混有细线与粗线,粗的一方会被理解为更重要的工序。实际上可能只是素材来源不同,但读者看不出来。请把粗细固定为一种,强调交给颜色和排布来完成。

画面上显示警告图标的插画
下载该素材 →

以最小的尺寸为基准挑选

同一个图标,放小和放大时的观感并不相同。缩小后细节会糊成一团,放大后线条又显得纤细无力。

若同一份资料中要以多种尺寸重复使用,请以最小的那一种为基准挑选。小尺寸下仍能读懂含义的图标,放大后不会崩坏;反之则不成立。拿不准时,缩到实际摆放的大小确认一次即可。

只在颜色具有含义时才改变颜色

只有当颜色代表某种含义时,才给图标上色。红色表示警告、绿色表示完成——只要这种对应在资料中保持一致,颜色就能作为信息发挥作用。若只是作为装饰逐个换色,读者就会去寻找并不存在的差异。

不要削减周围的留白

图标周围的留白是形状的一部分。为了塞进框里而削减留白,就会与相邻的要素相互干扰,变得难以辨读。与文字并排时,把图标的高度取得比文字稍小一些,看起来会更稳。

关于 Visual Hub 的图标

本站的图标以单色填充绘制,不带有线条粗细这一属性。看起来像是轮廓的那些,也是把内侧挖空后的填充。既然不存在素材之间粗细不一致的问题,上文的「统一线条粗细」便是与其他来源混用时才需要注意的事。

颜色与尺寸在下载时指定,不以文件形式保存不同颜色和尺寸的版本,因此可以在确定资料之后再决定。SVG 与 PNG 都可以导出。

※部分形状的填充版与轮廓版是作为不同素材提供的。并排使用时,请统一为其中一种。