2018-6-29 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Material Design（以下簡(jiǎn)稱(chēng)MD）是谷歌設(shè)計(jì)的一套視覺(jué)語(yǔ)言設(shè)計(jì)規(guī)范，主要應(yīng)用于安卓類(lèi)應(yīng)用。
iOS Human Interface Guidelines（以下簡(jiǎn)稱(chēng)iOS）是蘋(píng)果公司針對(duì) iOS設(shè)計(jì)的一套人機(jī)交互指南，目的是為了使運(yùn)行在 iOS 上的應(yīng)用都能遵從一套特定的視覺(jué)以及交互特性，從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。
相對(duì)來(lái)說(shuō)，我們對(duì)于 iOS 的設(shè)計(jì)規(guī)范更加熟悉——因?yàn)榭紤]到成本，設(shè)計(jì)師進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候只會(huì)出一套 iOS 的設(shè)計(jì)稿，然后去適配安卓機(jī)型。
很少會(huì)針對(duì)安卓機(jī)型再出一套 MD風(fēng)格的方案，這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺(tái)采用了不同的設(shè)計(jì)語(yǔ)言，不同的設(shè)計(jì)語(yǔ)言會(huì)培養(yǎng)出不同的操作習(xí)慣。
例如使用安卓手機(jī)的用戶平時(shí)見(jiàn)到的都是 MD風(fēng)格的界面，突然下了一個(gè) iOS風(fēng)格的應(yīng)用，那么操作起來(lái)就會(huì)很不習(xí)慣，增加了學(xué)習(xí)成本。
為了讓產(chǎn)品可以適用不同平臺(tái)用戶的操作習(xí)慣，提供 MD 和 iOS 兩套設(shè)計(jì)稿是非常有必要的。當(dāng)然 MD 和 iOS 的差異不是一篇文章就能說(shuō)清楚的，這里我就從陰影、導(dǎo)航和配色這三個(gè)方面來(lái)簡(jiǎn)單分析一下 MD 和 iOS 的差異。
對(duì)于不太熟悉 MD 的設(shè)計(jì)師來(lái)說(shuō)，MD 意味著大色塊+陰影。
為什么 MD 如此癡迷于陰影？
從它的名字就可以看出來(lái)——Material Design，這里的 material 指的是紙張；因?yàn)閬?lái)源于現(xiàn)實(shí)生活，所以 MD 非常喜歡使用真實(shí)世界元素的物理規(guī)律與空間關(guān)系來(lái)表現(xiàn)組件之間的層級(jí)關(guān)系，而陰影就是最常見(jiàn)的表現(xiàn)形式：
同樣的賬戶注冊(cè)，安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒(méi)有陰影。
FAB（Floating Action Button），帶有陰影的浮動(dòng)操作按鈕甚至成為了 MD 的一大招牌。相比較而言iOS更加扁平化。
產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成，而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS 的導(dǎo)航體系主要由底部欄菜單構(gòu)成，而 MD 大量使用了頂部欄菜單和側(cè)邊欄菜單。
下面我們來(lái)看幾個(gè)例子：
網(wǎng)易云音樂(lè)在 iOS 中采用的是底部欄菜單導(dǎo)航，而在安卓機(jī)型上導(dǎo)航欄被移到界面頂部，「賬號(hào)」被收到側(cè)邊欄中。
b站在 iOS 中有底部欄菜單有5個(gè)標(biāo)簽，而在安卓機(jī)型中只有4個(gè)標(biāo)簽，「我的」同樣被側(cè)邊欄收起來(lái)。
推特在 iOS 中使用的底部欄菜單導(dǎo)航，在安卓機(jī)型中導(dǎo)航欄被移到了頂部。
而 Apple Music 做的更徹底，在安卓機(jī)型上直接舍棄了底部菜單欄，采用了側(cè)邊欄作為主導(dǎo)航模式。
我們發(fā)現(xiàn)前兩款國(guó)產(chǎn)應(yīng)用在安卓機(jī)型上都保留了底部欄菜單，而后兩款國(guó)外應(yīng)用直接砍掉底部欄菜單。不只是 Apple music 和推特，很多國(guó)外的安卓類(lèi)應(yīng)用都沒(méi)有使用底部欄菜單。而國(guó)內(nèi)的應(yīng)用因?yàn)榭紤]到 iOS，即使 MD 化也是閹割版的，屬于 iOS 和 MD 的混血兒。甚至很多安卓應(yīng)用在設(shè)計(jì)風(fēng)格上往 iOS 靠攏，以b站為例，其5.11之前的安卓版本中都是沒(méi)有底部欄菜單的。
當(dāng)然這里并不是去評(píng)價(jià) MD 和 iOS 哪個(gè)導(dǎo)航體系更好用，我說(shuō)下自己的觀點(diǎn)：
底部欄菜單的使用非常方便用戶在單手握持情況下的操作，但是對(duì)于大屏手機(jī)來(lái)說(shuō)，單手操作會(huì)顯得很吃力。如果用戶改由雙手握持手機(jī)，那么從易用性上來(lái)說(shuō)底部欄菜單沒(méi)有任何優(yōu)勢(shì)。
MD 的方案更加注重對(duì)界面空間的利用，側(cè)邊欄菜單就不說(shuō)了。以底部欄菜單為例，在安卓機(jī)型中用戶滑動(dòng)的時(shí)候底部欄菜單會(huì)隱藏，方便的用戶可以看下知乎，安卓版的底部欄用戶滑動(dòng)的時(shí)候會(huì)隱藏，而 iOS 則是固定不動(dòng)的。
側(cè)邊欄的優(yōu)勢(shì)還體現(xiàn)在可以提供更多的標(biāo)簽，底部欄菜單最多可以放5個(gè)。但是側(cè)邊欄菜單需要用戶點(diǎn)擊才能調(diào)出來(lái)，比較隱蔽，而底部欄和頂部欄相對(duì)來(lái)說(shuō)就會(huì)顯得一目了然，總之各有千秋。
至于為什么 MD 會(huì)拋棄底部欄菜單，我個(gè)人的理解是設(shè)備原因。因?yàn)榘沧繖C(jī)型底部有三個(gè)物理按鍵，如果采用底部欄菜單作為主導(dǎo)航模式，容易造成用戶誤點(diǎn)擊。
類(lèi)似的還有 web 類(lèi)應(yīng)用，因?yàn)闉g覽器的控件欄也在底部，所以如果采用了底部欄菜單同樣會(huì)造成用戶的誤操作。
MD 提倡使用高飽和度的對(duì)比色來(lái)提升產(chǎn)品的視覺(jué)表現(xiàn)力，也就是我在上面提到的大色塊。同樣的一個(gè)功能，從底部欄背景色、插畫(huà)到按鈕，我們可以發(fā)現(xiàn) iOS 在色彩的使用上比較克制。
知乎之前的安卓版本使用了大面積的藍(lán)色，后來(lái)改成跟 iOS 一樣的白色。這樣的調(diào)整褒貶不一，有的用戶反饋這完全照搬了 iOS，要改回 MD。
產(chǎn)品界面設(shè)計(jì)中對(duì)比效果主要由配色、尺寸、間距和陰影來(lái)完成。MD 在配色和陰影上做的比較出彩，所以 MD風(fēng)格的產(chǎn)品在視覺(jué)表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新，追求扁平和簡(jiǎn)潔。所以我們無(wú)法去評(píng)判這兩款設(shè)計(jì)規(guī)范的孰好孰壞，因?yàn)槠涓髯缘某霭l(fā)點(diǎn)就是不一樣的。
當(dāng)然前面也提到了 MD 和 iOS 的差異不僅僅體現(xiàn)在以上說(shuō)的這三點(diǎn)，還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在 iOS系統(tǒng)中，用戶向右滑動(dòng)的時(shí)候會(huì)返回上一級(jí)頁(yè)面。因?yàn)樘O(píng)果手機(jī)沒(méi)有物理返回按鍵，所以這種機(jī)制非常受歡迎，但是在一些特定場(chǎng)景的時(shí)候就會(huì)有問(wèn)題。例如如果我想復(fù)制微博里的「一曲肝腸斷，天涯何處覓知音」，選中光標(biāo)從左向右滑動(dòng)，這時(shí)就會(huì)返回上一級(jí)頁(yè)面，特別不方便。所以我只能從右向左進(jìn)行復(fù)制，我后來(lái)試了一下微信和 QQ，發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動(dòng)態(tài)，這也算是一個(gè)折衷的方案。
這篇文章并不是去評(píng)判 iOS 和 MD 兩種設(shè)計(jì)風(fēng)格孰好孰壞，也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計(jì)稿，這個(gè)目前來(lái)說(shuō)也不太現(xiàn)實(shí)。很多國(guó)民類(lèi)應(yīng)用都只采用了一套設(shè)計(jì)稿，大家都這么做，整個(gè)大環(huán)境就是這樣。
但是還是那句話：存在不一定合理。出兩套設(shè)計(jì)稿雖然現(xiàn)在看起來(lái)不現(xiàn)實(shí)，但是我們也要做好準(zhǔn)備，要有危機(jī)感。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com