設計跨平台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 靠近。

Youtube架構歷史變革：訂閱、個人紀錄和播放清單等重要功能頁面放在Drawer > 重新整理架構，將功能放入Tab，移除Navigation Drawer> 新增趨勢頁面加入Tab

Google Photos架構歷史變革：主功能頁面放在Drawer > 主功能頁面移至Button Navigation > 將干擾圖片瀏覽的Floating Action Button變成Search bar形式

值得注意的是，Android 標籤列與底部導航列仍有使用差異：

1) Tabs 在資訊架構上，可以放在任何一個層級。但 Bottom Navigation 只能使用在最頂端的層級

2) Tabs 支援 swipe 手勢，可以滑動切換頁面。然而 Bottom Navigation 僅能點擊切換。

3) Tabs 可放的項目數量更有彈性，除了 Fixed Tabs 可放2–5個項目外，它還有 Scrollable Tabs 可以放置為數不少的項目。然而 Bottom Navigation 僅能放3–5個項目，禁止兩個或超過五個。