Material Design 是Google在2014年開發(fā)者大會(huì)上首次提出的設(shè)計(jì)語言（風(fēng)格）,。其設(shè)計(jì)初衷旨在為手機(jī),、平板、臺(tái)式機(jī)和可能的“其他平臺(tái)”提供一致,、廣泛的視覺與交互,。

之前參加過一個(gè)公司內(nèi)的產(chǎn)品分享團(tuán)體，當(dāng)時(shí)自己準(zhǔn)備的分享內(nèi)容就是關(guān)于Material Design的,?？紤]到Android在國內(nèi)的發(fā)展現(xiàn)狀，Material Design的普及要遙遙無期,，Android開發(fā)團(tuán)體們對于Material Design的理解也各有不同,。作為一個(gè)曾經(jīng)的Android Design的原教旨主義者，一個(gè)谷粉,，覺得自己也可以寫篇文章來談?wù)勛约簩τ贛aterial Design的理解,。

在2011年,，Google發(fā)布了Android 4.0 代號(hào)Ice cream sandwich的全新操作系統(tǒng)。在這個(gè)版本上,，Google首次推出了Android Design設(shè)計(jì)語言,，并提出了一種叫Holo的設(shè)計(jì)風(fēng)格。后續(xù)經(jīng)過2012,、2013年陸續(xù)發(fā)布的Android 4.1——4.4幾個(gè)版本的迭代,，Android Design也漸趨成熟。

幾款Nexus設(shè)備,，包括平板和手機(jī)

關(guān)于Android Design,，至少有以下幾個(gè)詞值得關(guān)注：

關(guān)鍵字1：Holo

Holo是Android Design最基本的呈現(xiàn)方式，是一款A(yù)ndroid Design App的基本骨架,。主要包含暗色調(diào)科技感十足的Holo Dark 和淺色調(diào)更接地氣的Holo Light兩種風(fēng)格,。從Android 4.X時(shí)代，為了挽救Android日趨碎片化的大趨勢,，Google方面要求所有的Android設(shè)備中都要集成Holo Theme需要的控件,。這些控件的樣式、交互統(tǒng)一有Google完成,。這樣,，開發(fā)者們只需要使用Google提供的標(biāo)準(zhǔn)控件，便可以在UI各異的不同的Android設(shè)備上展現(xiàn)統(tǒng)一的界面與交互,。

使用標(biāo)準(zhǔn)控件開發(fā)的Gmail App

關(guān)鍵字2：ActionBar

ActionBar是Android應(yīng)用中不可或缺的重要元素,。它就像人類的肩膀，承載起了應(yīng)用的圖標(biāo),、名稱,、導(dǎo)航,、主要操作等最基本的元素,。他可以承擔(dān)起大至內(nèi)容導(dǎo)航，小至快速操作某個(gè)特定功能的作用,。

Android4.X時(shí)代的ActionBar

關(guān)鍵字3：Drawer

Navigation Drawer就是著名的導(dǎo)航抽屜。一般情況下會(huì)將幾個(gè)彼此獨(dú)立的功能模塊放入進(jìn)Drawer中,，以實(shí)現(xiàn)快速切換功能的目的,。坦白講，雖然我自己是比較喜歡Drawer的,，但即使發(fā)展至Android 6.0的今天,，Drawer的這種交互方式依舊沒能被普遍接受。甚至在Google自家的App中也并沒有普遍采用,。舉個(gè)例子,，最新版本的Google Plus App沒有采用Drawer就算了,，居然還使用的底部Tab Bar這種Google自己并不推崇的交互方式。我依然看好Drawer的前景,，但只能說距離其大放異彩廣為人知仍舊是任重而道遠(yuǎn),。

使用Drawer來達(dá)到快速切換不同內(nèi)容的目的

關(guān)鍵字4：NavigationBar

從Android 4.0開始，Google取消了從前的傳統(tǒng)硬件按鈕,，轉(zhuǎn)而使用了帶有返回,、主頁、多任務(wù)三大操作的虛擬鍵,。這也是Android的靈魂,。當(dāng)然，從虛擬按鍵的概念發(fā)布至今,，對于實(shí)體鍵與虛擬鍵的爭論就一直沒有停下來過,。直到今天，在各廠商發(fā)布的旗艦手機(jī)中,，實(shí)體按鍵的設(shè)備仍占據(jù)有半壁江山,。

4.X時(shí)代的虛擬按鍵樣式

到了Android4.4發(fā)布的時(shí)候，Google或許是看到了Android Design的日趨完善,，開始對Android Design做些許新的嘗試,。比如加入了白色的開關(guān)，將原本方正的Toast修改為橢圓的,。在今天看來,，這些小的改動(dòng)其實(shí)是在為Android的全新設(shè)計(jì)風(fēng)格做鋪墊。

終于,，在2014年的夏天,，Google正式發(fā)布了Android5.0與全新的設(shè)計(jì)語言——Material Design。

關(guān)于MaterialDesign的文章其實(shí)已經(jīng)有不少了,，我在這里還是更多的會(huì)突出自己對于Material Design的理解,。我眼中的Material Design至少要包含以下幾個(gè)元素：

鮮活的色彩

空間的層級(jí)

流暢的動(dòng)畫

多樣的組件

鮮活的色彩：

MaterialDesign是年輕化的設(shè)計(jì)語言。相比于前輩Android Design那種充滿科技感的配色而言,，Material Design更強(qiáng)調(diào)利用鮮活的色彩豐富頁面的內(nèi)容,。比如利用突出的顏色來強(qiáng)調(diào)重要的功能或者不同的透明度來暗示內(nèi)容的主次關(guān)系。

Material Design鼓勵(lì)使用豐富,、鮮活的色彩

空間的層級(jí)：

空間層級(jí)的概念是MaterialDesign中非常重要的部分,。可以這樣想象,，設(shè)備屏幕是一個(gè)具備X軸,、Y軸的二維平面。我們從直視屏幕時(shí),，相當(dāng)于在俯視這個(gè)XY平面,。在我們生活的三維空間中,，俯視時(shí)我們會(huì)利用光線與陰影來判斷物體高度、位置,。同樣的,，Google為了在這個(gè)二維平面中提現(xiàn)三維空間的投影，遍加入了Z軸（也就是高度軸）的概念,。不同內(nèi)容展現(xiàn)在不同的平面上,，就像層層堆疊在報(bào)紙上的紙片，平面彼此之間通過陰影來提現(xiàn)高低關(guān)系,?？梢赃@樣說，Material Design是一種通過二維平面來模擬三維效果的設(shè)計(jì)風(fēng)格,，是一種介于iOS 7之后扁平化與iOS 6時(shí)代擬物化之間的產(chǎn)物,。

用戶操作設(shè)備時(shí)，可以看做是從Z軸向下俯視

就像剛才提到的,，所有的信息（內(nèi)容）都展現(xiàn)在二維平面上,，所以在MaterialDesign中所有的元素都有自己默認(rèn)的高度。用戶對不同元素的操作會(huì)抬升起它的高度,，待操作完成后這個(gè)元素在落回到默認(rèn)高度,。就像是散落在報(bào)紙上的紙片，我們拿起一張進(jìn)行閱讀,，之后再放回報(bào)紙上,。除此之外，對于同一種類型的元素,，進(jìn)行同樣的操作時(shí),，它們抬升的高度也應(yīng)該是一致的。

不同內(nèi)容的信息/控件擁有不同的高度層級(jí)

最后還有一點(diǎn)需要注意的就是在MaterialDesign中原則上頁面不應(yīng)該存在翻折,。因?yàn)槭侨S空間在二維平面的投影,，所以交互都應(yīng)該盡量以二維平面的變化來呈現(xiàn)。

流暢的動(dòng)畫

很多時(shí)候,，人們抱怨Android不如iOS流暢,。其中一個(gè)原因就是相比于一些iOS應(yīng)用，Android客戶端中往往沒有提供足夠順暢的動(dòng)畫來銜接不同的內(nèi)容,。動(dòng)畫可以消除頁面切換帶給人的生硬感,，使頁面的切換更加自然順暢。在Material Design中,，流暢、擬真的動(dòng)畫是不可或缺的一部分,，重要到Google在設(shè)計(jì)指南中需要單獨(dú)列一章來詳細(xì)描述,。

順暢自然的動(dòng)畫可以讓信息的切換顯得 更加自然合理

多樣的控件

經(jīng)過了4年的發(fā)展,，從Android Design演化而來的Material Design自然繼承了Android中各式各樣的控件。

卡片,、列表,、抽屜、開關(guān),、分割線,、標(biāo)簽、進(jìn)度可以任開發(fā)者使用,。在Material Design中還首次加入了FAB（即浮動(dòng)操作按鈕,，floating action button），Google官方推薦講最主要,、常用的操作加入到FAB之中,。同時(shí)也提出了一些限制，即并非所有的頁面中都要加入FAB,。FAB本身還是應(yīng)該用在Promoted action上,。

各式各樣的控件

從前在學(xué)校時(shí)，曾經(jīng)有朋友做過叫“Android Design in Action”的分享,，在這里我做一個(gè)基于自己理解的“Material Design in Action”,，以360手機(jī)助手為例。

主頁面：

在設(shè)計(jì)這個(gè)版本的手機(jī)助手時(shí),，手機(jī)助手正在嘗試進(jìn)行社交化一些功能,。所以我將主頁面分成了兩個(gè)TAB，分別冠名為“世界”與“身邊”,。以此來提升社交元素在整個(gè)應(yīng)用的地位,。也方便后續(xù)產(chǎn)品進(jìn)行可能的社交化轉(zhuǎn)型。

左圖為手機(jī)助手的線上版本,，后兩圖為設(shè)計(jì)稿

在主界面中,，我嘗試加入了浮動(dòng)按鈕。點(diǎn)擊后會(huì)展開為查找,、發(fā)現(xiàn)和發(fā)起話題,。以此來突出者三個(gè)功能在整體產(chǎn)品中的地位。

左圖為手機(jī)助手應(yīng)用圈功能,，右圖為改版后“發(fā)現(xiàn)”TAB頁內(nèi)容

我將手機(jī)助手中的應(yīng)用圈功能的層級(jí)進(jìn)一步提升,，主頁面左滑即可進(jìn)入發(fā)現(xiàn)功能?？紤]到發(fā)現(xiàn)功能中的信息種類多樣,，既有話題、也有好友信息流，還可能有一些推送內(nèi)容,。所以我在這里選擇了以卡片的形式來展現(xiàn)信息,。卡片的好處是宏觀上樣式比較統(tǒng)一,，同時(shí)自身又能夠承載不同類型的信息,。

抽屜：

手機(jī)助手本身就包含有抽屜，在這里我對原來抽屜內(nèi)的功能進(jìn)行了簡化,。同時(shí),，考慮到抽屜用作功能的切換，所以在這里也提升了抽屜的層級(jí),。

新的設(shè)計(jì)中進(jìn)一步提升了抽屜的信息層級(jí),，使其高于主界面

應(yīng)用詳情：

應(yīng)用詳情是市場類應(yīng)用中最為常見的頁面。這個(gè)頁面中的場景一般是瀏覽應(yīng)用的介紹與截圖,，之后下載應(yīng)用或返回上一級(jí),。所以我在這里再一次使用了層級(jí)最高的FAB，只用作最常見的下載操作,。同時(shí)使用橙色和青藍(lán)色這兩種對比強(qiáng)烈的配色來進(jìn)一步突出功能,。同時(shí)將應(yīng)用介紹、評論與推薦三個(gè)功能整合進(jìn)入AppBar中,。

左圖為手機(jī)助手線上版本截圖,，右圖為新的設(shè)計(jì)稿

消息中心：

消息中心是現(xiàn)在移動(dòng)App中的重要功能。其不但承載了用戶自身的社交來往的需求,，同時(shí)還肩負(fù)著開發(fā)者向用戶及時(shí)傳遞信息的重?fù)?dān),。

考慮到相比于評論，“贊”的信息層級(jí)要更低一些,，所以我將評論與贊進(jìn)行了分離,。用三個(gè)并行的Tab頁來將評論、贊,、私信這三種常見的不同屬性的信息結(jié)合在一起,。

左圖為線上版本截圖，右圖為新設(shè)計(jì)稿

個(gè)人中心：

考慮到既然要做社交化的嘗試與轉(zhuǎn)型,，我索性拋棄了原本個(gè)人信息頁中的一些功能,。加入了時(shí)間軸形式的個(gè)人信息的展示，這里的思路類似于國內(nèi)的酷市場或者Google+與Google Play結(jié)合的思路,。在個(gè)人信息頁中展示我發(fā)出的評論,、發(fā)現(xiàn)的應(yīng)用、發(fā)起的話題,。這里還使用了叫做“復(fù)合式ActionBar”的控件,，可以在展示更多信息的同時(shí)點(diǎn)擊跳轉(zhuǎn)至相關(guān)的操作。

左圖為線上版本個(gè)人中心，右圖為改版后的個(gè)人中心

有句話說的好,，人生有三重境界：看山是山,，看水是水；看山不是山,。看水不是水,；看山還是山,，看水還是水。

看山是山,，看水是水,。對于大多數(shù)用戶而言，他們并不在乎開發(fā)者就行使用的是哪個(gè)平臺(tái)的設(shè)計(jì)語言,，不在乎動(dòng)畫,、配色的使用。他們在乎的只是應(yīng)用好用不好用,，是不是和自己想象的一樣能夠滿足自己當(dāng)初下載時(shí)的欲望與需求,。

看山不是山，看水不是水,。一些高階的用戶,，在體驗(yàn)過很多App之后，發(fā)現(xiàn)了不同平臺(tái)下應(yīng)用設(shè)計(jì)語言的不同,。他們能夠發(fā)現(xiàn)哪些應(yīng)用交互不符合平臺(tái)的規(guī)范,，哪些跨平臺(tái)應(yīng)用為了省事而使用了同一種設(shè)計(jì)思路。這些用戶會(huì)嘗試在社交網(wǎng)絡(luò)上發(fā)表自己的理解,，向低階層用戶普及一些基本的常識(shí),。

看山還是山，看水還是水,。對于移動(dòng)App的開發(fā)團(tuán)隊(duì)而言,，在不同的平臺(tái)上采用各自平臺(tái)的設(shè)計(jì)規(guī)范是一種責(zé)任，但并不是義務(wù),。開發(fā)團(tuán)隊(duì)需要根據(jù)自己手頭的資源與數(shù)據(jù),，來選擇設(shè)計(jì)思路。盡可能的發(fā)揮不同平臺(tái)的優(yōu)勢來達(dá)到自己的目的,，這是一種負(fù)責(zé)任的做法,。Apple Music在Android平臺(tái)沒有套用iOS的設(shè)計(jì)思路，但Google卻在iOS上使用Material Design而非《iOS人機(jī)交互指南》中提倡的設(shè)計(jì),。開發(fā)者對于自己的產(chǎn)品有著比用戶更清晰的認(rèn)識(shí),。所以究竟選擇何種界面交互，是開發(fā)者自己的自由。只要應(yīng)用好用,，那這就是種好設(shè)計(jì),。

所以最后總結(jié)一下就是這三條提示：

1.警惕原教旨主義

2.不要滿足于平庸

3.掌握規(guī)范，超越局限