Material Design(四)

一、动画

material design重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。

1. easing : 动画要贴近真实世界，就要重视easing。物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing，要先考虑它在现实世界中的运动规律。
   
   
   
2. 水波反馈 : 所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了material design动画的功能性。
   
   
   
   
   
   
3. 转场效果 :
   • 通过过渡动画，表达界面之间的空间与层级关系，并且跨界面传递信息。
     
     
     
   • 从父界面进入子界面，需要抬升子元素的海拔高度，并展开至整个屏幕，反之亦然。
     
     
     
   3. 多个相似元素，动画的设计要有先后次序，起到引导视线的作用。
      
      
      
   4. 相似元素的运动，要符合统一的规律。
      
      
      
4. 细节动画 : 通过图标的变化和一些细节来达到令人愉悦的效果。
   
   
   

二、排版

Material Design 支持了不同屏幕的分辨率，主流的可以使用不同的切图来区分，而很多不是很主流的机型就不能靠切图来一一适配了，只能使用诸如响应式布局等形式。在安卓适配中因为响应式布局需要缩放内容的缘故，所以我们需要在排版中考虑栅格系统。

响应式布局

Material Design 也意识到了安卓屏幕分辨率太多的这种情况，它的解决思路是使用如网页中响应式布局的做法，根据屏幕进行等比例的缩小或放大。为了保证缩放的显示效果，Material Design 要求我们在设计之初就使用栅格系统（Grid Design），这样可以更有效地进行响应式布局。

栅格系统三要素：①列（Columns）②水槽（Gutters）③边距（Margins）

• 列（Columns）列建立的时候要考虑整体的宽度，然后进行整除。然后我们做界面的时候可以和列对齐，就达到了所有宽度都是倍数或有联系的效果了。在平面设计中，栅格系统是为了让界面更有秩序感，而在UI设计中，除了视觉的要求还有来自自适应需要整除元素的要求。

• 在360dp宽度的手机设备中，使用4个列
  
  
  

• 而在600dp宽度的平板电脑中，通过响应式使用8个列
  
  
  

2. 水槽（Gutters）
   水槽是用来区别内容的，被作为列之间的留白使用的。在响应式布局中，列的宽度是不变的，然而水槽的宽度是可变的。

• 在宽度为360dp的手机界面中使用16dp的水槽
  
  
  

• 在600dp宽度的平板设备中使用26dp的水槽
  
  
  

3. 边距 边距是栅格和屏幕之间的距离，在不同的屏幕上我们可以根据手指点击方便程度给予不同的边距当做安全距离，同时也可以解决列和水槽无法被整除的一些情况。

• 在360dp的手机设备上使用了16dp的边距
  
  
  

• 在600dp的平板电脑设备上使用了24dp的边距
  
  
  

可自定义栅格系统

我们设计的界面由于内在的逻辑关系需要，不能直接套用很多固定的栅格系统版式。那么可以根据需求进行自定义栅格系统。比如信息间的水槽就要考虑信息之间的逻辑关系。所以不要死板地使用栅格系统，根据自己的需要去自定义才是好的设计。

• 为了让用户感知图像是紧密相关的，这个案例中网格使用了8dp水槽
  
  
  

• 为了让用户认为专辑是各个独立的，这里使用了较大的32dp水槽来创建列之间的分隔
  
  
  

• 错误案例：这里使用了太大的水槽，使界面显得分裂
  
  
  

• 在不同设备中的栅格系统建议
  
  
  

• 栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。
  以下是一些常见的尺寸与距离:
  
  
  

另外要注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。还有非常多规范，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。

三、设置界面

设置和帮助反馈通常放在侧边抽屉中。如果没有侧边抽屉，则放在Appbar的下拉菜单底部。

设置界面只能包含设置项，诸如关于、反馈之类的界面，入口应该放在其他地方。

设置项使用通栏分隔线来分组。7项以下不必分组。如果某项独立一组，考虑把它放在顶部（重要）或放在底部的“其他”一栏中（不重要）。设置项较多时尝试合并，比如把两个相关的勾选项合并成一个多选项。设置项非常多时，使用子界面。

四、Materialize

Materialize 是一个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作，为我们提供默认的样式，结合了自定义组件。此外，它还改进动画和过渡，为开发人员提供流畅的体验。

Materialize和bootstrap的简单对比

	bootstrap	Materialize
使用	引入bootstrap.css和bootstrap.js	引入materialize.css和materialize.js
网格系统	col-lg-12 、col-md-12、 col-sm-12	l12、 m12、 s12
字体排版	右对齐：text-right 居中：text-center	右对齐：right-align 居中：center-align
表格	条纹表格：table-striped、有边框表格：table-bordered	条纹表格: striped、有边框表格：bordered

Materialize官网
vuematerial