10大章79小节重译!半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制,全文将分为N篇文章陆续发布。

二、Icons

Materialicons使用几何图形直观地来表示其核心概念,功能或主题。

产品icons是一个品牌下产品、服务和工具的一种视觉表现

系统icons则代表一个命令、文件、设备、目录或常用操作。


尺寸

产品icons48dp,边缘1dp;系统icons24dp。


Icons在浅色背景上

Icon状态 不透明度 触发+聚焦 87% 触发+未聚焦 54% 未触发 38%

Icons在深色背景上

Icon状态 不透明度 触发+聚焦 100% 触发+未聚焦 70% 未触发 50%

40d6594bd802a8012193a35c22ab.jpg

- 产品icons(Product icons)

产品icons作为一个品牌下产品、服务和工具的一种视觉表现,能够简洁、醒目且友好地传递产品的核心理念与内涵。虽然每个 产品 icons看上去都截然不同,但对于品牌来说你应该通过理念和实践把它们都统一起来。


产品icons是传达品牌内涵的一个重要载体。从使用以下准则开始,确保产品icons的颜色和其他关键要素能够正确反映你的品牌特性。

Material iconsMaterial icons are easy to use in your web, Android, and iOS projects

caf1594bd825a8012193a314963c.jpg

设计方法

产品icon设计从现实材料的质感和触感中获得启发。每个icon都像真实纸张一样被裁剪、折叠、照亮,并且这一切都是通过一些简单的图形元素来表现的。通过干净的折痕和清晰的边缘来表现Material结实坚固的质感,利用微妙的亮光和阴影来展现材料的哑光质感。

7328594bd830a8012193a31f1a35.jpg

物理原型


2b3e594bd839a8012193a32963ab.jpg

光线考究

69a4594bd843a8012193a30a7b2c.jpg

Material原型

8872594bd84ba8012193a3e1e625.jpg

颜色考究

产品icon网格

使用产品icon网格进行设计有利于一致性,同时也为icon的定位建立了一套明确的规则。这种标准化带来了灵活且一致的系统。

dd76594bd855a8012193a3226555.jpg

网格

37ef594bd861a8012193a36b3f83.jpg

参考线

参考线的形状

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

4c97594bd86aa8012193a35e0e66.jpg

方形

高&宽: 152dp

a05c594bd872a8012193a3ab0e24.jpg

圆形

直径:176 dp

7ce0594bd87aa8012193a3a69cdc.jpg

竖直矩形

高: 176dp

宽: 128dp

ecc4594bd881a8012193a3473e77.jpg

水平矩形

高: 128dp

宽: 176dp

DP单位网格

Android的产品icon尺寸是48dp,边缘为1dp。所以当你创建icon时,请使用48dp的尺寸,但将其放大至400%时,尺寸为192 x 192 dp(边缘则变为4dp)

f90c594bd890a8012193a3fa6ffd.jpg

1:1的单位网格

46d7594bd89ca8012193a312f96b.jpg

4:1的单位网格

几何形状

我们为参考线制定了一些预设的标准形状:圆形、方形、矩形、正交线和对角线。

a778594bd8a4a8012193a34222cc.jpg

a4ce594bd8aca8012193a3a92ad4.jpg

6146594bd8b4a8012193a3f2412f.jpg

40d5594bd8bca8012193a3e2d755.jpg


产品icon剖析图

产品icon剖析图描述了组成一个产品icon的图形对象。在这些icons中,对象的一致性是形成统一视觉语言的关键。熟悉这些对象可以更容易地理解每个logo和它们之间特征的细微差异。它也将帮助你学习了解logo设计中的基础结构。

  • 最终处理

  • Material 背景

  • Material 前景

  • 色彩

  • 投影

b0a0594bd8c8a8012193a30d5a03.jpg

组件

直接从上方看,组件相互重叠。

dbc2594bd8d0a8012193a37ce335.jpg

构建视角

显示图标构造中各对象的立体分解图。

b8bf594bd8d9a8012193a34e5b8e.jpg

Material 背景

最底层的对象。

aba6594bd8e2a8012193a393dd83.jpg

Material 前景

上面抬起的material对象,它会在material背景上投射阴影


5f9b594bd8f2a8012193a37f73b2.jpg

专色

应用到元素中一小部分的颜色

f806594bd8fca8012193a3048a03.jpg

泛色

无边框,应用到整个对象的颜色

114e594bd904a8012193a35250a9.jpg

边缘色(亮边)

在material对象的顶部边缘。该颜色混合了白色,它比固有色更亮

dcf3594bd90ea8012193a327212b.jpg

边缘色(暗边)

在material对象的底部边缘。该颜色混合了深色,它比固有色更暗


307c594bd919a8012193a315da60.jpg

投影

Material对象抬高后周围形成的一个柔和投影。

2d5f594bd924a8012193a359d1b1.jpg

最终处理

为所有对象提供了一个柔和的色彩照明,从左上角到右下角逐渐减弱。

产品icon准则

光线

在material环境中,模拟灯光照射在物体上并使其产生投影。顶部发出的光使material对象产生上文提及的阴影,以此突出物体的上下边缘,而带有角度的光线则可以增强对象表面的质感。

e8af594bd934a8012193a30e9bf0.jpg

光在正顶部时

8b4f594bd94aa8012193a382c7c0.jpg

光为45%时

阴影

对于产品icon来说,顶部的光会让对象周围投下柔和的阴影并且在元素的顶部和左边会有高光出现。左上阴影较轻而右下阴影较重,并且它总会处于整个icon的轮廓中。

b77c594bd95ca8012193a39e20c6.jpg

阴影数值

模式:普通

不透明度:20%

X轴偏移:0px

Y轴偏移:6px

模糊值:4px

色彩:参考色彩,形状和阴影的数值

亮边和暗部

Material对象的顶部和底部边缘提供了一种深度感和表面感。Material对象有一个1dp的标准厚度。要注意所有边的距离都是从该对象的内边缘算起的。

亮边是突出了所有对象的上边缘。而左、右和底部的边缘是没有亮边的。


暗部是突出了所有对象的下边缘。而左、右和顶部的边缘是没有暗部的。

64f6594bd96ca8012193a31339cd.jpg

亮边

高度: 1dp

透明度: 20%

颜色值: White (#FFFFFF)

036c594bd975a8012193a3b3055a.jpg

暗部

高度: 1dp

透明度: 20%

颜色值: 参考图标色彩中阴暗部分的数值

最终处理

最终处理是指一个45度的虚拟照射光线。它从左上延伸至右下,且只作用在图标之内。

d176594bd981a8012193a3b84afe.jpg

渐变参数

样式: 径向

角度: 45º

颜色值: White (#FFFFFF)

中点位置: 33%

渐变 1 不透明度: 10% 位置: 0%

渐变 2 不透明度: 100% 位置: 0%


亮部、暗部和投影值

对象因受到光照的影响会使亮部、暗部和投影的颜色呈现出不同的改变。这时就需要我们根据它们固有色来对对象的亮边、暗部和阴影进行调整。为了确保颜色看起来和谐,请遵循下列颜色取值。

af9c594bd991a8012193a30785f9.jpg

冷色

402f594bd999a8012193a369797f.jpg

清新色

7e0c594bd9a2a8012193a32d7425.jpg

暖色

10fd594bd9aba8012193a3bf9532.jpg

热色

dc15594bd9b4a8012193a3907b2d.jpg

中性色

产品icon模式

受到现实材料物理行为的影响,我们简单的规定了对象的表面质感和触感。材质与颜色之间的相互作用也为更多独特的作品创作提供了可能性。

颜色

让颜色元素与material对象表面齐平。不要给颜色元素增加任何的边缘或投影。

4d0c594bd9bea8012193a3463261.jpg

可行

e3cb594bd9c6a8012193a307bc67.jpg

不可行

图层

对material对象进行分层能够形成空间深度(有边缘和投影)。

但要谨慎对待material对象层叠的数量,避免因过于复杂而丧失焦点。

0220594bd9d3a8012193a3b2f8de.jpg

可行

36ad594bd9e0a8012193a3fe49bd.jpg

不可行

抬升

抬升一个关键的material对象到一个简单背景上,使其成为关注的焦点。不要让抬升的对象被切断成其他的形状。

3ce1594bd9eaa8012193a34894a0.jpg

可行

01cf594bd9f3a8012193a3a62ab0.jpg

不可行

划痕

划痕能在不破坏形状的情况下营造层次感,不过要放在对称中心。

不要使用多条划痕或者是放在非中央位置。

eb78594bda09a8012193a3fcb4f7.jpg

可行

451d594bda15a8012193a337fcd5.jpg

不可行

折叠

加入折叠后会使material对象变得更加立体。但应避免使用专色(Spot colors),以免改变或歪曲关键对象。

02d2594bda1ea8012193a3acf798.jpg

可行

dfbc594bda27a8012193a3d57cc7.jpg

不可行

重叠

对material对象进行重叠能够创造出独特的投影。所有元素、边缘和阴影都是限制在对象轮廓内部的。

不要使用超过两个以上的重叠,避免因过于复杂而丧失焦点。

e1eb594bda3aa8012193a3158df8.jpg

可行

b164594bda43a8012193a3f076e8.jpg

不可行

手风琴式

手风琴式折叠的元素由两个折叠的对象相接而成,以此用来提高单一对象的空间感。

不要使用超过两个以上的对象,避免因过于复杂而丧失焦点。

f028594bda50a8012193a3e03002.jpg

可行


b487594bda5da8012193a3de1958.jpg

不可行

扭曲

产品icons不能进行扭曲或变形。对象应该保持他们原来的几何形式,不对它们进行倾斜、旋转或扭曲。

e4b7594bda69a8012193a39e2cd4.jpg

不可行


cc47594bda76a8012193a3a44e8d.jpg

不可行

人形icon图解

你可以通过下面的指南和示例了解如何用最优方法将人的形象融入你的UI中。

构成

5c57594bda85a8012193a31cde5e.jpg

构造


f142594bda91a8012193a3fa13b0.jpg

与参考线对齐

参考线形状

93e1594bda9ba8012193a3751782.jpg

正方形


e47f594bdaa5a8012193a3244a98.jpg

圆形


96a1594bdabca8012193a38b28dc.jpg

纵向矩形


01db594bdac9a8012193a32cbb5e.jpg

横向矩形

纸vs颜色

c639594bdadaa8012193a31cafc3.jpg

febb594bdae4a8012193a3e43e57.jpg

颜色

作手势

3475594bdaefa8012193a3b8e005.jpg

构造


dc8f594bdafca8012193a369b0e3.jpg

完成品


人形icon规则

a320594bdb15a8012193a32130df.jpg

可行

背景使用简单的形状


42fe594bdb21a8012193a3a71691.jpg

不可行

背景不要使用复杂的形状


abcf594bdb31a8012193a351657f.jpg

可行

在任何时候都要使用合适和一致的人的形象

b3e3594bdb3ea8012193a3673c6c.jpg

不可行

不要使用一个不合适的人的形象或添加复杂的细节

0479594bdb64a8012193a319d13c.jpg

可行

利用曲线和直线边缘来使视觉平衡。

27f4594bdb74a8012193a347fa15.jpg

不可行

不要使用圆臂也不要使用裁剪的手臂。

- 系统icons(System icons)

系统icons,或UIicon 可以表示一个命令、文件、设备或目录。系统icons也被用来表示一些常见的行为像扔垃圾,打印或保存。

系统icons的设计风格应是简单的、现代的、友好的,也可以是有趣味性的。对于每个icon来说,重要的是能够准确传达出你想要表达的意思,并且确保在小尺寸情况下,icon仍然保持清晰可见。

Material design icons (Download our system icons)


6628594bdb8ba8012193a3eea608.jpg

设计原则

形状是由几何形的粗线条组成。

Icons独特的品质依赖于对称性与一致性,且须兼顾鲜明和简洁的特质。

b602594bdb96a8012193a3068e47.jpg

简洁

8e1a594bdba1a8012193a3c09c7e.jpg

直观


8f20594bdbada8012193a3ed43bb.jpg

可操作

ee41594bdbc2a8012193a3310de1.jpg

一致性

网格、比例和大小

DP单元网格

系统icons以24dp的尺寸显示。以能够100%pixel-perfect缩放标准来设计icon是非常重要的。


在以鼠标和键盘为主要输入方式的设备上,icon的尺寸会根据设备屏幕密度进行适配。在高密度的屏幕上,icon可以缩小到20dp。

6a81594bdbdba8012193a3f54bbd.jpg

100%的比例

5697594bdbe8a8012193a3e7b3b5.jpg

高密度屏幕下,20dp的100%的比例效果

0b01594bdbf6a8012193a33b9a31.jpg

800%的比例

e55f594bdc03a8012193a362a777.jpg

高密度屏幕下,20 dp的800%的比例效果

Icon网格

icon网格已经形成了一套标准,并且建立起了统一元素放置规范。

a177594bdc0fa8012193a3d1ed6a.jpg

网格


f2fe594bdc1fa8012193a372db4e.jpg

参考线

内容区域

一个icon的内容应该保持在其活动区域以内。活动区域是图像的安全区域。其中,图形需要具有足够的显示空间,不能被视图切断(例如,侧边栏在滚动时出现)。

修剪区域指图形文件的最终大小。

如果内容需要附加视觉权重,那它可以将自身区域延展到活动区域和修剪区域之间的区域里面。需要注意:请勿将icon的任何部分置于修剪区域之外。

高密度

在高密度的屏幕上,icon的活动区域可能被缩减至20dp,附加区域为2dp。

5cce594bdc2ea8012193a3c1f00c.jpg

活动区域

507b594bdc38a8012193a32b3f9e.jpg

高密度屏幕下的活动区域

91c3594bdc57a8012193a35a2622.jpg

附加区域:延展到活动区域和修剪区域之间的区域

221e594bdc66a8012193a32f4cad.jpg

高密度屏幕下的附加区域:延展到活动区域和修剪区域之间的区域

参考线形状

参考线形状是网格的基础。使用参考线可保持系统icons的一致性。

6276594bdc71a8012193a3cae49c.jpg

方形

宽&高:18px

0571594bdc7ca8012193a3a8cdf8.jpg

圆形

直径:20px

90f1594bdc86a8012193a3ebd76c.jpg

纵向矩形

高:20px, 宽:16px

2163594bdc90a8012193a3a0c69e.jpg

横向矩形

高:16px, 宽:20px

几何

预设标准已经确定了具体参考线的形状:圆、正方形、长方形、直角、对角线。这些通用且简洁的模板是为了统一Google系统icons和规范它们在网格上的布置。

ea70594bdc9ba8012193a35a02c6.jpg

构造


c79b594bdcaaa8012193a38c81f7.jpg

成品

系统icon剖析

  1. 路径末端

  2. 外部角

  3. 留白区域

  4. 笔画

  5. 内部角

  6. 边界区域

015b594bdcc0a8012193a363d038.jpg

一致的角半径(2pd)是统一整个系统icons的关键。不要去改变它。

Icon内部的拐角应为直角,不要使用圆角。

e226594bdccfa8012193a3001322.jpg

外部角为2dp圆角半径

02d2594bdcdca8012193a387d1c8.jpg

内部角

路径

一致的路径粗细(2dp)也是统一整个系统icons的关键。请对所有路径(曲线、角度以及内外路径)都保持2dp的粗细。

9a65594bdceca8012193a3fc2704.jpg

一致性

c1ee594bdcf5a8012193a3530381.jpg

曲线和角度

67ef594bdcfea8012193a35acbea.jpg

路径末端


2b92594bdd0aa8012193a39bab46.jpg

内部角

视觉校正

在特殊情况下必要的调整能够增加icons的易读性。在对icon进行调整时,也需与其他icon保持一致的几何形状,不要加以扭曲。

91e1594bdd1aa8012193a38561ee.jpg

复杂

5216594bdd28a8012193a34a59e0.jpg

相对缩小

间隙

为了可读性和触摸操作的需要,icon周围可以留有一定的空白区域。在以鼠标和键盘为主要输入方式的设备上,icon的尺寸会根据设备屏幕的密度进行适配。

1c44594bdd35a8012193a3ea62ea.jpg

间隙区域

Icon: 24dp

点击范围: 48dp

3dc6594bdd3fa8012193a345a8ab.jpg

高密度下的icon间隙区域

Icon: 20dp

点击范围: : 40dp

52ad594bdd53a8012193a374e8c2.jpg

放置位置

最佳范例

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

66dc594bdd63a8012193a389537e.jpg

可行

使用相同的路径粗细,路径末端用方形。

dbcd594bdd6da8012193a3fa4bb6.jpg

不可行

不要使用不相同的路径粗细,路径末端不要用圆形。

cfa1594bdd78a8012193a3b09908.jpg

可行

给icon一个正面的角度且显得坚固。


040b594bdd86a8012193a32b87a6.jpg

不可行

不要倾斜、旋转icon,或是让icon有其他维度。

11b7594bdd90a8012193a3f709a7.jpg

可行

简化图标,让icon更清晰和易读。

6e2f594bdd99a8012193a36fa40d.jpg

不可行

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

c4ae594bdda8a8012193a3e5ac3a.jpg

可行

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


d120594bddb4a8012193a39ce2b2.jpg

不可行

不要过度精细,使用过细路径粗细。

b986594bddbfa8012193a3d86e3c.jpg

可行

使用一致的几何形状。

50c6594bddc8a8012193a375edbb.jpg

不可行

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

394b594bddd3a8012193a309548d.jpg

可行

Icon应对齐像素(X、Y 坐标值不包含小数)。

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

8288594bdde1a8012193a382ed28.jpg

不可行

Icon没有对齐像素。

宽高不等。

人形icon

人形icon剖析

1.头

2.脖子

3.上半身

4.手臂

5.腿

875a594bddefa8012193a3f32df2.jpg

整个身体

1ab7594bddfda8012193a35130d7.jpg

上半身

表现形式

6836594bde08a8012193a3cfb846.jpg

举例:整个身体

f0ed594bde15a8012193a3ff67d2.jpg

举例:上半身

e3d2594bde27a8012193a3fbf0e3.jpg

举例:裁剪

9089594bde38a8012193a355f2f1.jpg

举例:具体部位

整个身体

99b0594bde43a8012193a3dcaa60.jpg

4fab594bde4da8012193a3f45bcf.jpg

举例: 整个身体

1d71594bde5aa8012193a3ddf90a.jpg

视觉对其

上半身

a1e4594bde6aa8012193a3ecfef6.jpg

b186594bde78a8012193a350e410.jpg

举例:上半身


d8bb594bde88a8012193a3a41f72.jpg

视觉对其

容器

82a7594bde95a8012193a3a400e5.jpg

f75d594bde9ea8012193a3c1b993.jpg

具体部位

889d594bdeaaa8012193a3b592a2.jpg

4cf8594bdeb2a8012193a3ab1489.jpg

人形icon的规则

1969594bdec2a8012193a346b9cd.jpg

可行

使用相同粗细的路径,在腿和手臂的路径末端使用方形


62a7594bdecea8012193a3ebc49e.jpg

不可行

不要使用粗细不一的路径,在腿和手臂的路径末端不要使用圆形

24da594bded9a8012193a39d5c17.jpg

可行

让icon有一个简洁清晰的外轮廓


eac8594bdee6a8012193a3e7c703.jpg

不可行

不要剪切手臂和腿

4b77594bdef5a8012193a388972a.jpg

可行

把整个人形完全嵌入在一个容器里面


2e29594bdf01a8012193a393bcd3.jpg

不可行

不要打破容器的边界。

52ee594bdf11a8012193a360d4ca.jpg

可行

增加人形元素是为了帮助人们更好的理解icon的含义。

630b594bdf21a8012193a3011cd6.jpg

不可行

当这个icon已经过于复杂的时候不要再增加一个人形元素


6619594bdf2da8012193a33aae85.jpg

可行

使用最简单的形状来表现人的特征。

c5fd594bdf38a8012193a37ee96e.jpg

不可行

不要使用一个无生命的物体去表现人的特征

颜色

触发状态下的icon在浅色背景上的标准不透明度是54%(#000000)。未触发状态下的icon不透明度则是26%(#000000)。

触发状态下的icon在深色背景上的标准不透明度是100%(#FFFFFF)。未触发状态下的icon不透明度则是50%(#FFFFFF)。

bb31594bdf4da8012193a3b41e79.jpg

0ed7594bdf57a8012193a39018e8.jpg


- 应用快捷icons(App shortcut icons)

快捷icon能够帮助用户快速、方便地打开应用功能(最多4个)。同时也可以将每个功能添加到主界面上。

应用icon的位置决定快捷操作的显示方式。例如,在屏幕左边缘附近的应用icon将在有可用空间的地方显示操作。

以下指南将帮助你创建标准的快捷icon、单一头像以及群组头像。

60f5594bdf70a8012193a35fe085.jpg

最多一次可显示四个快捷icon。你可以确定快捷icon的顺序。

快捷icon

快捷icon是圆形的。它们包含一个标准的系统icon(或者至少有一个头像)。Icon的内容必须整齐的放置在区域内(图形的区域)。

尺寸

  • 活动区域:44dp的圆

  • 整个区域:48dp的圆

44x44dp的活动区域周围存在2dp的内边距。

颜色

活动区域: 填充Grey 100(#F5F5F5)

阴影

快捷icon没有阴影

2057594bdf83a8012193a3236286.jpg

活动区域

所有icon内容应该存在这44dp的区域内。背景色,Grey 100 (或 #F5F5F5)

0c32594bdf8aa8012193a3d5bd15.jpg

整个面积

活动区域周围存在2dp的内边距。总大小是48x48dp


标准的快捷icons

标准的快捷icons在活动区域内有一个居中对齐的Material系统icon。

尺寸

活动区域:44dp的圆

整个区域:48dp的圆

系统icon: 24dp

颜色

系统icon应该和应用主色或应用icon有着同样的颜色 (应与圆形的背景有足够的对比度)。

文件格式

快捷icons应该提供SVG格式的文件,并允许icons自动缩放。你也可以使用矢量图片、彩色位图或图层列表。

不要使用非矢量图片,因为它们在某些情况下不能缩放。

3457594bdf9fa8012193a3d7424a.jpg

系统icon尺寸

系统icon应该有相等的宽度和高度:24 x24dp

bb16594bdfa7a8012193a38bedf1.jpg

放置在活动区域中

Icon应在活动区域中垂直水平居中

05e4594bdfafa8012193a3fea526.jpg

可行

Icon的颜色应该和背景(Grey 100)有足够的对比


1a56594bdfbba8012193a31f08aa.jpg

不可行

不要使用与背景没有足够对比的颜色


单个头像

单一头像包含一个图像。它们必须在XXXHPDI的分辨率下创建。

尺寸

  • 活动区域:44dp的圆

  • 头像区域:44dp的圆

  • 整个区域:48dp的圆

文件格式

PNG文件

361b594bdfcda8012193a3fb2e82.jpg

活动区域以及头像区域

头像必须充满整个活动区域,它们必须在XXXHPDI的分辨率下创建。

c11c594bdfe1a8012193a3e37c0e.jpg

整个 区域

44x44dp的活动区域周围存在2dp的内边距,且整个区域大小为48x48dp

群组头像

一个群组包含2到4的头像。它们必须在XXXHPDI的分辨率下创建。

尺寸

  • 活动区域:44dp的圆

  • 头像区域:30dp的圆

  • 整个区域:48dp的圆


颜色

活动区域: 填充Grey 100(#F5F5F5)

文件格式

PNG文件

e90b594bdff4a8012193a374428b.jpg

活动区域

活动区域应该有一个Grey 100的底 (#F5F5F5).

aa81594bdffda8012193a33e914f.jpg

头像区域

头像区域必须符合30x30dp大小。以44x44dp的圆(活动区域)为中心,并处于活动区域之内。

d998594be008a8012193a3d46d29.jpg

整个区域

44x44dp的活动区域周围存在2dp的内边距,且整个区域大小为48x48dp