Material Design设计规范学习心得

随着Android系统从Android 4.4逐步升级到Android L。Material Design作为Android Design演进的最新标准规范,也推出其完整的设计规范。Holo Themes作为之前Android Design的官方推荐的示例主题已经被广泛应用到各个应用的设计当中,尽管绝大部分应用没有完全符合设计规范,但是可以看到这一年来这些应用都在向规范去努力。

从整体的概述来看Material Design,谷歌从开篇就表达期望打造一个全新的底层设计规范,继而用这个规范去统一各平台间、各种交互间的用户体验。

Material Design的设计主要基于三个原则:

  1. Material is the metaphor
    谷歌认为现实世界中的材质触感是可以通过纸片的隐喻来表达,通过在设计上运用符合运动规律的动画交互、通过光影打造设计层次的关系可以创造全新的虚拟交互空间,并且这个空间是符合现实规律的。这也就是文档中提到的对于纸墨的研究。

  2. Bold, graphic, intentional
    在视觉上,谷歌不仅要求生动形象,更要求设计时要确认设计的目的,摒弃仅仅为了美观而设计,强调视觉设计要为用户使用提供指引,凸现页面当下的核心功能。文档中谷歌提到这部分借鉴传统的印刷设计。

  3. Motion provides meaning
    交互动画的目的就是吸引用户的注意,表达当下页面发生的变化,同时和对视觉要求一样,一定要有意义。
    设计规范文档非常细致,就不一一展开,以下是个人在具体的章节,认为是重点的学习摘要。大家可以参考:

学习摘要
学习摘要

近期在学习Material Design的设计规范同时,对其他的系统的设计规范的演进历史进行了一些了解。有一些个人不成熟的想法与各位分享,欢迎各位拍砖:

各种设计规范的逻辑

每种系统的都期望构建一个合理的虚拟世界运行机制,而设计规范就是这个世界运行的准则,让无数的应用可在虚拟世界中的合理运行,让用户在使用中可以清晰理解。

Skeuomorphism Design(iOS1-6):拟物化的设计,在iOS1-6的演进中,一直备受推崇。这类设计风格的初衷是尽可能的去符合用户的心理模型,降低用户的认知成本。在这个状态下,手机就像是一个装着各种器物的箱子,而箱子中的器物就是各个完全拟物的app。拟物化的设计就是完全将现实层级的交互关系搬到手机上。

比如iBooks在设计风格上就是完全拟物化现实中书架与书籍的逻辑,这样完全符合用户的心理预期,简单易懂容易上手:

iBooks
iBooks

而下面这个豆瓣广播截图也充分反映了,拟物化设计在符合用户心理模型上的天生优势。

豆瓣广播
豆瓣广播

随着拟物化的发展,一些弊端也逐渐显现:

  1. 现实的层级关系复杂,通过手机屏幕的二维空间没办法完全模拟;
  2. 随着科技发展,部分物品已逐渐不为人所知,再执迷拟物,会出现反向的认知问题;
    又比如锤子时钟的秒表计时器,相信很多人是没见过实物的,更不清楚其实际的操作步骤。对于这类人使用该app的学习成本与摆上几个button的设计,区别是不大的。
锤子时钟APP
锤子时钟APP
  1. 拟物化对ui的要求极高,设计者的负担沉重,设计门槛也很高;
  2. 拟物化的图标更适合鼠标点击操作,而随着触摸屏的普及,扁平化的大范围触碰操作更适合触摸屏的交互。

Flat Design(iOS 7、8/WP):至于近期火热的扁平化,iOS 7与WP尽管在视觉上看起来有些类似,但是在交互的隐喻上还是有很大的区别。

WP的Flat Design,除了在视觉上将图标拍扁,同时交互的逻辑层次上也呈现扁平化。之前的逻辑层次是“我的电脑—C/D/E盘—文件夹—各个文档软件”,而现在扁平化的逻辑层次是所有的均可在一个逻辑层次上,不去特意考虑模拟现实世界已有的逻辑,他即是全新的逻辑。这就像是被拆开打散排列放置的套娃,这时它只是排列的娃娃,而不能被称作“套娃”。

Win8
Win8

而iOS7、8的Flat Design,在视觉上与WP的设计风格类似,但是在交互上,iOS7、8通过大量的缩放、模糊、透视,用毛玻璃的风格打造了一个全新的具有位置纵深感的虚拟世界,它通过景深来控制交互的层级。同时也通过Z轴角度的变换,保证了层级的扁平。

Cards Design(webOS)、Material Design(Android):webOS中的卡片系统,把每个程序用卡片的形式作隐喻,在多任务的操作中配合手势区域的交互手势,让多任务操作非常便捷。同时在webOS 2.0时期,将卡片的隐喻继续发扬,在多任务中引入堆栈概念,把各个应用任务用扑克牌手牌似的形态堆叠。进一步提升了操作的体验。

webOS
webOS

谷歌在收掉webOS一票人后,Android也融入了一些卡片的理念。此次的Material Design个人的看法就是将卡片设计进一步的规范,并且扩展到整个系统层面。原来webOS是整个应用被隐喻成了卡片,而Material Design把系统内的各种设计都规范成了一种变形的纸片。然后,谷歌在套用现实中纸墨的物理模型进行交互——“既然没办法完全在手机上用app完全模拟现实世界的逻辑层次,我把app规范到纸片上,完全模拟纸片的逻辑交互层次,还不行吗?”

通过纸张的折痕来分区,尽管是两块不同的内容,在逻辑上这两块的关系还是很紧密的,在表现上仍是一张纸。
通过纸张的折痕来分区,尽管是两块不同的内容,在逻辑上这两块的关系还是很紧密的,在表现上仍是一张纸。
通过边线的阴影表达这是两张纸,逻辑上这两块的关系是独立的,上层的纸片联动肯定不会干扰下层的的纸片。
通过边线的阴影表达这是两张纸,逻辑上这两块的关系是独立的,上层的纸片联动肯定不会干扰下层的的纸片。
内容主体的纸片可以在工具栏纸片下部上下移动。
内容主体的纸片可以在工具栏纸片下部上下移动。
菜单栏是一张全新的小纸片,贴在现有的纸片层次之上。
菜单栏是一张全新的小纸片,贴在现有的纸片层次之上。

浮动按钮,是一张圆形的纸片,贴在除了系统bar之外的所有的纸片层次之上。
浮动按钮,是一张圆形的纸片,贴在除了系统bar之外的所有的纸片层次之上。
以上是程序界面整体的逻辑层级关系,同时将这些层次区分出来的方式就是通过纸片边缘的阴影。
以上是程序界面整体的逻辑层级关系,同时将这些层次区分出来的方式就是通过纸片边缘的阴影。
Cards的阴影表现
Cards的阴影表现

FAB的阴影表现
FAB的阴影表现

Right Nav的阴影表现
Right Nav的阴影表现

简而言之,Material Design的纸张设计首先是将界面集成到纸片上,再通过阴影来区分多层的纸张,最后进一步通过纸片的拼贴提供了多平台统一且多样的交互可能。

规范的目的

个人认为各种平台(iOS、Android、WP……),以及各类基于Android深度定制的ROM(miui、flyme、ColorOS……)都制定规范的目的莫不有三:

  1. 统一约束第三方应用的设计与交互体验感受,降低用户学习使用成本;
  2. 统一跨平台的使用体验,降低用户跨平台学习使用成本;
  3. 提供规范统一的接口,降低开发者的设计成本。

当下国产机很少有使用原生系统的机器,基本都会刷基于Android系统二次开发的厂商定制ROM,比如miui、flyme、ColorOS、Funtouch OS……这些ROM都对Android原生系统进行了深入的定制,其中部分ROM更是私自替换了原生系统中的控件,这也就造成了完全按照设计规范设计的应用在这些被替换了控件的ROM中安装后,反而不伦不类。

Android手机与苹果手机相比型号众多,机器性能层次不齐,这也就造成了无法提供统一的交互体验。可能看似优雅的交互动画,可能在低端机器上呈现的效果一塌糊涂。本来像水一样流畅的tab页间的滑动操作,在低端机器上体验感觉像泥石流一样。

另外个人认为,系统ROM、系统商店、应用APP之间还存在一种生态。以魅族的flyme系统、魅族应用商店、适配sb栏的应用为例:flyme系统中含有比较特殊的smart bar的设计,如果应用不单独适配,在flyme系统中使用很难保证统一的体验。如果某应用单独适配了smart bar版本,作为利益的交换,魅族应用商店会给予一定的广告位推介。这个生态很明显会促进一种规范的推进。尤其在像苹果iOS这种封闭的系统中,如果不越狱APP Store是唯一的更新途径,获得苹果应用商店的青睐,符合iOS的设计规范显得尤为重要。而谷歌商店在国内基本被阉割,加上各类手机助手的乱入,这种生态完全是不存在的。这也造成Android规范推广的困难。

既然是规范,也就是意味着这是指导建议,没有强制性的举措让开发者去遵守。加上Android系统的开放性,完全按照规范去设计的应用可谓寥寥无几。而且就算开发者主观想遵守设计规范,就Android当下的乱象,也不是很好的解决方案。同时每个应用都有自身需要实现的价值,在规范与自身需求实现的平衡上,这也是很重要的。

比如说此次微信5.4的更新,又返回到了底部Tab栏的iOS风格,尽管底部的Tab栏也支持滑动,很明显地可以看出微信的团队在这个设计上做了妥协。微信团队肯定认定自身业务数据的重要性远比遵守所谓的规范要重要的多得多。

所以个人认为所谓的设计规范,只是一本“考试大纲”,而不是“考试答案”。完全按照规范,可以做到80-89分优良设计,却很难在符合自身应用的情况下做到令人惊艳的90分以上的设计,当然依照规范也很难设计出不及格的作品。

回到自身产品,作为一个大众化的工具型产品,直观与易用性是最重要的。如果设计规范中的某种设计适用到产品某项功能中非常合拍,那是非常好的选择。如果某种符合业务需求的简单设计不符合设计规范,但这种规范不影响用户理解使用,不遵循规范也未尝不可。为了降低用户的学习使用成本,让所有应用遵循设计规范显然是不现实的,但是我们的设计完全可以去借鉴当下使用广泛的应用,比如腾讯系、阿里系、360系的产品,他们广阔装机量培养的用户使用习惯是根深蒂固,很难被替代的。借鉴他们的某些操作最简单的达到我们的目的,不失为一种方式。

所有的设计都是为了辅助产品需求的实现,同时保证用户的优良体验。如果设计仅是为了符合规范,这也就失去设计本质的意义。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容