設計跨平台App,20件該注意的介面控件與操作差異
Android VS. iOS: 20 UI Components & Patterns Explained
目前手機 App 開發為了讓更多使用者接觸,往往同時會在 Android 與 iOS 平台推出,但許多 App 的設計,往往沒注意到兩個平台的差異,常發現 Android App 上出現 iOS 的控件,明明Android有自己的樣式可以使用;或是在 iOS App 上使用 Android 的操控行為,導致使用者的不適應。
為了讓新手設計師或工程師瞭解兩個平台的一些差異,以下針對常用元件與操作行為,甚至它們對於同一類似元件有不同名稱,做對照介紹:
1. Navigation Drawer, Tabs & Bottom navigation VS. Tab Bars
我們先來談談導航設計,因為它是每個 App 設計一開始要碰觸的基本架構問題。
側邊導航選單 (Navigation Drawer) 在2013年是 Android 最具代表性的設計,將資訊架構上,屬於最頂端的項目,收在裡面,呈現簡潔乾淨的風貌,但隨之,許多研究漸漸表明側邊欄的使用性問題 (可參考8種手機導覽設計解析),Google 自己本身的 App 也漸漸把一些重要的功能分類,從側邊欄移到標籤列 (Tabs),Youtube 便是一例。2016年,Material Design Guidelines 出現底部導航列 (Bottom Navigation),可以看得出來越來越與 iOS 靠近。
值得注意的是,Android 標籤列與底部導航列仍有使用差異:
1) Tabs 在資訊架構上,可以放在任何一個層級。但 Bottom Navigation 只能使用在最頂端的層級
2) Tabs 支援 swipe 手勢,可以滑動切換頁面。然而 Bottom Navigation 僅能點擊切換。
3) Tabs 可放的項目數量更有彈性,除了 Fixed Tabs 可放2–5個項目外,它還有 Scrollable Tabs 可以放置為數不少的項目。然而 Bottom Navigation 僅能放3–5個項目,禁止兩個或超過五個。