产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。
以上已经是全尺寸比例高宽网格图可以右击另存作为参考图使用
网格
方形
高&宽:152
圆形
直径:176
竖直矩形
高:176宽:128
水平矩形
高:128宽:176
设备上的启动器以48dp的尺寸显示产品图标(边缘1dp),所以当你创建图标时,请使用48dp的尺寸,必要时可将其放大400%到192x192dp(边缘变位4dp)。
保持这样的放缩比即可在尺寸在缩小时保持边缘的锋利和对齐的正确性。
1:1单元网格
4:1单元网格
我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一产品图标和规范它们在网格上的布置。
为什么要这样设计?以上右图著名的视觉错觉案例可以例证:
一样长的线段不同的视觉表现产生不一样的视觉感知,矩形的视觉感知面积相对大,所以相对网格线居中定格最小部分来设计来达到各种其他形状样式的图标统一感。
内容应该保持在活动区域以内,如有必要,内容可以延展至修饰区域之中,但不能超出。
关键线形状是网格的基础,通过关键线,即可保持系统图标的一致性。
宽&高:18px
直径:20px
高:20px,宽:16px
我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一Google系统图标和规范它们在网格上的布置。
构建
组成
笔划末端
角
留白
笔触
内部角
边界区域
一致的圆角半径(2px)是统一全系列系统图标的关键,不要修改它。
图标内部的角应为直角,也不要修改它。
外部角
內部角
一致的画笔宽度(2px)也是统一全系列系统图标的关键,请在内外部的边角上保持使用2px的宽度。
一致
折线和角
极端情况下必要的校正能够增加图标的清晰度。如有必要,需与其他图标保持一致的几何形状,不要加以扭曲。
复杂
缩小
为了可读性和触摸操作的需要,图标周围可以留有一定的空白区域。
清空区域
放置
----------------------------------------------------------------------------------------------
一致的图标可以有利于用户理解,在不同应用中也尽量使用已有的系统图标。