UI图标规则
图标是强调对象特征的符号,是比其他语言更普遍理解的视觉语言。虽然占据狭窄的领域,但可以传达意义,因此被使用在多种领域
Usage
在UI设计中,图标主要用于应用程序图标和系统图标。用于显示品牌的应用程序图标和用户快速理解和行动信息的系统图标。
Style
图标的表现方式有Line, Fill, Colored和Image。根据图标使用空间的不同,其用途也不同,主要用于对其行为的反馈和提高关注度。
Line, Fill: 以基本的形式布置在设计中。
Colored: 我们经常使用它来反馈我们的行为,或者提高我们的关注度。
Image: 当你需要高度关注时使用。使用Colored或个性图标。
Properties
图标的构成要素有粗细,末端形状,阴影,重叠等,为了给用户识别图标时所必需的最小限度的变化而统一表现规则。
Thickness:数字屏幕使用1px和2px,因为它将无法表达的小数点四舍五入。(随着智能手机配置的提高,也会使用小数点)
End & Join:有棱角的末端,圆形的末端,为了表现柔和,经常使用圆形。
Radius:同样的规则用于End、Join和一致性同样的规则也常用于柔和的表达
Grid
眼睛用视觉网格和轮廓线区分图标。视觉网格是指在相同大小的区域内,各种形状的图标具有相同重量和重心的网格。几何学解体的对象,按照由圆,正方形,矩形,正三角形组成的网格来制作。
Scale
为了在各种环境中进行良好的管理,8px, 16px, 24px, 32px等8的倍数作为基础线使用。主要在移动狭窄领域使用的系统图标,也可以作为4px倍数使用,以保证其通用性
Clarity
设计成用户能够快速理解的最小要素。你可以把它变成你熟悉的形状,如果你需要,你可以使用简单的隐喻。复杂的图标可能无法理解或需要很长时间才能理解用户的意思。
Detail
图标是最重要的目标,为了“快速传递信息”,最好在狭窄的领域内将细节最小化。特别是进入狭窄领域的系统图标,最好只留下能知道传达内容的最低限度的要素,去除其他装饰性要素。
Consistency
在一个服务中,功能相同的图标会以相同的风格显示。Fill和Line可以根据不同的语境同时使用,但是在相同的语境中使用的图标会显示相同的属性。
Perspective
尽可能将远近制作成从正面看到的模样。实际上数码设备是平面的,主要用于平面卡片空间上的图标如果感觉到空间感,就会感觉到认知不协调。虽然会有一定的用途,但我们不提倡
Optical Correction
平面设计工具的局限性,有时需要视觉校正。对于下面播放按钮,图形工具会根据层的末端进行排序。但实际上,三角形的重心和圆或四方形不一样,所以需要调整。











































































