最近又学习了一次android4.4（kitkat）时期的设计规范以及android5.0时期的meterial design。因此本文重点比较两个时期的设计规范的不同。为方便说明，分别将两个规范记为K（android4.0）和M（android5.0）

本文着重通过系统设计、容器与元素、动效交互、系统控件、模式四个方面进行比较。

系统设计

在系统结构方面，K和M并没太多的改变，系统依旧有状态栏、主屏幕以及底部导航栏组成。对与通用的应用UI，从K到M，依旧延续了经典的“三件套”模式：操作栏、导航抽屉、内容区域。

不同于K时期的扁平化设计，M设计强调材料化，通俗的理解就是所有看得见的容器都是材料，通过材料的表面质感传递隐喻和信息。对于材料的理解和延伸：

• 所有材料在空间中都是立体存在的，每种材料都有对应的高度。在M设计当中，通过光线产生阴影，通过阴影标识高度，通过高度产生层级和覆盖。
• 所有材料的厚度均为1dp
• 材料可以变换任意的大小、形状和颜色，在材料当中的元素行为与材料之间互不影响。

动效交互

在K时期，官方并未有过多的关于交互方面的指导，在M设计当中，强调“有意义的动画效果”，通过这些“有意义的动画效果”，可以有效的暗示和引导用户。通过交互和动效两方面加以说明。

交互

在M设计当中，用户与系统通过点击等操作产生交互时，可产生水波涟漪的效果，具体的表现形式为：以触发点为圆心，快速向外扩展的涟漪效果。这种响应式的交互帮助用户及时并且清晰的感知这些自发的行为动作。

动效

1、运动规律

在M设计当中，动效变化部分更多的模拟了自然世界当中，事物的运动规律。特别是由重力以及摩擦力导致的运动规律。在系统当中，具体的表现为：

• 运动开始和结束的过程，以缓冲的方式进行。
• 运动的过程，应当快速、有效。
• 运动的轨迹应当是弧线，而非直线。

2、有意义的转场动画

有意义的转场动画可以帮助用户理解事件变化过程当中的关联性。常见的转场动画如：

• 元素与视图之间的转化。
• “局部视图”与“详细视图”之间的转化。

有意义的转场动画通常具有“响应快速”以及“清晰条理”的特点。

模式

模式当中主要说明的是用户在与系统产生交互时，所关联的行为变化以及理解认知。从K时期到M时期，有些模式产生了变化，有些模式的思想并未产生变化。

相同的模式

1、视图结构

视图结构依然由顶层视图、分类视图、详细/编辑视图组成，对于流程功能的分解和组织的指导思想依旧适用。

2、导航

在导航当中，“返回”和“向上”的原则没有改变

3、操作栏

虽然在M时期，官方文档中并未明确提及“三件套”以及其中的操作栏，但是在操作栏上的的功能设置的设计思想：F（使用频率）、I（重要性）、T（创新/特点）依然适用。

4、消息通知以及系统权限申请

消息通知和系统权限的申请没有太多改动。如消息通知的形式，通知的样式以及可包含的元素以及操作并没有太多的改动，只是由于从K时期到M时期，某些元素或控件的外在样式发生了一些变化

5、小部件

小部件，即app的小插件，基本的显示和操作方式相同

6、设置

设置当中，M时期的单选、复选、滑块等控件样式相对于K时期有所变化，但是设计思想和基本操作相同。

变化的模式

1、手势

相比于K时期的8种手势，在M时期，手势增加至14种。除原有的单击、长按、滑动、拖动、双击、双击拖动、放大、捏合之外，M时期合并了滑动和拖动，同时增加了长按拖动、双指单击、双指拖动、双指长按、双指长按拖动、双指双击、旋转等手势。

2、搜索

在M设计当中，包含两种搜索模式：持久性搜索(persistent search)和可扩展搜索(expandable search)。前者时默认显示搜索框，后者需点击后展开搜索。

搜索过程中，支持语音输入、搜索历史显示、搜索结果模糊查询/匹配等功能

3、指纹

随着硬件技术的支持，M设计当中支持用户通过指纹进行信息的确认和提交。

4、刷新

不同于K时期的刷新方式，在M设计当中，刷新的图标、加载内容的方式有所改进。在M设计当中，用户下拉刷新时：

• 刷新指示器出现在水平中央的位置；
• 刷新完成之前，刷新指示器将一直显示在当前刷新的视图当中，并且当前视图当中的元素和内容不会发生变化；

5、选择

用户在网页或者邮箱当中进行文本选择时，不同于K时期的上下文操作栏（CAB），M设计当中，用户选择文本之后，相关的操作将集中显示在文本选择工具栏（text selection toolbar）当中

6、滚动技术

在M设计当中，用户在向上向下滑动时，根据当前视图顶部区域的不同进行收起和展开

视图顶部区域	向上滑动	向下滑动
App bar	工具栏收起	还原显示工具栏
App bar with tabs	收起工具栏，tab向上滑动至顶部后固定	Tab随着下滑至初始位置，并且下滑过程中还原显示工具栏
Flexible space	收起弹性空间，title向上滑动至工具栏内后固定	Title以及原先收起的弹性空间随着手势逐步还原至原先位置
Flexible space with image	图片被内容推到上方使弹性空间缩小，直至图片隐藏，但是图片隐藏的过程与向上滑动的手势是分别独立的。工具栏收起	首先还原显示工具栏，若用户继续下拉滑动，而后逐步还原显示收起的图片

控件

相对于K时期，M时期的很多控件有所变化，同时也新增了一些新的控件

控件名称	K时期	M时期
标签选项卡（tabs）	有。分为滚动标签和固定标签两种。	有，也分为滚动标签和固定标签两种。并且标签之前有关联性或者相似性
列表（Lists）	有	有
网格列表（Grid lists）	有	有
滚动容器/滚动条	有	有
菜单（Menu）	有	有。菜单包含的功能重要性以及使用频率较低。菜单中应至少包含两项功能
按钮	有	有。包含Flat buttons以及Raised buttons两种。其中，当用户选中Flat button时，其空间高度会增加
文本框	有	有
滑块	有	有
进度条和活动指示器	有	有，分为条形进度条以及圆形活动指示器
开关	有	有
对话框（Dialog）	有	有。
Toast	有	有
选择器	有。日期、时间、数字选择器	有
底部导航（bottom navigation）	--	有，多用于顶级页面之间的快速切换，每两个之间没有关联，同时顶级页面数量在3-5个，若需要展示更多的顶级页面，可使用导航抽屉（Navigation Drawer）
底部动作条（Bottom sheet）	--	有，包含两种模式，Modal bottom sheets和Persistent Bottom Sheets。Persistent Bottom Sheets多用于显示当前视图当中的详细信息。Modal bottom sheets多用于显示一些具体的操作
悬浮动作按钮（FAB）	无	有。FAB当中多包含当前视图当中两个以及两个以上较为常用并且重要的功能
卡片（cards）	无	有，可以看成时一个包含了静态数据与操作功能的集合
Chips	--	有
数据表（Data tables）	有	有
扩展面板（Expansion panels）	--	有
Snackbars	无	有。简单理解为toast的加强版，在底部显示，其中可包含提示信息以及一个功能操作
计步器（Steppers）	--	有
副标题（Subheaders）	--	有
工具栏（Toolbars）	无，但是有对应的Actionbar	有。不同于之前的Actionbar，在Toolbar当中不再强调引用图标以及视图控制（在Actionbar当中的下拉菜单）

注：其中“--”表示未明确提及

其中有错误之处，欢迎各位指正！！！

参考网站：

http://www.sunjw.us/adchs/index.html

https://material.google.com/