挖掘同一APP在iOS、Android平台上的UI元素外觀差異


挖掘同一APP在iOS、Android平台上的UI元素外觀差異

「選用的開發技術」及「是否使用平台原生UI」會影響APP在iOS、Android平台上的畫面呈現。本篇文章以台灣常見的APP如Facebook、Chrome、台北等公車等為例,討論各種UI元件在雙平台上的差異,供UI/UX設計師作為設計參考。

※本文中使用iPhone及Samsung手機作為比較設備,畫面紀錄時間皆為2024年9月。因Android OEM廠商之個別調整所帶來的介面設計差異不在本文討論範圍內。


Facebook, Instagram, Threads

Meta旗下的產品大多使用React Native製作APP介面。得益於React Native的特性,通常UI元件都能在雙平台維持一致的外觀,只有使用到平台原生UI時才會有細微的差異。

以最常見的彈出式視窗為例,當iOS版本的Facebook使用平台原生Alert時,Android版本同樣是調用平台原生的Dialog元件呈現,只不過使用的是Material Design 2的樣式。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Facebook介面差異
Facebook在雙平台版本中使用原生彈出式對話框向使用者溝通

有趣的是,點擊「限時動態」區塊的設定按鈕時,Android版本會以Bottom Sheet呈現選單,而iOS版本則使用了類似Pop-up buttons的樣式呈現。這是非常少見的特例,因為在其他使用到Bottom Sheet的畫面中,雙平台的UI呈現都會維持一致。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Facebook介面差異

在「切換帳號」畫面中,iOS版本的Facebook調用了原生的Sheet,而Android版本也使用了對應的原生元件(或可能使用了自行客製化的View)。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Facebook介面差異

當遇上「選擇時間與日期」情境時,iOS版本的Instagram使用了系統原生的Pickers,而Android版本則看不出樣式來源。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Instagram介面差異
iOS版本的Instagram使用了原生的Picker

如同大部分的APP,iOS版本的Threads使用了系統原生的Navigation Bar,而Android版本則是使用與之呼應的Top App Bar,兩者的差異只在於畫面標題的位置上。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Threads介面差異
雙平台版本的Threads介面大多維持一致,僅導覽列有較大的不同

Raindrop

Raindrop是一款管理網頁書籤的APP。由於這款APP在雙平台版本中幾乎都是使用系統原生元件構成,因此很適合拿來舉例。

首先是主畫面。很明顯地,雙平台版本皆採用了平台的原生元件製作,才會有如此明顯的畫面差異。iOS這邊採用了List呈現資料夾列表,並且icon也運用了平台原生提供的SF Symbols;另一方面,Android這邊使用了相應的List元件構成,但icon方面就看不出來是使用何種icon庫或是自行繪製的版本。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Raindrop介面差異
Raindrop APP多以原生元件構成,因此光是主畫面就呈現了不少的差異

除此之外,由於前述提及的Navigation Bar/Top App Bar差異,也導致了按鈕位置分佈、畫面佈局的微妙不同。iOS版本的搜尋列預設是隱藏在Navigation Bar Title的下方,只有位於畫面頂端並且向下拖曳時才會顯示。因此相比於Android版本來說,可省下一個icon的空間。這個省下的空間被用來放置「新增項目」的按鈕。對照Android這邊,這個「新增項目」的按鈕被放置於畫面的右下方,變成了Floating Action Button(FAB)的樣式。不僅如此,點擊iOS的「新增項目」按鈕會叫出Pop-up buttons供使用者選擇要新增的項目種類,但Android這邊的FAB僅有「新增書籤」單一功能,其餘的項目被打散至其他位置的icon中,這或許是出於為符合Material Design Guideline所做的調整。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Raindrop介面差異

和上個案例類似,在iOS中會呼叫出Pop-up buttons的操作,在Android版本中改以滿版的View替代。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Raindrop介面差異

Dcard

Android版本的Dcard將「搜尋」icon配置於Top App Bar上,而iOS版本則以搜尋列替代。即使兩者外觀不同,但它們並沒有功能上的差異,點擊後皆會引導使用者至滿版搜尋頁面。另外,雙版本畫面底部的Tab Bar/Navigation Bar動畫有細微地不同,Android這邊使用了平台常見的水波紋動畫,而iOS則以淡化動畫呈現。除此之外,雙版本畫面右下方的「新增」按鈕採用了不同程度的圓角,不確定這是否有任何設計上的考量。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Dcard介面差異

功能表頁是雙版本差異較為明顯的頁面。Android版本的按鈕採用了Material Design 2的樣式,外觀較為方正;而iOS版本則使用較大的圓角來表示按鈕,且沒有陰影設計。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Dcard介面差異
功能表頁是雙版本Dcard差異較為明顯的部分

Google Chrome

iOS版本的Google Chrome使用了Sheet搭配List製作設定頁面,對照之下,Android版本則同樣使用了平台原生的Top App Bar搭配List來製作。由於Google系列APP大多是原生安裝於Android手機中並且深度與系統體驗整合,因此能比較的畫面實在不多。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Google Chrome介面差異

發票存摺

iOS版本中使用原生樣式的Segmented Control供使用者切換頁籤,另一方面,Android版本也使用了原生的Tab Control達成相同功能。另外,相比於Android版本使用了一致的藍色,iOS這邊不知道為何,只有Navigation Bar採用了較為明亮的寶藍色。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 發票存摺介面差異

Airbnb

與Meta相似,Airbnb也採用React Native構建使用者介面,因此在雙平台版本的體驗幾乎可說是完全一致,不愧是時常被拿來當作設計案例的標竿。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Airbnb介面差異
承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Airbnb介面差異

唯一可惜的是,iOS版本的會以Sheet形式叫出下拉選單,而Android版本則以類似Dropdown menus的樣式呈現,二者在美觀程度上有不小的差距。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Airbnb介面差異
Android版本的Airbnb使用了接近原生的Dropdown Menu樣式,美觀程度上與iOS版本相比有不少差距

TickTick

TickTick使用iOS原生的Color Picker選擇顏色,而Android版本看起來應該是以自行設計的View實現相同功能。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Tick Tick介面差異

台北等公車

如果需要顯示地圖,多數的APP都和「台北等公車」一樣,在雙平台上以各自的地圖系統(即Apple Map和Google Map)顯示。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 台北等公車介面差異
運用了地圖的APP大多選擇以Apple Map及Google Map在雙平台上呈現對應介面

Pinterest

即便官方並未表明Pinterest Mobile APP採用何種技術製作,但其在iOS、Android雙平台上介面幾乎維持一致。

承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Pinterest介面差異
承邑牌設計秘訣 挖掘同一APP在iOS、Android平台上的UI元素外觀差異 Pinterest介面差異

Klook

Klook與Pinterest同樣在雙平台擁有高度一致體驗。無論是頁面互動邏輯、按鈕、動畫,皆無明顯的落差。


結論

在任何平台上提供一致的介面操作體驗,是我們身為UI/UX設計師的核心目標。然而實務上,最終畫面呈現卻會受到多重因素的影響。在這些因素中,有是不可避免的、有些是無可厚非的、有些則是可以改進的。即便本文展示了多個APP設計案例,但這並不代表適用於所有專案。由於每個服務的服務平台、範圍、專案時間、開發技術、限制皆不同,因此設計師必須掌握產品核心目標、靈活應對各種情境、與不同團隊緊密溝通合作,才能在設計稿與現實間找到平衡點。

作者介紹

UI/UX 設計師。擅長將設計思維與開發技術融合解決設計問題。 曾開發提升效率的 Figma Plugin,累積 7,000+ 使用者,並長期經營設計部落格,每月穩定吸引 1,000+ 位讀者。歡迎在 LinkedIn 上與我連結和交流!

LinkedIn
PROMOTION

用Figma做設計從未如此輕鬆

利用Spaciiing(plugin)一鍵調整間距、畫箭頭、製作樣式文件

暸解詳情

RECOMMEND