舞台上的戏法和天文里的科技：Material Design和iOS 7动效对比分析
我们常看见这样的说法，iOS 7之后，设计师的工作重心从视觉表层转向了动效。这是因为，我们对UI的认知发生了整体上的变化，所谓从信息的外观转向了信息的运作方式，而动效表达了信息的运作方式。
这么说还是过于抽象了，能不能更形象更本质地描述呢？
借用Materail Design HIG里的说法，从“a high-level view”（高级视图）到“a detailed view”（细节视图）的转化可以理解成从Parent到Child的转化，同级之间用Sibling来表示。这几个词不免让人想起来思维导图软件的常见设定。事实上，任何分类系统的层级关系都可以用思维导图来表现，即信息的谱系图或者说家族树的那种展开形式。对于UI来说，假如其中的每一个节点都是一个Page view，那么节点之间的连线就是页面切换动效了，即用动画的形式来表达信息页之间的Transition，表达它们之间的“时间线”和“因果链”。
传统的UI动效更多还停留在“时间线”上，即信息之间的转化往往只呈现时间的先后关系，“因果链”还缺乏有效的叙述形式。举例来说，从主界面打开App这一交互，iOS 6应用界面的出现是从中间放大的，而iOS7里App所在的位置即是放大动画的焦点位置。信息的因果联系，从哪来到哪去，被叙述得清清楚楚。
如果从形式上观照，元素的转化其实就是方形、条形和矩形面之间的转化。Material Design多了圆形的变化，比如Floating Action Button，再比如纸表面的触控波纹。但如果从信息的层级关系上讨论，常见的交互动效大体可以分成这么几类：Icon到Page，Page到多任务，List到Page，Tile到Page，Button到Page。我以iOS 7的动效来对比Material Design，并归纳了简单的思维导图如下。比较琐碎，就不一一展开了，直接总结几个有所感受的特征，以期从总体上理解Material Design的理念。
一、“Navigational transitions”：天生我材
“Meaningful transitions”这一节里有这样一个动画：
相对于消费者仅能欣赏它的炫酷，设计师更热衷于研究如何将其实现，但我觉得这些都是不够的。我比较感兴趣问这样的问题：为什么？或者，它是什么？
从形式上去考察，我觉得动效应该解决这样两个基本的Transition问题：小如何及大？（或者，一个元素如何能够填满整个页面？）另一个就是从哪来到哪去的视线导引问题。
过去的系统UI很少解决这类问题。Windows Phone打开应用时的动画，有翻转，有不同速率的层次感，无论动画过渡多么炫酷，但从Tile到Page view的形变仍然没有表述。
iOS 7开创性地用镜头运动来描述这一形变，Layer不变，但Layer在镜头运动中的View变了。甚至，图标即应用，后者只是前者的Detail view罢了，之间的形变除了大小的变化，也有焦点的移动。（参见空间深度与镜头运动——iOS7的图层逻辑）
Material Design解决同一问题的方法看似容易想到，背后却仰仗理念的支撑。在“Material Properties”一节对Material的各种特性的定义中，有这么几点能够支撑上面动画的形变。即Material可改变形状，只在平面上展开和缩小，且可沿着轴线移动。
天生我材，就是这么任性。
平面扩展，沿着轴线移动，这两者结合起来类似于iOS 7在Z轴上的焦点运动，但是在X轴和Y轴上解决了导航问题。所以Material Design总体上定义它的动画为“Navigational transitions”。
二、高度即层级
在“Objects in 3D space - What is material?”一节中，高度被如此定义：高度是物件沿着Parent所在Z轴上的相对位置。高度是Parent与Child之间的相对数值。
所以在回答为何 Material Design 中的物体被点击的状态下，elevation 会增加？这个问题时，可以有一个粗暴的答案：因为Child在展开变为Child View之前，首先要从Parent升高为Child。
其他的回答，无论是水中升起还是玻璃后吸起，都试图从隐喻的层面上给出解释。这些都很有趣，我一直也有着类似的理解。但这里我打算抬一下杠，来更深入地辨析。我现在觉得，Material作为被建构的实体，它既有隐喻的层面，也有反隐喻的层面，换句话说，它有反直觉反经验的一面。与其说它符合了某些现实，不如说它是数字时代信息呈现方式优化的结果。
现实的经验是，Parent在上，Child在下，这才是符合直觉的。打开一本书，先是章节目录，翻下去才是目录的Detail view，即具体章节的正文。但是在数字时代，经验被重塑了。点击页面中的链接，浏览器当前标签的右侧出现新页面的标签，同时页面立即切换到新页面，“向下翻寻内容”的中间步骤被省略了。
iOS 7更进一步用触摸手势来连接层级。Detail view page从当前页右侧滑入。iOS基本界面首先是一个横向的思维导图，即左侧为Parent，右侧为Child，这构成了iOS自诞生以来的交互基础。只是iOS 7进一步给出Z轴上的层级，即页面右侧滑入的同时，处于上级高度。借用刚才书的比喻，你可以把它理解成：省略向下翻走当前页的步骤，新页直接从右侧出现。
那么Materail Design式的书籍呢？目录即章节。因为天生我材，目录上的章节List可以直接向上浮起，展开Detail View变成章节。
再换一个角度补充说明。注意啊，越来越深刻了哦。
我们把按钮常理解成Launcher（启动器），按下按钮，上面不知道什么地方弹出东西，一下一上的两个动作产生因果。但在数字时代，尤其是触摸时代，按下按钮这一步骤也有了被省略的趋势，产生交互的不再是按钮而是内容本身。iOS式的菜单列表，菜单不是Tool Bar或Tab Bar之上的按钮，而直接呈现在内容的区域并可交互。前面谈到的iOS 7主界面，图标不再是Launcher，而是应用本身。类似的方式，我们也可以说，Material 的特性使它不再视目录为启动器，目录即章节本身。
有了上述的讨论，我们可以大体理解高度在Material Design动效中提纲挈领的作用。但这里似乎存在一个悖论点。即Navigation Dawer的存在。如果高为Child，低为Parent，那么Navigation Dawer何以作为Parent菜单却置身高层？对比iOS 的Mail应用和Android L的Gmail应用，可以辨认出二者的明显区别，iOS的层级关系更容易理解。
但从另一个维度似乎又可解释得清，即Material 的被选择即至上的特性。另外，Navigation Dawer是预先置于页面左侧的，触摸左侧边缘即弹出部分，这不同于页面的Child层级上浮。
三、Y轴
在“Meaningful transitions - Animation”这一节里有这样一个示范动画，我认为是一个错误。大概是因为Material Design HIG出于之前，而Android L正式版出于之后的缘故，一些细节没有来得及更正。
因为这是典型的iOS式动效，不符合我理解的Material Design 式Style。Android L里大量下面这种动画，即Detail view从中上部向上移动，同时叠加一个Fade动效。类似的效果我们在近两年的第三方应用上也大量见到。
（从9分55秒开始，可见Android L正式版的通行动画形式）
假如说，iOS在X轴上视“左”为Parent级，那么Material Design则在Y轴上视“上”为Parent级，由此建立了与iOS的差异性，这是可尊重的努力。
比如Android L里，应用Icon到应用Page view的变化。这里的Icon依然是Launcher，应用从下侧向上滑入，并且在多任务态里呈高低叠加的状态。
我们看到，这与iOS的多任务效果有着微妙的差异。iOS 7应用内的Page是高低叠加，但应用之间是共处于同一平面的X轴。而Android L则将应用Page和其他应用共同统一在Z轴空间，也因此可以将Chrome的多标签页也同样呈现在Z轴上。
这涉及到另外的问题，即应用所在容器的空间深度。
Tips：对于Android L交互的改进意见
1、既然Page view的切换方向是上下而非iOS的左右，建议将系统导航栏三角返回键的方向改为向下，建立“返回”是向下的认知。这样，尤其在多次返回导致应用退出的操作下，方向体验趋于一致。同样，左上角的返回按钮也要重新设计。
2、在App Bar上设计向下滑动的手势，向下滑动App Bar可以退出Detail view，或者进入多任务界面。这样的操作虽然有些问题，比如位置太高，比如容易碰触其他键位，但有利于整体的认知结构。印象中在早期阶段，谷歌设计团队好像有过类似的考虑。
四、深度是有限的
在“Principles - Layout”这一节里提到了容器的概念。应用的Z轴空间并不交错，比如一个应用的列表消失并不会导致在另一个应用里出现。这很容易理解，但给出的示意图却会让人误解。
这样的图示似乎说应用之间是水平的并列关系。这个可以理解，但看起来似乎与多任务界面是矛盾的。在分析iOS的空间深度里，我曾将多任务界面描述为任务的“时间态”，即多任务的罗列是时间的先后关系，而非空间的并列关系。但我觉得，Android L没必要做出此种区分，因为多数应用容器的深度很小。逻辑上，多任务的高低叠加关系在Z轴深度上是合理的。
应用容器的深度，我们根据Material Design的设定可以计算出来。（大概几个到十几个DP）也可以根据使用环境的感受得知，比如“Objects in 3D space - What is material?”这一节里说电视有比手机或桌上型电脑更大的深度。
借用这样的思路，我们可以看到，iOS 7的应用深度显然要比Material Design大得多，不如此无法展开放大和缩小的镜头运动，也不会出现浅景深和视差效果，多任务应用也是并列而非叠加的样式。Apple Watch甚至给出了天文的隐喻，方寸之间容纳的是宇宙空间的宏大布局。
回头看来，对iOS 7沿焦点放大的动效给出多高的赞誉都不为过，套用一句滥俗的话来说：苹果在下一盘很大的棋。根据这一动效所蕴含的在空间上的可能性，也参考近期苹果曝光的专利和招聘信息，我几乎可以断定下一步就是3D界面，这可能包括手机上的裸眼3D，悬浮手势，也包括电视上的3D体感遥控技术。对于后者，我已有了若干心得。在这样的布局中，镜头运动的特效在展示3D效果上有着天然的优势。
同时，黑色也越来越将成为界面的主调，这已经体现在新iPhone和Apple Watch 上。
返观Material Design，它对于空间深度的思考有所局限，比如它仍然缺乏一个类似于天文宇宙式的隐喻。我觉得这多少影响了它在UI上的前瞻性。Android Wear的UI做得非常差，Android TV的界面也很一般。
那么，如果在感受上去体会Material Design，假如非要给出一个比喻，我觉得是舞台感。界面的切换犹如戏法，也仿佛道具的转场，灯亮灯灭，唱念做打。它是对现实的模拟，具体而微，整体上的空间是有限的。
