MATERIAL DESIGN设计规范学习心得

各种设计规范的逻辑

　　每种系统的都期望构建一个合理的虚拟世界运行机制，而设计规范就是这个世界运行的准则，让无数的应用可在虚拟世界中的合理运行，让用户在使用中可以清晰理解。

Skeuomorphism Design（iOS1-6）：

　　拟物化的设计，在iOS1-6的演进中，一直备受推崇。这类设计风格的初衷是尽可能的去符合用户的心理模型，降低用户的认知成本。在这个状态下，手机就像是一个装着各种器物的箱子，而箱子中的器物就是各个完全拟物的app。拟物化的设计就是完全将现实层级的交互关系搬到手机上。

　　比如iBooks在设计风格上就是完全拟物化现实中书架与书籍的逻辑，这样完全符合用户的心理预期，简单易懂容易上手：

iBooks

　　而下面这个豆瓣广播截图也充分反映了，拟物化设计在符合用户心理模型上的天生优势。

豆瓣广播

　　随着拟物化的发展，一些弊端也逐渐显现：

　　现实的层级关系复杂，通过手机屏幕的二维空间没办法完全模拟；

　　随着科技发展，部分物品已逐渐不为人所知，再执迷拟物，会出现反向的认知问题；

　　又比如锤子时钟的秒表计时器，相信很多人是没见过实物的，更不清楚其实际的操作步骤。对于这类人使用该app的学习成本与摆上几个button的设计，区别是不大的。

　　锤子时钟APP

　　拟物化对ui的要求极高，设计者的负担沉重，设计门槛也很高；

　　拟物化的图标更适合鼠标点击操作，而随着触摸屏的普及，扁平化的大范围触碰操作更适合触摸屏的交互。

　　Flat Design（iOS 7、8/WP）：

至于近期火热的扁平化，iOS 7与WP尽管在视觉上看起来有些类似，但是在交互的隐喻上还是有很大的区别。

WP的Flat Design，除了在视觉上将图标拍扁，同时交互的逻辑层次上也呈现扁平化。之前的逻辑层次是“我的电脑—C/D/E盘—文件夹—各个文档软件”，而现在扁平化的逻辑层次是所有的均可在一个逻辑层次上，不去特意考虑模拟现实世界已有的逻辑，他即是全新的逻辑。这就像是被拆开打散排列放置的套娃，这时它只是排列的娃娃，而不能被称作“套娃”。

Win8

　　而iOS7、8的Flat Design，在视觉上与WP的设计风格类似，但是在交互上，iOS7、8通过大量的缩放、模糊、透视，用毛玻璃的风格打造了一个全新的具有位置纵深感的虚拟世界，它通过景深来控制交互的层级。同时也通过Z轴角度的变换，保证了层级的扁平。

Cards Design（webOS）、Material Design（Android）：

　　webOS中的卡片系统，把每个程序用卡片的形式作隐喻，在多任务的操作中配合手势区域的交互手势，让多任务操作非常便捷。同时在webOS 2.0时期，将卡片的隐喻继续发扬，在多任务中引入堆栈概念，把各个应用任务用扑克牌手牌似的形态堆叠。进一步提升了操作的体验。

webOS

　　谷歌在收掉webOS一票人后，Android也融入了一些卡片的理念。此次的Material Design个人的看法就是将卡片设计进一步的规范，并且扩展到整个系统层面。原来webOS是整个应用被隐喻成了卡片，而Material Design把系统内的各种设计都规范成了一种变形的纸片。然后，谷歌在套用现实中纸墨的物理模型进行交互——“既然没办法完全在手机上用app完全模拟现实世界的逻辑层次，我把app规范到纸片上，完全模拟纸片的逻辑交互层次，还不行吗？”

　　通过纸张的折痕来分区，尽管是两块不同的内容，在逻辑上这两块的关系还是很紧密的，在表现上仍是一张纸。

　　通过边线的阴影表达这是两张纸，逻辑上这两块的关系是独立的，上层的纸片联动肯定不会干扰下层的的纸片。

　　内容主体的纸片可以在工具栏纸片下部上下移动。

　　菜单栏是一张全新的小纸片，贴在现有的纸片层次之上。

　　浮动按钮，是一张圆形的纸片，贴在除了系统bar之外的所有的纸片层次之上。

　　以上是程序界面整体的逻辑层级关系，同时将这些层次区分出来的方式就是通过纸片边缘的阴影。

Cards的阴影表现

FAB的阴影表现

Right Nav的阴影表现

　　简而言之，Material Design的纸张设计首先是将界面集成到纸片上，再通过阴影来区分多层的纸张，最后进一步通过纸片的拼贴提供了多平台统一且多样的交互可能。