Material Design 之Style（三）

1、色彩

Material Design (实质化设计)中的色彩灵感来自大胆的颜色、阴影和高光，与寂静的环境形成鲜明的对比，更能让设计获得活力。

1.1 调色板

此调色板包含主要和重点颜色，可用于说明或开发您的品牌颜色。他们的设计是相互和谐相处的。调色板以原色开始，填充光谱，为Android，Web和iOS创建一个完整可用的调色板。 Google建议使用饱和度是 500的颜色作为您的应用程序的主要颜色，其他颜色使用调和颜色。

1.2 选择配色方案

你可以自定义应用程序的配色方案，以配合您的品牌颜色。或者，您可以使用MD调色板创建一个全新的配色方案。

创建自己的配色方案时：

1、使用颜色工具（color tool）创建调色板并应用到您的应用程序

2、确保您的应用程序，颜色使用符合可访问性标准，元素之间的对比度足够

颜色工具，地址链接：
https://material.io/color/#!/?view.left=0&view.right=0 (需要科学上网)

颜色工具，界面截图：

MD的颜色系统

一个应用中不建议超过三种颜色，一般保持两种即可，一个主色调一个辅助色。主色调是指应用中最常出现的颜色, 辅助色是指用于强调用户界面关键部分的颜色。

有人就会疑惑，但是我的应用中有很多地方需要使用不同的颜色啊，两种怎么可能够用，这里说的两种颜色并不是说你就只能用两个具体的颜色比如红色和黑色，你还可以用深红、淡红、姹紫嫣红等等嘛，就是1.1调色板中介绍到的使用颜色的不同饱满度来区分。所以，这里的两种你也可以理解为两个系列，同一种颜色的不同饱满度。

在应用程序中使用颜色

大型UI区域和元素应该用您的主要颜色着色。次要颜色可以用于重视较小的区域。如果您没有辅助颜色，则可以在这些区域中使用原色。

辅助颜色的使用

对某些文本需要使用辅助颜色，例如链接文本。但是如果你的辅助颜色很亮，请不要给整体文字内容使用。

可以给主要的操作按钮使用辅助颜色。但是不要在状态栏使用辅助颜色，也不要在较大的颜色块使用辅助颜色，更不要在操作按钮的背景色为辅助色的时候对操作按钮使用辅助色。

总结，辅助色只是起点缀和强调的作用。具体的使用需要结合自己应用的实际情况灵活处理。

1.3 主题

主题是对应用提供一致性色调的方法。样式指定了表面的亮度、阴影的层次和字体元素的适当不透明度。谷歌提供了两种示例主题，下载链接
原地址（需要科学上网）：
https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B0J8hsRkk91LOGV6Y3V2WFhhemM/stickersheet_uielements.ai
国内下载：
http://materialdesign.eoemobile.com/stickersheet_uielements.ai

浅色和深色theme

Status bar
App bar
Background
Cards/Dialogs

左边为调色板效果，右边为应用UI效果。

2、图标

实质化图标使用几何形状来直观地表达应用的核心想法，功能和主题。

图标主要包含了：产品图标和系统图标

谷歌原文：https://material.io/guidelines/style/icons.html （科学上网）
国内翻译：http://wiki.jikexueyuan.com/project/material-design/style/icons.html

2.1、产品图标

产品图标作为一个品牌下产品、服务和工具的一种视觉表现，能够简洁、显眼且友好地传递产品的核心理念与内涵。

设计途径

产品图标设计从现实材料的质感和触感中获得启发。每个图标都像真实纸张一样被裁剪、折叠和点燃，而用一些简单的图形元素来表现。我们通过干净的折痕和清晰的边缘来表现结实坚固的质感，或是利用微妙的亮点和一致的阴影来展现材料的磨砂抛光。

2.2、系统图标

系统图标表示命令，文件，设备，目录或常见操作。

设计途径

系统图标的设计要简洁友好，有现代感，有时候也可以带点趣味性。多重含义在一个简化图标上表达出来，还须保证在小尺寸下，图标仍然清晰易懂。

作为开发的我们侧重点不同，所以关于具体的图标应该怎么设计，请查看上面提到的链接。

3、图像

图像不仅仅是装饰。它是一个强大的工具，可帮助您与产品建立连接以及增强您产品的辨识度。

3.1、原则

当你的应用想通过插图和摄影来增强用户体验的时候，你需要选择一些能够表达个人相关性、信息和喜悦的图像。如下：

上图依次表达了个人相关性、信息和喜悦的图像使用。

个人相关性，图1展示了人与环境的关联，用户的居住环境。

信息，图2传达了特定的信息，使用户更容易理解。

喜悦，图3利用美学设计使你的产品独一无二，增加用户的喜悦。（这个我不太看得懂，可能是我没有艺术细胞吧！╭(╯^╰)╮）

场景关联

确保图像是动态的和上下文相关的。使用预测性视觉效果大大改善用户体验。

即、图片要符合文字内容或上下文，场景关联。

沉浸式的

Be immersive 也有翻译为“身临其境的，如果你有更好的解释欢迎留言。

需要的时候，可以运用遮盖的方法，通过对色彩和内容的叠加来构成对画面主角的印象，或是构成一幅缩略图。

3.2、最佳实践

使用多种媒介

插画和摄影可以运用在同一个产品中。摄影自动暗含了一定程度的特定性，从而应该用来展示特定的物体和故事。绘画则能有效的表现出概念和隐喻，而这一点是摄影所不具备的。

对于特定的实物，首先考虑用摄影来表现，如图1–“Yuna的订单确认 “，所以使用具体的照片来表达；

当所表达的内容并非具体实物（或者不能被具体实物所概括）时，绘画则可以传达出你的应用程序的信息，并且允许用户一目了然的理解内容。如图2–“订单确认”，所以使用绘画来表达。

远离死板

图1：争取使用有故事性的图片; <————翻译————> 图2：呆板的图片显得不够真实生动。

图1：具体的表示请使用具体的图片; <———翻译——–> 图2：不要使用字面表达的呆板的图片。

突出焦点

在你的图像中应该有一个标志性的焦点。焦点可以是图像中的某个实体也可以是总体构图。确保能够用一个以令人难忘的方式向用户传达一个清晰的概念。

图1：使用颜色和构图给图像清晰的焦点; <——-翻译——> 图2：要避免让用户去寻找图像中的含义

<——-翻译——>
图1：最强大的标志性图像由少量的几个有意义的元素构成，这样可以让用户最少的分心;
图2：当焦点被遮蔽时，图像的标志性质量就会丢失，无法突出焦点。

图1：一个清晰的焦点一目了然地传达这个概念; <——-翻译——> 图2：缺乏重点使图像无意义。

构建故事

创建一个身临其境的故事和处于情景中的感觉，使您的应用程序人性化。通过视觉讲故事来定义心情。用视觉来展示现在的心境是积极的、消沉的还是庆祝的？

<—翻译—>
图1：描述故事的图像更有趣也更丰富；
图2：缺乏故事的图像就失去了表达情绪，品牌和情景的机会。

<—翻译—>
图1：好的语境化的概念可以更有效的表达你的信息和品牌；
图2：与情景（上下文）分离的实体的表现是乏味的。

3.3、UI集成

分辨率

确保你的图像大小适应其边框并且支持跨平台。该结构强调大幅图像。理想情况下，素材应该不会出现像素化。要为特定的比率和设备测试合适的分辨率大小。

<—翻译—>
图1：适当大小的图像；
图2：劣化的图像。

调整大小

利用不同的大小的图像来创造视觉上的重要性。

<—翻译—>
图1：在一个画册环境中，引入各种尺寸的缩略图来表达内容的层次结构；
图2：（这段话不知道怎么翻译）应该是，在同一个应用的环境中可以使用多种不同的图像尺寸

文字保护

添加文字保护纱(protection scrims)来使图像上的文字显示清晰易读。

<—翻译—>
图1：暗纱(dark scrims)理想的透明度应当在 20％-40％之间,亮纱(light scrims)理想的透明度应当在 40％-60％之间，都要视具体内容来定。；
图2：不要过度用文字保护纱遮挡住图像内容。

4、排版

Roboto和Noto是Android和Chrome上的标准字体。

Roboto是Android上的标准字体。
Noto是Chrome和Android上所有语言的标准字体，适用于Roboto未涵盖的所有语言。

Roboto字体下载地址：
http://materialdesign.eoemobile.com/RobotoTTF.zip

4.1、字体

Roboto有6种字重：Thin、Light、Regular、Medium、Bold 和 Black。

Noto有7种字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

4.2、字号

最基本的样式集合就是基于 12、14、16、20 和 34 号的字体排版缩放
12sp 小字提示
14sp（桌面端13sp）正文/按钮文字
16sp（桌面端15sp）小标题
20sp Appbar文字
24sp 大标题
34sp/45sp/56sp/112sp 超大号文字

UI效果展示：

4.3、行高

英语类语言：

规范标准

实际使用

中日韩等表意字符：

规范标准
实际使用

4.4、其他排版

颜色与对比度

最基本的常识是，相同颜色的背景和文字是很难阅读的。但有些人不知道的是，带有过强对比度的文本会有些炫目，同样难以阅读。这一点在深色背景下尤其明显。

要获得良好的辨识度，文本应当满足一个最低的对比度，也就是 4.5:1（依据明度计算）。7:1 的对比度是最适合阅读的。

大号和动态的字体

如果使用得当，大号字会让应用显得更加有趣、容易辨别布局，并帮助用户快速理解内容。

动态字体尺寸让大号字可以在文本长度未知的情况下保持在容器之内。动态尺寸是根据可用空间和预估的字符空间，从字体排版缩放中选择的。

每行长度包含的字符

要得到良好的阅读效果，长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

5、书写

其实，就是和用户沟通的技巧。注意语气、注意用词、注意标点符号等等。

如果想看原文的，谷歌地址：
https://material.io/guidelines/style/writing.html# （需要科学上网）

国内翻译地址：
http://wiki.jikexueyuan.com/project/material-design/style/writing.html