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 位置在螢幕頂端,單手操作時,手指不易觸及。且表單開啟後,列表為由上往下排列,習慣上也以重要度及使用頻率排序,反而上方較重要選項,單手操作亦難觸及。

適當使用時機

當第一階層的數量較多時,且比較少會在每個項目頻繁切換,以及當一個App有一個主打功能,希望使用者一直在該頁面底下,drawer 會是不錯的選擇。

當資訊內容多,架構較複雜時,因為階層多,可以搭配不同架構呈現方式,將資訊以最佳的方式呈現,例如 drawer 搭配 list 或 card,或是 drawer 搭配 tab。

2. Tab Bar/ Bottom navigation/ Segment control

標籤列 (Tab bar) 也是一種常見於 iOS 與 Android 系統的導覽方式。不過在iOS中,因為便於單手操作的關係,在 iOS guidelines 中,Tab Bar 是放在頁面最底端,另外,iOS Tab Bar 有時候正中間會有 Call to Action 按鈕。

而 Android 系統,則是習慣放在頁面偏上方(放於 Action bar下方),避免與返回、首頁、最近開啟程式之系統鍵誤觸,為了易於單手操作,Android tab 支援 Swipe 滑動手勢,以便在各 Tab 中快速切換;另外 Android tab 除了固定式 (fixed) 外,還有可滑動式 (scrollable),在較多選項或選項字串較長時,可以使用。

圖一為Scrollable Tab,圖二圖三為Fixed Tab。Tab除了放文字以外,也可以放圖示,或是文字加圖示 (source: google material design)

iOS 和 Android Tab Bar 上的選項最多以五個為限。如果項目超過五個時,往往會把比較不常用的項目,集結成一個 More 或其他較通用的類別,放在第五個位置。

左圖為Facebook iOS版,右圖為Android。iOS Tab置底,Messenger為CTA按鈕。Android Tab在Action bar下方。(source: itunes & play store)

而在 Android 6.0 後,又新增 Bottom navigation,與 iOS Tab Bar 習慣更為接近,無 swipe 切換功能,只能點擊切換到另一類別項目。

左圖為Google plus右圖為News Republic,皆為Android

另外,在架構上,當 tab 作為第二層或二層以上之導覽時,iOS 會是使用似tab 的 segment control,Android 則是使用在 Action bar 下的 tab bar (不會使用 Bottom navigation)。

iOS Segment control,可以放圖示或文字,似Android Tab功能

優點

  1. 操作效率高:在各個類別項目切換時,相當方便快速,只需一次點擊。而在同一個類別底下兩三層的地方,iOS Tab 仍會一直存在,再按一下該類別項目時,會直接幫你跳回第一層。
  2. 一目了然:清楚展現目前的頁面所在類別位置。
  3. 易於單手操作:iOS Tab bar 和 Android Bottom Navigation 位於頁面底端,容易單手觸及,而 Android Tab bar 支援 Swipe 手勢,也可以單手滑動切換頁面。

缺點

  1. 在視覺動線上,比較容易上下跳動:iOS Tab bar 和 Android Bottom Navigation 切換 Tab 時,視線需下移至頁面最底端,做完切換後,視覺動線會上移到頁面最頂端,開始閱讀新載入的資訊。
  2. 架構上略顯尷尬:Android Tab bar 在 Action bar 底下,而一些特定操作按鈕則是在 Action bar 內,在切換 Tab 時,類別切換時,往往操作也會跟著改變。但是 Action bar 和 Tab bar 的排列關係,在階層上,會覺得Action bar 高於 Tab bar,所以切換 Tab bar 時,會認為 Action bar 不應改變。不過如果 Tab 在頁面底端,這個問題就比較輕微,因為變動區域是 Tab 上方所有區域。但 Android Tab bar 夾在 Action bar 和主要內容區塊中間,切換 Tab 時,兩個區塊都跟著變化,比較尷尬。這種尷尬情況,過去在 Android 常見到,目前漸漸也開始消失。
Android Action Bar的action button隨著下方Tab bar類別切換而變化,範例為HangoutsLine

3. List/ Springboard (Gird/Other forms)/ Card

基本上,List、Gird、Card等都是類似的導覽選單設計,它們是每個類別項目的入口,如果進入了某一類別底下,要到其他類別時,都需要再返回至該選單頁面。

這種導覽方式,可以作為次要導覽方式,較不建議做成主要導覽,原因是當頁面在某一類別底下深處時,要跳到另一類別下,由於線性的架構,必須一直返回,操作步驟很多,顯得麻煩。

如果要作為主要導覽,某些情境下,不會常在各類別中切換,每次開啟 App就有特定目的,也還算合適使用這種導覽樣式。例如:航空公司的 App,使用者可能在在不同時間,需要不同的資訊,預定機票、Check in、Flight Status 等,使用者比較少會去同時間在這些類別中做切換,所以 List/ Springboard/ Card 的導覽方式,是適合的。又或者是找房產類型的 App,也不太會同時租房又買房,諸如此類。

列表式: KAYAK, TED, Clean Master & TED
與列表類似,但會有插圖或圖片當背景:HotelQuickly, IFTTT, YPlan & Google Calendar
Springboard (Tile/Gird/Other Forms):Line, Spotify, 喜馬拉雅 & Clean Master
卡片式設計,可以含較多資訊或是圖片:Google Music, Behance, Linkedin & Health

4. Toggle/ Popover Menu

Toggle 和 popover 其實有點像是 drawer 的變形,他們都是靠點擊之後,滑出或彈出選單,覆蓋住部分當前的頁面,點擊類別項目後,跳轉至該頁面。

Toggle 式往往做出似下拉選單 list 或是 Grid 的樣式。Toggle menu 比起Drawer 更容易出現單手難以操作的問題,既放於頁面最上方,又無手勢支援。但是從資訊架構的角度來看,往往 Action bar (Navigation bar)上放的就是該頁面的類別標題,直接點擊標題去切換類別,是蠻合理的。

Toggle Menu: Pocket, Vine, Bechance & Canopy

而 popover 則是形狀多變,可以是列表式或是圓圈繞成圓環等。基本上整個頁面都是設計師可以揮灑的空間。這些出現的項目有些作為切換類別之用,有些則是按下 Call to Action Button 而出現的相關操作鍵。

Popover menu: National Geographic World Atlas, Density & Tumblr

5. Metaphors

透過模擬真實世界的物品,讓使用者可以依過去的經驗操作,降低學習門檻,而提高易用性,讓導覽變得直覺。在智慧型手機剛出現,App 開始蓬勃發展的時候,是相當受歡迎一種設計策略。這種策略至今仍被許多 App 採用,但視覺設計風格從過去的完全擬真模仿,也漸走向簡化。

Metaphors: Awesome Note, iBook, Passbook & Linkedin

6. Swiping Gesture:Image/ Pagination/ Card

透過滑動手勢,切換頁面,可以快速瀏覽內容。為了讓使用者知道可以滑動,往往會留下一些暗示,例如 pagination indicator 的小點點,常見於 App第一次使用時的功能特點介紹;卡片式和圖片會留一點點內容在畫面邊緣。卡片式設計其實也算是 Metaphors 一種,卡片有排列、堆疊等特性,讓互動有更多可能性,在 Google Material Design 內相當常見。

Image swiping: iTunes store, Starbuck, Spotify & Play Store
Pagination indicator: Showtime, dcovery, Paper & Linkedin
Card Swiping: Evernote, Chrome, Tinder & National Geographic World Atlas

7. Pie/ Wheel

而轉盤狀的選單,也往往暗示可以滑動。有兩種操作方式:一種會有指針或是選取區域的指示,手指按住滾動輪盤,當手指放開時,頁面即切換至該項目類別底下,一種則是直接點選輪盤上的項目直接進入。通常滾動滾輪的操作,往往也會支援點擊,畢竟如果在頁面上已經看見想要選擇的項目時,點擊比起滾動,算是更直覺快速的動作。

Map Wheel by Scott Jensen and BBC iPlayer Radio are examples of wheel navigation

8. Expand/Collapse panel

為了避免過深的階層,List/Gird/Card 類型的導覽方式,可以透過收闔選單(Expand/Collapse panel)來減少縱向階層,同時減少在不同類別切換時的步驟。常見於好友列表和常見問題列表使用。

總結

不同的導覽樣式,有各自的特性,適用於不同情境。這些特性在對的情境下使用,就會是優點,在錯的情境下使用,當然就乏善可陳。

如果希望使用者沈浸於內容之中,而且只有一個主軸,也不會常會在各類別項目做切換,這時候 Navigation Drawer 會是不錯的選擇,有畫面乾淨,凸顯內容的優點。如果今天類別項目不多,且希望使用者每個類別底下的功能都能常去使用,那麼就可以使用 Tab Bar,有較高的操作效率與一目了然的導覽作用。Navigation Drawer 和 Tab Bar 在資訊架構上,可作為第一層主導覽之用,可搭配 List/Gird/Card 等其他次導覽使用。

在雙層導覽常見 Navigation Drawer + List/Gird/Card 或是 Tab + List/Gird/Card 的組合。三層以上的,可以使用 Navigation Drawer + Tab + List/Gird/Card 的搭配

List/Gird/Card 除了次導覽功能亦可作為主導覽使用,但由於較為線性的架構,適用於使用者每次使用 App 已有特定目標和目的地,不會在各項目中切換。這種形式也常見於 Dashboard 的設計,在主頁面可以一瞥相關資訊,需要更進一步的詳細資料,再點擊進入。

Toggle/Popover 算是抽屜式的變形,但由於擺放位置且不見手勢支援,比起Drawer 單手操作性更差,但是卻讓人容易了解此處可以點擊,並意會到選項可能與現在顯示出來的標題字串有關。Toggle/Popover 在複雜結構上,仍可以佔有一席之地,可以搭配Drawer + Toggle + List/Gird/Card 或是 Tab + Toggle + List/Gird/Card。或是使用於較為次要功能上,為了滿足少部分特定族群的需求,而多數人無切換的必要。

Metaphors 可以幫助使用者依過去的實體世界經驗,更快熟悉軟體操作。Swiping Gesture:Image/ Pagination/ Card,藉由手勢的操作,已是常見的導覽方式,但記得要留下一些線索,讓使用者知道該往哪邊滑動。而卡片式可以堆疊和排列的特性,更是 Android Material Design 的一大特點。Pie/ Wheel 比較少見於一般 App,空間的使用上較為浪費,但如果設計得宜,仍是一種吸睛的表現手法。Expand/Collapse panel 可以用於減少階層、操作步驟,常與 List/Gird/Card 搭配使用。

Reference

Mobile Design Pattern Gallery, 2nd Edition: UI Patterns for Smartphone Apps by Theresa Neil