Material Design（以下簡稱MD）是谷歌設(shè)計的一套視覺語言設(shè)計規(guī)范，主要應(yīng)用于安卓類應(yīng)用。

iOS Human Interface Guidelines（以下簡稱iOS）是蘋果公司針對iOS設(shè)計的一套人機交互指南，目的是為了使運行在iOS上的應(yīng)用都能遵從一套特定的視覺以及交互特性，從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。

相對來說，我們對于iOS的設(shè)計規(guī)范更加熟悉——因為考慮到成本，設(shè)計師進(jìn)行產(chǎn)品設(shè)計的時候只會出一套iOS的設(shè)計稿，然后去適配安卓機型。

很少會針對安卓機型再出一套MD風(fēng)格的方案，這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺采用了不同的設(shè)計語言，不同的設(shè)計語言會培養(yǎng)出不同的操作習(xí)慣。

例如使用安卓手機的用戶平時見到的都是MD風(fēng)格的界面，突然下了一個iOS風(fēng)格的應(yīng)用，那么操作起來就會很不習(xí)慣，增加了學(xué)習(xí)成本。

為了讓產(chǎn)品可以適用不同平臺用戶的操作習(xí)慣，提供MD和iOS兩套設(shè)計稿是非常有必要的。當(dāng)然MD和iOS的差異不是一篇文章就能說清楚的，這里我就從陰影、導(dǎo)航和配色這三個方面來簡單分析一下MD和iOS的差異。

一、陰影

對于不太熟悉MD的設(shè)計師來說，MD意味著大色塊+陰影。

為什么MD如此癡迷于陰影？

從它的名字就可以看出來——Material Design，這里的material指的是紙張；因為來源于現(xiàn)實生活，所以MD非常喜歡使用真實世界元素的物理規(guī)律與空間關(guān)系來表現(xiàn)組件之間的層級關(guān)系，而陰影就是最常見的表現(xiàn)形式：

同樣的賬戶注冊，安卓界面中按鈕帶有陰影而iOS界面中按鈕沒有陰影。

FAB（Floating Action?Button）?,帶有陰影的浮動操作按鈕甚至成為了MD的一大招牌。相比較而言iOS更加扁平化。

二、導(dǎo)航體系

產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成，而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS的導(dǎo)航體系主要由底部欄菜單構(gòu)成，而MD大量使用了頂部欄菜單和側(cè)邊欄菜單。

下面我們來看幾個例子：

網(wǎng)易云音樂在iOS中采用的是底部欄菜單導(dǎo)航，而在安卓機型上導(dǎo)航欄被移到界面頂部，“賬號”被收到側(cè)邊欄中。

b站在iOS中有底部欄菜單有5個標(biāo)簽，而在安卓機型中只有4個標(biāo)簽，“我的”同樣被側(cè)邊欄收起來。

推特在iOS中使用的底部欄菜單導(dǎo)航，在安卓機型中導(dǎo)航欄被移到了頂部。

而Apple Music做的更徹底，在安卓機型上直接舍棄了底部菜單欄，采用了側(cè)邊欄作為主導(dǎo)航模式。

我們發(fā)現(xiàn)前兩款國產(chǎn)應(yīng)用在安卓機型上都保留了底部欄菜單，而后兩款國外應(yīng)用直接砍掉底部欄菜單。不只是Apple music和推特，很多國外的安卓類應(yīng)用都沒有使用底部欄菜單。而國內(nèi)的應(yīng)用因為考慮到iOS，即使MD化也是閹割版的，屬于iOS和MD的混血兒。甚至很多安卓應(yīng)用在設(shè)計風(fēng)格上往iOS靠攏，以b站為例，其5.11之前的安卓版本中都是沒有底部欄菜單的。

當(dāng)然這里并不是去評價MD和iOS哪個導(dǎo)航體系更好用，我說下自己的觀點：

底部欄菜單的使用非常方便用戶在單手握持情況下的操作，但是對于大屏手機來說，單手操作會顯得很吃力。如果用戶改由雙手握持手機，那么從易用性上來說底部欄菜單沒有任何優(yōu)勢。

MD的方案更加注重對界面空間的利用，側(cè)邊欄菜單就不說了。以底部欄菜單為例，在安卓機型中用戶滑動的時候底部欄菜單會隱藏，方便的用戶可以看下知乎，安卓版的底部欄用戶滑動的時候會隱藏，而iOS則是固定不動的。

側(cè)邊欄的優(yōu)勢還體現(xiàn)在可以提供更多的標(biāo)簽，底部欄菜單最多可以放5個。但是側(cè)邊欄菜單需要用戶點擊才能調(diào)出來，比較隱蔽，而底部欄和頂部欄相對來說就會顯得一目了然，總之各有千秋。

至于為什么MD會拋棄底部欄菜單，我個人的理解是設(shè)備原因。因為安卓機型底部有三個物理按鍵，如果采用底部欄菜單作為主導(dǎo)航模式，容易造成用戶誤點擊。

類似的還有web類應(yīng)用，因為瀏覽器的控件欄也在底部，所以如果采用了底部欄菜單同樣會造成用戶的誤操作。

配色

MD提倡使用高飽和度的對比色來提升產(chǎn)品的視覺表現(xiàn)力，也就是我在上面提到的大色塊。同樣的一個功能，從底部欄背景色、插畫到按鈕，我們可以發(fā)現(xiàn)iOS在色彩的使用上比較克制。

知乎之前的安卓版本使用了大面積的藍(lán)色，后來改成跟iOS一樣的白色。這樣的調(diào)整褒貶不一，有的用戶反饋這完全照搬了iOS，要改回MD。

產(chǎn)品界面設(shè)計中對比效果主要由配色、尺寸、間距和陰影來完成。MD在配色和陰影上做的比較出彩，所以MD風(fēng)格的產(chǎn)品在視覺表現(xiàn)上更有沖擊力。而iOS則顯得比較小清新，追求扁平和簡潔。所以我們無法去評判這兩款設(shè)計規(guī)范的孰好孰壞，因為其各自的出發(fā)點就是不一樣的。

當(dāng)然前面也提到了MD和iOS的差異不僅僅體現(xiàn)在以上說的這三點，還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在iOS系統(tǒng)中，用戶向右滑動的時候會返回上一級頁面。因為蘋果手機沒有物理返回按鍵，所以這種機制非常受歡迎，但是在一些特定場景的時候就會有問題。例如如果我想復(fù)制微博里的“一曲肝腸斷，天涯何處覓知音”，選中光標(biāo)從左向右滑動，這時就會返回上一級頁面，特別不方便。所以我只能從右向左進(jìn)行復(fù)制，我后來試了一下微信和QQ，發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動態(tài)，這也算是一個折衷的方案。

總結(jié)

這篇文章并不是去評判iOS和MD兩種設(shè)計風(fēng)格孰好孰壞，也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計稿，這個目前來說也不太現(xiàn)實。很多國民類應(yīng)用都只采用了一套設(shè)計稿，大家都這么做，整個大環(huán)境就是這樣。

但是還是那句話：存在不一定合理。出兩套設(shè)計稿雖然現(xiàn)在看起來不現(xiàn)實，但是我們也要做好準(zhǔn)備，要有危機感。

#專欄作家#

王M爭（微信公眾號：王M爭），人人都是經(jīng)理專欄作家，資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議