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