【UIUX】app design — Bottom navigation bar(android) / iOS Tab bar 尺寸怎麼開

設計App上或多或少都會遇到需要切換頁面的Bottom navigation bar(android) 在 iOS 稱之 Tab bar，這個功能之必要是來自於使用者能夠快速切換頁面，對開發來說，工程師不用卯起來紀錄使用者的路徑，可以從切換的那瞬間歸零，這對App負擔來講是百利而只有一害，而我想害的部分就是遮住了下半部的版面，但相權之下，這個讓步非常超值！

Bottom navigation bars allow movement between primary destinations in an app.

— material design

因此可以看見幾乎所有需要切換功能的App都會有此設計，位置可能是上面是下面不一定，個人認為在Android使用者習慣上一頁按鈕的情況下，為了避免誤觸行為，考慮把Bar換成書籤Tab的方式是蠻好的作法，畢竟沒有下一頁的概念，點錯就真的回不去，但大多數App都越來越靠近在兩種平台設計一致的情形下，大部份的設計會往下靠攏。

Facebook, iOS版 btm bar vs. android版 btm bar

Instagram, iOS版 btm bar vs. android版 btm bar

Android版本 vs iOS版本 官方圖

那在設計上需要怎麼開呢？

iOS

蘋果提出了safe area的概念同時給設計與工程，可以很明顯地看出差異在圓弧腳的銀幕須保留更多的上下空間，扣除掉功能，其餘才是展現內容的安全範圍。

i phone X, 11, 12 與i phone 6, 7, 8 示意差異

和i phone 6,7,8 比起來需保留Home indicator 34pt

以iphone 11, iphone 12為例，保留最下面回首頁位置的34pt，其餘想開多少就開多少(?才怪)，因此加上原先預設高度49pt，新的nav bar是83pt

Tab bar 和 Toolbars都是相同高度

iOS的部分開 (34pt) + (大於等於49pt) ＝你設計App的高度

Android

Android直接乾脆地說

• Width of each action: The width of the view divided by the number of actions (with a max of 168dp and a minimum of 80dp)
• Height: 56dp
• Icon: 24 x 24dp

因此當在設計btm nav這塊的時候，若同時考量到兩種平台的設計，iOS需要考量到 Home indicator，這樣在相對較自由的Android開發下就可以以其中一個平台方的nav去對照高度。

Hello大家好🙋‍♀️🙋‍♀️🙋‍♀️
我是MIKuo，住在台北的郊區木柵，講話可能都有點Rap(?)，目前任職於Taiwan AILabs，在介面設計的路上努力學習中！如果有任何想討論的，或是我說錯的都歡迎聯絡我
👇👇👇
micky55212@gmail.com