序言
上回Android分享说到Android的发展史和Android的技术探索，中间可能有人听到我们经常提到的Material Design这个东西。其实在我们开发与产品谈论Android UI交互设计问题时，就经常会引起争论，因为Android上一些UI风格貌似是让人难以理解的，有时即便是很正统官方的UI效果，也会让产品难以接受。所以我这次来给大家分享，到底什么是Material Design，到底什么是纯正的Android设计风格，还有为什么Material Design让很多人难以接受。
Android 7.0 Nougat
Android程序员的尴尬
Android程序员一直面临着的持续存在的一个尴尬，那就是我们非常难以说服UI设计师把Android的UI设计得像Android一点，而不是从IOS移植过来。比如下图，这种理由都放在了Android的招聘说明中，足以证明这一条给我们的感受：
薄荷app公司的Android招聘
当然，造成这种现象的原因有很多，后面会提到一点，面对这一点，我们也只是吐槽，因为很多时候我这并不是我们开发可以决定的。
什么是Material Design?
1. 名字怎么念
我猜Material Design在某些时候让人记不住的原因可能是因为这个单词太难念了，而且很多时候我们的英语又不太标准，所以在这次分享前，我想给它找一个优雅的中文名，结果发现太难翻译了，网上大家也都是用英文名的。
Material中文名该叫什么
于是我在程序员群里询问，我发现呼声最高的是“妈蛋”之类的，但叫起来比较那个……当然比较优雅的这个“天工开物”又有点太装逼了，如果照着本意翻译，叫“物质设计”，“材料设计”，“拟物设计”什么念起来也很死板。其实Material Design用中文来翻译传达不出来确切的意义，所以大家觉得哪个名字好……你们想叫什么也无所谓，这里我还是暂时叫“MD”吧。
2. 从何而来
Google I/O 2014 发布 Material Design
Google发布MD，一方面是因为从Android诞生到Android4.0，Android应用的设计没有什么清晰统一的规范，而且设计风格没什么亮点和创新，大部分是IOS+Android的设计。另一方面源于IOS7的成功带来的压力，iOS7力推扁平化，并在推出后半年内得到了93%的安装率。
其实我自己使用IOS后，相对于Android4.X的UI交互，会感觉到IOS确实是非常统一，精细，协调而且顺畅的，使用过程中很多地方非常人性化，比如说连list滑动的感觉和到头的效果都觉得比Android舒服。而Android4.X虽然UI已比原来好看许多、精细很多，不像2.3那样跟个java机一样，特别粗糙。我是从2.3.5开始用Android，确实越来越好看了，不过慢的问题始终存在：
Android2.3
Android4.3
Android5.0
但相比IOS还是显得很冰冷机械，比如说你按一个按钮下去，它就闪一下蓝光，或者变个色值给你提示，而且因为各大手机厂商为自己的手机定制化ROM，导致每一个Android手机的UI表现上都略显不同，这也是让用户很苦恼的一点，同样是Android老是变来变去的。也正因为这点，对MD的普及也造成了很大影响。
3. 是什么
我们可以看一下官网MD首页的介绍：https://material.google.com/#
Google说MD的目标就是——创造一种视觉语言：它把技术和科学上的创新性和可能性揉和到了经典的优秀设计的准则中。
Material Design的HIG
- A material metaphor(物质抽象，象征)
Material源于真实的触觉，受到对纸墨的研究的启迪，以及在技术上的想象和魔力。
Material的表面和边缘提供类似真实的视觉暗示。使用跟触觉属性相似的效果使用户可以快速地明白它的功能意义。
光、表面和移动的基本原理是表达对象移动、交互和存在于空间并彼此产生关系的要素。逼真的光线展示了缝隙、空间分隔，并指示移动的部位。
MD_光线
MD_阴影
MD_涟漪反馈
这里面比较好玩的是一个 Z 轴的概念：
通过布局和阴影，让屏幕上的元素产生层次感，这种层次感可以让使用者轻松理解元素的重要性及相互之间的关系。
阴影对MD来说是一个很重要的东西，但不知为什么好像不太容易被理解，有一次产品甚至觉得这个阴影奇怪想要把它去掉。（这个也是用户接受度的问题吧）
阴影与高度
文档中对高度和阴影之间的关系做了很多规范和说明：
- 明显、图形、表意
纸质设计的一些基本元素（排版、表格、空隙、比例、颜色和图像引导视觉处理的使用），由此创造出了层次、意义和焦点，带来的不仅仅是视觉愉悦感。慎重的颜色选择，边缘的视觉效果，大比例的排版，和表意的空白创造了一个显著的图形的界面，使用户沉浸在体验中。
比如颜色与字体排版
Material Design的颜色概念大多借用了扁平设计的趋势。它配色大胆明亮。
根据Material Design的官方文件：“色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。”
一些颜色
甚至连文案也有规范
设计规范里对各种效果、动画、空间、布局的使用场景，外观，交互方式做了非常严谨的规范，比如卡片：
- 有意义的动画
动画将用户作为首要移动者进行考虑和加深。最初的用户操作初始化了动画，改变所有设计的形态。所有行为发生在单一环境中。物体呈现给用户，不会破坏体验的连续性，即便是当它们进行变换和排列时。
动画是有意义而且合适的，用于聚集用户的注意力和保持连贯性。反馈是微妙而且清晰的。过渡也是高效而且连贯清晰的。
比如说动画中共享元素的概念：
md_motion_共享元素.gif
网易云音乐就把这一点体现的非常好，过渡会显得很自然：
md_motion_共享元素.gif
每一个模块都有相关的资料可以下载，设计师们可以来用，颜色啊，字体啊，控件啊什么的。
Material Design文档里的每一种元素都被描述得很详细，从如何创造它们到放置于屏幕的哪些位置。你简直难以想象它有多细致。
- Material Design提供的一些控件
官方提供了很多控件，而且也有越来越多的开发者开始使用，大家用Android机的话也应该很熟悉：
1.ToolBar
Android 4.X 时代的 spinner 被直接升级成 Menu，在原有位置扩展展开的样式更容易理解
2.抽屉
从Z轴上看 Side Nav 是在最顶层。抽屉曾经很火。但现在基本没什么用了。当然也有在用的，比如网易云音乐。
3.提示
用 Snackbars 取代了 Android 4.X 时代的 Toasts，可以选择是否包含一个 actions 按钮
4.按钮
规范对所有的按钮做了重新定义：
Floating action button：浮动按钮，是页面中的常住按钮，页面中只能有一个，代表了该页面最核心的唯一操作
Raised button：用于图文混合展示时，需凸显按钮时使用
Flat button：用于对话框
这个浮动按钮是个比较亮眼的设计。云校园中也有。
5.对话框，云校园现在大部分的对话框都属于MD风格的，是在4.0版本加上去的。还有一小部分是为了满足特定需求自定义的，比以前好点，以前的对话框是即有IOS的，又有Android的。
6.菊花：
7.下拉刷新，RecyclerView
云校园通知模块全部可以看到。下拉刷新的样式，recyclerView删除和加入item时的动画也是符合MD风格的（元素与元素之间拆分和合并的感觉如纸墨一样）
随着时间，MD越来越流行，网上资料也越来越多：https://github.com/lightSky/Awesome-MaterialDesign
而且MD也是适用于web的，比如Android的网站；
Android官网.png
MD.png
MD的路还很长
虽然说MD发布已经两年了，而且很多app也已经部分MD风格了，但是完全MD风格的app其实还是少的可怜。而且Android碎片化很严重，机型和版本众多，适配方面要考虑很多东西。我们今年才敢放弃4.0以下的用户。
而且MD如果只是部分MD风格，整体却不是MD风格，看起来也会比较别扭。
用户的习惯是很可怕的
- 微信案例
云校园主界面的风格是跟微信类似的，但微信早期版本是完全跟IOS版本保持一致的，因为当时Android UI规范比较混乱。用户量起来之后，用户也就习惯了这种风格。有人很奇怪微信这么大的一个app，为什么Android版不使用Android风格，其实在微信并非没有尝试过，在Android规范越来越完善之后，微信在5.2版本曾经尝试了使用Android风格，就像下面这样：
微信6.1输入//switchtabpos指令后
为什么这么尝试呢，就是因为Android设计规范中是原本是提倡把tab栏放在顶部的，就像我们经常见到的这样。因为Android的三大金刚键在下面，tab放下面像双下巴一样比较累赘，另一方面虚拟键的出现可能让下面的tab造成误点，还有一点，因为放在下面的tab本质就是IOS的，是iOS-like tab bar，而且它还会占用较多的屏幕空间。
但结果呢，差评如潮：
知乎关于Android微信5.2的提问
为什么呢，就是因为用户不习惯，如果你体会不够明显，那么再看一看一个Android大神完全遵从MD规范重新设计的微信界面：
一下子让你用这样风格的微信的话是不是很难接受……
微信为了避免陷入无意义的界面设计争论，所以下个版本立马改回去了。况且微信本来就不是一个靠界面设计取胜的产品。所以MD这么久，微信也并没有再轻易尝试。可能从产品经理角度看来一个产品的UI是否好看，是否有相应的风格貌似优先级并不怎么高。
但微信的很多地方还是在向MD靠近，比如说对话框和最新的Snackbars提示，控件部分就有讲到。
直至6.1版本，微信还保留了一个彩蛋指令：//switchtabpos
现在下载不到了，我们的oppo测试机上，因为预装的是微信6.1，所以还可以实验出来。顺便说下微信其他有意思的隐藏指令：
第二个是只有Android才有的，也是我自己觉得最有用的，因为我们经常发现在阅读微信网页中的文章时，收到了微信聊天消息，这时候看到了一半，不想回退出去又想看聊天界面，就可以用这个指令，他可以让你在任务管理中切换webView和聊天界面。
但现在看来，放上放下并不是什么重点，重要的还是风格。因为Material Design中提供了专门的Android风格的底部菜单栏BottomNavigation，而且对怎么用，怎么放都有明确的指示说明。知乎一直以来是紧跟Material Design设计风格的，可以看看最新版的知乎里面的BottomNavigation：
贯彻MD的知乎
当向上滑动列表时，BottomNavigation和FB都会隐藏起来。
那么问题来了，为什么Material Design流行得这么慢？
萌.gif
1.Android控制力不如IOS
虽然谷歌已经推到Android 7.0，但5.0，6.0才慢慢大范围流行起来。其中更深层次的原因是国内Android生态圈受谷歌的影响很小；
2.App的界面交互要大改，用户需要花费一定时间和精力进行学习跟适应。
作为跟随规范的先驱，你会得到呼声，也有可能会失去用户；不理规范保守审慎，你会留住用户，也可能会招来嘲笑和指责。
（比如对6.0权限问题的处理，我们的办法时暂时不去升级兼容，而是保留现状； 我们也会发现Android如今都出到7.0了，大部分是市面Android机的UI风格和以前的4.4相比，并没有特别大的变化）
3.开发成本高，很多界面代码需要重写；设计成本高，很多设计细节需要变更；用户审美也不一定能接受，对MD审美的争议也比较大。
结语
即便如此，随着Android的发展壮大，MD一定会越来越普遍，今天的分享还是很有意义的。
网友评论