图标

W.in Design 遵循协同、便捷、高效的设计原则,由于人类的视觉倾向于感知连续的形式而不是离散的碎片,所以对齐的信息更有助于用户的识别,其次对齐的元素在视觉上也有视线引导的作用。

设计规格

画面:

W.in Design的系统图标都是按照1024 x 1024的画板进行制作的:

image

出血位:

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

image

图标设计指引

形式:

形式,是构成一个图形最初始的结构.W.in Design整套基础图标基本上都是由圆,方这样的图形演变而成的。追求图形初始结构的理性,而非直觉式的设计,是秩序之美的第一步。

image]

韵律:

W.in Design图标的元素韵律感。系统图标中最常见的元素基本上可以归纳称为:点,线,圆角,三角。

image

构图:

图标设计整体构图上应该保持视觉统一,理想情况下,它们看起来应该是一位设计师设计的。

image

辩识:

业务类图标必须第一时间传达最重要的信息。当图标不能够立刻表达出所代表含义时,可以适当的增加文字说明。

image

生命力:

在部分图标设计中,会适度的注入拟人化的元素,令图标具备生命力。

image

颜色控:

在图标同时展示过多的场景中,可以通过颜色赋予图标更直观的视觉冲击力和表达力。(注:颜色不能过多)

image

输出规范

尺寸:

icon有圆形、正方形、长方形、多边形、不规则图形等形状,不可能同时等高等宽,因此我们需要给icon设置固定的版心,让他们看起来尺寸是一样大,我们推荐尺寸 32*32,20*20,16*16

image

属性:

W.in Design的系统图标为了能突出功能,解决低分辨率下看不清的情况,统一设置成的边框2px,色值#8599C0,通过2px的圆角让图标看起来更为坚硬和理性 (对应科技感),但又不至于太过尖锐(有温度)。

image

上次更新: 11/5/2020, 3:04:38 PM