跳至主要内容

图标指南

Icon 作为 UI 构成中重要的元素,一定程度上影响 UI 界面整体呈现出的风格。


原则

从简

设计时保证参数的简化,尽量消除小数点以及非整数的角度。

处理线条以及轮廓时删除多余的锚点,输出时应避免出现不必要的装饰,保持图标的简洁。

精确

设计时避免使用那些含义模糊的图形,当同个事物存在多个图形表述时,应选取最为流行的样式,必要时进行针对性的强化。

在图标输出时也应遵守命名规范,精确的文字描述便于他人查找。

适度

单个图标作为独立的视觉个体,在线条的疏密以及图形的搭配上要呈现适度感。

在处理一些必要的高密度图标时也要考虑线条的节奏感,让其舒适不压迫。系列图标要遵守适度原则,将变化控制在一定范围内。

规范

栅格规范

栅格作为图表绘制的底层结构,是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。

图标常见尺寸为 12x1216x1620x2024x2428x28px32x32px 这六种输出尺寸。这些尺寸均可以清晰的显示在常规的显示器上。

产品选择以 24x24px 的尺寸作为图标绘制的统一栅格尺寸。

出血位

在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。设计规格在上下左右分别预留了 2px 的出血位,多数的图标在设计中都不建议超过这个区域。

瓴犀图标的设计区域应控制在 20x20px 。在一些特殊情况下如 icon 过长或有突出的边角等,允许内容适当延展,以确保图标视觉重量上的统一。

推荐
绘制区域尽可能在绿色区域内。
慎用
绘制区域不建议在红色区域内。

辅助线

辅助线有助于约束图标的大小以及一些线条的走向,在设计图标时应尽可能根据辅助线进行绘制以保持各图标间视觉重量的统一。

我们将栅格内的圆形、方形、斜线等作为关键图形,在图标设计的过程中应根据设计对象的特性选取对应的辅助线来控制图形样式,这有助于保持图标视觉上的对齐和统一风格。

关键形状

关键形状基于网格。通过这些核心形状作为基线,可以保持整个产品图标中保持一致的视觉比例。

几何学

次要元素

此区域允许以一致的方式补充额外的重要信息,如加号或减号。仅当 icon 需要区别于其他元素,才使用此元素。一般用于一系列图标的某些部分区分。

解剖学

线条

在图标设计中的所有形状上保持 2px 的内部描边,确保整个 icon 的视觉一致性。当图标的内结构较为复杂时,可以调整复杂线条到 1.5px。

推荐
使用一致的描边粗细。
慎用
不要使用不同的描边粗细或端点

角度

线条如需倾斜最好对齐栅格内 45° 辅助线,或使用 15° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度。

像素对齐

由于屏幕像素的特性,非整数像素将会以灰度显示,那样将影响图标清晰度以及整体含义表达,所以在栅格内绘制时应尽量对齐像素点,最大程度上保证图标的清晰度。

推荐
将图标定位到“像素”上。
慎用
不要将图标定位到“半像素”上

居中

在处理一些对称图形时要居中处理,不应为了对齐栅格而打破画面平衡。

推荐
对称图标居中摆放
慎用
不要对齐栅格而打破画面平衡

复杂的图形

如果图标设计需要复杂的细节,可以进行细微的调整以提高其易读性,即为光学校正。任何光学校正都应使用所有图形所基于的几何形状,而不会过分扭曲形状。

推荐
线条粗细合适且清晰
慎用
不要使用太细的线条
推荐
使用一致的几何形状
慎用
不要使用不规则形状
推荐
简化图标以提高清晰度和可读性
慎用
不要使用太复杂的轮廓
推荐
使用正视图
慎用
不要使用立体图形

可触范围

图标周围应保留足够的空间,以保证易读性和可触范围。

24px 的图标可以使用 48px 的可触范围。尤其是正在步行或行动不便的人使用时,较小的可触范围使得图标的交互变得困难。

组合

图标应该垂直或水平居中对齐,具体取决于它们的堆叠方式。这确保了图标与相邻图标看起来视觉视觉上是平衡的。当文本伴随图标时,也要遵循相同的规则。