谷歌的 Material Design 设计语言旨在为用户创造直观、优雅且一致性的体验。三维世界（3D world）：
x ， y ， z 三维坐标特点
z 轴上占据必定的方位并且有一个 1dp 厚度的标准

光影关系（Light and shadow） ：
全部阴影都是由直射光和散射光这两种光投射产生的
3种组合类型：

1. 直射光投射的阴影

2. 散射光投射的阴影

3. 直射光和散射光混合投影

三、Material 特点

物理特性
材料具有改变的长宽标准（以 dp 为计）和均匀的厚度（1dp）
材料的高度和宽度是可变的，会构成阴影
材料能展现任何形状和色彩

材料的改变
材料仅沿着它的水平面增长和收缩。
材料能被割开，还能再度变为完好

材料的移动
材料能沿任何轴移动。
Z 轴的运动是因为用户的交互而产生的提示。

四、高度和阴影

“高度”（Elevation）和“光影”（Shadows）

组件高度
元素在某一平台中可能会存在多种中止高度，这取决于环境的深度。（比如，TV 相比于移动端和桌面来说就具有更深的层次）

感应高度与动态高度偏移
依据用户的输入或许按压来改动高度

防止高度抵触
“起起浮作按钮”（FAB）

图：不同控件的高度规矩

方针的高度添加时其阴影会变得更柔软、更大，当其高度减小时，阴影会变得更弯曲

元素参看阴影
运用条：4dp
起浮按钮：静态：2dp 敲击情况：8dp
起起浮作按钮（FAB）：静态：6dp 敲击情况：12dp
卡片 静态：2dp 选中情况：8dp
菜单和子菜单 菜单：8dp 子菜单：9dp（为子菜单添加 1dp）
对话框 24dp
导航抽屉和右抽屉 16dp
底部单页 16dp
改写按钮 3dp
快速查询/查找条 中止情况：2dp 翻滚情况：3dp

五、Animation

任何物体进场和离场时，都应处于大速率

轻量化小型物体可以很快结束加速和减速，而大型较重物体需求更多时刻才华到达大速度
这些物理规矩使速度可进行恰当调整。
浮起标明正处于激活情况

视觉连贯性：
在两个不同视觉作用之间的转场应该滑润、轻盈。四两拨千金
视觉连贯性规划点：新入元素／淡出元素／通用元素

当规划动效时的考虑点为：
1.怎样引导用户留意力，什么元素能辅佐完成这个方针？新入元素，淡出元素和通用元素在这个转场中应该怎样被强调或弱化？
2.在转场动效规划中怎样利用色彩和通用元素建立视觉联络？
3.慎重添加动效

防止突兀的瞬间切屏，新元素应该以淡入淡出的办法出现
通过元素移动时的次第与机遇来使得信息展现有层次感
元素移动都要有含义有次第
保证元素的运动要和整体界面在物理规矩上符合，防止多个凌乱的运动轨迹

要有感动用户的细节，构建出一个无缝美观且功用强壮的运用

六、色彩

1、文本、图标、分割线要设置透明度

• 白色布景中,标准的文本透明度是87%(#000000)。

• 次级文本/图标, 不透明度应该是48% (#000000)。

• 提示文本，更低的视觉层级，不透明度是24% (#000000).

通过设置透明度,进步比照感
情况栏采用了700蓝,比主色稍深

2 强调色与备用强调色
靓丽的强调色可被用来作为按钮和控件，例如开关和滑块
更浅或许更深的作为备用强调色
假如布景色是饱和度500的根底色，那么会运用100%的白色 或许54%的黑色。

3 色彩主题 
亮堂或深邃两种主题

七、字体

Roboto
稍宽并轻微圆化

标准样式：
12、14、16、20和34号字体排版缩放
运用Display字体样式
App Bar中出现的全部标题都要运用“标题”样式

基赋性/色彩比照：
布景与文字的明度比照度为7:1时，是合适阅读的
低不能低于4.5 : 1

大标准/动态字体标准：
大标准字体让运用布满兴趣
动态字体标准是让文本长度不知道的情况下坚持在容器之内

行高：
依据标准和字重来设置
小字号采用主动换行，其他字体样式坚持单行

行字符宽度：
好的阅读领会,每行大约60个字符

字距 ：
跟着字号的巨细改变与用处的改变，字距相应改变
字号越大，字距越小

八、图标

系统图标：
有必要精约，现代感，和睦
实践象征着指令、文件、设备或许目录
规划原则：形状显着，多多采用几许形状，对称且共同的图标

网格制造，统一比例约束形状，2种标准（情况栏和上下文图标、东西栏和桌面图标）

圆角：
不同标准的图标需求不同的圆角

九、图像

选择图像：
选择和人物相关、布满信息、令人愉悦的图像
1/运用人物图像可以建立情感染联络（图片）
2/布满信息的图像，促进用户了解信息，打造布满智能感的界面（图片）
3/用惊艳的并且和信息相关的图像来愉悦用户，让领会布满法力（可视化）

规划要求：

1. 沉溺领会，大胆的将色彩、内容和图像整合

2. 创意性的添加视觉图形，进步信息表现力。

3. 少用图库，不要一些泛泛的相片，要代表性强

4. 相片主题贴合文字，图片有视觉焦点

5. 图形能叙述赋有沉溺性的故事，一同可以提示上下文

6. 图片不要过度处理，高斯迷糊或滤镜

图像和界面的整合：
1、引荐运用大图。在不同的设备和不同的分辨率下要进行测验
2、文本保护。（为了保证图像上文本的可读性,建议添加text protection scrims）

深色的保护区域,依据内 容,志向情况下不透明度是20%- 40%。淡色保护区域40%-60%
给特定区域添加文本保护,而不是保护区域掩盖整个图像
色彩叠加是别的一种保护文本的办法：互补色叠加

十、布局

• 基准网格线和结构网格线

• 运用相同的视觉元素

• 根据卡片的规划

卡片东西栏：
导航(抽屉菜单或许是回来箭头) 相关的操作一般出现在左侧,
运用在其时页面内容的操作放在右侧。

呼应式规划原则：

1. 考虑边角间隔

2. 概念模型：每个运用其实是存在于不同空间和容器中的。在一个运用中删去一个列表不会在引起另一个运用的改变。

3. 一个按钮的悬停情况对错有必要层级,而其按压情况是首要层级。

4. 起起浮作按钮总是出现内容和东西栏的 上面,不管这个运用正在运用多少个卡片。

5. 深度感是为了功用。深入考虑你的运用,了解它的层次和各个元素重要性,帮忙用户将精力会合在结束任务中。

阴影：
针对Cards、FAB、Nav、App Bar、Canvas等不同方位，具有5种左右的阴影选择，依据规矩的数值进行规划选择。

标尺与参看线：
基线网格：组件都以一个8dp*8dp的基准网格对齐，排版(Type)以一个4dp*4dp的基准网格对齐

触摸方针：
小触摸方针巨细为48dp。图标距离(24dp),头像(40dp)

结构：
1自上而下的考虑办法（用户想要用这个运用来干什么？由此来构建界面的用户领会）
2内容优先：当即与内容交互，获取中心领会

UI标准：
卡片式布局需求很多的留白空间，也需求分割线来区别明晰。

十一、组件

底部卡片：
就像一张纸从屏幕底部向上滑动出来
合适给用户供应三个或许更多操作选择的时分
在标准的列表式卡片中：每个选项应该有一个文字描述和一个左对齐图标

按钮：
1 悬浮呼应按钮：墨水涣散作用的圆形按钮。
两种标准：默认标准＋迷你标准
2 起浮按钮：墨水涣散作用的方形纸片按钮。
更明晰可见，给扁平的布局带来层次感
3 扁平按钮：墨水涣散作用,没有浮起的作用。
防止页面上过多无含义的层叠

色彩饱满的图标应当是功用性的。

图标开关：
用在运用导航条或许东西条上,作为动作按钮或许开关

下拉菜单：

卡片：
卡片带圆角
卡片带多种操作

纸片

提示框：

包含：撤销/确认的简略应对办法 与 自定义布局的凌乱办法
1、加宽型竖排按钮：竖向叠办法来出现我们的按钮 文字信息
2、并排按钮：每个按钮的文本信息都没有超越一般的按钮宽度时
留意：翻滚时，漏出一部分文字或许控件，来提示用户。

分隔线
分隔线是一种弱规矩

网格列表
网格列表是一个接连元素(continuous element),该元素由棋盘式、规矩性的小格子构 成,一般称这些格子为单元格(cells)。单元格中包含有瓦片(tiles)

列表：
分为三种，仅文本；文本＋头像；文本＋头像＋图标

1、单行列表
仅有文本,字体: Roboto Regular 16sp,瓦片高: 48dp,文本内边距: 16dp

2、带有文本的图标
字体: Roboto Regular 16sp,瓦片高: 48dp,左边图标内边距: 16dp,文本左内边距 : 72dp,文本上部和下部内边距: 16dp

3、带有文本的头像
字体: Roboto Regular 16sp,瓦片高: 56dp,左边头像内边距: 16dp,文本左内边距 : 72dp,文本上部和下部内边距: 20dp

4、两行列表
仅有文本,首要文本的字体: Roboto Regular 16sp,非有必要文本的字体: Roboto Regular 14sp,瓦片高: 72dp,文本内边距: 16dp

5、带有文本和图标的头像
首要文本的字体: Roboto Regular 16sp,非有必要文本的字体: Roboto Regular 14sp,瓦片 高: 72dp,左边头像内边距: 16dp,文本左内边距: 72dp,文本上部和下部内边距: 16dp,右边图标内边距: 16dp

6、三行列表
仅有文本,首要文本的字体: Roboto Regular 16sp,非有必要文本的字体: Roboto Regular 14sp,瓦片高: 88dp,文本内边距: 16dp

十二、菜单

菜单是暂时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或 者包含至少两个菜单项的其他控件触发。
每一个菜单项限制为单行文本

发展和动态：
改写条和动态圆圈都可以闪现交互发展
线形发展指示器
滑块控件：接连滑块、数值滑块

音讯栏和弹出音讯：
手机屏幕或许桌面端左下方,以浮 动弹出框的办法存在
用很短的文本流来构成

开关：
三种类型的开关:复选框、单选按钮和 on/off 开关
复选框：多个 on/off 选择
单选按钮：只允许用户从一组中选择一个选项（排他选择）
on/off 开关：通过动画来传达被聚集和被按下的情况

切换标签：
作用： 为闪现内容相关的分组供应启示

办法：带有查找的切换标签
两种办法：横向翻滚／固定的

规划要求：
1 切换标签只有一行
2 包含2个切换标签并且不多于6个
3 可见内容要高亮

文本框：
四种类型：1单行文本框 2带有图标的文本框 3多行文本框 4全宽度文本字段
单行／多行字符计数器
查找过滤器

东西提示：
1.具有交互性
2.首要是图形而非文本

光标和键盘的东西提示

第六章 模型

选择：
列表和网格支撑多重选择

文字选中：
高亮闪现，
选中的初步和结尾添加上手柄，

手势：
分为触摸办法和触摸动作
轻击、撤销、启用/关闭

捏放、双击、双击拖移等

1、触摸

动作：单根手指按下,拿起
含义：选择

2、双击

动作：两根手指按下,拿起 / 一根 手指按下,拿起
含义：扩展

3、拖拽/滑动/投掷

动作：一根手指按下后移动,拿起

4、长按

动作：一根手指按下,等候,拿起
含义：选中一个元素，比如列表中的一个项目
长按不用于闪现情境菜单。

5、长按拖移

动作：一根手指按下,等候,移动, 拿起
含义：拿起移动/选中多个项目

6、双击拖移

动作：按下,拿起,按下,拖移,拿 起
含义：扩展/缩小

7、捏放

含义：扩展

8、捏合

含义：缩小

9、双指拖移,滑动,投掷

含义:选中多个项目/翻滚视角

10、双指双击

两指按下,拿起,按下,拿起
含义:缩小

起浮操作按钮：
作为进阶操作的开关
可以变形、弹出、位移等等

一个起浮操作按钮应该可以代表这个APP中的首要操作
不要在对话框中运用起浮按钮,去运用扁平的按钮

一个起浮操作按钮可以包含联络人列表
不要将各类功用和联络人或其他元素都放进按钮中

设置：
7个或更少的设置选项 不需求群组它们
8~10个设置项：1~2个设置组
11~15个设置项：2~4个设置组
大于16个设置项：假如你的设置项组大于4个的话，将内容放到二级层中

查找：
查找领会可参与一些功用:
• 语音查找
• 查找前史为用户供应查找建议
• 供应即时匹配

运用程序内部查找首要有两种办法: 持续式查找 和 伸缩式查找