跨平台設計的三種策略 3 Approaches to Cross Platform Design

產品該走蘋果風還是安卓風？

文章內容摘自客座講者Andrew Peacock, Designer @Google Cloud

這學期修了Interaction Design & Prototyping，這是一門非常注重實作的課，兩位老師分別是在Google 以及Tableau工作的資深設計師。這禮拜他們請到了在Google工作的同事Andrew來演講，他分享的主題是 Cross Platfom Design，個人覺得演講內容非常平易近人又容易理解，適合放在UX Pacer跟讀者們分享。

什麼是Cross Platform Design — 跨平台設計?

「這個App長得很蘋果」「這個App長得很安卓」「明明就同一個App，怎麼在兩個平台用起來不太一樣？」

Google-Android 跟 Apple- iOS 是全球最主要的兩個平台（作業系統），這兩個平台都有自家的設計指南，Google有Material Design Guidlines，Apple則有Human Interface Guidlines。這些設計指南就像是準則一樣，當一個設計師要設計出符合Android設備或用戶使用習慣的產品時，就會去參考Material Design Guideline，包含配色怎麼配、導覽列(Navigation Bar) 有哪幾種選擇，頁面轉換的動畫該怎麼選…等，只要跟著設計指南，你的產品就會有那個系統的「風格」。

舉例來說，同樣是在同一個頁面上切換顯示內容的Tab Bar，兩個平台的風格就很不一樣：

Tab Bar — Material Design Guidelines(Left) / Human Interface Design Guidelines(Right)

這也是為何很多設計師在入行時都要熟悉Design Guidline，因為了解這些指南可以幫助你設計出符合該平台用戶使用習慣的介面與互動。

但是在設計UI時，一定要蘋果風或安卓風嗎？我該怎麼決定要什麼風格？

Andrew此次跟我們分享了三種不同的策略以及這三種策略背後的邏輯。

一、品牌導向 Brand Oriented Approach

以品牌導向設計的產品風格通常辨識度很高，用戶可以一眼就認出該產品是什麼。仔細看這些產品的UI，你會發現它不像安卓也不像蘋果，它的介面自成一格，著重在突出品牌特色，不管你在什麼平台、用什麼設備使用它，基本上都長得差不多，以下為幾個例子：

Spotify

身為一個Spotify的用戶，今天你不管是用什麼設備/平台，應該都非常容易可以上手，因為我們早已習慣Spotify這個品牌的設計和介面控制方式。但若仔細去看他的設計，會發現他跳脫一般的設計指南。例如Spotify的「Settings設定」、「Voice Control語音控制」的位置等。

Brand Oriented Approach — Spotify

Hulu

一看Hulu的頁面，影集圖片大幅度的覆蓋整個頁面，能夠強烈感覺到Hulu本身對於這些「內容」的重視與讚揚，不同於一般內容用Stack（層層堆疊起來的樣子）的佈局方式。

Gmail

Gmail本身也是一個品牌導向的產品，像是右下角大大的 “+”，或是左上角的Hamburger Menu，都算是蠻經典的Material Design元素，讓你在iOS系統上用Gmail就像在Android上面用信箱一樣。

Brand Oriented Approach — Hulu(Left) / Gmail(Right) on iOs

品牌導向的優點是品牌辨識度高、跨平台的用戶體驗一致（不管什麼設備什麼作業系統，用起來感覺都差不多）、創新性高等。

不過對於用戶來說，也可能會對於品牌導向的產品控制的方式不熟悉，一開始使用時會比較難上手，需要一段時間去學習和適應。對於像Spotify或是Gmail等大品牌來說，由於平台使用者基數多，用戶會調整自己去適應該設計，但是對於剛要進入市場的小品牌來說，品牌向的產品就不一定如平台導向產品般直覺。

二、平台導向 Platform Oriented Approach

簡單來講，平台導向的設計就是產品在開發時會去遵循該平台的設計指南。以手機App來說，設計團隊往往會有兩個版本的設計，一個是符合iOS設計指南，另一個符合Andriod的設計指南（Material Design Guidline）。

和Gmail同樣是信箱軟體的Outlook就是一個平台導向很好的例子，在安卓系統上，撰寫郵件的為右下角的 “+”，在iOS上則是在右上角。

Platform Oriented Approach — Outlook — Android(Left) iOS(Right)

一般來說，許多著重功能性的軟體會採用平台導向的設計。以通信軟體為例（What’s App, We Chat)，對於用戶來說，最重要的是「能夠傳出訊息以及接收訊息」，因此讓用戶能夠用他們習慣的方式，最有效率的通信才是最重要的。

Platform Oriented Approach — What’s App — Android(Left) iOS(Right)

三、綜合策略 Hybrid Approach

綜合策略就是融合了品牌導向和平台導向的優點，利用設計指南上的Design Pattern創造出有強烈的品牌辨識度的產品。例如: SnapChat, Airbnb, Facebook。

**iOS & Material Design Guideline上的Design Pattern基本上都是已經經過很多測試與修正的，因此能夠借助這些現有的設計也很好

四、小結

結尾的時候，Andrew有提到其實沒有哪一個方法是最好的，因為每個產品的定位都不一樣，要採用什麼方法通常是整體商業上的考量。同樣一個產品在不同的階段也可能使用不同的策略，有些產品可能一開始用平台導向，累積一定用戶後再去增強品牌的設計，也有些產品一開始使用品牌導向，但是後來慢慢採取更多平台導向的策略。

身為一個菜鳥設計師，常常都會聽到別人說要熟讀Design Guidline，這樣才能創造出好產品，但是過去的我一直不知道「為什麼」要去了解Design Guidline，抑或是到底什麼時候要完全Follow設計指南，什麼時候不用，我覺得經過這次的演講，我了解了這幾種策略背後的「Why」，往後看其他產品時，也更能夠去分析品牌的設計邏輯和策略 : )