導航UI設計(下) — 帶你快速了解 App 的導航模式

PeerOne UIUX Director

Published in

PeerOne Technology 皮偶玩互動科技

Dec 6, 2020

嗨大家好久不見啦～接續上次介紹的網頁導航設計小技巧，今天要來介紹App 導航的設計要點，還沒看過上一篇文章👉導航UI設計(上) — 網頁上的導航設計怎麼想怎麼做？也別忘了去看一看喔！那我們就開始吧！

就如同網頁上的導航，App 上的導航的作用也是提示用戶所在的位置以及引導用戶操作，今天我們會把導航大致分成一級導航跟二級導航來做介紹。

頂部導航及底部導航

第一個部分我們要來介紹頂部導航跟底部導航，這是最常見也是最基本的導航形式，底部導航會作為產品的全局導航，頂部導航則是提供有關頁面的總體資訊，以及用戶可能會對該頁面有的潛在操作。

頂部導航

頂部導航基本上是由標題跟操作組成。標題最主要的功能就是提示用戶所在的位置，有時候底部欄只有 icon 沒有文字，這時候標題就能發揮很大的作用，像是 Facebook的底部欄只有icon ，於是就在頂部導航的標題上說明用戶所在的頁面；另外標題也可以提示用戶正在執行的操作，例如新增或編輯內容時，如下圖標題的部分就顯示了「新增提醒事項」。

標題除了作為提示也可以是品牌識別的一部份，直接放上品牌 Logo 或是將品牌色運用在頂部導航都是常用的做法。

隨著全螢幕手機的問世，螢幕高度增加，大標題導航欄的風格樣式也跟著興起，這個趨勢也被引入了平台規範，不論是 iOS 或是 Material Design 都有定義常規標題跟大標題兩種規範。

除了標題以外，頂部導航通常也會包含一些常用操作項，一般會用圖標的方式展示，最多建議不要放超過4個操作，畢竟頂部欄的空間有限，還是要有適當的空間才不會讓人不好操作，視覺上也比較舒服；有時候我們也會看到直接用文字展示的做法，通常是在只有一個操作時會用這樣的方式，此時需要確保文字精簡，並且在設計上跟標題做出差異，讓用戶能清楚分辨。

個人資料或設置也是經常會出現在頂部導航的功能，作用是讓用戶可以方便的編輯個人資料、設置或切換帳戶。

搜尋產品跟查看購物車是電商產品中最重要也是最常用的功能，所以我們會發現幾乎所有電商產品都會把搜尋功能跟購物車放在頂部導航。

頂部導航的左右兩邊都可以放上操作，右上角的位置是點擊熱區，常用的功能就很適合放在這個位置，而左上角的位置最常見的操作就是返回跟取消了，返回的操作基本上一定會在左上角，取消就不一定了，如果有其他操作時就會將取消放在左上角，但如果只有取消一個操作的話就會建議放在右上角方便用戶操作。

底部導航

接著來說說底部欄的部分吧！通常底部導航的選項會控制在3–5個，而5這個數值其實就是根據米勒定律（Miller’s Law）而來，由於人短期記憶的儲存空間限制，最多大約能記住 7±2 個單位，為避免增加用戶的認知負擔，底部導航選項的數量盡可能不要超過5個。想要多瞭解米勒定律跟其他心理學原理也可以參考之前的文章👉 心理學在 UI / UX 設計中的運用（上） 跟 心理學在 UI / UX 設計中的運用（下） 兩篇文章中有更多更詳細的介紹喔！

底部欄的設計主要又可分為權重平分及引導操作兩種，如果有特別想要吸引用戶使用的操作，可以將這個圖標做差異化的設計，讓它脫穎而出。

二級導航

大部分的產品是沒有簡單到光靠頂部導航及底部導航就可以引導用戶完成所有操作，所以這時候我們需要二級導航來輔助，這邊就來介紹一些常用的樣式類型。

Tab標籤式

這是很常見的一種導航方式，一般都是直接用文字展示分類內容。這種導航方式很直觀，用戶一眼就能看到所有內容，擴展性也很強，當標籤內容多的時候也可以透過左右滑動的方式一直往後加，但缺點是排序在後面的內容就需要滑動才能看到，越往後面的標籤通常點擊率越低，當你的內容非常多的時候就不太適合用這種導航方式。

另外因為這種導航通常會直接放在頂部導航的下方，在單手的情境下是比較難操作的區域，有些產品會設計成可以直接整頁滑動切換，也是一種解決方法。

優點：直觀，擴展性強

缺點：位置不利於單手操作，排序在後的選項點擊率低

抽屜式

抽屜式導航一開始應該算是跟著漢堡菜單而來，漢堡菜單風靡一時，Google也將抽屜式導航寫入 Material Design，抽屜式導航在操作時可以縱向滑動，能夠乘載很多的入口跟資訊，不過抽屜式導航比較隱蔽，不容易發現，所以通常不會把產品主要的功能跟操作放在側邊菜單，相對的當產品有一些使用頻率比較低的功能，就很適合放在抽屜式菜單中，避免干擾主要資訊。

優點：能夠乘載的資訊跟功能多

缺點：比較隱蔽不容易發現

桌面式

桌面式導航也是很常見的一種形式，通常各個入口都是獨立的，進入子頁面後無法互相跳轉，所以在切換頁面時的操作成本是高的，如果每個功能間獨立性高且每次使用時只會使用其中一個功能，桌面式導航也是一種不錯的選擇。

桌面式的導航能乘載的資訊量大，擴展性也高，像是電商平台的資訊分類眾多，就經常使用這種導航形式。

優點：資訊承載力強，擴展性高

缺點：各功能間互相切換操作成本高

點聚式

運用一個懸浮的icon，將數個功能收合在裡面，通常這個 icon 會固定在螢幕右下角的位置，方便用戶隨時都能執行操作，這種設計方式也能很好的凸顯導航，引導用戶點擊，在展開內容時可以有很多動效的發揮空間，增加交互的趣味性。

優點：醒目，容易吸引用戶點擊，能有交互趣味性

缺點：會遮擋住畫面部分內容，內容也相對隱蔽

平鋪式

平鋪式的導航主要著重在沈浸式的體驗，通常運用在天氣、專題頁面之類的導航，算是比較少見的形式，但如果在互動設計上多下點功夫是能夠給用戶留下深刻印象的。不過這種導航類型只適用於內容比較少的情況，因為排序愈靠後的操作成本就愈高，會導致點擊量低，設計時可以加上分頁指示，提醒使用者目前所在的位置以及後續還有多少內容。