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

与插画不同,图标是单独承载含义的记号。并排放置时,只要有一个是轮廓、只有一个套着圆框,那一项就会被读作被强调的内容。本文用本站的图标并排演示,说明混用不同来源的图标时容易出现的误会,以及回避的方法。

伸手触碰墙上白板排列的图形、设计界面的人物插画
下载该素材 →

不要混用填充与轮廓

首先要决定的是使用填充图标,还是只有轮廓的图标。这两者属于不同的记号体系,混在一起时,填充的那一方看起来像是在表示「选中」「已启用」之类的状态。

填充与轮廓混在一起的排列。只有填充的「信息」「注意」「完成」看起来像被选中了。
统一为填充的排列。每一个读起来分量都相同。
统一为轮廓的排列。印象更轻,但只要统一,同样不会产生误读。

在导航或检查清单中,这种误读会直接变成操作错误。请选定其中一种,并贯穿整份资料。需要切换时,只限于用来表示状态差异的场合。

外框的形状也要统一

即使同为填充图标,套着圆框的、套着方框的、没有外框的混在一起,带框的那些看起来就像按钮。

圆框、方框与无框混在一起的排列。
统一为圆框的排列。

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

把轮廓图标与其他来源的素材混用时,左右印象最大的是线条的粗细。步骤清单中若混有细线与粗线,粗的一方会被理解为更重要的工序。请把粗细固定为一种,强调交给颜色和排布来完成,这样更稳妥。

以较小的尺寸为基准挑选

缩小后细节会糊成一团,放大后线条又显得纤细无力。若同一份资料中要以多种尺寸重复使用,请以较小的那一种为基准挑选。小尺寸下仍能读懂含义的图标,放大后不会崩坏;反之则不成立。

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

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

不要削减周围的留白

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

关于 Visual Hub 的图标

上面的示例都是本站的图标。它们以单色填充绘制,看起来只有轮廓的那些,也是把内侧挖空后的填充。同一个形状备有填充、轮廓、外框各不相同的版本,并排使用时请统一选择其中一种。颜色和尺寸可以在下载时指定,SVG与PNG都可以导出。