Material Design

谷歌推出了全新的设计语言Material Design。谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

简介

Material Design语言的一些重要功能包括系统字体Roboto的升级版本,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的Gmail和Calendar。大家可能还会记得,看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,界面更干净、更简约。在安卓平台上,这种新界面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

详解

Material Design:谷歌拿出媲美苹果的设计

过去Google的产品线,每一个都相当的独立,在产品的设计上反映得尤为明显,甚至不必看产品设计,只要看一下Google每款产品的LOGO都能发现许多不同风格的设计。这种混乱难以体现出Google的风格,如果Google的风格不是混乱和无序的话。

2011年,拉里·佩奇成为Google CEO之后,他管理公司的政策从过去的自由、放任,变为紧密、整合。根据我们的报道,在Google发展的早期,因为鼓励观点的碰撞,结果发展成一种不留情面的争论氛围,高管之间冲突不断,甚至会拒绝合作。佩奇决心要改变公司的氛围,2013年2月,在纳帕山谷的卡内罗斯客栈酒店里,他对所有Google高管说,Google要实现10倍的发展速度,要用全新的方法来解决问题,因此高管之间要学会合作。从现在开始,Google要对争斗零容忍。

卡片风格设计.jpg

除了Google不同产品线相互之间变得更加开放、合作外,佩奇还大胆改变Google“以工程师为主导”的文化。2011年,公司启动代号为“肯尼迪”的项目,召集公司里所有重要的设计师,重新设计Google里的每一项产品,寻找一种共同的设计语言。最终他们找到跨产品的设计是“卡片式设计”。不仅如此,2012年,佩奇大胆地作出一项决定,让设计师参与到早期产品的设计开发中,这项产品是我们看到的Google Now——一项典型采用卡片式设计的跨设备产品,从Android到Chrome,它的表现都几乎一致。

可以这么说,从Google Now上,Google的设计师们通过整合Google现有的技术和能力,再加上对跨设备界面与交互思考,结合卡片式设计,终于设计出在不同设备上界面和体验都相对统一的产品。而这种跨界的设计经验,经过两年的努力,复用在一致饱受割裂、碎片化困扰的Android平台上。

图2.jpg

Android一开始充满着旧Google时代的风格:自由、放任。开发者可以任意上传自己的应用,而不必通过审核;开发者可以随意按照自己的想法设计应用,Google方面不予任何限制。可以说,Android一开始就是一片Google开辟的荒地,他允许每个人都可以随意使用,结果是所有人都各行其是,让这块荒地乱糟糟的。直到Android 4.0,从Palm跳槽到Google担任Android用户体验副总裁的马蒂亚斯·杜瓦迪(Matias Duarte)上任后,才真正提出设计指导。

而Google I/O 2014上着重展示的Material Design,以非常高调的方式,宣布了Google Design的存在:不欣赏设计,对设计毫无感觉的Google已是昨日。在发布会当时,Google还上线名为Google Design的网站。从Android到衍生的Android Wear、Auto和TV,Material Design贯穿其中,成为沟通不同平台、设备的灵魂,让用户在不同平台上也有连贯的体验。为了维护这种一致性,Google甚至不允许第三方修改Android Wear、Auto和TV的界面以及交互,十分强势。

Material Design不能简单地归纳为平面化设计(Flat Design)。实际上,Android 4.0的设计风格,也不是纯粹的平面化设计,在经过仔细观察之下,我们可以看到Android 4.0在细节上并没有反对高光、阴影、纹理,换言之它并不反对立体感。不过,它也不能归类为拟物化设计,毕竟它所是用的图案、形状并非是对现实实体的模拟,而是按照自己对数字世界的理解,以色彩、图案、形状进行视觉信息上的划分。

根据Hi-iD之前在《花样,形式,风格,氛围,主义……设计》中总结设计当中不同的层次,以Google过去各个产品而言,都充满了不同的花样和形式,但无法统一为一种风格。而Material Design则结合卡片式设计,又结合现实世界里纸张的隐喻,统一了Google在设计上的表达,从而展示出一种强烈的风格。这种风格不会因为我们使用Android Wear或Android TV等不同的设备,而感到不同。Hi-iD说得好,“风格既是自我表达也是一种记名和品牌”。

Material Design在设计上并没有完全抛弃Google过去在设计上取得的成果。Material Design和Google的标志一样,崇尚多彩,但它并不使用那种很艳丽的颜色,反而似乎是为了让图案变得沉稳,而有意令原本很晃眼的色彩混入一点点的灰色,让图案变得活泼之余,又不会因为过于艳丽而让人感觉到俗套和嬉皮。它也没有抛弃阴影,仔细观察Android 4.0的下拉菜单,我们可以看到底部和右侧有着淡淡的阴影。

图3.jpg

不过,比起过去的Andorid Design来说,Material Design更有自己的目标,它不仅仅为了好看而已,它要让不同设备的屏幕上表现出一致、美观的视觉体验以及交互。根据InfoQ报道,2014年4月Accel Design大会期间,杜瓦迪接受InfoQ采访时提出,“作为一个概念,移动已死,它完蛋了。”他的意思是说,“将用于移动设备的应用程序作为单独的应用程序自行设计是一个错误的做法。”

杜瓦迪说,“不应该为不同的屏幕规格创建不同的产品,而是使用一种统一的设计方法开发一款可以跨多种屏幕的产品:桌面、智能手机、车载解决方案、智能手表。当人们整天都在所有这些不同的屏幕之间切换时,他们应该能够继续使用一个特定的程序。这点不仅适用于产品的视觉外观,也适用于其功能集。如果一个人开发了一个打车应用程序,而它能在7英寸的屏幕上运行,但不能在2英寸的屏幕上运行,这是不行的。”

图4.jpg

为了统一跨设备间的界面和交互,让用户得到连贯的体验。Material Design不再让像素处于同一个平面,而是让它们按照规则处于空间当中,具备不同的维度。按照Wired的话来说,那就是让像素具备海拔高度,这样子的话,系统的不同层面的元素,都是有原则、可预测的,不让用户感到无所适从,也避免开发者担心因为不同的视觉风格而产生冲突。

Material Design还规范了Android的运动元素,让按钮的弹入弹出,卡片的滑入滑出以及从一个界面变化成另一个界面的方法(比如从介绍一首歌的界面到控制播放的界面),都是秩序的、深思熟虑过的。Wired总结,Material Design中只有在高亮动作以及改变交互状态时,才会使用运动元素来表示。

对于现实世界中的隐喻,Material Design更加倾向于用色彩来提示。我们按下屏幕当中的按钮时,可以看到按钮颜色迅速发生变化,向石头投入湖面一样,产生了一波涟漪。杜瓦迪这样设计是因为Material Design中的按钮都处于一个平面,不再突起,因此它必须采用和以往不同的表示方法,以表明自己已经被按下。

Material Design所展示的模板当中,最显眼的是它的小圆点。它的作用好像iPhone上的Home键,是快捷功能入口,又是视觉上有趣的点缀。

然而,正如Material Design名字所暗示的,为了适应多尺寸的屏幕,杜瓦迪以及他的团队,寻求一种更加抽象的表达,一种存在屏幕里的显示“材料”。根据The Verge报道,杜瓦迪团队在面对Google产品里大量采用的卡片式设计时,灵感火花一闪:何不如这些“卡片”,想像成现实当中存在的,四处滑动的物体。

图5.jpg

如果这些卡片遵循物理世界里的法则,那么它就有自己的规矩,不见得每个人都能够任意使用,对于设计师来说“限制”是有必要的。在Google设计师的想象中,这种抽象的“材料”特性很像纸张,但它又做到现实当中纸张做不到的事情,比如变大变小。这赋予这种“材料”极大的灵活性,让它足以适应不同尺寸的屏幕。然而,对于Google来说,Material Design还将扩展到Google其它产品当中去,让所有产品都烙印上浓浓的Google风格。

对于杜瓦迪来说,从Android 4.0到Material Design,体现了他身为设计师的素质和能力,而在这不同的经历当中,他的感受是,“打造Ice Cream时,我好似军舰上的一名上校,被叫去轮机舱,而这艘船即将在30分钟后转弯。创造Material Design就像指挥太平洋舰队的海军上将。我们要在一无所知的情况下作出决定,而船在48小时后启航。”

至于Material Design本身,它是一个足以媲美苹果设计的一套设计框架。

展示

曾制作了微软、T-Mobile和MTV的第三方客户端软件设计专家Five分享了部分谷歌实验中的Material Design动画,整个界面使人的感觉非常舒服,动画的过渡也非常流畅。

随着Android 5.0的发布,Material Design也必定会成为未来APP设计的趋势,这种设计理念让Android界面在体验上更加新鲜和简洁,且能够非常有效的激发应用开发者的创作热情,使其带来更加卓越的应用界面。

图6.jpg
图7.jpg
图8.jpg
图9.jpg

评价

有国外开发者表示:“我在用Swift的时候,我的眼前总会浮现出Google Go语言。Go拥有很好的并发功能,很欣喜能看到苹果汲取了Go的一些特点。不过,现在才仅仅是苹果新语言的开始。”

所以,Google 发布的Material Design语言更像是一套界面设计标准,而苹果发布的Swift语言是一款编程语言,为了降低开发者的门槛,二者截然不同。


本站文章为 宝宝巴士 SD.Team 转载百度百科Metrial Design

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

推荐阅读更多精彩内容