8 種手機導覽設計解析

8 Mobile Navigation Design Patterns

1. Navigation Drawer (Side Menu)

如果一個 App 有比較多的選項，可以用抽屜式導覽(Navigation drawer)的方式收入其中，如果 App 其中有一個主打的功能，也適合這種導覽形式。Navigation Drawer 內的選單樣式，不一定是列表式，有時候會採用 grid 的排版，這端看設計師的巧思。

Navigation Drawer，常見於 Android app，除了點擊 menu icon 叫出 drawer外，亦可從螢幕邊緣 swipe 滑出，值得一提的是，當頁面進到第二階層之後時，menu icon 被返回 icon 取代，此時如果要快速到其他類別項目底下的頁面時，不用按返回，可以使用手勢，從邊緣叫出選單，直接做切換。

雖然 Navigation Drawer 並非 iOS 標準導覽，但仍可見於部份 App。在 iOS 上，Navigation Drawer 則不一定需要從邊緣滑出，因為它不像 Android 頁面中可能有 Tab bar（支援手勢滑動），會有手勢衝突，所以使用者可以從頁面中間 swipe，直接叫出選單。有些 App 仍未特別設計手勢喚起選單。

Navigation Drawer: Spotify (iOS) & Airbnb (Android)

優點

1. 跨裝置能呈現良好一致性：平板或網頁 App 上，若有 side menu，在手機上就可以收入 drawer 內
2. 畫面乾淨清爽：把為數眾多的選項都藏入 drawer 內

缺點

1. 步驟多，操作效率低：要到其他頁面時，步驟比起 Tab 更多，需要兩次點擊 (點開 drawer icon，menu 展開後，再去點選想要的項目)，如果常需要在各項目中做切換，累積多出來的步數將很驚人，也導致下一個問題。
2. 難以發現，觸及率低：許多研究指出，多數使用者都停留在 menu 內第一個選項底下的頁面，導致其他選項頁面觸及率很低，大家都懶得去切換，甚至有些手機新手，還不知道可以點擊開啟 menu。
3. 導覽性差，無法一瞥而知：無法立即得知還有哪些其他選項，或是該頁是在哪個項目底下，需點開 menu 才能得知。
4. 單手操作不易：有些 Drawer 支援 swipe 手勢喚出選單，但有些則沒有則需點擊 drawer icon 的方式開啟，而 drawer icon 位置在螢幕頂端，單手操作時，手指不易觸及。且表單開啟後，列表為由上往下排列，習慣上也以重要度及使用頻率排序，反而上方較重要選項，單手操作亦難觸及。

適當使用時機