Material Design

Material Design基础

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其余平台”提供更一致、更普遍的“外观和感受”。

Material就像是理性空间和运动系统的统一理论，Material根植于现实触觉，来源于对纸和油墨的研究，加上技术性的提高，也加入了更多难以想象的想像力。

以上是Google对Material Design的表述，大体能够描述为基于现实世界的纸和油墨，但并不局限于这些元素在现实世界的表现。 在Material Design的设计思想里，纸是全部元素的载体。可是和现实世界的纸不一样的是：

• 纸能够自由伸缩，还能够改变形状。
• 纸不会忽然出现，一般是以动画形式出现，例如大小变换、滑动位移。
• 两张纸的边缘发生碰撞时会互相推进。
• 一张纸能够分红两张纸，也能够是多张纸合成一张纸。
• 纸不能从另外一张纸的中间穿过，可是能够从其表面滑过。
• 纸的x、y轴尺寸是可变的，z轴则是固定为1dp的厚度。

Material Design世界的纸

纸有固定的厚度，而且能够从另外一张纸的表面滑过。说明Material Design是三维的，第三维即Z轴，表示纸距离屏幕的远近，这个距离会影响纸的阴影，也决定纸与其余纸在三维空间里的先后关系。 手机屏幕是平面的，没有第三个维度，那么如何在屏幕上实现Z轴呢？使用传统的虚化或遮挡（前面的纸会遮挡住后面的纸）、透视（距离屏幕表面更近的纸显示更大）和阴影（距离屏幕更近的纸会投射出阴影）技术能够实现。 将这些传统的技术结合在一块儿，你能清晰的看到两张纸之间的距离与大小，并且了解一张纸在另外一张纸的前面。

在平面上实现三维空间

阴影是在光源的照射下产生的，Material Design世界中的阴影来自2个光源：主光源和环境光。举个例子，你使用相机给别人拍照，相机的闪光灯就是主光源，周围的其余光源则是环境光。环境光在各个方向制造柔和的阴影，而主光源位于屏幕顶端的中心位置，投射明显的阴影在纸的下方。这种对视觉细节的研究使阴影看上去更加真实。

Material Design世界的阴影

Material来源于对纸和油墨的研究，除了纸，墨水也是Material Design的一个关键要素。Material Design世界的墨水是指纸的颜色和纸上的文本，墨水没有厚度，能够在纸上随意移动、放大或缩小、改变颜色或形状。好比，一张照片能够从略缩图扩展为原图，还能够查看照片细节。

Material Design世界的油墨

交互是应用程序设计中常常被忽略的部分，在用户轻触按钮打开新页面的过程当中，按钮会放大、缩小或改变颜色？新页面是滑入仍是从旧页面放大？过去，轻触事件经常是以改变背景颜色的形式反馈，在列表中轻触一行时，背景色可能忽然从白色变成蓝色。 Material Design的交互要求天然过渡，最典型的轻触反馈就是以触点为中心的涟漪。就像是手指轻轻触碰湖面后，看到水的波纹从指尖向外扩散开来的景色。另外，若是单独的一张纸对轻触做反馈，整张纸会升起来，就像是急切的想和手指相遇同样。 Material Design中动画首先要求流畅，其次是能根据状况对动画加速或减速，就像开车踩油门的时候，速度上升有一个过程。另外，目的也是动画还有一个重点，动画的目的不是让用户惊讶，也不是用来分散注意力，更不是为了使应用更有趣。动画的真正目的是让用户理解前一种状态与后一种状态之间是怎么样过渡的，这样不只能引导用户注意到关键的元素，还解释了是什么、在哪里发生了变化。

• Material Design是一个统一的系统，它结合了理论、资源和工具来制做数字体验。

创造一种视觉语言，将优秀设计的经典原则与技术和科学的创新和可能性结合起来。 容许在不一样平台和设备大小之间进行统一的体验。

• 材料是比喻

例如现实的照明显示接缝，分隔空间，指示移动部件。

基于对纸和墨水的研究的启发而创建在触觉的现实基础上，而技术上的进步释放了想象的空间。

• 大胆，图形，想象力

基于打印的设计的基本元素——排版、网格、空间、比例、颜色和图像的使用——指导视觉处理。这些元素远远超过了眼睛的视觉。它们建立层次、意义和焦点。深思熟虑的颜色选择、边缘到边缘的图像、大规模的字体设计和有意的白色空间，创造了一个大胆而生动的界面，让用户沉浸在体验中。 对用户操做的强调使核心功能当即变得明显，并为用户提供了路径。

• 有意义的运动

运动是有意义的，也是适当的，它有助于集中注意力和保持连续性。反馈微妙而清晰。过渡有效而连贯。

• 空间环境

全部的物质对象都有x，y和z维。 全部的物体都有一个z轴的位置。 主要的灯光会产生方向性的阴影，而周围的光线会产生柔和的阴影。

• 特性

物质具备某些不可改变的特性和固有的行为。

物理属性

1.材料有不一样的x和y尺寸和均匀的厚度(z)。
2.材料投下阴影。阴影在物质元素之间的相对海拔(z位置)天然产生。
3.内容以任何形状和颜色显示在材料上。内容不会增长材料的厚度。
4.内容能够独立于材料，但在材料的范围内是尽可展现有限的。
5.材料是实体。输入事件不能经过材料。
6.多重物质元素不能同时在空间中占据相同的位置。
7.材料不能经过其余材料。
例如，一层材料在改变高度时不能经过另外一层材料。

形变

1.材料能够改变形状。
2.物质在它的平面上拉伸和收缩。
3.不要弯曲或折叠。
4.材料能够链接在一块儿，成为一层材料。
5.当分裂时，物质能够治愈。
例如，若是你把一块材料从一块材料中移走，那么材料的薄片就会变成一整张纸。

动态

1.物质能够自发产生或销毁于空间中的任何地方。
2.材料能够沿着任何轴移动。
3.z轴运动一般是用户与材料交互的结果。

• 海拔和阴影

在物理世界中，物体能够被堆叠或粘在一块儿，但不能经过彼此。物体也会投射阴影，反射光线。 材料设计反映了这些品质，造成了一种对用户来讲很熟悉的空间模型，而且能够在应用中一致地应用。

海拔

从一个表面到另外一个表面，一个元素的高度代表了表面和它的阴影的深度之间的距离。
1.静态海拔
全部的物质元素都有静止的高度。虽然组件在不一样的应用程序之间有着一致的静态高度，但它们在不一样平台和设备上可能有不一样的静态高度。
2.动态的高度补偿
动态海拔偏移量是一个构件相对于静止状态的目标提高。

• 阴影

阴影为物体的深度和方向运动提供了重要的视觉线索。它们是惟一的视觉线索，指示出物体表面之间的距离。物体的高度决定了它的影子的外观。

Material Design设计技巧

不少人觉得作个应用程序很简单，因此描述需求的时候及其模糊，本身都不知道要作的东西的具体功能，结果项目作出来跟本身想的彻底不同。项目上线的时候漏洞百出，反复修修补补解决不了问题，后面直接报废重作。
在开始开发一个新应用时，最麻烦的就是需求改来改去。因此首先须要列出要实现功能的表单，而后连续划掉不重要的项目，直到表单中只剩下核心功能，这样能确保应用的特征和功能点。新应用能够在后续版本中添加其余功能，可是不能一开始就实现全部的功能，开发进度到一半才开始核心功能。
在应用程序开发之初，有没有想过，用户为何要使用你的应用程序呢？试着回答“用户为何要用这个应用”，答案中不能包含“和”、“或”等链接词，并且不能有第二句，好比“用户用这个应用快速地发送邮件”。若是你能回答出这个问题，说明你准备好了。
一个关于邮件的应用中，查看邮件也是这个应用的一个重要功能，但最重要的是发送邮件，这就明确了应用的首屏就能够发送邮件，或者是经过悬浮按钮来实现。尽管一个应用的功能越多对用户有吸引力，好比，应用能够识别附件中的发票文件，你仍须要把最重要的事作好，毕竟没人会为了识别发票而使用这个应用。

Google邮箱应用Inbox by Gmail

有时候，应用由于有多个核心功能而致使错综复杂，很差分离或需求失控。这种状况下须要帮用户理清思路，有目的地拆分功能。在早期的Android中，相册和相机属于同一个应用，部分手机厂商将二者分开并定制了一些其它功能，后来Google也将二者分离，用户使用相册应用查看照片、使用相机应用拍摄照片。
移动应用只能使用小屏幕来承载，而你常常须要传递不少信息，可是用户只会频繁、快速地看一眼应用。这意味着用户看到的摘要信息必须简单明了，尽可能使用短文本，让用户清楚地明白按钮要表达的动做。好比，使用“保存修改”而不是“肯定”，这样按钮的功能就显而易见了。
用户对第一次使用的应用有较高的要求，因此应用的核心功能必需明确、显著。例如，打开备忘录应用，看到一个大大的加号图标，直接就猜到这是一个新建备忘项的按钮。简单按下新建按钮的真正意义在于新建的同时显示了用户未曾关注的信息，好比建立时间、用户位置等。当备忘项保存后，应用能扫描关键词，并作一些有用的事情，好比将备忘项中的时间添加至闹钟应用。这些都是在新建备忘项之初，用户不须要考虑的。
若是应用提供了照片滤镜的功能，不要简单的显示“增强对比”、“去掉红色通道”等这些图像处理的技术名词，最好直接显示预览缩略图，让用户能够直观的看处处理效果。当用户将新闻列表滚动到底部时，应用要自动获取下一组新闻。这些简单的特性能让用户感受到增长了主控性。

Google照片应用

应用须要适应用户，适应用户不只是说要根据用户设备来调整应用，还包括考虑用户的使用习惯。最简单的适应用户的方式就是为用户提供个性化的设置。例如，一个阅读应用，在夜间阅读时，有的用户喜欢黑底白字，还有的用户喜欢白底黑字，这时就须要注意提供这些个性化需求。
有时候，产品经理或其余人员会要求应用启动时人工延迟两秒，以显示全屏的广告推广图。若是你的竞争对手的应用在几百毫秒内就能够打开，试问用户会选择哪一个？用户每次看到应用的真正内容以前都要人工延迟一会，也不怪用户会改换其余应用了。 最后还有一招，就是记住，即便用户犯错了，也永远是对的。用户清楚本身进行的是“删除”操做，不用每次都提醒“你肯定要删除吗？”，不要为了不用户犯错而使功能变得难以使用。应用要让用户能简单的进行撤销，使功能的使用更简单，并以此来鼓励用户大胆探索你的应用。固然，若是撤销某个操做是不可能的，那最好仍是提供一下确认对话框。

Google记事和清单应用Keep

Material Design之Motion

在Material Design中，运动被用来描述空间的关系，功能，流动美的意图。

运动的做用

• 引导布局中的焦点轨迹
• 引导用户的手势操做
• 展现元素之间的层次结构和空间关系
• 分散在幕后的事情(好比抓取内容或加载下一个视图)
• 提高用户体验

如何运动

物质环境从现实世界的力量中汲取灵感，好比重力和摩擦力。这些力量反映在用户输入影响屏幕上的元素以及元素如何相互做用的方式上。

1.响应

快速响应用户输入，准确地响应用户的触发

2.天然

天然运动的灵感来自于现实世界中的力学

3.意识

材料能够感知周围的环境，包括用户和周围的其余材料。它能够被元素吸引，并对用户的意图做出适当的响应。

4.意向性

在正确的时间，运动指南中的有意材料将焦点放在正确的地点。

如何作到更好的连贯

成功的运动设计具备如下特色:
1.运动是快速
交互不该该让用户等待的时间超过必要的时间。
2.运动是清楚的
过渡应该是清晰、简单和连贯的。他们应该避免作太多的事情。
3.运动要统一
物质元素的速度、响应能力和意图是统一的。任何对应用程序的动做体验的定制都应该在整个应用程序中保持一致。

合适的时长&天然的过分曲线

运动中的物质是响应性和天然性的。使用这些放松曲线和持续时间模式来建立平滑和一致的运动。

• 速度
  当元素在位置或状态之间移动时，移动速度应该足够快，不会致使等待，但速度足够慢，能够理解转换。在用户常常看到的状况下，保持简短的过渡。

• 动态的持续时间
  与其为全部的动画使用一个单一的持续时间，不如调整每一个持续时间来适应运动的距离，元素的速度和表面的变化。 离开屏幕的对象可能会有更短的持续时间，由于它们须要较少的关注。

• 通常时长设定
  移动端上常见的持续时间移动转换一般发生在300毫秒左右，在这种差别的范围内:大的、复杂的、全屏幕的转换可能有更长的持续时间，超过400ms的过渡可能感受太慢。
  大屏幕上的大屏幕元素的距离较长，其峰值速度要高于在同一时间段内较短的距离。更大的屏幕应该有更长的时间，这样移动的速度就不会太快。
  平板电脑的持续时间应该比移动设备长约30%。例如，在平板电脑上，300毫秒的移动时间将增长到390ms。
  可穿戴设备上的持续时间应该比移动设备短约30%。例如，在可穿戴设备上，300毫秒的移动续航时间是210ms。因为材料必须在更大的设备上移动更大的距离，因此过渡的时间可能比小的设备要慢一些。
  桌面的动画应该比他们的移动设备更快更简单。这些动画的效果应该是150毫秒到200毫秒。由于桌面转换可能不那么引人注目，因此它们应该当即响应，而且比移动设备更快。
  复杂的web转换一般会致使掉帧(除非它们是为GPU加速而构建的)。较短的持续时间将使这些不太明显，由于动画完成得更快。

• 天然缓和曲线

这些天然的放松曲线会影响一个元素的速度、不透明度和尺度。
在动画的持续时间内，加速和减速的变化应该是平滑的，这样运动才不会显得机械。
当加速度和减速不对称地发生时，运动显得更加天然和使人愉悦。

根据使用的平台或软件，能够根据不一样的平台来命名不一样的曲线。
这些指导方针将把它们称为标准、减速、加速和锐曲线。

标准曲线

标准曲线

标准曲线是最多见的曲线。
在屏幕上的位置之间，元素会迅速地加速和缓慢地减速。
它适用于不断增加和收缩的材料，以及其余的财产变化。

减速曲线

减速曲线

使用减速曲线，元素以全速进入屏幕，并缓慢减速到一个休息点。
在减速过程当中，元素能够在大小(到100%)或不透明度(到100%)中进行扩展。
在某些状况下，当元素以0%的不透明度进入屏幕时，它们可能会在进入时稍微缩小一些。

加速度曲线

加速度曲线

使用加速曲线元素以彻底速度离开屏幕。
在屏幕外，它们不会减速。
在动画开始的时候，它们会加速，而且能够缩小到任意大小(到0%)或者不透明度(到0%)。
在某些状况下，当元素以0%的不透明度离开屏幕时，它们可能也会稍微放大或缩小。

锋利的曲线

锋利的曲线

使用锋利的曲线，元素会迅速加速和减速。 它是由退出元素所使用的，这些元素可能在任什么时候候返回到屏幕上。 元素能够从屏幕上的起始点迅速加速，而后在对称的曲线上迅速减速，而后在屏幕外的休息点迅速减速。 减速比标准曲线要快，由于它没有沿着偏离屏幕的精确路径。 元素能够在任什么时候候从那个点返回。