设计师角度：再谈谷歌Material Design

mars880419

（之前的Google Now）

Material design（内部代号『量子纸』）是Google开发的设计语言并在2014年6月25日的Google I/O大会上推出，是基于首次在Google Now上面出现的『card motifs』（直译过来叫做『卡片式图案』）扩展设计出来的。这种设计大量的增加了栅格化图层、响应式动画，以及一些赋予光影变化的变形、叠化、深度等效果。设计师Matías Duarte解释这种设计风格『我们不是在做真实的纸张，但是我们的虚拟设计元素却能智能的拓展和变形（大意就是各种设计元素并没有遵守拟物设计，但是却有一定的实体物理性质，可以理解为物理性质拟物）。真实物质是有物理表面和边缘的，接缝和阴影又能够揭示你触摸的是什么，Material设计来源也就是这个道理』。Google说他们这个设计语言思路是来源于纸和墨，所以充满了物质性。

Materialdesign能在Android2.1到v7中都能使用，2009年以后出品的所有Android实体设备都可以。Material design会用Google一贯以来的做法，通过网页端以及移动设备产品的扩张，来逐渐扩展影响力，Google也发行了Application programming interfaces (APIs)给第三方开发者去了解和把他们的应用做成这种风格。

在2015年，Material design已经占领了大多数Google Android移动设备APP的界面了，包括Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, GoogleMaps, Inbox,还有所有Google Play旗下直属App，以及Chrome浏览器和Google Keep外设，还包括了网页端一些应用界面，例如Google Drive, Docs, Sheets, Slides and Inbox。

Material design的UI设计规范被称为『Polymer paper elements叠纸元素』（暂且这么翻译），它包括『层叠元素库』，在浏览器中它会用一个『垫片』来显示网页端外加的API组件，表示它并不是该软件本身携带的控件。

设计详解

这一部分的内容是Material Design中文版的部分摘要和总结，在此表示感谢。

1.动画

在真实世界里面，由于重力等有加速度存在的力场里面，物体运动速度大多数时候不是线性增加的，斜率改变也许更接近二次函数，所以在Material里面，动画首先要遵守『物理』，偶尔比如你要做出虚拟的上抛运动，这时候你的初速度要设定到最高才符合真实世界的规律。还有就是要考虑一下惯性，想象一下你要赋予这个物体的质量和初速度，有助于你做更好的动画。

同样的就是在真实世界里面你试着和水面互动，你会扔石头，或者用手指触摸水面，结果有不同但是效果是相近的，水面会泛起涟漪。在Material里面你点击设计交互元素产生的响应也应该和这个一样，产生『涟漪』，下一步也应该以你的点击的地方为中心打开一个新界面。

对于转场，也是类似，永远想象观众在翻书，而不是看电影那样硬切。在元素变化不大的界面切换中，想象要新进来的元素、要走出去的元素、要保留的元素都是要沿着怎样的路线和动画去走，规划出来的东西都要井然有序，即便是要加入『物理』的动画了，也不可以乱了阵脚。

以上的做好了的话大体能把UI动画做到90分，最后的10分就是来源于细节了。但是也要保证『简单却动人』，如果复杂又违和，宁可不要。

2.样式

大胆使用鲜艳的颜色，一般情况下饱和度达到色彩图中500为佳。糖果色和撞色也是Material的一个重要特色，选好两个对比强烈的颜色，各自选取三个饱和度纬度的颜色，这样就基本上把一个画面的主要颜色都定下来了（优秀的设计需要有一个强而有力的VI制定守则），其中一个色系作为强调色，在关键的控件设计上起到吸引视觉重视的作用，谨慎使用。

从Android诞生伊始，全部Google平台中Roboto就是最标准的字体，在历次改版之后Roboto显得更加清晰特征明显了。比例一般都是按12、14、16、20和34号的字体排版缩放，层级要非常清晰明了。在Material的设计标准里面还有一个更加进步的规则就是不同字号颜色以及间隔和换行都需要有部分修改，以防止对比度过大而引起注意力分散。对于阅读长度，『要得到良好的阅读效果，每行应当包含60个字符左右』。

对于图标而言，整个设计里面有相对固定的栅格规范，圆角处理和避免过于锐利的直线角，还有就是在各种场合下都有很强的大小和颜色适配性。

作为一套UI，也要经常处理图像和设计元素的搭配。虽然图像本身的质量永远是处于不可控制的范畴，在可控的范围内（比如APP背景、登陆界面、专辑缩略图等），增强和周围图层及控件的关联度、巧妙使用遮罩都能让设计更具『人性化』。插画和摄影常常混搭，能加强戏剧性，但是非常避免只有照片甚至是只用图片库的图片。还有就是像素要满篇幅，留白处理会让其他设计和图片格格不入。分辨率也要保持足够大，不要随意添加滤镜，甚至不要加很强的灰色半透明，这些都是降低画面质感的行为。

3.图层

由于整个设计的本质是想模仿『纸墨』，所以在Material Design处处要遵守的就是印刷时代的栅格化设计，这样能最大化带来『纸质』体验（虽然我觉得这只是针对欧美印刷业）。图层之间有非常明确的相互关系，同级的『纸张』只能相互『推动』（并且永远保持一个『接缝』），不能忽然窜到别的层级的纸张上。另外『纸张』都是有弹性的，但是却有一定的阈值，设计的时候也同时考虑之前说的物理学原理。

在Material Design中所有衬线都是有意义的不可以滥用，只是为了使得图层互相之间的逻辑非常严密。于是在有些界面不再有标题栏的时候，这些衬线就变成了非常重要的图层要素。

每个APP独立性非常严谨，互相不能互窜图层。如果有APP本身包含多图层，那么会有一些控件是用于连接这些图层的，那么它将会一直浮现在所有图层之上。还有一些守则，比如系统的提示永远在图层最上面，这也是所谓的『深度』效果了，所有图层都有它在3D上的『深度』，在Z轴上有自己的位置，而每个图层上它们都有他们的阴影来暗示它们距离最下面的Z平面有多高（虽然我觉得有时候这个处理方法有点太过头了，尤其层高高的时候阴影简直吓人）。

关于各种元素之间的间隙尺寸，Material Design都有非常成熟的尺寸规定，水平和垂直部分都有。而所有这些被定死的尺寸以外，都是由内容和留白来占据的，这就是它灵活处理的部分了。即使在平板和PC上，也是同样的处理法则。遇到棘手的尺寸，就用倍数法则：

这里要说到更深层次的东西，关于交互逻辑了。其实UI页面之间有三种联系：一个屏幕完成所有事情，如计算器App；同一个层页面但是不同Bar切换，比如拨号界面直接推拉出收藏夹这些；复杂应用，多层页面，数据较多，比如有分类功能的购物App，包含预览功能的文件夹。这种已经非常接近不同App之间的逻辑了，但是又稍微不同；这时候你不仅要考虑单个页面设计了，要考虑整体的UI设计以及设计过程要保持头脑清醒（这时候你更像个导演或者建筑师，纯美工级别的请跳过以下内容……），首先出来的这个页面一定是用户最想看到了。而且你要做到不要混淆视觉，如果满屏幕都是导航栏将会使得用户非常迷茫（就像以前版本的Android打开App会出来一大堆的Bar，极其丑陋），另外Icon设计的辨识度、能否清晰的表达出直接访问路径的内容，都是非常重要的。如果实在太多功能，先考虑精简，然后考虑平铺，再考虑侧滑，尽量少的让用户产生多余的使用步骤（当然如果你是在做Motion动画，这个观点也是值得采用的）。

如果你的应用页面有大量同级的『纸张』，你可以加入边选栏或者侧边栏来管理这些复杂的List，但是这是需要一点学习成本的，因为它们不是一打开就能看到。当然如果是在平板或者PC上看的话，可以做出一点小改变，比如工具栏可以长期在上面，而底栏未必出现。一般来说尺寸设计：（手机上）侧边导航栏宽度=屏幕宽度-应用栏高度；

工具栏设计未必会限制得很死，有些情况它甚至能做出很大的变动，但是基本样式以及分级是务必十分明显的：

当然，在Material Design里面其实这些工具栏也是有尺寸要求的，和之前的水平上的尺寸要求类似，工具栏和底栏边栏上，内容和空白可以自由去填补剩下没有硬性要求的部分：

4.组件

在点选一个项目的时候（比如一个人的联系方式），如果这个项目能操作的项目超过了3项，那么就务必要用到底部动作条这种『大工程』的控件了，普通的那种两个三个按钮的对话框没办法满足。当然也是有一定的尺寸标准的：

按钮是Material Design里面的一个非常重要的部件，不可以把它当成纯装饰元素，当然按钮分为『圆形Icon式』FAB和『有背景色Raised/无背景色Flat文字的普通按钮』，虽然点击后都有涟漪效果，但是三者功能完全不一样：

这三者的选用一般是基于图层高低来确定的，还记得我之前的那个图吧？仔细想想你需要赋予这个按钮在哪个3D图层、有什么功能（要准备推拉和弹出一堆同一个图层信息的就用FAB、连续一片的卡片式或者接缝式的图层上一般就用Raised、一堆文字对话框伴随的一般就是Flat），然后就你知道应该用什么按钮了。另外按钮的位置也是有尺寸标准：

关于按钮的动作，在每一步上它的颜色都是不一样的，一般来说参数如下：

RaisedDark/Dark Color

最小宽度: 88 dp，高度: 36 do，正常状态: Color 500，覆盖状态: Color 600，点击状态: Color 700，不可用状态: 10% #ccc

遇到特殊页面，按钮的界限有点模糊，形状也可以有变化，但是响应面积依然要注意；

在Material Design里面的下拉菜单有一个非常重要的注意点，就是不能把之前的图层切断，所以只能在边缘部分往下面展开，如上图；

下拉菜单也有几种，一种常规的就是什么都不显示，第二种就是有默认选项和下拉按钮，第三种是有默认值和下拉按钮而且还能自己编辑，他们也是有响应动作的。多种选项和下拉菜单连在一起的时候也有版式要求，如上图。

和大家想象的不一样就是在Materila里面的卡片其实还是有小小的拟物化的，圆角和阴影是必备要素。卡片的内容类型都可以不一样，而且还能互动，例如添加评论点赞之类，但是不宜过多，表示出它的基本功能即可（控制在两项以内）。

网格设计展示图片和文字必须简洁明了，编排禁止混乱和滥用阴影。千万不要在图片下面加入分散注意力的部件，如下：

在布局上，也是有一定讲究，比如：

字体设计

正文：14 sp或16 sp

标题：24 sp或更大

扁平按钮：Roboto Medium, 14sp, 10 sp字间距

移动设备上的卡片间距

屏幕边界与卡片间留白：8 dp

卡片间留白：8 dp

内容留白：16 dp

和这种卡片有点类似的就是纸片。所谓纸片就是包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息的小卡片，如上图。

这种提示框一般用于警告，偶尔用于输入WIFI密码之类的。之前在按钮里面有说过一下，其实和文本有点类似，也有标题和正文之类的。涉及到操作的时候，一般在固定高度的提示框里面，注意一下有滚动条时候，哪些元素是不能够和滚动条一起动的。

分割线也是Material组成要素。不需要每次都处理成等屏宽，尤其是比较密集的时候，需要一些缩进留出空白，另外给点文字提示也有助于信息筛选：网格一般用于存储同类内容，处理办法和卡片类似但是有点不同，比如它完全不需要拟物化的圆角和阴影。有时候你要在上面加入可用的控件和文字，那么处理方式和卡片基本一样。

每一类（比如图标）千万不要放在一起使用，比如头像和复选框，选择那个是首选哪个只是视觉辅助。比如下面这种排版，根据情况是头像重要还是选项重要，决定后，二选一：

遇到折叠的时候，就按照分隔线情况处理。滑动式删除这种行为可以两边滑动都做到支持：

菜单设计一般在靠下面或者直接在上面出现，并且顶对齐原来的选框，然后比例也保持一致。多级菜单的时候也是一样的处理。动态上，还记得之前的中心点开吧？

进度条有几种，包活线形的还有圆形的，以及确定的和不确定的。『要用户没有目标的白等是不道德的』

Snackbar，也可以理解为小型弹出框，屏幕上同时最多只能现实一个Snackbar。还有一种类似的，胶囊状的提示框Toast，不含操作也不能关闭。他们都有规定就是务必要非常简洁，不能出现过多两个控件、图标这种干扰，纯文字。也不能遮住界面元素，只能在底部出现。

在普通场合，以及有栅格排列的界面中，副标题应该如上处理。

关于选择框和开关，除了和之前说的一样要涟漪等物理效果和满足版式要求以外，这里涟漪一般要扩大更大的范围。

Tabs是一种节省空间的做法，并且可以便于空间分组管理。但是前提是，不能把它当成高级别的内容切换。放在地图上它就只能区别交通工具（所以它展开的起点终点会一直保持不变），但是绝对不能用来切换成设置，这样逻辑会变得很混乱：

（这也是不可取的，因为ALL和CAMERA的关系会让人引起误会）

不同风格和样式的文字或者Icon也是不能放在同一行的Tab里面的。如果出现复杂的Tabs或者空间不够用，那可以加入滚动效果：

至于动画，参考之前的涟漪。

文本框基本没啥说的，就是一些样式而已。倒是在Material Design里面，出现了『隐藏』的小标志，你可以点击然后回到字符开头。这个很创新：

提示的颜色在字数还有不同剩余的时候也有提示：

工具提示只需要文字和必要信息即可，框也不需要多余的箭头。

5.部分交互模式

选取工具：在选取文字后，弹出来的工具框必须全部大写。

手势是智能手机交互的最精髓，可以分为两大类，触发动作（比如轻触点击）和触发行为（比如双击放大、拖曳）。这部分没有什么设计要素要讲，基本上都是交互要素。

关于圆形按钮FAB一直都是这个Material经常被人设计时候玩坏的点。除了同一个界面里面不要出现多个圆形按钮以外，就是种类也不能混淆。

这种就是典型不同类的搭配会让人很不舒服。

另外，有歧义的，有破坏性（比如剪切删除禁止之类）的Icon不适合做圆形按钮。还有始终要用圆形，禁止其他形状。也严禁过于拟物化：

而且它的位置通常在接壤接缝处，不能孤魂野鬼的出现或者被干扰的状态下出现；关于设置，一般都会放在每个App中的工具栏中，而比较少使用『集中』在设置App中。还有一个容易经常被人混淆的就是什么叫设置？

这确实是一个用户偏好吗？信息和操作不是一个用户偏好。如果不是用户偏好，就不要把它当做一个设置。如果它是应用的静态信息（比如版本号、服务条款、开源证书），将它组织到一个帮助页面里。如果它是一个操作（比如刷新、切换账号），在你的应用的主要流程中为它找一个合适的位置。

这个选项经常被用户更改吗？用户每次访问这个选项要多次操作会觉得负担重吗？如果是这样，不要把它作为一个设置。可以通过把它放在工具栏或者更多操作（action overflow）中，让这个控制更容易使用。只有少于20%的用户改变这个设置的值吗？如果是这样，不要将它作为一个设置。不管是新的还是本来就有的设置，都应该问这些同样的问题。对于已经存在的设置，最后一个问题应该多考虑一些：如果这个设置项被移除了，这会对那些不再能改变这一设置项的少数用户造成危害吗？如果会，或者你不清楚，那么合适的做法是将它作为一个设置项保留。其实即便你只是个做视觉的，也务必要注意这个问题，因为直接影响用户体验。

一般来说搜索列出历史搜索、自动补全和附带语音功能能让搜索体验更美好。而开始输入后也要及时改变控件，比如『清除文本』这些。以上的界面为『持续性搜索』，下面这种叫做『可拓展搜索』（你可以理解为：本来主业是工具栏，偶尔客串当搜索框）。

6.可达性|普适性

一个产品,如果对于任何人（无论能力）而言，都是非常容易掌握、理解并可以用之来完成他们的目标的话，那么这个产品就是『可达』的。其实这个再通俗说，比如你的用户是有身体机能障碍的，请问你如何改变设计？当然更多时候这一点更像是如何引导视觉走向，降低识别的错误（比方从像素大小和对比度以及ICON设计入手），还有就是减少学习成本。