如何理解 Google 的 Material Design 设计语言？
更新：
把Material Design 官方文档又完整地看了一遍，有了些新想法，建议阅读：）
舞台上的戏法和天文里的科技：Material Design和iOS 7动效对比分析 - 表面 - 知乎专栏
原文：
一、
从苹果发布 iphone 那年开始，设计界就开始发明适合触摸时代的新材料，我们姑且称之为“数字纸”。顾名思义，它和印刷时代的纸张既有相似又有区别。
回顾历史，这里面有数条线索。
其一是手机系统。除了 iOS，早期还有WebOS。后者将程序视为卡片，将程序的多任务界面表述为扑克式的横向排列和抽拉。
另外一条线索是 app，Reeder, Flipboard, Paper for Facebook, Medium 等等，延续至今。
容易被人们遗忘和忽略的一条线索是，在 iPad 出现之后，平板杂志的出现为纸媒向数字媒体的转化提供了短时的兴奋剂，并为后来移动 UI 的发展提供了前期技术储备。
我那会刚从某本杂志离职，在论坛上和人争论还未面世的 ipad，并宣告2010年将是数字杂志的出版元年。可以想象那时的集体气氛，在 iPad 面世之后，整个世界的杂志界如何陷入一种对于未来的谵妄狂想。
我个人的兴奋点在于，触摸杂志的UI将会发生何种有趣的变化。
我记得最早期的优秀杂志是《Popular Science》和《Wired》，前者将文本和图片置于不同图层，因此可以做相互运动。后者将纸张视为火车车厢一样连接和运动的纸的条幅，并以x 轴和 y 轴的不同方向来结构专题。页面依然是固定大小，也即卡片式的——当时国外的科技圈为了解释界面上的新变化，征引了用户界面先驱Jef Raskin 所定义的两种超文本模型：卷轴模式和卡片模式，并适用于不同手势。前者适合滚动（Scroll），后者适合滑动（Swape）。
后期的杂志我没太关注，但我还记得戈尔所做的那本环保杂志，Paper for facebook 如何深受其影响，以大小卡片来解决版块和文章的结构关系。
回头看来，由印刷时代的经典媒介形式来推动移动UI的发展是颇富象征意义的。这里面承上启下的界碑是 Reeder，它是互联网时代的杂志：订阅、聚合、推送和时间线。
这是4年前（2010年）我所发的微博：
我建议所有做ipad杂志的都学习Reeder的纸张隐喻，质地和动画idea……我所谓纸张隐喻，是指内容切换如何利用纸张的物理特性，翻页早就过时了，应该在叠加、覆盖、抽拉、翻转这些纸与纸的关系中寻找适合触摸时代的设计语言。我能找到一堆国外案例，和他们相比，国内的微博客户端、周末画报、南方周末简直毫无设计思想。
这是两年前我在知乎上回答问题(
iOS 系统的拟物化设计存在哪些问题？为什么有一些人会批评？)的一段话:
问题是虚拟界面的设计所面对的原生材料是什么？它存在吗？更为本质的设计可能不在于外观，而在于组织和交流信息的逻辑形式，或者说交互。暂以一例说明，Reeder式纸张隐喻的巧妙在于，不是模拟纸张的样式和材质，而是模拟纸张的叠加、覆盖、抽拉等空间关系，如此，纸张的裂口和阴影是必要的拟物设计，它产生的虚拟逻辑更有效果地区别和组织信息。这些结合着信息形式的拟物深刻的影响了后来者，比如Safari。
我们看到，Snow Leopard里的 Safari如何借鉴使用了纸张的叠加关系， 并在 Jony Ive 的推动下在 iOS7上遍地开花。
前段日子，被 LG 收购的 WebOS 团队将他们秘密研制的新系统 Mochi 开源，我们因此看到，Reeder 的纸张隐喻如何在纸张的裂口和抽拉关系上继续启发着操作系统。（早期 Reeder 设计找不到图，可以借用 Mochi 的图来理解纸张的裂口）
而他们又是如何继承卡片式设计并结合纸张的物理性质（折角），在多任务交互上再次演进。
二、
Google Design 的名字叫做Material。Damn it！竟然就叫做“材料”，就好比说，不知道给姑娘起什么昵称的时候就叫她为“女人”。
因为“数字纸”是一种不知道叫做什么材料的纸。
我们设想一种材料，它可以承载信息，信息的更换可用同一材料的更换来实现。让我们测试石板、碑材、竹简、印章、动物皮、布帛……最后发现，如果从简洁的角度考察，纸张是最优秀的载体。因为它足够薄，薄到似乎只有信息本身。而裁剪成固定尺寸并相互叠加又是最经济有效的信息存储结构。
但是纸张要通过怎样的形式转化到虚拟世界中呢？
我在 iOS 7发布那会儿曾经做过这样的头脑风暴：假设有一个量子国，量子国使用的信息媒介是“量子纸”（Material 之前曝光的名字竟然就叫做"Quantum Paper"，Damn it！）。因为量子的特性，字迹，以及量子国所有事物并不稳定，在他们的视觉记忆中，所谓事物是雪花般的干扰颗粒中的汇聚的松散形体。那么量子国手机的UI设计应该是什么样的？
我想该国的设计师可能会这样设计：点击导航栏上的量子按钮，按钮一下子散开成无数颗粒然后再汇聚成新的页面。而如何表达菜单栏与页面之间的上下空间关系呢？也可能是在叠加面上，导航栏和页面不断地在对方的干扰下扭曲和挥发。
借用这样的思考方式，iOS6所模拟的一定类似于蒸汽朋克之类的架空科技世界。前工业时代的木头、工业时代的钢铁玻璃和后工业时代的电子屏幕混杂在一起。电影中的画面是：推开木质的赌场大门，绅士们雪茄烟雾缭绕，围着圆拱形隆起带有操作按钮的桌边，打一场电子屏幕的虚拟牌戏……
在我们所处的宏观三维时空里，纸张构成了薄与叠加层级的原型隐喻。让导航栏和页面在形式上属于同一材料：纸张，并借用阴影——我们时空的特征来表达层级关系，这本应该是最简洁有效的方式。问题是，iOS7并没有在导航栏上使用阴影效果，而是采取了我们惯常称之为毛玻璃的形式。
其实可以理解成，苹果发明了一种新的“数字纸”：“透明纸”。准确的说：“浅景深纸”。为了强调界面的空间深度，苹果用景深和视差来表达图层之间的距离感。相对远的距离就无所谓阴影。
苹果导航栏与程序页面的逻辑距离既是近的，又是远的，因为它看似属于程序内部，又可以视为临时层，和控制中心和通知中心属于同一层级。所以可以不用有阴影。
* * * * * * * * * * * * * * * * * * * * * * * * *
（补充一部分）
除了导航栏上微弱的浅景深效果，苹果还在在导航栏底边用细线来修饰，这实现了阴影的目的：区隔。页面不滚动的时候你大概会觉得它只是同一页面内的分割线，但当页面向上滚动，这条线就类似于阴影，区分了上下层。
这种手法依然来自于 Reeder，早期 Reeder 里的分割线既分割了同一页面，又能在页面滚动的时候变成纸张的裂口，而下层内容可以从裂口中穿过——有趣的魔法纸。大概苹果觉得裂口和阴影太拟物了，在 iOS7只保留了分割线。
而透明标题栏的设计应该也是来自 Reeder的标题纸条，但纸条的样式被苹果改造成无边框设计，更加扁平，并同属于半透明图层。
只是在返回手势所切换的上下页面之间，苹果仍保留了页面阴影，因为它们足够的“近”，同属于程序内部。
（补完）
* * * * * * * * * * * * * * * * * * * * * * * * *
纹理、质感、色调、叠加、阴影、折叠……在纸张的诸多物理特性中，保留哪些去除哪些，各家有各家的选择，但普遍去除了纹理、质感——来自纸张的视觉表征（苹果只在备忘录、提醒事项等程序上保留了这些），而代之以空间关系。同时在减法的基础上再做加法，利用设计的创造力，重新结构和赋予纸张更多的的物理性质。
于是作为网站的开始，Google 的下列语句可视为对“数字纸”整体理念的阐述。
Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
上述语句中，”technologically advanced and open to imagination and magic”一句触及了对于移动 UI 设计的本质性思考。
理念启发形式，而没有形式的创造，理念就无所依附，无有价值。对于移动 UI 设计来说，科技感所需要的“想象力和魔法”就是理念的核心价值。具体而言，要考察你依据理念发明了哪些新样式，或者退一步说，你在样式的借鉴和发扬上有哪些新意。从网站上的资料所见，阴影和层级、纸张拼贴变形与响应式设计、浮动按钮、触摸波纹这几项是对纸张性质的新阐发。
三、
阴影和层级
Material的程序界面层级关系如图：
可见，若要将并不铺满页面的内容纸张从背景层中分离出来，阴影是一种必要手段。
颇富新意的是，按钮的启动状态从下沉改为上浮。
但其实这并不真正新颖，类似的交互反馈也见过多次。比如 Paper for facebook 里面的小圆按钮，在点击时会短暂下沉，然后迅速浮起和放大。iOS7的图标在点击后会短时变暗然后整体放大成为程序界面。物体在受力后会给予一个反弹，这符合生活中的物理经验。
新意在于，用阴影的深度来表达层级。Material 系统规定了很多阴影的深度层级来表达不同的高度层级。
纸张拼贴、变形与多屏幕适用
逻辑上所有程序都可视为纸张的组合。但视觉上强调该特征的并不多见。WebOS 是在多任务界面里，让变小的程序呈现纸张卡片特征。Material 的纸张引人注目之处在于它经常小于整个内容界面，并作为内容界面的构件。而构件可以拼贴、分解和相互运动。
用缝隙来表达纸张与纸张的相互连接并可以整体移动：
上下层纸张可做独立移动
内容纸张在工具栏纸张下的移动
用缝隙连接的两张工具栏纸张和内容纸张，可以在移动中产生上下级关系，Google 称之为”Waterfall”（早期Reeder 的发明）
工具栏纸张和内容纸张可做整体移动
内容纸张可以转成上级纸张越过工具栏移动
可见，Google 演绎了纸张拼贴的多种可能性来作为交互的主要手段，这给app 的交互设计创新展开广阔空间。Google Now的酷炫动画算是它的提前预演 ，可以期待它在 Andriod L中的表现。
Material 纸张的另一特征是伸缩变形，这是 Google给纸张嫁接其他物质的物理规则："technologically advanced and open to imagination and magic"。
当纸张有了上述的物理性质，就可以构成适用多个屏幕的响应式设计。
当屏幕大小，也即背景层大小发生变化，而内容纸张的卡片形式却可以表现为相对固定的外观。同时纸张构件的拼贴和变形又可以保证足够的灵活性。
另一方面，纸张作为内容信息的载体和隐喻，可以通过印刷时代的手段——排版，来保持内容的一致性。不同屏幕的纸张都有同样的网格系统，并居左对齐。
Google Map 是表现Material 响应式设计的绝佳例子。
浮动按钮
网站上看到的信息不够完整。介绍Material Design的动画中似乎在说明，浮动按钮是下层纸张卡片的变形，贴在上层纸张上来提供“更多操作”的入口。
另外，按钮贴在上下纸张的缝隙之间，常见的是工具栏纸张和内容纸张，似乎也暗示着关联性的交互。
从形式上看，它来自于生活中的圆形贴纸，贴于方形卡片之上，在构成上起到点睛的作用。非常必要。如此，拼贴的概念才算完整。此外，形式上的醒目足以保证它于 Material 语言的标识性，类似于毛玻璃之于iOS。
触摸波纹
按钮的点击反馈我见过几种：常见的是变暗或者变色，如 iOS的图标；不常见的有放大，如 Paper for facebook；还有变形，如 LG webOS。
我始终记得 Jony Ive 在设计初代 iPhone时，寻找原始感觉的时候将屏幕形容为"infinity pool"：就像一个看不到边缘的高级游泳池。将屏幕表面比作水面，水面对动作的反馈是波纹，这是自然界给予我们不多的对于“表面”的戏剧性体验。最先实现的是早期的WebOS，但它拟物的设计限制了我对于水波纹的想象。直到我看到 Nexus 5上点击主页键或者搜索栏时的动画，Material Design将其扩展为全局。
Google认为构件从点击中心扩展圆形半透明的形式来自于纸张油墨涂层的隐喻，而波纹的样式则为触摸的时间和压力做出图形反馈。
我们看到，按钮的变暗和下沉被 Google替换为更加“扁平”的动画，按钮不再是一个下沉的“实体”，而仅仅是一个“表面”，其后的上升并不符合常见逻辑。纸张的触摸被赋予了全新的物理性质。
最后请观看 Material Design 的宣传片。