经过一周的学习，整合梳理自己学到的知识，与大家分享

以下是自己将Material Design中认为比较重要的知识点整合所得，有遗漏或者补充的欢迎大家指出，共同进步！！

Material Design（材质设计）

一、Material Design是什么？

Material Design，中文名：原质化设计，是由Google推出了全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

二、排版布局

1、文字

① 标准样式

过多的字体尺寸和样式可以轻松毁掉任何一个布局。字体排版的缩放是包含了有限个字体尺寸的集合，并且他们能
够与布局结构和谐的共存。就信息重要程度选择字号大小

一般情况下字号选择为12sp、14sp、16sp、20sp和34sp，特殊情况除外

② 文字颜色对比

背景色与文字颜色对比度：最低的对比度：4.5:1（依据明度计算）

                                          最适合阅读的：7:1

白背景下：标准字：87%纯黑

                次级字：54%纯黑

                提示性文字：26%纯黑

2、遮罩——20%~40%透明度（#000000）

3、工具提示——背景填充：90%不透明度

4、间距、边距

① 基准网格：所有组件都以一个8dp*8dp 的基准网格对齐。排版（Type）以一个4dp*4dp 的基准网格对齐。在工具条中的图标同
样以一个4dp*4dp 的基准网格对齐。这些规则适用于移动设备、平板设备以及桌面应用程序。

② 常用比例：16 : 9 

                      4 : 3

                      3 : 2

                      1 : 1

③ 触摸目标尺寸：最小的触摸目标尺寸是48dp。在布局中，当为图标（24dp）或者头像（40dp）设置边距时，这一点要时刻记得。

5、投影

6、颜色——调色板以一些基础色为基准，通过填充光谱来为 Android、Web 和 iOS 环境提供一套完整可用的颜色。基础色的饱和度是500。

推荐网站：https://www.materialpalette.com/

7、动画

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。动效应当在独立的场景呈现。通过动效，让物体的变化以更连续、更平滑的方式呈现给用户，让用户能够充分知晓所发生的变化。动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

① 真实的动作 ——动画的实现是符合物理运动的

感知一个物体有形的部分可以帮助我们理解如何去控制它。观察一个物理的运动可以告诉我们它轻还是重，柔性还是刚性，小还是大。在 material design 设计规范中，动作不止是呈现着它美丽的一面，它还意味着在空间中的关系、功能以及在整个系统中的趋势。

②交互响应

响应式交互能让用户信任，并且吸引他们。 当用户操作一个美观且符合常理的应用时，他们会感到满意甚至很高兴。那是一种经过深思熟虑、有目的、非随机的而且可以带有轻微异想天开但不会让人分心的交互。

③ 有意义的转场动画——视觉连贯性、有层次的时序

对于普通用户来说，是关注一个应用本身、还是更关注这个应用的元素从 A 点到 B 点转变的过程，这种选择往往有些难。谨慎编排的动画可以在有多步操作的 过程中有效地引导用户的注意力；在版面变化或元素重组时避免造成困惑；提高用户体验的整体美感。动画设计不仅应当优美，更应当服务于功能。

④ 让用户愉悦的细节

8、图像

① 原则——当使用绘画和摄影以提升用户体验时，选择能够表达个人相关信息和令人喜悦的图像。

a. 个人关联：使用令人回味的影像来建立与应用程序的情感联系。

b. 信息：传达特定的信息。以便于理解的方式来创建智能的感官体验。

c. 闪光点：用相关图像以一种意想不到的方式来取悦用户，使对方觉得不可思议。

② 根据场景选择绘画还是摄影

a.  摄影天然地存在着一定程度的特殊性， 应该用来展示具体的实体和故事。

b. 绘画则能有效的表现出概念和隐喻,而这一点是摄影所不具备的

③ 远离图片库

④ 拥有一个关注点

使你的图像具有一个标志性关注点。关注范围从单一实体到总体组成。确保有一个清晰的概念以一种难忘的方式传达给用户。

⑤ 构建叙事——创建一个让人感觉身临其境的故事和上下文场景。

⑥ 不要过度修改

9、按钮

按钮由文字或者图案组成，文字或者图案必须能让人轻易地和点击后展示的内容联系起来.

1、悬浮响应按钮, 点击后会产生墨水扩散效果的圆形按钮。——悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的拥有一系列特殊动作的按钮，这些动作通常和变换、启动、以及它本身的转换锚点相关。

悬浮响应按钮有两种尺寸: 默认尺寸和迷你尺寸. 迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性

2、浮动按钮, 常见的方形纸片按钮，点击后会产生墨水扩散效果.——浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。

3、扁平按钮, 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果.——扁平按钮一般用于对话框或者工具栏, 可避免页面上过多无意义的层叠。

10、提示框

提示框包含内容：标题：主要是用于简单描述下选择类型。它是可选的，要需要的时候赋值即可。

                          内容：主要是描述要作出一个什么样的决定 。

                          事件：主要是允许用户通过确认一个具体操作来继续下一步活动。

肯定的事件是放于提示框的右边并且可以继续接下来的步骤。肯定的事件可以是据有破坏性的，比如:”删除” ， ”
移除” 。(话外音：肯定的事件主要是指产品期望用户的一个决策。与按钮文字呈现的语意无关)

否定的事件是放于提示框的左边。用于返回用户原始的屏幕或者是步骤。(话外音：一般就是关闭提示框作用)

11、Tab

一组 tabs 至少包含 2 个 tabs 并且不多于 6 个 tabs。

选中的颜色: #fff 或间色(secondary color)
未选中的颜色: #fff 60%

12、提示功能

单行高度: 48 dp

多行高度: 80 dp

默认背景填充色: #323232 100%

13、文本框

① 单行文本框：输入框高度：48 dp

② 浮动标签：浮动内嵌标签，当用户进行文本输入，标签漂浮在上方。输入框高度：72 dp

③多行文本框：输入框高度：48 dp

14、设置

① 7 个或少于7个设置项——一点都不要分类

② 8 至 10 个设置项

试着将设置项放在一个或两个节分隔块下。如果你有一些“单个设置” （与其他设置项无关的设置项，并且不能归类到在你的章节里） ，根据下面的方法来处理它们：如果它们中包含一些你最重要的设置项，把它们放在最顶上，但不用节分隔块分隔。 否则，将它们按重要程度的顺序放在末尾，用一个节分隔块分隔。

③ 11 至 15 个设置项

建议同上，不过试着用2到4个节分隔块分隔。同样，寻找“双子选项” ：两个设置项互相相关，但与其他设置项无关。试着把它们合并为一个设置项。比如你也许可以把两个相关的复选框设置项重新设计为一个多项选择设置项。

④16 个以上的设置项

如果你有四个以上的设置项相关的情况，把它们分在一个子屏里。把上面说的规则应用到每个子屏里。

三、手势

单次触击(Touch)一只手指按下，提起
例如：选择

双次触击(Double Touch)两只手指按下， 提起，其中一只手指按下，提起
例如：放大

拖拽(Drag)，轻扫(Swipe)和快掷(Fling)一只手指按下，移动再提起
例如取消， 滑动，倾斜

长按一只手指按下，稍后再提起
例如：选择列表中的某项之类的单个元件

长按拖动：一只手指按下后稍后，移动，再提起
如：选择后移动某项，或是选择多项

双触拖动：一只手指按下后提起，快速重复该动作
例如：放大，缩小

捏放(Pinch Open)：双指按下，向外移动，再提起
例如：放大

捏合:双指按下，向内移动，再提起
例如：缩小

双指触击：双指快速按下，提起
例如：放大

双指拖拽，轻扫和移动:两指按下，移动后提起
例如：选择多项条目，拖拽(Pan)，倾斜(Tilt）

双指长按：双指按下，稍后提起
例如：暂无

双指长按拖动：双指按下，稍后移动，再提起
例如：选择后移动

双指双次触击：双指快速按下提起，重复一次该动作
例如：放大

旋转:双指按下，以任意点为圆心快速转动，再提起
例如：在地图中旋转内容

Material Design PDF 百度云链接：http://pan.baidu.com/s/1pLjgfdL

希望这篇文章能帮大家解决一些疑惑！！！

谢谢！！！