如何理解 Google 的 Material Design 设计语言?

此问题的等同描述还可能是:如何评价 Google 的 Material Design We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design. Intro…
关注者
4280
被浏览
150118

34 个回答

更新:
把Material Design 官方文档又完整地看了一遍,有了些新想法,建议阅读:)
舞台上的戏法和天文里的科技:Material Design和iOS 7动效对比分析 - 表面 - 知乎专栏




原文:

一、


从苹果发布 iphone 那年开始,设计界就开始发明适合触摸时代的新材料,我们姑且称之为“数字纸”。顾名思义,它和印刷时代的纸张既有相似又有区别。

回顾历史,这里面有数条线索。

其一是手机系统。除了 iOS,早期还有WebOS。后者将程序视为卡片,将程序的多任务界面表述为扑克式的横向排列和抽拉。

另外一条线索是 appReeder, 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 的图来理解纸张的裂口)


而他们又是如何继承卡片式设计并结合纸张的物理性质(折角),在多任务交互上再次演进。

Recorded for GeekPark: webOS Eel Demo http://v.youku.com/v_show/id_XNjU3MDczMTIw

二、

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 的宣传片。

谷歌安卓Material主题 Google Material design http://v.youku.com/v_show/id_XNzMxNzUyNzQ0
参考The Verge对Matias Duarte的访谈:
Material world: how Google discovered what software is made of
注意这一段(下划线和粗体是笔者加的):
Material Design "unified us in our thinking," Duarte says, admitting that "it’s absolutely a constraint." These constraints, he says, made design decisions easier and more consistent. Take, for example, the idea of flipping a card over to see what’s on the back. In Material Design’s world, that’s a cheat that doesn’t work. It’s as if the software is actual, physical stuff inside these devices, and there’s not space inside a phone to flip a card over, so Google doesn’t allow itself to do it.

Material Design Principles这个session中特别提到:这些飘来飘去的纸片,尺度和手机是一样的;屏幕不是看另一个世界的窗口。这是什么意思?

Material is metaphor,这是关于整个手机的隐喻,我们怎么理解手里这个扁扁的黑盒子?

早期的iPhone是“百变盒子”,通过运行不同的app,它可以模拟各种我们熟悉的物品:手机,相机,计算器... 在屏幕技术的限制内,app尽力接近它们要模拟的对象。在这个隐喻里,屏幕上的各种按钮本来应该是突出于屏幕之外的,虽然我们无法在触觉上模拟此效果。

Windows Phone则拒绝在手机层面使用隐喻。手机就是一种全新的物品而无需模拟其他物品,屏幕的属性就是像素而无需模拟其他材质的属性。WP的屏幕是完全的平,前后都没有东西,所有UI元素都位于屏幕表面。

Android直到Holo,似乎都没怎么考虑过这个层面的问题。Android UI继承了桌面UI,以功能性为主。

iOS7呢?从放缩、透视和毛玻璃的大量使用来看,似乎正是把屏幕看作通往另一个世界的窗口。UI元素可能位于屏幕后面相当远的地方,而屏幕本身可以在这个虚拟世界中自由移动。

回到Material Design,这些漂浮的小纸片,就“真实”地漂浮在手机这个小盒子之内,而屏幕是一块透明玻璃,用户可以透过它一窥盒子内部。UI通过阴影所表现出的深度,不应该超过手机本身的厚度。

总结:
iOS(1-6):手机是百变盒子。UI突出于屏幕。
Android(~Kitkat):手机是小电脑。UI是什么没想过。
Windows Phone:手机就是手机。UI在屏幕表面。
iOS7:手机是观察异世界的魔镜。UI在另一个空间。
Android L:手机是装着漂浮小纸片,有玻璃盖子的盒子。UI在盒子内部。

P.S.
说到盒子里的纸片,首先想到的是Paper Mario:Official Site

--------------------------------------------------------------------------

看keynote时对Material Design这个提法十分不解,因为新UI风格并不注重表现材质,也没有体现纸张的物理特点。

但看过Material Design的panel后,我觉得Matias Duarte确实已经用两个词说出了Material Design的核心,那就是所谓的material,并非纸/毛玻璃/皮革/木头,而是一种在现实中不存在的"magical material"。

1. Material,即屏幕上的元素还是由类似真实世界的材料构成的物体,有类似的物理属性(形状比较固定,占据一定空间,有前后遮挡关系,会投射阴影,可以移动...)。相对的,Metro(比较极端地)和Holo(比较中庸地)都倾向于屏幕上的元素只需要具有像素本身的属性,而不必模拟真实世界。

所以我们看到,在去掉阴影的潮流中,阴影又变得无处不在。另一方面,由于真实世界的物体通常不会瞬间、凭空出现和消失,所以平移、旋转、扩展和画面外飞入代替了原来从屏幕中间出现的过渡动画。

2. Magical,即这种材料并不模拟真实世界某种具体的材料。拟物化的一个问题是用户对真实世界的材料有非常多的期望。把界面画得太像真实物体,你无法实现用户的期望。比如你可以在屏幕上画出很像纸质通讯录的通讯录,然而用户期望纸质通讯录可以翻页,可以折角,可以用笔批注,甚至有纸的触感,而你没有做到。
相对的,不在视觉上模拟特定材料,比较容易控制用户的期望。一个不明材料制成的卡片,用户的期望可能只是可以移动而已,而这恰恰是我们想通过卡片表达的隐喻。

3. Magical的另一面,即这种材料不必受真实世界材料的限制。仍以仿纸质通讯录为例,用户并不期望纸张上的文字可以上下滑动,在屏幕上实现这一功能反而会与用户对材料的认知相矛盾。

而这种抽象的,"魔法"材料在必要时,不必受真实世界规则限制。比如大量使用的卡片伸缩变形动画,一方面为符合日常经验,变形要以连续的动画而不是瞬间完成,另一方面我们不必费心考虑和表现卡片是如何伸缩的(比如表现为卷轴),反正它是魔法材料。又如UI元素像现实世界一样有前后关系并投下阴影,但我们不必考虑它们是如何悬浮于空中,要不要加上支撑结构。

总结:既要充分利用“材料”带来的现实世界隐喻,又不要被现实世界规律所束缚。Material Design看起来很正确,但很难把握度。
为什么?