導航設計的10種模式
- 2020 年 4 月 8 日
- 筆記
導航設計的目的就是需要突出產品的核心，扁平化用戶的任務路徑。讓用戶能夠順利的在產品中暢行，讓用戶時刻清楚自己在應用中所處的位置，及如何前往目的頁面。
產品的導航系統，是產品的資訊結構在用戶介面上的展現方式。移動端產品導航的設計沒有最好之說，只有最合適，根據你的產品採取最合適的導航設計。
縱觀應用市場上的APP，導航設計的模式總是幾種的組合使用。下面我們來看一下常見的10種導航設計模式。
01 底部Tab導航
描述：
- 當產品的整個體驗流中是以幾個常用功能模組（一般不超過5個）貫穿的，意味著用戶需要在多個標籤入口之間來回切換；為了保證切換的效率，將貫穿產品整個體驗的流的模組平鋪在Tab Bar位置，保證了用戶任務路徑的扁平。
- iOS原裝App Podcast，5Tab。
優點：
- 可見性好，位置明顯，易於發現，它能讓用戶直觀了解到APP的核心功能；
- 操作性好，用戶很方便就能觸及到這個區域，並可在幾個標籤中快速切換且不會迷失方向，簡單而高效；
- 符合習慣、ios原生控制項，開發簡單；
- 優先順序較高、用戶使用頻繁，彼此之間相互獨立。
缺點：
- 容納個數有限，一般最多五個（不然需要結合其他方式，運用層級和收放）。
- 佔據高度空間略大，一般都是文字+圖標的形式。
02 頂部標籤導航
描述：
頂部Tab是Google提出來的，為了區分與iOS的區別的一種導航模式，由於在頂部，手指難以觸及，所以Google對應地提出了手勢操作的解決方法：通過在螢幕左右滑動來切換標籤。
實際項目中，頂部與底部配合使用的挺多。
優點：
- 擴展性好：標籤的個數沒有上限，不過太多的話，越是後面的頁面滲透率會越低；
- 佔據空間小：相比於底部Tab，頂部Tab一般佔據的空間更小（因為不需要考慮手指點擊，所以可以把區域縮小，只選用圖標或者文字即可），可以把更多的空間安排給內容展示。
- 手勢操作非常方便。
缺點：
可見性略遜：這是空間佔據的區域變小之後的後果。
03 輪播導航
描述：
當你的應用資訊足夠扁平，可以嘗試輪播導航；
優點：
能夠最大程度的保證應用的頁面簡潔性，操作也是最方便；
缺點：
不能夠快速的定位對應的分頁內容；
04 宮格導航
描述：
- 宮格式導航被廣泛應用於各平台系統的中心頁面；
- 用在二級頁作為內容列表的一種圖形化形式呈現，或作為一系列工具入口的聚合；
- 用戶頻繁切換的概率是比較低；
- 在不同的文章中可能被稱作：跳板（圖標卡片式）、磁貼式。
優點：
- 擴展性非常好，便於組合不同的資訊類型（運營位、廣告位、內容塊、設置等）；
- 視野範圍內可以展示的功能入口多，能夠讓用戶整體上了解APP提供的服務，從而選擇自己所需要的那個服務；
- 靜態、動態結合可以展示出豐富的資訊，同時保持視覺統一；
- 跨平台不受平台限制。
缺點：
- 每個宮格相互獨立，它們的資訊間也沒有任何交集，無法跳轉互通；
- 當排布過多的時候，用戶容易眼花繚亂，選擇壓力較大；
05 卡片式導航
描述：
- 宮格導航的變式吧，可用來呈現實時內容，比如新聞、菜譜、文章或照片，可以採用網格布局（比如一直播和ins）或輪盤布局（比如格瓦拉電影），還可以採用幻燈片模式進行展示。
- 卡片式模式最適合呈現經常更新的、視覺效果直觀、彼此獨立的內容。
優點：
- 卡片式導航有更豐富的表現形式、更加隨意的組合效果（瀑布流等）以及豐富的動態效果（輪盤、幻燈片形式）；
- 直觀展現各項內容。
缺點：
- 不適合展現頂層入口框架；
- 容易形成介面內容過多，顯得雜亂；
- 設計效果容易呆板。
06 抽屜式導航
描述：
- 抽屜式也是Google提出來的一種導航模式，由於虛擬按鍵的存在，所以在Android上使用底部Tab會造成雙底欄，視覺觀感不佳；
- 一般用來放置對用戶而言不太常用或者對於產品而言不太核心的功能，或者不那麼需要頻繁切換內容的應用，例如對設置、關於、個人資訊等內容的隱藏；
- 更多的被應用於資訊流產品設計中，這類產品注重核心內容的展示，用戶的任務路徑較為單一，幾乎都是用於瀏覽產品的核心內容；至於其他比較低頻的模組入口則會隱藏在當前介面後方，避免冗餘的模組搶奪用戶的眼球；
- 在不同的地方可能被稱為：擴展菜單、側邊導航、漢堡導航；
- 「2/8」法則告訴我們，80%的用戶只用那些20%功能，這20%功能就是資訊流裡面的核心功能；如果那80%不常用的功能也佔用著最重要的位置，那麼用戶就會被打擾，產生臃腫感，甚至會放棄使用產品。
優點：
- 節省頁面展示空間，讓用戶將更多的注意力聚焦到當前頁面；
- 由於導航介面是隱藏在螢幕之外，展開之後整一頁面都是導航菜單內容，所以可擴展和個性化的空間很大；
- 擴展性好，導航的個數沒上限。
缺點：
- 用戶不易發現，使用次功能需要二次點擊，給用戶在切換功能帶來了操作成本；
- 可見性太差，用戶還沒能把漢堡菜單按鈕和側邊欄聯繫起來，所以，側邊欄的滲透率很低；
- 不直觀、不適用於主導航、如遇頻繁操作的功能，用戶不斷開關抽屜體驗不好。
07 下拉式/菜單導航
描述：
- 與抽屜式導航的目的相同，都是為了突出內容。一般位於產品頂部，通過點擊呼出導航菜單；
- 通常用來篩選同一資訊模組下不同類別的資訊，或者快速啟動某些常用的功能模組，而不需要頻繁的頁面跳轉 ；
- Android中對應的控制項為spinner控制項，但該控制項用於同一類別下不同視圖之間的切換，而不是跳轉至完全不同的視圖。iOS中下拉菜單為自定義控制項，可以實現不同類別之間的切換；
- 下拉導航還有一種變式，就是下來菜單中展示兩級甚至多級，一般在電商產品中比較常見，因為品類和篩選條件眾多。
優點：
菜單與介面的連貫性比抽屜式要好，容易讓用戶感知當前位置；
缺點：
- 位於螢幕上方，相對隱蔽且不能結合手勢操作，不適合於頻繁的切換功能使用；
- 考慮到導航菜單的可用面積較小，所以一般採用列表的形式展示菜單內容。
08 列表導航
描述：
- 作為資訊組織框架，是我們在產品設計中必不可少的一個資訊承載模式。
- 適合用來顯示較長或擁有次級文字內容的標題，每行可以融入較多資訊。
- 與宮格導航類似，常用於二級頁面，不會默認展示任何實質內容，所以通常app不會在首頁使用它；
- 無論ios開發和android 都有現成的列表布局插件和模板。
優點：
- 由上至下查看符合習慣；
- 結構清晰，易於理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。
缺點：
- 條目太多或分布不合理會導致用戶查找困難；
- 不適合需要頻繁切換任務的情況。
09 彈窗式
描述：
- 算是菜單式的一種變種，區別是位置在介面中央不依賴於某個邊緣；
- 彈出框在Android系統上的使用很普遍，比菜單、單選框、多選框等，在IOS系統上使用相對少些；
優點：
- 可在原有介面上進行操作，不必跳出介面，
- 在需要的時候才彈出，以節省螢幕空間；
缺點：
- 阻斷式的操作有時候會打斷用戶的正常操作流程。
- 非毀滅性操作盡量不使用彈框，例如：低電、病毒、刪除、支付、出錯等。
舉例：
10 組合式
描述：
一個網站或者APP內不可能只用一種導航，通常都是組合來使用。在不同使用場景下根據實際需要進行選擇。但是通常主導航會對這個產品的格調起決定性作用。
優點：
- 適用於平台級的產品；
缺點：
- 可能會增加用戶的認知負擔。
舉例：淘寶首頁
淘寶的首頁布局就是是頂部搜索框（非常重要）+banner輪播（精準推送的廣告、形成變現）+宮格（給阿里系產品進行導流）+卡片+底部tab。
總結
1.底部tab式
2.頂部標籤式
3.輪播式
4.宮格式
5.卡片式
6.抽屜式
7.下拉式
8.列表式
9.彈窗式
10.組合式
導航可能不單單只有這幾種，可能大家的叫法也不盡相同。每種導航都有其存在的意義，無所謂對錯，只有合適與否。真正在實際項目中，還是得根據產品的實際情況綜合去運用。
