Material Design

Material来源于对纸和油墨的研究
google对MaterialDesign的描述是类似于现实生活中的一张纸张
纸张有x轴,y轴,以及一个1dp的z轴(厚度)

一下6点就是设计MaterialDesign页面的精华:

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

纸张可以以阴影,透视,遮挡的形式呈现

Material Design中的阴影来自2个光源：主光源和环境光源。

截屏2022-11-16 19.53.12.png

以上三张图片分别是从主光源投射,从环境光源投射,从主光源和环境光源一起投射

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设计技巧

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

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

应用需要适应用户，适应用户不仅是说要根据用户设备来调整应用，还包括考虑用户的使用习惯。最简单的适应用户的方式就是为用户提供个性化的设置。例如，一个阅读应用，在夜间阅读时，有的用户喜欢黑底白字，还有的用户喜欢白底黑字，这时就需要注意提供这些个性化需求。

有时候，产品经理或其他人员会要求应用启动时人工延迟两秒，以显示全屏的广告推广图。如果你的竞争对手的应用在几百毫秒内就可以打开，试问用户会选择哪个？用户每次看到应用的真正内容之前都要人工延迟一会，也不怪用户会改换其他应用了。
最后还有一招，就是记住，即使用户犯错了，也永远是对的。用户清楚自己进行的是“删除”操作，不用每次都提醒“你确定要删除吗？”，不要为了避免用户犯错而使功能变得难以使用。应用要让用户能简单的进行撤销，使功能的使用更简单，并以此来鼓励用户大胆探索你的应用。当然，如果撤销某个操作是不可能的，那最好还是提供一下确认对话框。

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%的不透明度离开屏幕时，它们可能也会稍微放大或缩小。

锋利的曲线
使用锋利的曲线，元素会迅速加速和减速。
它是由退出元素所使用的，这些元素可能在任何时候返回到屏幕上。
元素可以从屏幕上的起始点迅速加速，然后在对称的曲线上迅速减速，然后在屏幕外的休息点迅速减速。

减速比标准曲线要快，因为它没有沿着偏离屏幕的精确路径。
元素可以在任何时候从那个点返回。