起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識APP導航設計的對比總結
縱觀應用市場上的APP，導航設計的模式總是幾種的組合使用。
導航設計的目的就是需要突出產品的核心，扁平化用戶的任務路徑。讓用戶能夠順利的在產品中暢行，讓用戶時刻清楚自己在應用中所處的位置，及如何前往目的頁面。
產品的導航系統，是產品的信息結構在用戶界面上的展現方式。移動端產品導航的設計沒有最好之說，只有最合適，根據你的產品采取最合適的導航設計。
縱觀應用市場上的APP，導航設計的模式總是幾種的組合使用。下面我們來看一下常見的幾種導航設計模式。
01 底部標簽(Tab)導航
描述：
- 當產品的整個體驗流中是以幾個常用功能模塊（一般不超過5個）貫穿的，意味著用戶需要在多個標簽入口之間來回切換；為了保證切換的效率，將貫穿產品整個體驗的流的模塊平鋪在Tab Bar位置，保證了用戶任務路徑的扁平。
- iOS原裝App Podcast，5Tab。
優點：
- 可見性好，位置明顯，易于發現，它能讓用戶直觀了解到APP的核心功能；
- 操作性好，用戶很方便就能觸及到這個區域，并可在幾個標簽中快速切換且不會迷失方向，簡單而高效；
- 符合習慣、ios原生控件，開發簡單；
- 優先級較高、用戶使用頻繁，彼此之間相互獨立。
缺點：
- 容納個數有限，一般最多五個（不然需要結合其他方式，運用層級和收放）。
- 占據高度空間略大，一般都是文字+圖標的形式。
02 頂部標簽(Tab)導航
描述：
頂部Tab是谷歌提出來的，為了區分與iOS的區別的一種導航模式，由于在頂部，手指難以觸及，所以谷歌對應地提出了手勢操作的解決方法：通過在屏幕左右滑動來切換標簽。
實際項目中，頂部與底部配合使用的挺多。
優點：
- 擴展性好：標簽的個數沒有上限，不過太多的話，越是后面的頁面滲透率會越低；
- 占據空間小：相比于底部Tab，頂部Tab一般占據的空間更?。ㄒ驗椴恍枰紤]手指點擊，所以可以把區域縮小，只選用圖標或者文字即可），可以把更多的空間安排給內容展示。
- 手勢操作非常方便。
缺點：
可見性略遜：這是空間占據的區域變小之后的后果。
03 舵式導航
描述：
- 點聚式它將多個核心功能聚匯到主界面中顯示，方便用戶呼出使用。會搭載其他導航樣式出現（如標簽式）成為舵式導航。
- 與標簽導航類似，就點聚工導航與標簽導航的結合體，其中一個導航標簽蘊含更多的操作選項，也可以理解為標簽中蘊含更多二級導航標簽。當頁面有處于同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口，就可以采用這種APP導航模式。
優點：
- 把類似生產內容的主功能按鈕放在中間，標簽更加突出醒目；
- 同時該主功能標簽做了功能擴展，也因此給設計增加了一些個性化的亮點。
缺點：
占據高度空間略大，一般都是文字+圖標的形式。
04 輪播導航
描述：
當你的應用信息足夠扁平，可以嘗試輪播導航；
優點：
能夠最大程度的保證應用的頁面簡潔性，操作也是最方便；
缺點：
不能夠快速的定位對應的分頁內容；
05 宮格導航
描述：
- 宮格式導航被廣泛應用于各平臺系統的中心頁面；
- 用在二級頁作為內容列表的一種圖形化形式呈現，或作為一系列工具入口的聚合；
- 用戶頻繁切換的概率是比較低；
- 在不同的文章中可能被稱作：跳板（圖標卡片式）、磁貼式。
優點：
- 擴展性非常好，便于組合不同的信息類型（運營位、廣告位、內容塊、設置等）；
- 視野范圍內可以展示的功能入口多，能夠讓用戶整體上了解APP提供的服務，從而選擇自己所需要的那個服務；
- 靜態、動態結合可以展示出豐富的信息，同時保持視覺統一；
- 跨平臺不受平臺限制。
缺點：
- 每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通；
- 當排布過多的時候，用戶容易眼花繚亂，選擇壓力較大；
06?陳列館式導航
描述：
- 宮格導航的變式吧，可用來呈現實時內容，比如新聞、菜譜、文章或照片，可以采用網格布局（比如一直播和ins）或輪盤布局（比如格瓦拉電影），還可以采用幻燈片模式進行展示。
- 陳列館式設計模式最適合呈現經常更新的、視覺效果直觀、彼此獨立的內容。
優點：
- 相較于列表導航、宮格式導航的不同在于，陳列館式導航有更豐富的表現形式、更加隨意的組合效果（瀑布流等）以及豐富的動態效果（輪盤、幻燈片形式）；
- 直觀展現各項內容。
缺點：
- 不適合展現頂層入口框架；
- 容易形成界面內容過多，顯得雜亂；
- 設計效果容易呆板。
07 抽屜導航
描述：
- 抽屜式也是谷歌提出來的一種導航模式，由于虛擬按鍵的存在，所以在安卓上使用底部Tab會造成雙底欄，視覺觀感不佳；
- 一般用來放置對用戶而言不太常用或者對于產品而言不太核心的功能，或者不那么需要頻繁切換內容的應用，例如對設置、關于、個人信息等內容的隱藏；
- 更多的被應用于信息流產品設計中，這類產品注重核心內容的展示，用戶的任務路徑較為單一，幾乎都是用于瀏覽產品的核心內容；至于其他比較低頻的模塊入口則會隱藏在當前界面后方，避免冗余的模塊搶奪用戶的眼球；
- 在不同的地方可能被稱為：擴展菜單、側邊導航、漢堡導航；
- “2/8”法則告訴我們，80%的用戶只用那些20%功能，這20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用著最重要的位置，那么用戶就會被打擾，產生臃腫感，甚至會放棄使用產品。
優點：
- 節省頁面展示空間，讓用戶將更多的注意力聚焦到當前頁面；
- 由于導航界面是隱藏在屏幕之外，展開之后整一頁面都是導航菜單內容，所以可擴展和個性化的空間很大；
- 擴展性好，導航的個數沒上限。
缺點：
- 用戶不易發現，使用次功能需要二次點擊，給用戶在切換功能帶來了操作成本；
- 可見性太差，用戶還沒能把漢堡菜單按鈕和側邊欄聯系起來，所以，側邊欄的滲透率很低；
- 不直觀、不適用于主導航、如遇頻繁操作的功能，用戶不斷開關抽屜體驗不好。
08 下拉導航/菜單導航
描述：
- 與抽屜式導航的目的相同，都是為了突出內容。一般位于產品頂部，通過點擊呼出導航菜單；
- 通常用來篩選同一信息模塊下不同類別的信息，或者快速啟動某些常用的功能模塊，而不需要頻繁的頁面跳轉 ；
- Android中對應的控件為spinner控件，但該控件用于同一類別下不同視圖之間的切換，而不是跳轉至完全不同的視圖。iOS中下拉菜單為自定義控件，可以實現不同類別之間的切換；
- 下拉導航還有一種變式，就是下來菜單中展示兩級甚至多級，一般在電商產品中比較常見，因為品類和篩選條件眾多。
優點：
菜單與界面的連貫性比抽屜式要好，容易讓用戶感知當前位置；
缺點：
- 位于屏幕上方，相對隱蔽且不能結合手勢操作，不適合于頻繁的切換功能使用；
- 考慮到導航菜單的可用面積較小，所以一般采用列表的形式展示菜單內容。
09 列表導航
描述：
- 作為信息組織框架，是我們在產品設計中必不可少的一個信息承載模式。
- 適合用來顯示較長或擁有次級文字內容的標題，每行可以融入較多信息。
- 與宮格導航類似，常用于二級頁面，不會默認展示任何實質內容，所以通常app不會在首頁使用它；
- 無論ios開發和android 都有現成的列表布局插件和模板。
優點：
- 由上至下查看符合習慣；
- 結構清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。
缺點：
- 條目太多或分布不合理會導致用戶查找困難；
- 不適合需要頻繁切換任務的情況。
總結
導航可能不單單只有這幾種，可能大家的叫法也不同，而且每種導航都有其存在的意義，不是它不夠好，而是它可能不適用于你的產品。真正在實際項目中，還是得根據產品的實際情況綜合去運用。
本文由 @二O一七 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
互金小白
評論
很全面
很受用，感謝。
厲害 這個匯總還挺實用的！