
「選用的開發技術」及「是否使用平台原生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的樣式。

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

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

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

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

Raindrop
Raindrop是一款管理網頁書籤的APP。由於這款APP在雙平台版本中幾乎都是使用系統原生元件構成,因此很適合拿來舉例。
首先是主畫面。很明顯地,雙平台版本皆採用了平台的原生元件製作,才會有如此明顯的畫面差異。iOS這邊採用了List呈現資料夾列表,並且icon也運用了平台原生提供的SF Symbols;另一方面,Android這邊使用了相應的List元件構成,但icon方面就看不出來是使用何種icon庫或是自行繪製的版本。

除此之外,由於前述提及的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所做的調整。

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

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

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

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

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

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


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

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

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

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


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



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

RECOMMEND
-
用通行密鑰(Passkey)設計無密碼登入體驗:使用流程、UI/UX設計個案研究、設計資源
無論是登入網站、服務,都需要建立一組帳號密碼。然而,隨著使用的服務越來越多,要記住的帳密也跟著越來越多。為了解決帳號容易...
2025.05.13 -
不再當Figma新手:讓UI設計稿更加專業的必要細節
優秀的UI設計稿,其價值不僅在於華麗的外表,更體現於背後所傳達的一致性、邏輯與縝密決策。透過這篇文章,你將能跳脫一昧聚焦...
2025.04.09 -
製作Figma樣式文件的必要訣竅
樣式文件(Style guides)是用來規範設計系統各個元素的文件,無論是正式或非正式的,都會涵蓋顏色、字體、效果等細...
2025.02.26 -
挖掘同一APP在iOS、Android平台上的UI元素外觀差異
「選用的開發技術」及「是否使用平台原生UI」會影響APP在iOS、Android平台上的畫面呈現。本篇文章以台灣常見的A...
2024.09.09 -
OKLCH色彩模型:更好地掌握色相、明度、彩度,為更好的可及性而生
相比於常見的HSL、HSV來說,OKLCH色彩模型對於色相、明度、彩度有更佳的掌握度。特別是明度方面,對UI/UX設計師...
2024.08.21 -
獻給UIUX設計師的多合一Figma plugin!Spaciiing一個抵十個,排間距、畫箭頭都能一鍵搞定!
Figma社群中所陳列的各種plugin進一步擴展了Figma的可能性。儘管plugin十分方便,但你是否曾有過以下經歷...
2024.07.05
OKLCH色彩模型:更好地掌握色相、明度、彩度,為更好的可及性而生
2024.08.21
屬於泰文字型的設計美學與故事
2024.10.02