Material Design(二)

一、图标

1、系统图标

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

1. 字体图标 :
   
   我们也可以把图标变成字体格式来节省空间。同时这么做对于放大缩小都是非常方便的。

2. 图标的分类 :
   
   Material Design把图标分为填充图标（Filled）、线性图标（Outlined）、圆角图标（Rounded）、双调图标（Two-Tone）、尖角图标（Sharp）。那么系统图标可以使用任何适合产品的风格。

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

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

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

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

2、产品图标

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

1. 图标的网格和参考线
   如果我们想设计一个48dp的图标，那么我们可以把画布放大到400％（192 x 192 dp）来设计，这时可以显示4dp的边缘。通过保持这个比例，任何变化都将按比例放大或缩小，这样可以在画面恢复到100％（48dp）时保持锋利的边缘和正确的对齐。
   
   
   

2. 图标的处理
   图标的设计在 Material Design 中是比较自由的，但是由于自由也可能会出现一些表现手法上的问题。这里有一些建议可以帮助我们更好地了解图标设计中可能遇到的问题。

   • 颜色本身是没有Z轴的，所以不要因为颜色的关系增加多余的阴影
     
     
     

   • 重叠的表面层数要注意，因为太多的图层可能使图标过于复杂
     
     
     

   • 不要在图标上使用过多的层级和分割
     
     
     

   • 手风琴是指图标扁平阴影的处理。这里不要使用过多的手风琴层次，显得臃肿
     
     
     

   • 不要用奇怪的透视扭曲产品图
     
     
     

二、图片

描述具体事物，优先使用照片。然后可以考虑使用插画。

1. 图片上的文字

   • 需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。
     
     
     

   • 对于带有文字的大幅图片，遮罩文字区域，不要遮住整张图片。
     
     
     

   • 可以使用半透明的主色盖住图片。
     
     
     

2. 提取颜色 : 可以从图片中提取主色，运用在其他UI元素上
   
   
   

3. 图片加载过程 : 图片的加载过程非常讲究，透明度、曝光度、饱和度3个指标依次变化，效果相当细腻。
   
   
   
   
   
   

三、 形状

Material Design 过去的版本中对形状规定较为死板，最新的 Material Design 在形状上可谓是非常自由了。菱形、半圆形、圆角都可以使用，这些充满个性的形状可以帮助我们构建更酷的界面。

1. 可自行定义的形状
   
   
   

2. 形状也可以表示内容被选中
   
   
   

3. 品牌感
   我们可以在整个应用程序中使用体现品牌感的视觉语言，以一致的方式将形状、颜色、弧度等特征设计界面的不同元素。这样有助于提升品牌的整体印象。当用户看到某种颜色或者形状时，就会想到我们的产品。下面的界面中使用了统一的形状增强品牌感
   
   
   

四、色彩

Material Design 的配色灵感来源于现代主义设计和路标等标识，所以它的色彩选择都非常鲜亮，颜色在明度和纯度上都较为适中，在我们设计 APP 时这些颜色能够突出信息并且使人愉悦。Material Design 非常重视背景和文字的色彩对比，需要最大化地保证文字的可读性。在配色的时候注意三个原则

• 分级 ：我们可以使用不同的颜色来告诉用户哪些是可交互的，哪些是装饰；并且色彩与信 息的逻辑关系应该是相关的，重要的元素应该使用最突出的颜色。
• 清晰 ：文本和背景一定要有色彩反差，也就是常说的「黑纸白字」和「白纸黑字」。
• 品牌 ：一个产品的品牌与调性体现在移动端应用程序上就是主色调了，比如网易系的红色、QQ音乐的绿色等，能让人时刻都明白自己在什么产品上。

1. Material Design配色
   
   
   

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

3. 界面中的色彩
   在界面中我们需要考虑状态栏、顶部导航栏、底部应用栏和 FAB 在色彩上的关系。状态栏和顶部导航栏一般采用邻近色设计，类似 iOS导航栏和状态栏的一体化设计。底部应用栏和 FAB 在颜色上一般使用对比色，用以强调 FAB 的重要性。

   • 顶部导航栏色彩
     下图顶部的状态栏使用了深紫色，然后导航栏使用了稍浅一点的紫色，保持顶部色彩统一令用户感知这部分同属一个逻辑关系。
     
     
     

   • 底部应用栏
     下图底部栏使用了辅助色藏蓝，而 FAB 使用了很明显的橙色。这样可以强调 FAB功能的重要性，并且底部应用栏藏蓝向后退让出用户关注焦点。
     
     
     

4. 界面整体配色
   下图主色调是粉红色（100）。因为粉色与黑色搭配会显得脏，所以深色使用了黑色的变体（粉红色900）。另外，二级颜色（粉红色50）用于按钮和交互态。
   
   

5. 强烈的对比色
   下图选择中的状态使用了和背景对比强烈的粉色，并且让上面的角进行弯曲提醒用户这个选项被选择中了。