iOS 與 Android,App 的 UI 設計該一致嗎?

談數位產品在不同平台的設計策略,與台灣的業界狀況

無可避免的問題

如果公司有個 App,需要同時推出 iOS 與 Android 的版本,那麼設計師在著手繪製任何畫面之前,最先要面對的問題就是,這兩個主流平台究竟該用同一套設計、還是「讓 iOS 版 有 iOS 的味道、 Android 版 有 Android 的味道」比較好?

而這個問題難回答的地方在於,這件事並非單純的「風格選擇」那麼簡單,而是牽涉到了前端工程實作、UX、產品性質與目標族群、開發時程⋯⋯等等的綜合性抉擇。


設計規範

iOS 與 Android 都各有一套明確的設計規範 (Design Guideline),這些規範的目的在於讓各個 App 的操作模式 (Pattern) 保持基本的一致性,讓使用者每次下載新 App 時,不需要重新學習如何操作。iOS 的規範可見 iOS HIG、Android 的設計語言則稱之為「Material Design」。

如果遵從 iOS HIG 的規範來做設計,那麼就可以讓 UI 具有「iOS 的味道」;遵從 Material Design 的規範則會讓 UI 看起來「很 Android」,也就是說,這個產品會有兩個不同的外觀。

設計語言光譜

而一個產品的設計在兩個平台上是「統一設計」或「遵從平台規範」,這其實並非 1 或 0 的選擇——而是漸變的。因此我們可以想像有這麼一個光譜的存在,一頭是完全統一設計,一頭則是徹底的遵從平台設計規範:

每個 App 都會落在這個光譜上的某個位置,現在來看看這個光譜的兩頭各意味著什麼。

設計難度

許多人可能會以為,遵從規範要做兩套不同設計,難度會比較高;但事實正好相反——因為規範裡提供了明確的設計準則,設計師其實大多數時候不用花太多時間在處理樣式和定義操作邏輯上;反而是統一設計就需要設計師定義一套產品自有的設計系統 (Design System),設計系統要做得好、兼顧美觀和易用性,難度是非常高的。

開發成本

開發成本也跟設計難度有相同的趨勢,而且落差更明顯,也就是說,統一設計所帶來的開發成本,往往會比遵從規範高很多。原因在於,遵從規範意味著使用較多的原生組件 (Native Component),統一設計則代表許多 UI 都要客製化從頭開始刻起,若要刻到細膩完美,幾乎等於要重造所有輪子。

易用性

各平台的使用者,大多已經過該平台的「長期訓練」,對於原生的組件,都已經學會如何使用了。例如 iOS 的使用者看到畫面下方有一條 Bar (Tab Bar),就會知道那是主選單;而 Android 的使用者則習慣去點左上角的「☰」來找尋所需要的功能(這只是一個比較明顯的例子)。因此,依照規範來做設計,通常可以讓使用者更快上手、而無需花太多時間在學習操作 UI。

品牌識別與產品個性鮮明度

如同上方所述,遵守規範意味著使用較多的原生組件,但同時品牌的個性也會被削弱一些。統一設計、並開發自有的設計系統,會比較有機會塑造出搶眼、令人沈浸其中的使用體驗。(想一想,什麼類型的 App 會特別注重這點?)

綜合比較

現在我們把上方提到的性質和光譜放在一起整理比較:


大公司們的選擇

接著我們來看幾個比較有代表性的例子。

統一設計:UBER

UBER:左 iOS,右 Android

由於很難在兩隻手機截出完全一樣的圖,而且該 App 有可能正在進行 A/B Testing,因此我分別從 App Store 與 Google Play 取官方截圖最準。我們可以看到 UBER 採取了完全統一的設計策略,而且也發展了自己的設計語言/系統,如果不看系統的 Status Bar,幾乎無法分出來哪個畫面是 iOS/Android。


統一設計:Instagram

Instagram:上 iOS,下 Android

Instagram 除了一些 icon 有差別、極少數元件 (如 Search Bar) 外,畫面基本上也是完全相同的。


統一設計:Forest

Forest:左 iOS,右 Android

其實拿這個 App 來比較的目的在於點出一個事實:對於遊戲 (或類似遊戲的) App 來說,具有跨平台一致的設計語言是很重要的,因為遊戲較注重情境塑造,會希望使用者整個沈浸到裡面去,如果沒有自己的視覺調性,這個情境基本上是出不來的。


遵從各平台規範:Dropbox

Dropbox:左 iOS,右 Android

可以很明顯地看出來,Dropbox 使用了較多原生的 UI 元件,例如 iOS 的 Segment Control 到了 Android 上就變成了 Tab,兩平台的使用者都能感到熟悉。


遵從各平台規範:WhatsApp

WhatsApp (訊息列表):左 iOS,右 Android
WhatsApp (傳送位置):左 iOS,右 Android

WhatsApp 的設計策略幾乎可說是完美地遵從平台的設計規範,iOS 版極度「有 iOS 味」、Android 版極度「有 Android 味」,連地標的大頭針都與系統一致,整個使用體驗相當逼近系統內建的 App,使用者幾乎一打開就能立刻學會如何操作。


介於中間:Facebook 與 Messenger

Facebook:左 iOS,右 Android
Messenger:左 iOS,右 Android

Facebook 與 Messenger 則是比較特殊的設計取向,所採取的策略是「畫面大架構 (如上下方的 Bars) 遵從規範、細部調性統一設計 (例如 icon 與其他非原生 UI)」。如此一來,使用者還是能以相對快的速度學會如何使用、有一定的熟悉感,但又能建立起相當程度的品牌印象。

像這樣的大型產品,卻能夠將平衡點拿捏得如此巧妙,並滲透到最小的細節、整體不譁眾取寵,卻處處有互動巧思,可說是極優秀的設計。


綜合分析

經過以上比較,再加上一些額外比較知名的 App,我們大致上可以得到像這樣的分佈:

看到這裡,其實本文一開始提出的問題,答案應該就有個輪廓了,要統一設計或是遵從規範做兩套,其實首先要思考這個 App 的性質。

如果是工具類軟體,那麼使用者會有「一打開就要趕快用」的期待,會比較適合做遵從規範的設計,因為更好上手。

如果你希望給使用者一個沈浸式的體驗,例如遊戲、或是多媒體內容的平台,那麼就可以考慮定義一套自己的設計系統/語言;但相對而來的就是略高的 UI 學習門檻,要做得有個性又好用,難度是相當高的,如果品牌本身不夠大、剛進入市場要爭取使用者,這麼做很有可能會造成傷害。


關於台灣的 UI 設計

前面提到,「統一設計」一般是希望提供使用者一個比較獨特、沈浸式的體驗;如果我們仔細觀察台灣的許多 App,會發現「統一設計」的 App 佔明顯多數。

但卻是往一個不太合理的方向發展,讓我們看幾個比較有代表性的例子。

PChome 24h 購物

PChome 24h 購物:左 iOS,右 Android

這很明顯是 Hybrid App,由原生框架包裹 UIWebView 製成,因此 UI 一模一樣是理所當然的,類似的 App 還有 momo購物網等。


GASH POINT

GASH POINT:左 iOS,右 Android

威秀影城

威秀影城:左 iOS,右 Android

從這些例子可以觀察到,台灣許多 App 的 UI 都看得出來以下這套思維:

  1. 我的品牌很重要,那是招牌,就是要越明顯越好,不希望遵從規範削弱我的品牌個性
  2. 優秀的統一設計很難做,設計費會很貴,為了節省設計費,剛好 Android 那邊的 Material Design 看起來乾乾淨淨的,就全都用那種三條線選單的設計吧,加上現在很流行的卡片式設計,應該不錯
  3. 統一設計要刻很多客製 UI,開發費很貴?不然做 Hybrid 吧,網頁工程師也比較多廉價人力,又省一筆

⋯⋯有這樣的思維其實滿可惜的,因為很多公司並不是沒本事做出好東西來,讀者可以思考,身為設計師或 PM,甚至是老闆,這三方各該做出什麼樣的改變,才能有改善?


結論

您可能發現本文完全沒有提到 Google 的產品,那是因為 Google 所採取的設計策略較為特殊,因此留給您想一想,比較一下 Google 的產品在 iOS 和 Android 的設計,然後思考:

  1. Google 的產品家族在光譜的哪一個地方?
  2. 為什麼?

延伸閱讀

Photon Design System: Design for Scale

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.