谷歌的MATERIAL DESIGN 设计指南精华版

三维世界(3D) world）：x ， y ， z 三维坐标属性z 轴占据一定的位置，并且有一个 1dp 厚度的标准

光影关系（Light and shadow） ：所有阴影都是由直射光和散射光投射产生的三种组合：

阴影直射光投射

散射光投射的阴影

混合投影直射光和散射光

三、Material 属性

物理特性材料具有变化的长度和宽度尺寸( dp 厚度均匀的(1dp)材料的高度和宽度是可变的，阴影材料可以显示任何形状和颜色

材料的变化仅沿其水平面生长和收缩。材料可以切割，也可以再次变得完整

材料的移动材料可以沿任何轴移动。Z 轴的运动是用户互动产生的提示。

四、高度和阴影

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

根据环境的深度，组件高度元素在某个平台上可能有多种静态高度。(例如，TV 与移动终端和桌面相比，它有更深的层次)

根据用户的输入或按压，感应高度和动态高度的偏移会改变高度

避免高冲突“浮动动作按钮”（FAB）

图：不同控件的高度规定

当对象的高度增加时，阴影会变得更加柔和和大。当它的高度降低时，阴影会变得更加卷曲

行字符宽度：良好的阅读体验，每行约60个字符

字距 ：随着大小和用途的变化，字距越大，字距越小

八、图标

系统图标：必须简单、现代、友好、现实，象征着命令、文件、设备或目录的设计原则：形状鲜明，多采用几何形状、对称、一致的图标

网格绘制，统一比例约束形状，两种尺寸(状态栏和上下文图标，工具栏和桌面图标)

圆角：不同尺寸的图标需要不同的圆角

九、图像

选择图像：选择与人物相关、充满信息和愉悦的图像。1/使用人物图像可以建立情感联系（图片）2/充满信息的图像，促进用户理解信息，创建智能界面（图片）3/使用与信息相关的惊人图像来愉悦用户，使体验充满魔力（可视化）

设计要求：

沉浸式体验，大胆整合色彩、内容和图像

创造性地添加视觉图形，提高信息性能。

少用图库，不要有一些泛泛的照片，要有代表性

照片主题适合文本，图片有视觉焦点

图形可以讲述身临其境的故事，并提示上下文

不要过度处理图片，高斯模糊或滤镜

图像与界面的集成：1、建议使用大图。测试2应在不同的设备和不同的分辨率下进行、文本保护。(为保证图像上文本的可读性，建议添加textt protection scrims）

根据内部，根据深色保护区 理想情况下，不透明度为20%- 40%。另一种保护文本的方法是将40%-60%的浅色保护区域添加到特定区域，而不是覆盖整个图像颜色叠加的保护区域：互补色叠加

十、布局

基准网格线和结构网格线

使用相同的视觉元素

基于卡片的设计

卡片工具栏:导航(抽屉菜单或返回箭头) 相关操作通常出现在左侧，应用于当前页面内容的操作放在右侧。

响应式设计原则：

考虑边角距离

概念模型：每个应用程序实际上都存在于不同的空间和容器中。在一个应用程序中删除一个列表不会导致另一个应用程序的变化。

按钮的悬停状态为次要层次，其按压状态为主要层次。

内容和工具栏总是出现在浮动动作按钮上。 以上，无论该应用程序使用多少张卡片。

深度感是为了功能。深入思考你的应用程序，了解它的层次和各种元素的重要性，帮助用户专注于完成任务。

阴影:针对Cards、FAB、Nav、App Bar、根据规定的值，Canvas等不同位置有5种左右的阴影选择。

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

触摸目标:最小触摸目标为48dp。图标间距(24dp)，头像(40dp)

结构：1自上而下的思维方式（用户想用这个应用程序做什么？构建界面用户体验）2内容优先：立即与内容互动，获得核心体验

浮动操作按钮：开关作为高级操作可以变形、弹出、位移等

浮动操作按钮应能代表APP中的主要操作。不要在对话框中使用浮动按钮，而是使用扁平按钮

浮动操作按钮可以包含联系人列表。不要将各种功能、联系人或其他元素放入按钮中

设置：7个或更少的设置选项 不需要组8~10个设置项:1~2个设置组11~15个设置项:2~4个设置组大于16个设置项:如果你的设置组大于4个，把内容放在二级

搜索：搜索体验可以添加一些功能：• 语音搜索• 搜索历史为用户提供搜索建议• 提供即时匹配

应用内部搜索主要有两种模式： 持续式搜索 和 伸缩式搜索