Material Design和iOS產品設計差異化思考

5 評論 13023 瀏覽 83 收藏 11 分鐘

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兩種設計風格孰好孰壞,也不是讓我們現在就去為自己的產品做出兩套設計稿,這個目前來說也不太現實。很多國民類應用都只采用了一套設計稿,大家都這么做,整個大環境就是這樣。

但是還是那句話:存在不一定合理。出兩套設計稿雖然現在看起來不現實,但是我們也要做好準備,要有危機感。

#專欄作家#

王M爭(微信公眾號:王M爭),人人都是經理專欄作家,資深互聯網人。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 難道MD就不可以做成像ios一樣的顯示和操作邏輯嗎?

    來自廣東 回復
  2. 看到作者安卓手機的狀態欄確實尷尬。。。

    來自廣東 回復
  3. 安卓和IOS要不要統一UI,也是個問題

    來自廣東 回復
  4. 學習了?。?!

    來自江蘇 回復