一.Material Design简介

Material Design是由谷歌的设计团队创建的一种设计语言，旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉，帮助设计师们创建易用性和实用性较强的网站和应用程序。这个概念基于一个不断更新的公开文档。该文档会随着域界以及技术更新而更新。

在Material Design文档中，它有无数独特而有趣的特性，但也许是最明显的是它提出了平面像素的Z轴概念。事实上，它在扁平化设计上面增加了一些拟物化，创造 了一种一群二维平面飞机浮动在对方指定的海拔印象。

然而Material Design并不是完美的设计文档的特征。它也并非一成不变的铁杆定律。试着更多的把它想成问我未来设计的物理框架和模板。它的设计具有普遍适应性，就像安卓穿戴手表一样，能响应屏幕的各种尺寸，甚至是不同形状。Material Design的应用在其他app开发商中也在推广。

Material Design语言的一些重要功能包括系统字体Roboto的升级版本，同时颜色更鲜艳，动画效果更突出。谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计，经过了重新设计的Gmail，界面更干净、更简约。在安卓平台上，这种新界面被称为Material，支持各种新动画效果，具有内置的实时UI阴影，以及可在不同屏幕之间切换的hero元素。

设计目标

创建一种新的设计语言，糅合经典设计原则以及科技创新性与可能性。

创建一个跨平台和跨设备尺寸集成系统。移动规则是基本的，但触摸、声音、鼠标、键盘都是最佳的输入方法。

设计原则

材料即象征：视觉线索必须立足于现实。

醒目、形象、策划性：基本的设计原理（字体、网格、空间、尺度、色彩和图像的使用原则）必须引导视觉效果。

有意义的移动：移动的物体或动作不应该干扰用户体验，而是保证用户体验的连贯性。

Material design的设计规范包含很多方面。它可以细分为大量的具体概念和处理办法。Google制定出的是一套如何创建动画，样式，布局，部件，图案及可用性的详细规范。

这些规范源于Material design提出的对基本物理特性、形变特征和运动特点的理解。其指导理论是将材料元素置于基于现实的、近似的3D空间内。从美学角度来说，Materialdesign介于扁平与拟物之间。

二.Material Design的特点

1.Z轴空间

Material，顾名思义是“材质”的设计。代表的材质是“纸张”，由此衍生出卡片（Cards）／纸片（Chips）等组件。

由于取材于现实世界，Material很讲究反应出组件之间的（物理世界）层次关系，典型代表就是投影（Z轴）的运用。通过控制元素的投影来反映其海拔高度，z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。

2.动画

Material强调动画要贴近真实物理世界，所有的动画都与现实生活有关联，具体形象指示性强（但过多的动画难免会显得繁琐低效）。例如，点击任意的元素，都应伴随着水波涟漪的动画效果；界面切换的过渡动画中，对象会放大缩小变形折叠（Material的材质特性），或者发生Z轴的变化（例如进入二级页面时，二级页面沿Z轴上升浮起伴随有投影效果）。

3.配色

Material提倡在大片区域使用醒目、高饱和度的色彩以表达应用的张力，尤其是主要操作按钮以及组件（如开关），特别需要用到对比度强烈的强调色。

Material建议基础色的饱和度为500，其他元素以此为基准调整饱和度，而主操作则配以强调色反（或作补色）。

三.Material Design的优缺点

优点：

l  三维安排让程序更易于互动：比如阴影被安排用来显示分层。

l  和扁平化设计不同，Material Design都有详尽明确的一套参考，没有什么需要你去猜测。

l  如果你想开发一个多平台的东西，比如一个网站和一个安卓应用，Material Design对所有设备都提供统一的体验。这样的话就会增加用户使用方便性，进而巧妙地促进你的品牌化。

l  如果你对动画感兴趣，Material Design是个不错的方法因为它自带了许多这一类型的动画。没有它们你就只能动手画了。

 

缺点：

l  FAB（the Floating ActionButton）是「Material Design」的一个很重要且明显的特征，但是在真正的设计中，当由动效或形式掌控过多的时候，可能会造成难以预料的低效率。

1、  它打破了沉浸式体验。在一个图片浏览类应用中，FAB充当的角色是重要的“搜索”，这样的使用自然没错，但它因为其浮起的样式不可避免的将用户拉出沉浸式体验。

2、  它挡住了真正的内容。早年Scott Hurff已经提出过我们的可及区域与视觉遮挡，FAB的出现更是让原本应该显示内容的区域更大程度的牺牲。

3、  它可能重要但它并不常用。由我们熟知的2/8原则，用户在20%的动作上花去80%的时间，作者以Google 邮件为例，FAB在这里充当的角色是撰写邮件这一动作，从直觉上来说它十分重要，而用户实则在手机上大部分时间是阅读邮件，FAB使用的频率并不那么高，相反它牺牲了更多的内容显示空间。在大屏幕内的使用时，因为FAB是相对精确的点击操作，它也会给用户带来更多的操作成本。

l  Material Design非常容易使应用界面同质化严重，除了配色外甚至很难分辨是哪个应用。

l  目前的Material Design过度动画太多并且一部分动画毫无意义。比如按钮被点击的水波动画，实在是完全没必要做的那么花哨。

l  不管喜欢与否，Material Design不可避免的和谷歌关联。如果你想使自己远离这点，为你的网站或应用创造一个独特的特性，使用谷歌指引来实现要困难的多。

l  不是所有的系统都能实现预期帧频。而且你很难知道该怎么做才能提高那些不可实现者的可用性。

l  动画会耗尽手机用户的电池。

l  强制开发者们遵守设计指南可能会进一步扼杀个体创造力，阻碍更多动画和装饰特点的发展。

四.Material Design的成功设计理念

1. 颜色与字体排版

Material design的颜色概念大多借用了扁平设计的趋势。它配色大胆明亮。字体排版也跟simple sans serifs字体一样遵循扁平主题。

根据Material design的官方文件：“色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。”

看看色彩章节，你会发现有这么多种颜色。这一点非常棒，有以下几点原因。首先，大胆的用色可以给Google的界面赋予个性化。创建一套非常妙的配色方案没什么不妥。这是一次很好的改变，因为iOS7问世时，它的主色是浅灰色系。而且，Google建立这套色彩指南的方式非常清晰，是使用颜色的极佳参考。

面对现实，当有太多色调可供选择时，颜色的确可以很吓人。虽然Google提供了广阔的颜色选择范围，它也提供了如何使用的指南。Google开篇显而易见地陈述了：限制你的颜色选择，有需要时使用多种深浅变化，并且明智地使用辅助色。

字体排版指引同样基础。Roboto字体是所有应用程序的默认字体，也是所有安卓应用程序的默认字体——谷歌甚至还提供了字体下载链接。像行高和颜色这类是需要特别定义的，为了尽可能给用户带来最佳体验。所以Roboto字体被重新定义，来跨平台提升它的易读性。而且，一段文字呈现的方式至关重大，因为缺口和隔断使得阅读更困难。注意去除这些隔断文字，这大有帮助。

2. 布局和结构的设计

material 设计项目的基本布局和结构源于印刷品的设计概念。鼓励设计师创建和使用基线网格和数学结构把控整体的布局。

Material Design中，基线与之前有所不同。一般来说标题和其他文本项会对其到“第二基线（Keyline 2）”（手机是72dp，平板是80dp），这种对齐规则让界面看起来清爽、具有印刷设计的阅读节奏感。让用户得以快速阅读信息，比较符合格式塔原则。

一个单独的底层设计系统，能够有效组织交互行为，利用空间。多种设备可以使用同样的底层系统，但是显示效果不同。每种设备上的显示效果会根据屏幕尺寸和设备交互特性而定。色彩、图标、层级感、空间关系仍要保持一致。

为了呈现集合性质的内容，Material Design提供了很多容器：卡片、列表、网格系统（自备梯子）。但是既然我们展示的是性质相同的内容，所以采取卡片不合适，因为卡片的圆角和阴影会添加太多视觉干扰，无法高效编组呈现内容。自适应网格是最好的选择，我们可以定义变化栏数和屏幕尺寸 (（源代码 ）, 也可以很方便的添加文本信息。

 

3. 基本元素

material design文档里的每一种元素都被描述得很详细，从如何创造它们到放置于屏幕的哪些位置。

4. 可用性和互动性

Material design文档通过一个非常有用的方式让我们对交互性模式，可用性模式，以及可访问性问题上开了眼界。虽然实际的美观性对经验丰富的设计师来讲是必不可少的，但可用性和交互性的概念也需要引起重视。

它的交互模式部分特别有用。它详细介绍了一系列想法，即让一些元素通用于整个设计。这些是用户期望使用到的一些最基础的工具，并且这些工具如果能以特定的方式为所有用户们发挥作用，无疑是有益的。

易用性则是另一个重要问题，material design文档为易用性提出并提供了更好的选择。例如确保最小屏幕元素点击区域是48×48像素，不至于太小，使一般的人类手指可以对它进行操作。有一些则更具体，比如确保链接都有恰当且有意义的标题。

“让链接有意义。每个链接的指向是否清晰？类似“点击这里”这样的常见链接文字，并不能解释链接指向何处。把目的地放入链接自身当中。对于“点击这里”有个更好的解决办法，是使用具体的链接，比如“设备选项”。有些无障碍模式让用户只看到链接，忽略其他内容，为了使导航更加有效。”

5. 通过动效来建立有意义的关联

Material Design大量强调设计中的动效和动画。重要原因之一，是它可以让用户清楚看到自己的操作如何对界面产生影响。Google举了个向相册添加图片的例子。如果你看看下面的这个例子就会注意到，上方覆盖的层有淡入淡出效果。出于两个目的：清晰与愉悦。首先，它建立了一种视觉层级，用户认为它在界面的上方。尽管这是技术上实现，并非真实的，因为界面并不分层；但它使用户以一种更简单的方法理解界面。这就是清晰。

将它与第二个无过渡、界面突然出现的效果相比。它显得很突兀——这就是建议使用淡入淡出的第二个原因——它也没有建立任何视觉上的认知。新的界面突然出现，用户的操作和界面的视觉变化有何关联，它没有给出任何解释。错失了一个愉悦用户的机会。

五.Material Design的成功设计案例

1. Runtastic Running and Fitness

2. Google Settings

3. WhatsApp

4. Evil Rabbit

5. Weather Timeline

 

六.Material Design的矛盾UI设计

Material Design中UI元素所处的空间，大约就是手机外壳所占据的空间。所以z轴的取值范围，应该只有手机后背到屏幕玻璃这短短的一段。那么，只要不是太小的纸片都无法在此空间限制内折叠或翻转的。

对空间的这一设定好处有二。

1. 直观。

UI空间与用户所在的物理世界在尺度上统一，使得用户可以把UI元素想象为在物理世界中真实存在的物体。（拟物化设计有同样的优点）。

与之截然相反的是大多数3D游戏，屏幕内是与物理世界独立的空间，而屏幕是连接两个空间的视窗/portal。用户无法把屏幕内的对象与物理世界关联。相反，为了有效地操作屏幕内的空间，用户需要忽略物理世界（“沉浸”）。

2. 隔离。

GUI很早就使用“按钮”这一隐喻。然而在触摸屏时代，视觉上突出于屏幕并且可被“按下”的按钮与触觉上光滑、坚硬、只能被“触摸”的玻璃形成了认知上的不协调。（此前，由于鼠标操作的间接性，以及鼠标按钮本身可被按下，不协调感反而较弱）

通过把UI元素明确限制在屏幕玻璃后方，实际上回避了这个问题。进一步，“点击”操作的视觉反馈被设定为与“按下”相反的“浮起”，隐喻是指尖在“吸引”UI元素而不是“按下”。

这里也引出了Material Design，乃至于整个扁平化的一个风险：如果屏幕触觉反馈技术实用化，UI元素必定会回到“突出于屏幕之外”的立体化设计，今天的所有恐怕都要推倒重来。

不过从这个角度，Material Design还是有很多矛盾。

1. 虽然z轴受限，x,y轴仍然可以无限滚动，这和“UI空间与物理空间统一”矛盾。

2. 电视上允许更大的z轴范围，但如今电视的厚度也不大。可能是认为在电视的观看距离上，空间统一的意义变小。

3. Google自己的应用多有违反规则。例如：

a) Play Book有3D翻页效果。

b) Google Now桌面壁纸有视差滚动效果，而这要求壁纸离屏幕非常远。

c) Android 5.0的任务切换界面同样有巨大的z轴深度。

d) 任务切换界面如果从桌面呼出，则没有任何变形过渡。

七.移动端人机交互的注意事项

1.安全宽度与扩展区域让页面适应主流分辨率

与PC上网页的做法一样，确定一个安全宽度，把重要信息控制在640PX宽度内（以iphone分辨率为安全宽度。目前主要浏览器在iphone4S下的首屏高度如下,可以根据具体页面投放的渠道做响应的首屏高度

2.控制图片的大小

专题的头图一般有很强的视觉，对于手机用户来说，加载一张图片的等待时间比PC上成本大很多，如果一个页面加载时间超过5秒，70%的用户会选择关闭，那么再出彩的专题也没办法呈现再用户面前了,所以需要对设计稿做折中的处理。

在做头部的延展区域（超出640px范围），推荐使用纯色，渐变，可以平铺的素材，以便于减少头图的大小，提高加载速度，并且延展区域可以无缝连接。模糊的背景可以最大限度的压缩图片质量。

3.字体

手机中的字号一般上电脑中的两倍，一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中，也要使用iOS和安卓默认渲染的字体，以便更真实的还原真实环境。在规范手游移动版专题中，主要字号控制在3个，大中小都有一个区间。避免随意用字体字号，并且字号必须上整数。

4.控件交互区域适合触控

手机专题的主按钮高度大于80px，并且根据活动的需求放在首屏内。文字链接上下的间距大于80px，手指在屏幕上热区最小感应是44px。

5.移动端网页少用跳转

手机用户的网络环境不如PC用户，页面的跳转会对用户产生更大的心理效力，如果在手机页面中能吧信息合理的展示在一个页面中最佳。如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等。减少用户产生的不安全感。

6. 用户界面应该是基于用户的心理模型，而不是基于工程实现模型

把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。

#左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型；#右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。

7. 培养用户使用情景的思维方式做设计

我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。

对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比：

微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友。

米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现。

8.尽量少的让用户输入，输入时尽量多给出参考

移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。

9. 全局导航需要一直存在，最好还能预览其他模块的动态

全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。

全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义，因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。

Facebook 的朋友请求，消息，通知都是采用全局导航的方式，就是面板设计的丑了些~

10. 提供非模态的反馈，不打断任务流

模态弹出框的书面名称在iphone OS中称作：Alert-box，在Android OS中称：Pop-up box, 我们都知道弹框会打断任务流，所以在有限的屏幕上怎样让这些弹框弱化，或者说优雅、绅士的提醒用户，这个需要设计师来定义。

模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作；非模态不会把提醒做成弹框，可能会处理成List Notification, Toast list等方式来提醒用户。

Gmail是第一个把删除的模态弹框设计成ListNotification这种方式的，提醒用户撤销刚才的删除操作，这种非模态的处理，让删除的流程更加顺畅和轻松自如。

11. 不要让用户等待任务完成，用户还要发现更多有意思的地方

移动互联的核心就是给用户带来移动体验的方便和高效，这是移动互联网Apps需要考虑的，用户在使用你产品在很多情况下都是碎片时间，所以在设计上尽量让用户在短时间内熟悉我们的产品，知道这个产品的诚意，特别是某些等待界面需要设计，不能把一个很枯燥的等待界面呈现在用户的面前，那用户很快就会换其他apps。

在Instagram 拍完照片后，点击上传后，它的处理方式是回到首页的位置，告诉你的照片正在提交，并不是显示一个上传进度的界面，让用户看那上传百分比。因此，我们在设计米吧上传歌曲文件时也只是告知用户后台正在帮你上传，叫用户放心，用户自然就会去玩其他的功能，没有让用户焦虑的等待，等上传完毕时，我们再用Toast list通知用户已经上传成功，这样把查看上传结果的主动权交给用户。

12. 自动保存用户的输入成果

在移动端，由于输入面板的复杂性，而且触摸输入没有物理按键的反馈自然，特别是手机上去输入一段文字或者信息，对用户而言本身就是一件很痛苦的事情；对产品而言，用户的在你的产品中输入是一个很值得庆幸的事情，所以设计人员需要让你的apps自动保存用户的输入成果。

微博官方的手机客户端在用户输入信息后，点击左上角的叉时会弹出Action sheet来询问，确认是否要放弃，或者保存为草稿；path的处理则更为人性化，在处于断网的情景下，用户依然可以发布照片和文字，当然后面联网成功后，系统会自动上传，只是发表时间是连网后发布的时间点；Instagram的评论也很友好，在断网或者网络情况不稳定的情景，用户输入的评论依然可以发布，后面会有一个叹号提醒用户稍后发布或者重试，提升了用户参与的积极行，同时活跃了社区。

13. 为了程序响应的速度，设计有时候需要担任掩护的作用

科技并不是万能的，技术依然是移动互联网应用程序最需要优化和完善的，作为技术的盟友我们设计人员也需要辅佐他们，让用户觉得程序原本就应该是这么运行的。特别是程序响应的速度很多时候不光是技术的问题，与网络环境也有很大的关系，这时候设计人员需要考虑这些客观存在的情况，帮助程序来掩护这些瑕疵，让用户感觉到在使用时是流畅的。

#随后实现# Instagram帖子“赞”不管对参与者还是帖子作者都是激发其积极性活跃社区氛围的重要功能，所以在程序的响应方面一定要具有可用，易用的特性，我们看左图中，“赞”的按钮已经现实“已赞”，同时我们看红色框内的“菊花瓣”就知道后台在loading赞的数据，所以这就是设计的巧妙之处，先让用户感知到程序是非常快速的，而不是等loading完之后再显示“已赞”；

#提前传输# Instagram中发布帖子的时候，用户处理完照片点击“上传”按钮就看到中间的界面，这时候界面是让用户去为自己的帖子输入一个主题，或者去设置分享等功能，同时我们可以看到红色框中的“菊花瓣”，很明显后台已经开始传输刚才上传的照片了，所以当用户在点击“完成”时，数据只需要上传剩下的一部分，让用户感知上传很迅速；

#边唱边完成# 把伴奏和用户的歌声合成为一首音乐时需要后台处理大量的数据，如果分步做就要让用户等待比较长的合成时间，为了让用户不用枯燥的等待合成，我们需要后台在用户唱歌的同时，后台就已经开始把唱过的伴奏和歌声合成。

 

参考资料：

1. 《关于谷歌Material Design：你需要知道的一切》

http://blog.jobbole.com/84841/

2.《比较ios7和material design，他们有什么不同？》

https://www.zhihu.com/question/24365423/answer/35020636

3.《Material Design有什么缺点》

https://www.zhihu.com/question/24431206

https://www.zhihu.com/question/26807340/answer/34100608

 

4.《涨姿势！扁平化设计和MATERIAL DESIGN有什么不一样？》

http://www.uisdc.com/flat-vs-material-design

5.《Material Design设计文档的4条训示》

http://www.woshipm.com/ucd/104581.html

6.《交互设计原则有哪些？》

https://www.zhihu.com/question/19812118