Material Design,Designs Material

Image Title

材质设计

Google刚发布Material Design的时候,很多人在讨论应该如何将这一种全新的设计风格翻译成中文。比较受欢迎的翻译有原质设计、要素设计、本质设计等等——人们强调了Material Design对事物本质的探求,并且认为Material Design不仅是指导了设计表现本身,还指导了较为宏观的设计理念。
而当我们逐渐深入了解Material Design后,我们会发现其实最恰当的翻译可能就是最直观最简单的那个:材质设计。因为Material Design其实就是在设计一种材质——这种材质与其附加的元素构造了一个潜藏在玻璃板后面的微型世界。
这种材质也许可以叫Magical Paper;它的附加元素则可以叫Magical Ink。纸和墨的隐喻在Material Design中贯穿始末,并且被赋予了带有魔法色彩的特性。

The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

若要往深处探讨,我们得温习一下Material Design的一些特点。

有意义的动效

Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.

Image Title

在Material Design的世界里,物体的运动曲线效仿了我们的现实世界,从而使得动画效果符合物理规律或者说人们的认知经验。突然开始运动或突然结束运动的动效显得生硬而不自然,背离了用户的预期,更无法取悦用户。
有意义的动效不仅包括了力与运动的真实性,还包括触摸涟漪效果、连贯而富有层次的转场、令人愉悦的变换细节等等。

阴影与层次

在Material Design中,应用界面的每一颗像素都是排列在轻薄的卡片上的。可见Android对卡片式设计爱得真切。其实在Material Design之前,卡片这一内容载体早已被广泛运用在Google自家的应用上了(尤其是Google Now)。
卡片之间可以以接缝的形式组合(这样它们将一起移动),也可以有前后的层级关系(两者彼此独立地移动)。

Image Title

而阴影则是从视觉上表现层级关系的元素。阴影包括两层:顶部阴影是为了打造深度感,底部阴影是为了提升清晰度。在新的设计规范中,Google甚至给出了各种部件的5个层次的阴影设置数据。

Floating Action Button

FAB(浮动操作按钮)对于Material Design来说就像是一首歌里面的Hook——它终将成为一个标志。

Image Title

浮动操作按钮在界面中通常是一个漂浮在顶层的小圆圈(因此会有非常张扬的外阴影),可以作为添加、编辑、喜欢、分享、搜索等按钮出现;它有自身独特的动态效果,比如变形、弹出、位移等等。
相信很多人会想起Path的扇形菜单,不过,虽然它们很像,并且都很有趣,但是至少在设计理念上它们是两回事。

材质的性质

关于Material Design更详细的描述,可以参阅Google的官方文档。接下来我们将继续讨论材质与其附加的元素。
Magical Paper和Magical Ink并非官方的称呼。事实上,在官方的设计规范中我们甚至找不到对这种材质的称呼。The Verge称Google的设计师们一直都拒绝为这种虚拟材质命名——这个决定给予了他们更多的灵活性并且为其增添了一份神秘感。不过在访谈中,Matias Duarte(Android设计总监,曾主导设计WebOS)形容他们设计的材质时使用了一个非常贴切的词:Magical。
先不论Magical Paper这个名字如何,为了便于指意我们暂且用着。

Image Title

从目前的设计规范中,我们大抵可以推断出Magical Paper的一些性质:

  1. Magical Paper是不透明的。这一点使得Android L明显区分于偏爱毛玻璃的iOS 7。Material Design使用了更接近生活经验的阴影来呈现层级关系。
  2. Magical Paper可用于打印并且能迅速抹去墨迹。内容(文字、图片、图标等)将打印在Magical Paper上,但随时会被抹去或替换。显然,真实的纸做不到这一点。
  3. Magical Paper能扩张也能收缩。也就是说,在二维空间中,Magical Paper能自由地伸缩。扩张能让一张Magical Paper出现,收缩能让一张Magical Paper消失。
  4. Magical Paper自身的运动符合牛顿第二运动定律。从最终效果来看,每一张Magical Paper的运动都会显得非常自然,例如随处可见的缓动效果。

另外我们可以从触摸涟漪效果中了解Magical Ink:它能在Magical Paper上迅速扩散,而取决于『笔触』(程序的设定)的差异,它可能会蔓延到整张Magical Paper,也可能只是在作用点周围形成小小的涟漪。

Image Title

了解材质的性质能帮助我们更好地了解Material Design,就像了解人性能帮助我们更好地了解社会。不过可能Google自己也还没有非常充分地认识到Material Design需要什么样的材质,所以他们没有过多地强调材质本身(包括拒绝为其命名),而把更多的描述布置在材质的实际表现上。这兴许是个明智之举,因为可以预见到,Material Design还会经过长期的调整,而目前保守的设定能给予未来更大的自由度。
尽管如此,我们仍能窥见Material Design在界面设计领域所作出的革新式突破。

玻璃后面是什么?

第一次看到Material Design时,我有按捺不住的感动。上一次有同样的感觉是在2013年秋天的一个凌晨,当Apple推出iOS 7的时候。上一次,是因为我觉得自己看到了界面设计的未来;而这一次,是因为我觉得自己看到了界面设计的本源——以至于我突然发觉iOS 7是个半成品。

Image Title

iOS 7在视觉上有着质的突破,甚至可以说是iOS 7掀起了扁平化的潮流。记忆力不差的人应该都还能想起当时全民吐槽的壮观景象,当然也还会记得不久之后全民便开始黑转粉。不得不说,Apple是一家深谙时尚之道的公司,他们知道什么终将改变,而什么是应该至死不渝的。然而遗憾的是,iOS 7迈开的步子已经很大,导致还有一件非常重要的事情不得不被搁置到下一步(本来以为iOS 8会开始思考这个问题,可惜没有)。
结果Google先做了。

When you swiped one away, what was underneath?

Google的设计团队在一次讨论中提到了这样一个问题:当你把一张卡片移走,下面是什么?这个问题帮助他们找到了一种全新的看待界面元素的角度,然后开始思考一个更为本质的问题:玻璃后面是什么?
Material Design就是Matias Duarte的团队给出的回答。

建造一个模型

Material Design的最动人之处其实不在于设计了一种虚拟材质,而在于依据该材质建造了一个模型,一个存在于手机玻璃面板乃至其他所有屏幕后面的模型。这是为什么我认为Android L要比iOS 7更加高明。
要知道,iOS 7的核心是焕然一新的视觉元素,包括字体、色彩、图标、动画等等。细想之后你会发现,iOS 7的本质与其他操作系统并无不同,都是设法通过界面元素的视觉效果、交互细节来提升用户体验。这样似乎已经足够,毕竟不断地迭代能让最终的成果越来越细腻。但是我们常常忽略了一个问题,那就是用户与软件界面之间的隔阂。这种隔阂并非用户初次使用产品时难以避免的生疏感;这种隔阂无法通过用户学习或者功能可视化来消除;这种隔阂就像是人类与外星文明之间的尴尬处境——我即使认识你,也无法理解你。由于隔阂的存在,界面中发生的一切动作似乎都是难以预料的(Matias Duarte将其比喻成电影或电视里的镜头切换),用户所能做的往往只有被动地接受——这一状况太过普遍以至于没有人会为此抱怨。

Image Title

而Material Design试图赋予软件以完整的世界观来解决这个问题。在Material Design的模型里,软件的材质是Magical Paper;物体的运动符合一定的物理定律;每一个应用都有独立的空间并且与其他应用互不干涉;页面中发生的动作往往具有时间层次感;页面间的转场会有最大程度的连贯性(有点像Keynote里的Magic Move动效)——这些特征之间有机地结合,搭建起一个空旷却稳固的模型框架。往框架里填充细节(字体、色彩、版式等)将使得这个新生的模型不断生长。
然而这个模型能给我们带来什么?
人有建造模型的天赋;人总是试图通过建造模型去理解世界。哪怕是你学习踩自行车的时候,你也是在通过不断地试错来概括出最恰当的模型。其实现有的包括iOS 7在内的用户界面并非无法被概括成模型,问题只在于这些模型通常过于低级,无法满足日渐庞大而复杂的软件生态系统的要求。而Material Design的模型是空前的具体,能让用户更快地建造起一个软件的模型,从而『站在更高处』掌控整个软件。
最直接的影响包括你总能知道自己是如何来到新的页面的,总不会在空间上迷失,总能知道永远不会发生违背模型的事情。
而对于开发者来讲,倘若你的大脑已经建立起Material Design的模型,你在评判一个转场动画时,可能不再是『这个不符合Android设计规范的某某章的某某条』,而是『它看起来不对劲』。就如同人们看到一颗悬空的石头后的第一反应不是『这不符合万有引力定律』而是『咦,这有点奇怪』。这听上去特别有意思。

Material Design的未来

目前Material Design还处于婴儿期,也就是说,Material Design的未来充满了未知。
Google的设计美学在近几年日趋成熟,令人不得不刮目相待。但愿Google有足够的魄力去推动Material Design的成长。也许Material Design就是下一个施乐Parc。
Google自家的一系列应用已经开始陆续换上Material Design的新装,包括Google Docs、Google+等。而Evernote似乎是第一个尝鲜的大牌第三方APP,虽然在风格上贯彻得并不彻底,但那个可爱的绿色FAB已经值得把玩了。

Image Title