關于寫這篇文章的初衷

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

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

Material Design的由來

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

幾款Nexus設備，包括平板和手機

關于Android Design，至少有以下幾個詞值得關注：

關鍵字1：Holo

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

使用標準控件開發(fā)的Gmail App

關鍵字2：ActionBar

ActionBar是Android應用中不可或缺的重要元素。它就像人類的肩膀，承載起了應用的圖標、名稱、導航、主要操作等最基本的元素。他可以承擔起大至內容導航，小至快速操作某個特定功能的作用。

Android4.X時代的ActionBar

關鍵字3：Drawer

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

使用Drawer來達到快速切換不同內容的目的

關鍵字4：NavigationBar

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

4.X時代的虛擬按鍵樣式

Material Design的理解

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

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

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

鮮活的色彩

空間的層級

流暢的動畫

多樣的組件

鮮活的色彩：

MaterialDesign是年輕化的設計語言。相比于前輩Android Design那種充滿科技感的配色而言，Material Design更強調利用鮮活的色彩豐富頁面的內容。比如利用突出的顏色來強調重要的功能或者不同的透明度來暗示內容的主次關系。

Material Design鼓勵使用豐富、鮮活的色彩

空間的層級：

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

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

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

不同內容的信息/控件擁有不同的高度層級

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

流暢的動畫

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

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

多樣的控件

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

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

各式各樣的控件

Material Design in Action

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

主頁面：

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

左圖為手機助手的線上版本，后兩圖為設計稿

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

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

我將手機助手中的應用圈功能的層級進一步提升，主頁面左滑即可進入發(fā)現(xiàn)功能。考慮到發(fā)現(xiàn)功能中的信息種類多樣，既有話題、也有好友信息流，還可能有一些推送內容。所以我在這里選擇了以卡片的形式來展現(xiàn)信息?？ㄆ暮锰幨呛暧^上樣式比較統(tǒng)一，同時自身又能夠承載不同類型的信息。

抽屜：

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

新的設計中進一步提升了抽屜的信息層級，使其高于主界面

應用詳情：

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

左圖為手機助手線上版本截圖，右圖為新的設計稿

消息中心：

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

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

左圖為線上版本截圖，右圖為新設計稿

個人中心：

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

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

寫在最后：

有句話說的好，人生有三重境界：看山是山，看水是水；看山不是山?？此皇撬豢瓷竭€是山，看水還是水。

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

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

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

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

1.警惕原教旨主義

2.不要滿足于平庸

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