挖掘同一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的樣式。

有趣的是，點擊「限時動態」區塊的設定按鈕時，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

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

Klook

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

結論

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