header_v1.7.40

app图标设计规范

2年前发布

翻译文章 / UI / 资讯
李洋 翻译,如需商业用途或转载请与李洋联系,谢谢配合。

谷歌 Material design 设计规范

产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。


8cbc568e12136ac725bb5c9cb0ed.jpg


以上已经是全尺寸比例高宽网格图可以右击另存作为参考图使用


网格

7714568e124532f8754c80c4cb1d.jpg


关键线的形状

关键线的形状是网格的基础。利用这些核心形状做为向导,即可使整个相关产品的图标保持一致的视觉比例。

ee59568e126132f8754c8029e81d.jpg

方形

高&宽: 152


00ce568e12f232f8754c80caab55.jpg

圆形

直径: 176


1f44568e134d6ac725bb5ce589e7.jpg

竖直矩形

高:176 宽:128


9185568e13b032f8754c8033a009.jpg

水平矩形

高:128 宽:176


DP 单位网格

设备上的启动器以 48dp 的尺寸显示产品图标 (边缘 1dp),所以当你创建图标时,请使用 48dp 的尺寸,必要时可将其放大 400% 到 192 x 192 dp (边缘变位 4dp)。

保持这样的放缩比即可在尺寸在缩小时保持边缘的锋利和对齐的正确性。


04f6568e13e66ac725bb5c344945.jpg

1:1 单元网格


2673568e141432f8754c80d01d94.jpg


4:1 单元网格

几何

我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一产品图标和规范它们在网格上的布置。



 c397568e12af6ac725bb5c2a1f6c.jpg


为什么要这样设计?以上右图著名的视觉错觉案例可以例证:


一样长的线段不同的视觉表现产生不一样的视觉感知,矩形的视觉感知面积相对大,所以相对网格线居中定格最小部分来设计来达到各种其他形状样式的图标统一感。


内容区域

内容应该保持在活动区域以内,如有必要,内容可以延展至修饰区域之中,但不能超出。


214a568e152732f8754c809cc3d4.jpg活动区域


796e568e155332f8754c80ee965b.jpg修饰区域


关键线形状

关键线形状是网格的基础,通过关键线,即可保持系统图标的一致性。


b8c2568e158d6ac725bb5ce1d983.jpg

方形

宽&高:18px


0c40568e15a132f8754c8057ccfc.jpg

圆形

直径:20px


eacc568e15ba32f8754c807b1806.jpg


竖直矩形

高:20px, 宽:16px


fc75568e15d26ac725bb5c5b29bf.jpg


竖直矩形

高:20px, 宽:16px


几何

我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一 Google 系统图标和规范它们在网格上的布置。


e8c1568e15f232f8754c80e90a8f.jpg

构建


3bcd568e160a6ac725bb5c32b385.jpg

组成


系统图标剖析

  1. 笔划末端

  2. 留白

  3. 笔触

  4. 内部角

  5. 边界区域


e502568e16406ac725bb5c602061.jpg


一致的圆角半径(2px)是统一全系列系统图标的关键,不要修改它。

图标内部的角应为直角,也不要修改它。


36b0568e165d6ac725bb5c43cd73.jpg

外部角


d6ce568e16726ac725bb5c73a98a.jpg

內部角


笔触

一致的画笔宽度(2px)也是统一全系列系统图标的关键,请在内外部的边角上保持使用2px的宽度。


3c11568e16986ac725bb5c70e4f9.jpg

一致


370f568e16ea32f8754c8005a608.jpg


折线和角


0728568e16ff32f8754c8088fb05.jpg

笔划末端


aeac568e171d6ac725bb5c865b20.jpg

内部角


视觉校正

极端情况下必要的校正能够增加图标的清晰度。 如有必要,需与其他图标保持一致的几何形状,不要加以扭曲。


a4ef568e173932f8754c80fa14e5.jpg

复杂


09e2568e175a6ac725bb5c7d7f32.jpg

缩小


清空

为了可读性和触摸操作的需要,图标周围可以留有一定的空白区域。


8739568e178c32f8754c809938d8.jpg


清空区域


9700568e17a432f8754c8082c7d0.jpg

放置


----------------------------------------------------------------------------------------------


最佳范例

一致的图标可以有利于用户理解,在不同应用中也尽量使用已有的系统图标。


0e17568e17ca6ac725bb5c604491.jpg

(上图)可取

使用相同的画笔宽度以及方形的笔划末端。


fe1e568e17de32f8754c803740c5.jpg

(上图)不可取

不要使用不相同的画笔宽度以及非方形的笔划末端。


2a23568e180232f8754c80e875df.jpg

(上图)可取

让图标显得正面且坚定。


90c1568e18176ac725bb5c8038cb.jpg

(上图)不可取

不要倾斜、旋转图标,或是让图标显得立体。


076c568e183432f8754c80833b0b.jpg

(上图)可取

简化图标使其更具清晰度和可读性。


d062568e18466ac725bb5c5b5313.jpg

(上图)不可取

不要过度拟物化使得图标复杂。


7e0d568e185b32f8754c80c78d27.jpg

(上图)可取

让图标更加几何化而变得更加显眼。


4952568e187332f8754c8086dc1b.jpg

(上图)不可取

不要过度精细,使用过细画笔宽度。


619a568e188732f8754c80edaf96.jpg

(上图)可取

使用一致的几何形状。


0d79568e189732f8754c80ffc7b5.jpg

(上图)不可取

不要使用过于松散的形状。


a02b568e18c76ac725bb5c6aaffc.jpg

(上图)可取

让图标在像素点上(X、Y 坐标值不包含小数)。

图标应有相等的宽高(e.g. 24x24),避免扭曲。


2bd4568e18dd32f8754c808364d7.jpg

(上图)不可取

图标不在像素点上。

宽高不等。


460
    Hello PM 意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功