谷歌推出了全新的設(shè)計語言Material Design降宅。谷歌表示，這種設(shè)計語言旨在為手機刻恭、平板電腦、臺式機和“其他平臺”提供更一致扯夭、更廣泛的“外觀和感覺”鳍贾。

簡介

Material Design語言的一些重要功能包括系統(tǒng)字體Roboto的升級版本，同時顏色更鮮艷勉抓，動畫效果更突出贾漏。杜拉特還簡要談到了新框架的一些變化——這個新框架也于今天在 google.com/design 公開發(fā)布。谷歌的想法是讓谷歌平臺上的開發(fā)者掌握這個新框架藕筋，從而讓所有應(yīng)用就有統(tǒng)一的外觀纵散，就像是蘋果向開發(fā)者提出的設(shè)計原則一樣。谷歌還基于這種新的設(shè)計語言對本公司旗艦應(yīng)用進行了重新設(shè)計隐圾，包括安卓和網(wǎng)頁端的Gmail和Calendar伍掀。大家可能還會記得，看到過有關(guān)這些變動的文章暇藏， 有些博客 已經(jīng)掌握了外泄截屏蜜笤，顯示經(jīng)過了重新設(shè)計的Gmail，界面更干凈盐碱、更簡約把兔。在安卓平臺上沪伙，這種新界面被稱為Material，支持各種新動畫效果县好，具有內(nèi)置的實時UI陰影围橡，以及可在不同屏幕之間切換的hero元素。

詳解

Material Design：谷歌拿出媲美蘋果的設(shè)計

過去Google的產(chǎn)品線缕贡，每一個都相當(dāng)?shù)莫毩⑽淌冢诋a(chǎn)品的設(shè)計上反映得尤為明顯，甚至不必看產(chǎn)品設(shè)計晾咪，只要看一下Google每款產(chǎn)品的LOGO都能發(fā)現(xiàn)許多不同風(fēng)格的設(shè)計收擦。這種混亂難以體現(xiàn)出Google的風(fēng)格，如果Google的風(fēng)格不是混亂和無序的話谍倦。

2011年塞赂，拉里·佩奇成為Google CEO之后，他管理公司的政策從過去的自由昼蛀、放任减途，變?yōu)榫o密、整合曹洽。根據(jù)我們的報道，在Google發(fā)展的早期辽剧，因為鼓勵觀點的碰撞送淆，結(jié)果發(fā)展成一種不留情面的爭論氛圍，高管之間沖突不斷怕轿，甚至?xí)芙^合作偷崩。佩奇決心要改變公司的氛圍，2013年2月撞羽，在納帕山谷的卡內(nèi)羅斯客棧酒店里阐斜，他對所有Google高管說，Google要實現(xiàn)10倍的發(fā)展速度诀紊，要用全新的方法來解決問題谒出，因此高管之間要學(xué)會合作。從現(xiàn)在開始邻奠，Google要對爭斗零容忍笤喳。

卡片風(fēng)格設(shè)計.jpg

除了Google不同產(chǎn)品線相互之間變得更加開放、合作外碌宴，佩奇還大膽改變Google“以工程師為主導(dǎo)”的文化杀狡。2011年，公司啟動代號為“肯尼迪”的項目贰镣，召集公司里所有重要的設(shè)計師呜象，重新設(shè)計Google里的每一項產(chǎn)品膳凝，尋找一種共同的設(shè)計語言。最終他們找到跨產(chǎn)品的設(shè)計是“卡片式設(shè)計”恭陡。不僅如此蹬音，2012年，佩奇大膽地作出一項決定子姜，讓設(shè)計師參與到早期產(chǎn)品的設(shè)計開發(fā)中祟绊，這項產(chǎn)品是我們看到的Google Now——一項典型采用卡片式設(shè)計的跨設(shè)備產(chǎn)品，從Android到Chrome哥捕，它的表現(xiàn)都幾乎一致牧抽。

可以這么說，從Google Now上遥赚，Google的設(shè)計師們通過整合Google現(xiàn)有的技術(shù)和能力扬舒，再加上對跨設(shè)備界面與交互思考，結(jié)合卡片式設(shè)計凫佛，終于設(shè)計出在不同設(shè)備上界面和體驗都相對統(tǒng)一的產(chǎn)品讲坎。而這種跨界的設(shè)計經(jīng)驗，經(jīng)過兩年的努力愧薛，復(fù)用在一致飽受割裂晨炕、碎片化困擾的Android平臺上。

圖2.jpg

Android一開始充滿著舊Google時代的風(fēng)格：自由毫炉、放任瓮栗。開發(fā)者可以任意上傳自己的應(yīng)用，而不必通過審核瞄勾；開發(fā)者可以隨意按照自己的想法設(shè)計應(yīng)用费奸，Google方面不予任何限制〗福可以說愿阐，Android一開始就是一片Google開辟的荒地，他允許每個人都可以隨意使用趾疚，結(jié)果是所有人都各行其是缨历，讓這塊荒地亂糟糟的。直到Android 4.0盗蟆，從Palm跳槽到Google擔(dān)任Android用戶體驗副總裁的馬蒂亞斯·杜瓦迪（Matias Duarte）上任后戈二，才真正提出設(shè)計指導(dǎo)。

而Google I/O 2014上著重展示的Material Design喳资，以非常高調(diào)的方式觉吭，宣布了Google Design的存在：不欣賞設(shè)計，對設(shè)計毫無感覺的Google已是昨日仆邓。在發(fā)布會當(dāng)時鲜滩，Google還上線名為Google Design的網(wǎng)站伴鳖。從Android到衍生的Android Wear、Auto和TV徙硅，Material Design貫穿其中榜聂，成為溝通不同平臺、設(shè)備的靈魂嗓蘑，讓用戶在不同平臺上也有連貫的體驗须肆。為了維護這種一致性，Google甚至不允許第三方修改Android Wear桩皿、Auto和TV的界面以及交互豌汇，十分強勢。

Material Design不能簡單地歸納為平面化設(shè)計（Flat Design）泄隔。實際上拒贱，Android 4.0的設(shè)計風(fēng)格，也不是純粹的平面化設(shè)計佛嬉，在經(jīng)過仔細觀察之下逻澳，我們可以看到Android 4.0在細節(jié)上并沒有反對高光、陰影暖呕、紋理斜做，換言之它并不反對立體感。不過湾揽，它也不能歸類為擬物化設(shè)計陨享，畢竟它所是用的圖案、形狀并非是對現(xiàn)實實體的模擬钝腺，而是按照自己對數(shù)字世界的理解，以色彩赞厕、圖案艳狐、形狀進行視覺信息上的劃分。

根據(jù)Hi-iD之前在《花樣,形式,風(fēng)格,氛圍,主義……設(shè)計》中總結(jié)設(shè)計當(dāng)中不同的層次皿桑，以Google過去各個產(chǎn)品而言毫目，都充滿了不同的花樣和形式，但無法統(tǒng)一為一種風(fēng)格诲侮。而Material Design則結(jié)合卡片式設(shè)計镀虐，又結(jié)合現(xiàn)實世界里紙張的隱喻，統(tǒng)一了Google在設(shè)計上的表達沟绪，從而展示出一種強烈的風(fēng)格刮便。這種風(fēng)格不會因為我們使用Android Wear或Android TV等不同的設(shè)備，而感到不同绽慈。Hi-iD說得好恨旱，“風(fēng)格既是自我表達也是一種記名和品牌”辈毯。

Material Design在設(shè)計上并沒有完全拋棄Google過去在設(shè)計上取得的成果。Material Design和Google的標(biāo)志一樣搜贤，崇尚多彩谆沃，但它并不使用那種很艷麗的顏色，反而似乎是為了讓圖案變得沉穩(wěn)仪芒，而有意令原本很晃眼的色彩混入一點點的灰色唁影，讓圖案變得活潑之余，又不會因為過于艷麗而讓人感覺到俗套和嬉皮掂名。它也沒有拋棄陰影据沈，仔細觀察Android 4.0的下拉菜單，我們可以看到底部和右側(cè)有著淡淡的陰影铆隘。

圖3.jpg

不過卓舵，比起過去的Andorid Design來說，Material Design更有自己的目標(biāo)膀钠，它不僅僅為了好看而已掏湾，它要讓不同設(shè)備的屏幕上表現(xiàn)出一致、美觀的視覺體驗以及交互肿嘲。根據(jù)InfoQ報道融击，2014年4月Accel Design大會期間，杜瓦迪接受InfoQ采訪時提出雳窟，“作為一個概念尊浪，移動已死，它完蛋了封救∧吹樱”他的意思是說，“將用于移動設(shè)備的應(yīng)用程序作為單獨的應(yīng)用程序自行設(shè)計是一個錯誤的做法誉结《焓浚”

杜瓦迪說，“不應(yīng)該為不同的屏幕規(guī)格創(chuàng)建不同的產(chǎn)品惩坑，而是使用一種統(tǒng)一的設(shè)計方法開發(fā)一款可以跨多種屏幕的產(chǎn)品：桌面掉盅、智能手機、車載解決方案以舒、智能手表趾痘。當(dāng)人們整天都在所有這些不同的屏幕之間切換時，他們應(yīng)該能夠繼續(xù)使用一個特定的程序蔓钟。這點不僅適用于產(chǎn)品的視覺外觀永票，也適用于其功能集。如果一個人開發(fā)了一個打車應(yīng)用程序，而它能在7英寸的屏幕上運行瓦侮，但不能在2英寸的屏幕上運行艰赞，這是不行的《抢簦”

圖4.jpg

Material Design還規(guī)范了Android的運動元素，讓按鈕的彈入彈出痹束，卡片的滑入滑出以及從一個界面變化成另一個界面的方法（比如從介紹一首歌的界面到控制播放的界面）检疫，都是秩序的、深思熟慮過的祷嘶。Wired總結(jié)屎媳，Material Design中只有在高亮動作以及改變交互狀態(tài)時，才會使用運動元素來表示论巍。

對于現(xiàn)實世界中的隱喻烛谊，Material Design更加傾向于用色彩來提示。我們按下屏幕當(dāng)中的按鈕時嘉汰，可以看到按鈕顏色迅速發(fā)生變化晒来，向石頭投入湖面一樣，產(chǎn)生了一波漣漪郑现。杜瓦迪這樣設(shè)計是因為Material Design中的按鈕都處于一個平面，不再突起荧降，因此它必須采用和以往不同的表示方法接箫，以表明自己已經(jīng)被按下。

Material Design所展示的模板當(dāng)中朵诫，最顯眼的是它的小圓點辛友。它的作用好像iPhone上的Home鍵，是快捷功能入口，又是視覺上有趣的點綴废累。

然而邓梅，正如Material Design名字所暗示的，為了適應(yīng)多尺寸的屏幕邑滨，杜瓦迪以及他的團隊日缨，尋求一種更加抽象的表達，一種存在屏幕里的顯示“材料”掖看。根據(jù)The Verge報道匣距，杜瓦迪團隊在面對Google產(chǎn)品里大量采用的卡片式設(shè)計時，靈感火花一閃：何不如這些“卡片”哎壳，想像成現(xiàn)實當(dāng)中存在的毅待，四處滑動的物體。

圖5.jpg

如果這些卡片遵循物理世界里的法則归榕，那么它就有自己的規(guī)矩尸红，不見得每個人都能夠任意使用，對于設(shè)計師來說“限制”是有必要的刹泄。在Google設(shè)計師的想象中外里，這種抽象的“材料”特性很像紙張，但它又做到現(xiàn)實當(dāng)中紙張做不到的事情循签，比如變大變小级乐。這賦予這種“材料”極大的靈活性，讓它足以適應(yīng)不同尺寸的屏幕县匠。然而风科，對于Google來說，Material Design還將擴展到Google其它產(chǎn)品當(dāng)中去乞旦，讓所有產(chǎn)品都烙印上濃濃的Google風(fēng)格贼穆。

對于杜瓦迪來說，從Android 4.0到Material Design兰粉，體現(xiàn)了他身為設(shè)計師的素質(zhì)和能力故痊，而在這不同的經(jīng)歷當(dāng)中，他的感受是玖姑，“打造Ice Cream時愕秫，我好似軍艦上的一名上校，被叫去輪機艙焰络，而這艘船即將在30分鐘后轉(zhuǎn)彎戴甩。創(chuàng)造Material Design就像指揮太平洋艦隊的海軍上將。我們要在一無所知的情況下作出決定闪彼，而船在48小時后啟航甜孤。”

至于Material Design本身，它是一個足以媲美蘋果設(shè)計的一套設(shè)計框架缴川。

展示

曾制作了微軟茉稠、T-Mobile和MTV的第三方客戶端軟件設(shè)計專家Five分享了部分谷歌實驗中的Material Design動畫，整個界面使人的感覺非常舒服把夸，動畫的過渡也非常流暢而线。

隨著Android 5.0的發(fā)布，Material Design也必定會成為未來APP設(shè)計的趨勢扎即，這種設(shè)計理念讓Android界面在體驗上更加新鮮和簡潔吞获，且能夠非常有效的激發(fā)應(yīng)用開發(fā)者的創(chuàng)作熱情，使其帶來更加卓越的應(yīng)用界面谚鄙。

圖6.jpg

圖7.jpg

圖8.jpg

圖9.jpg

評價

有國外開發(fā)者表示：“我在用Swift的時候各拷，我的眼前總會浮現(xiàn)出Google Go語言。Go擁有很好的并發(fā)功能闷营，很欣喜能看到蘋果汲取了Go的一些特點烤黍。不過，現(xiàn)在才僅僅是蘋果新語言的開始傻盟∷偃铮”

所以，Google 發(fā)布的Material Design語言更像是一套界面設(shè)計標(biāo)準(zhǔn)娘赴，而蘋果發(fā)布的Swift語言是一款編程語言规哲，為了降低開發(fā)者的門檻，二者截然不同诽表。

本站文章為 寶寶巴士 SD.Team 轉(zhuǎn)載百度百科Metrial Design