image.jpeg

七、色彩

Material Design 的配色灵感来源于现代主义设计和路标等标识，所以它的色彩选择都非常鲜亮，颜色在明度和纯度上都较为适中，在我们设计 APP 时这些颜色能够突出信息并且使人愉悦。Material Design 非常重视背景和文字的色彩对比，需要最大化地保证文字的可读性。在配色的时候注意三个原则：
分级：我们可以使用不同的颜色来告诉用户哪些是可交互的，哪些是装饰；并且色彩与信息的逻辑关系应该是相关的，重要的元素应该使用最突出的颜色。
清晰：文本和背景一定要有色彩反差，也就是常说的「黑纸白字」和「白纸黑字」。
品牌：一个产品的品牌与调性体现在移动端应用程序上就是主色调了，比如网易系的红色、QQ音乐的绿色等，能让人时刻都明白自己在什么产品上。
image.jpeg
△ Material Design配色
image.jpeg
△ 主色和辅助色使用同色系的样式

1. 色表参考

Material Design 提供给我们一大堆建议的色值可供参考，如果配色时您有选择恐惧症，可以尝试使用官方提供的配色色表作为参考。如果自选颜色的话，一定要注意颜色不可以选比较「脏」的颜色。
image.jpeg
△ 色表参考

2. 界面中的色彩

在界面中我们需要考虑状态栏、顶部导航栏、底部应用栏和 FAB 在色彩上的关系。状态栏和顶部导航栏一般采用邻近色设计，类似 iOS导航栏和状态栏的一体化设计。底部应用栏和 FAB 在颜色上一般使用对比色，用以强调 FAB 的重要性。
顶部导航栏色彩
顶部的状态栏使用了深紫色，然后导航栏使用了稍浅一点的紫色，保持顶部色彩统一令用户感知这部分同属一个逻辑关系。
image.jpeg
△ 顶部应用栏的色彩
底部应用栏
这个案例中底部栏使用了辅助色藏蓝，而 FAB 使用了很明显的橙色。这样可以强调 FAB功能的重要性，并且底部应用栏藏蓝向后退让出用户关注焦点。
image.jpeg
△ 底部应用栏色彩
界面整体配色
这个应用程序的主色调是粉红色（100）。因为粉色与黑色搭配会显得脏，所以深色使用了黑色的变体（粉红色900）。另外，二级颜色（粉红色50）用于按钮和交互态。
image.jpeg
△ 界面整体配色
强烈的对比色
这个案例中，选择中的状态使用了和背景对比强烈的粉色，并且让上面的角进行弯曲提醒用户这个选项被选择中了。
image.jpeg
△ 强烈的对比色
image.jpeg

八、文字

关于 Material Design 在安卓设备上使用的字体，我想大家都应该了解了：中文使用思源字体，英文使用 Roboto字体。其他 Google 免费字体也全部都可以在安卓Material Design 中使用（下载网址：Fonts.google.com）。

1. 字体单位

在安卓设备上有一个特别需要大家注意的单位，叫做 sp。dp 是我们测量安卓间距、图片尺寸、按钮控件高度和宽度的单位，而字体却有一个单独的单位sp。那这个 SP单位和 iOS 的字体、网页中的字体转换率是怎样的呢？请看下图。
image.jpeg
△ 字体单位对比

2. 字体大小

在安卓设备上字体大小同 iOS设备一样，我们可以自由地使用合适的字号。同时 Material Design 给了我们一个参考表。
image.jpeg
△ 字体大小参考
image.jpeg
△ 标题中使用H6字号的效果
image.jpeg
△ 解释文字使用了Subtitle 1 字号效果
image.jpeg
△ 正文不仅仅可以使用无衬线字体，也可以根据需求使用衬线字体

九、语言支持

Material Design 对世界众多语言和字体进行了思考，这一点非常值得我们学习。除了我们使用的中文字体「思源」之外，还有对阿拉伯语、韩语、日语等非西文体系的支持。
image.jpeg
△ 不同文化中诞生的文字
image.jpeg
△ 「同样语义不同语言的长度不同」问题
image.jpeg
△ 希伯来语言是从右到左显示
image.jpeg
△ 不同文字的高度不同，在设计界面时需要给不同文字留出空间
image.jpeg
△ 水平和垂直文字显示的设计
image.jpeg

十、产品图标

产品图标是我们在设计界面的时候体现品牌和功能性的图标。图标以简单、大胆、友好的方式传达产品的核心理念和意图。虽然每个图标在视觉上都是不同的，但品牌的所有产品图标都应该通过设计方式来进行表现层面的统一。
image.jpeg
△ 能够体现品牌感的产品图标

1. 图标的网格和参考线

如果我们想设计一个48dp的图标，那么我们可以把画布放大到400％（192 x 192 dp）来设计，这时可以显示4dp的边缘。通过保持这个比例，任何变化都将按比例放大或缩小，这样可以在画面恢复到100％（48dp）时保持锋利的边缘和正确的对齐。
image.jpeg
△ 网格和参考线
image.jpeg
△ 不同形状的网格布局
网格
网格尽量使用4的倍数构建，比如4dp。网格对于我们设计图标有很好的参考作用，有利于我们发现横纵上没有对齐的细节。而参考线是由黄金比例和不同形状但面积相等的几何形模板组合而来，同样就有很好的参考作用。
image.jpeg
△ 放大四倍进行图标设计
image.jpeg
△ 在网格的辅助下可以设计出大小均衡的图标

2. 图标的处理

图标的设计在 Material Design 中是比较自由的，但是由于自由也可能会出现一些表现手法上的问题。这里有一些建议可以帮助我们更好地了解图标设计中可能遇到的问题。
image.jpeg
△ 颜色本身是没有Z轴的，所以不要因为颜色的关系增加多余的阴影
image.jpeg
△ 重叠的表面层数要注意，因为太多的图层可能使图标过于复杂
image.jpeg
△ 不要在图标上使用过多的层级和分割
image.jpeg
△ 手风琴是指图标扁平阴影的处理。这里不要使用过多的手风琴层次，显得臃肿
image.jpeg
△ 不要用奇怪的透视扭曲产品图标
image.jpeg

十一、系统图标

系统图标是我们在构建界面时负责表意功能和信息的图标。通常系统图标尺寸不如产品图标那样大，但是需要让用户第一时间理解它所表达的内容并不简单。系统图标设计简单，现代，友好，每个图标都尽可能简化以表达最基本的特征。
image.jpeg
△ 系统图标

1. 字体图标

如果需要，我们也可以把图标变成字体格式来节省空间。同时这么做对于放大缩小都是非常方便的。同样 Material Design 提供了一些可供下载的现成免费图标供我们参考（下载地址：https://material.io/tools/icons）。
image.jpeg
△ Material Design系统图标

2. 图标的分类

谢天谢地，终于有设计规范愿意把图标做一个正式的分类了。Material Design把图标分为填充图标（Filled）、线性图标（Outlined）、圆角图标（Rounded）、双调图标（Two-Tone）、尖角图标（Sharp）。那么系统图标可以使用任何适合产品的风格。

3. 造型接近几何形

尽量使用几何形的造型，不要使用太过松散的造型。太松散的造型会引起用户不必要的关注。
image.jpeg
△ 造型接近几何形

4. 图标留出边距

图标应该留出一定的边距，保证不同面积的图标视觉显示一样大。如果多个图标具有类似的逻辑层级，且同时在界面出现，注意它们的大小应尽量相等。
image.jpeg
△ 图标需要间距
image.jpeg
△ 使用网格构建图标
image.jpeg
△ 设计图标时记得对齐像素网格

5. 图标的组成

图标由以下部分组成：①描边末端；②圆角；③反白区域；④描边；⑤反白边缘；⑥留白。
image.jpeg
△ 图标的组成

6. 边角

边角半径默认为2dp，内角应该是方形而不要使用圆形。圆角建议使用2dp的单位。
image.jpeg
△ 边角

7. 描边粗细统一

图中的图标使用了2dp的描边以保持图标的一致性。如果没有特殊原因，不要使用一种以上的描边粗细，保证图标视觉上的统一。
image.jpeg
△ 描边粗细统一

8. 图标末端的处理

描边末端应该是直线并有角度的，留白区域的描边粗细也应该是2dp。描边如果是斜度45度，那么末端应该也是斜度45度为结束。
image.jpeg
△ 图标末端的处理

9. 图标点击区域

图标应该提供充分的留白和操作区域便于用户手指的点击，比较类似 iOS 的处理方式，图标大小接近手指点击区域7mm-9mm，如果不够的话就增加透明的点击热区。
image.jpeg
△ 图标点击区域

10. 图标点击状态

未点击图标颜色为#000000，透明度为87%。点击态图标颜色为#000000，透明度为38%。
image.jpeg
△ 图标的点击状态

11. 图标的品牌感

下面这个案例中图标和界面内容的直角相互呼应，体现了自身的品牌感。
image.jpeg
△ 图标的品牌感
image.jpeg
△ ①品牌图标 ②锋利角度的图标 ③应用中的直角图标