Material Design概述

2.1 Material Design概述
这里只是大概地讲解Material Design的基本知识点，若想要了解 Material Design的更多内容，可以查看其官方英文文档： http：//www.google.com/design/spec/material-design/。
2.1.1 核心思想 Material Design的核心思想，就是将物理世界中的体验带入屏幕， 并且去掉物理世界中的杂质，再配合虚拟世界的灵活特性，达到最贴近 真实的体验。到目前为止可以说，Material Design是最重视跨平台体验 的一套设计语言。它的规范严格细致，这样就保证了其在各个平台的使 用体验高度一致

2.1.2 材质与空间 魔法纸片是Material Design中最重要的信息载体。它拥有现实中的 厚度、惯性和反馈，并且能够自由伸展变形。魔法纸片引入了Z 轴的概 念，Z 轴垂直于屏幕，用来表现元素的层叠关系。Z值越高，元素离界 面底层的距离越远，投影就越重

2.1.3 动画 1.真实的动作 在物理世界中，通过观察一个物体的运动动作，我们可以感知到它 的重量、惯性和大小。 在Material Design设计规范中，动作不仅仅要展示物体的运动轨 迹，还需要展示其在空间中的关系、功能以及在整个系统中的趋势。所 以在设计动画时，就需要先考虑它在现实世界中的运动规律。
2.响应式交互 响应式交互能吸引很多用户，在用户操作一个既美观又符合常理的 应用时，这会是一个很美好的体验，这会让用户产生愉悦感。响应式交 互是一种有目的、非随机的、有些异想天开但不会让人分心的交互。响 应式交互分为3种交互形式，分别是表层响应、元素响应和径向响应。 • 表层响应 当用户点击屏幕时，系统会立即在交互的触点上绘制 出一个可视化的图形让用户感知到：如在点击屏幕时会出现类似于墨 水扩散那样的视觉效果形状。
• 元素响应 元素本身也能做出交互响应，物体可以在触控或点击的 时候浮起来，以表示该元素正处于激活可操作状态。比如我们长按一个 应用图标时，这个应用图标会浮起来，我们可以拖动该应用图标完成位 置更换或者卸载等操作。 • 径向响应 所有的用户交互行为中都会有一个中心点，作为用户 关注的中心点，当用户进行操作时应该绘制一个明显的视觉效果来让 用户清晰地感知到自己的操作。
3.转场动画 当一个界面跳转到另一个界面时，这一过程可以编排转场动画，这 些动画不仅可以带来良好的视觉效果，更重要的是吸引用户的注意，比 如我们可以利用转场动画引导用户做下一步的操作。转场动画不仅要提 升用户体验的整体美感，还要为业务服务。
4.细节动画 动画最基本的使用场景是过渡效果，但是最基本的动画，只要恰到 好处并且足够出色，同样也能打动用户。例如一个播放器，我们根据播 放状态将播放图标改为暂停图标，这种状态间的无缝切换虽说并不起 眼，但也能让用户感知到。当无数个类似这样的细节和精湛的设计充满 你的应用时，用户也会发现这些小细节，从而感受到设计者的诚意和用 心。
2.1.4 样式
1.色彩 色彩从当代建筑、路标、人行横道和运动场馆中获取灵感，采用了 大胆的颜色表达，这与单调乏味的周边环境形成了鲜明的对比。其强调 大胆的阴影和高光，从而产生了意想不到且充满活力的颜色。
2.字体 自从Android 4.0发布以来，Roboto一直都是Android系统的默认字体 集。在Material Design中，为了适配更多的平台，将Roboto做了进一步 的全面优化。宽度和圆度都有了轻微提高，从而提升了清晰度，并且看 起来更令人赏心悦目。Roboto字体如图2-3所示。中文字体则选用 Noto
3.字体排版 一个优秀的布局不会使用过多的字体尺寸和样式。字体排版的缩放 是包含了有限个字体尺寸的集合，它们能够良好地适应布局结构。最基 本的样式集合就是基于12、14、16、20 和 34号的字体排版缩放。这些 字体尺寸是通过SP指定的，让大尺寸字体获得更好的可接受度

1.桌面图标 桌面图标作为App的门面，传达了产品的核心理念与内涵。虽然每 个产品的桌面图标都不相同，但对于一个特定的品牌，桌面图标应在理 念和实践中统一设计。桌面图标建议模仿现实中的折纸效果，通过扁平 色彩表现空间和光影，一般情况下请使用48dph 48dp的尺寸，必要时可 以放大到192 dph 192 dp。
2.小图标 优先使用Material Design默认图标。设计小图标时，使用最简练的 图形来表达，图形不要带空间感。小图标尺寸是24dph 24dp，图形限制 在中央20dph 20dp区域内。

2.1.6 图像
在Material Design中，图像都不应该是人为策划的，而是组建生成 的，不要给用户一种过度制作的感觉。这种风格比较强调场景的实质 性、质感和深度，让人意想不到的色彩运用，以及对环境背景的关注。 这些原则都旨在创建目的性强、美观、具有深度的用户界面

图像 布局布局设计使用相同的视觉元素、结构网格和通用的行距规则，这样

会使得App在不同平台与屏幕尺寸上都拥有一致的外观和体验。这样就 创造了一个识别度高的跨平台产品的用户环境，这个环境会给用户提供 高度的熟悉感和舒适性。

2.1.7 组件
1.底部动作条（Bottom Sheets） 底部动作条是一个从屏幕底部边缘向上滑出的面板，旨在向用户呈 现一组功能。底部动作条呈现了简单、清晰的一组操作
2.卡片（Cards） 卡片是包含一组特定数据集合的纸片，数据集合中包含了各种相关 信息，例如，主题的照片、文本和链接。卡片通常用于展示一些基础和 概述的信息，并且作为通往更详细信息的入口。卡片有固定的宽度和可 变的高度，其最大高度限制于可适应平台上单一视图的内容；但如果需 要它，可以临时扩展
3.提示框（Dialogs） 提示框用于向用户提示一些信息，或者是一些决定的选择。提示框 可以采用一种 取消/确定 的简单应答模式，也可以采用自定义布局的复 杂模式，比如说增加一些文本设置或者是文本输入。
4.菜单（Menus） 菜单能够影响到应用、视图或者视图中选中的按钮。它由按钮、动 作、点或者包含至少两个菜单项的其他控件触发。每一个菜单项是一个 选项或者是动作，菜单不应该用作应用中主要的导航方法
5.选择器 选择器提供了一个简单的方法来从一个预定义的集合中选取单个 值。最常用的例子就是用户要输入日期的场景，这时使用时间选择器可 以帮你保证用户指定的日期是正确格式化的。
6.滑块控件（Sliders） 当我们调节音乐音量或者音乐的播放进度时会使用滑块控件，它让 我们在一个区间内滑动锚点来选择一个合适的数值。区间最小值放在左 边，最大值放在右边
7.进度和动态 在用户与内容进行交互之前，为了给用户展现出更完整的、变化更 少的界面，需要使用进度指示器，并且要尽量使加载的过程令人愉快。 每次加载操作只能由一个进度指示器呈现，例如，对于刷新操作，你不 能既用刷新条，又用动态圆圈来指示。
8.Snackbar与Toast Snackbar 是一种轻量级的弹出框，通常显示在屏幕的底部并在屏幕 所有层的最上方，包括浮动操作按钮。它会在超时或者用户在屏幕其他 地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭，Snackbar 不 会阻碍用户在屏幕上的输入，并且也不支持输入，屏幕上同时最多只能 显示一个 Snackbar。Android也提供了一种主要用于提示系统消息的胶
囊状的提示框Toast。Toast同Snackbar非常相似，但是 Toast 并不包含操 作，也不能从屏幕上滑动关闭。
9.Tab 在一个 App 中，Tab 使得在不同的视图和功能间切换更加简单。 Tab 用来显示有关联的分组内容，Tab标签则用来简要地描述Tab的内 容