Skip to main content

图标

icon 绘制规则#

以 px 为单位的网格

网格、比例和尺寸,系统图标以 48px 的尺寸显示。创建图标时,以 100% 的比例来设计是非常重要的,那样可以确保像素级的精度。

图标网格#

图标网格用于促进图标的一致性,并为图标元素的定位建立清晰的规范。这种标准化造就了一个灵活但一致的系统。

编组 11@3x.png

内容区域#

由于方形的视觉面积大于同尺寸(长=直径)圆形视觉面具,为保持图标整体大小协调,在具体图标设计时方形盒圆形采用不同的设计尺寸和四周留白。

在 48*48px 的标准画布上,圆形距离边界 2px,正方形距离边界 5px,安全绘制区域为 44px。

编组@3x.png

关键线形状#

关键线形状是网格的基础。使用这些核心形状作为准则,你可以在相关产品图标的设计中保持一致的视觉比例。

编组 20@3x.png

系统图标拆解#

在图形绘制中我们使用 4px 作为标准圆角,且线段内外皆为圆角,这里的圆角对于线性或面型图标均适用

编组 23@2x.png

笔画#

在图形绘制中我们使用 3px 作为标准描边,避免出现 3.2px 等带有小数点的数值

编组 24@2x.png

圆角#

在图形绘制中我们使用 4px 作为标准圆角,且线段内外皆为圆角,这里的圆角对于线性或面型图标均适用

编组 21@2x.png

内部间距#

在图形绘制中间距的增量请使用完整的像素块进行递增

编组 25@2x.png

标准快捷图标#

标准的快捷操作图标就是把一个材料系统图标放置在安全区域的中心,这里同样使用与线性和面型图标

编组 26@2x.png

通用原则#

为了提高图标的识别性,我们对于拥有相同属性或类别的图标进行元素抽取和复用,比如扫码支付,刷脸支付都有扫描这个含义,因此我们可以提取扫描这个元素进行复用

编组 27@2x.png

对与错#

笔画端点#

图标设计时以几何图形为基础进行造型设计,线条末端统一采用圆角处理。

编组 22@2x.png

角度#

在图标的绘制中尽量使用整数角度,例如 15°、45°、60°、120° 等,避免出现 43.2° 等带有小数的角度

编组 18@2x.png

降噪#

在图标的绘制中尽量使用简洁的笔画,避免出现复杂的线段,线段与线段之间的间距不得小于 3px

image.png

几何图形#

预设的标准已经确定了一些明确的关键线:圆形、正方形、矩形、正交线和对角线。这种通用和简单的线框可以统一图标的样式,以及规范图标在网格上的位置。

编组 29@2x.png

资源:查看 Hippo 官方图标库

Copyright © 2021 Alibaba Inc.
Built with ❤️ by hema-FE.