翻墙学习了一下官方规范:
http://www.google.com/design/spec/material-design/introduction.html
几个惊喜点:
1. 卡片
这应该是Google这几年风格探索中,最精巧又实用的成果了。等了这么久,终于在Material Design中被Google扶正了,我甚至觉得,整个Material Design就是围绕卡片这一创意而生的!
Google对卡片的使用场景,外观,交互方式做了非常严谨的规范
但一方面Google还是很克制的,在规范中强调了一些不适合使用卡片的场景,例如展示一组雷同内容的列表,卡片这种强烈的区块分割会导致浏览效率下降。
2. Z 轴的概念
通过布局和阴影,让屏幕上的元素产生层次感,这种层次感可以让使用者轻松理解元素的重要性及相互之间的关系。
虽然苹果的 iOS 和 OS X 早就大量使用阴影,但其实并没有 Z 这个概念,而更多的是一种装饰。所以 Google 说:Depth is not ornament. 深度感不是为了装饰而存在,而是为了功能!
为此 Google 居然丧心病狂地定义了5种不同的Z轴状态,及其对应的阴影的尺寸!
在实际使用中,如下图,阴影可以很好地赋予按钮的轮廓,让按钮凸显,感觉浮起在白底之上,有按下去的冲动。
3. 有意义的动画
这次的 Material Design 规范,动画单独开出一个章节大书特书,而且放在第二章(第一章是导览),可见 Google 长期在动画的精妙效果上被苹果压制准备一血前耻的决心。
除了强调了动画对交互相应的重要性外,Google还提出了要做有意义的动画效果,规范里把元素在动画转场中的表现分为三类:
- 进场元素
- 退场元素
- 共享元素
前两者好理解,如下图中的联系人头像和名称,就属于共享元素,即交互实施的元素。这样使用者很容易聚焦,很容易理解转场前后元素之间的关系。
知乎不支持gif,请去原地址看这个效果:(可能需翻墙)
http://material-design.storage.googleapis.com/videos/animation-meaningfultransitions-view_contact_large_xhdpi.webm
另外,该章节中对动画速率,层次感,细节等说明,也非常有启发性。
其他一些 Android 原有特性的优化
1. 下拉菜单
Android 4.X 时代的 spinner 被直接升级成 Menu,在原有位置扩展展开的样式更容易理解。我要吐槽一下 iOS 上一直缺乏这么一个简单轻量的下拉选单的控件……
2. 提示
用 Snackbars 取代了 Android 4.X 时代的 Toasts,可以选择是否包含一个 actions 按钮,终于可以原生实现 Gmail for Android 删除邮件时 undo 的效果了。
3. 抽屉
同样也是 Android 4.X 时代的抽屉导航,也被统一叫做 Side Nav,从Z轴上看 Side Nav 是在最顶层。
4. 按钮
规范对所有的按钮做了重新定义:
Floating action button:浮动按钮,是页面中的住按钮,页面中只能有一个,代表了该页面最核心的唯一操作
Raised button:用于图文混合展示时,需凸显按钮时使用
Flat button:用于对话框
浮动按钮可以说是 Material Design 中很亮眼,也很大胆的一个设计,为了防止被滥用,Google做了大量规范说明使用场景……
赞美的部分结束了,下面是吐槽:
总而言之,在移动设备交互设计领域,比起苹果,Google还是略显稚嫩……
苹果6.0之前的设计指南( iOS Human Interface Guidelines),在界面设计原则和用户体验指南这两个章节投入了大量的篇幅,向读者讲述他们对智能设备时代下设计的理解,读起来犹如一个白胡子老人坐在你面前,打开一本厚厚的历史书,娓娓地道出:“long long ago…”
毕竟苹果重新设计了手机,也重新定义了智能设备的人机交互准则,这方面无论 Google 还是 Microsoft 都是追随者,从他们两家的设计规范里都能看出一个追随者的急躁,急于向开发者宣讲他们的语言,灌输他们的思路,更多更像是一本说明书,而不是一本教材。
(当然苹果在 iOS7 更新后的 HIG 中,关于原则和指南部分也大量缩减了,所以感觉 iOS7 的设计语言推出的比较仓促,其中有很多矛盾和难以自洽的地方,可见苹果自己想的并不完善,并且还在不断的改进中)
这次Google的大招,有一个特点就是全平台通用的设计语言,我理解应该主要目的是规范自己的产品线,其次才是指导 Android 厂商跟进,至于引领设计风潮,我觉得 Google 还到不了这样的火候,也没有这样的野心……
— 完 —
本文作者:彭澎
【知乎日报】
你都看到这啦,快来点我嘛 Σ(▼□▼メ)
此问题还有 19 个回答,查看全部。
延伸阅读:
那些没有 Google 账户的人都是如何使用 Android 手机的?
Google 打算怎么处理 Chrome for Android?