作為PM，信息架構和頁面流的設計想必爛熟於心，當確定好產品戰略層和范圍層即為何種目標用戶提供何種服務后，就要着手搭建功能架構，將目標功能通過良好的用戶體驗傳遞給用戶，目的是高效解決用戶痛點，從而實現價值為公司帶來流量，讓商業變現成為可能。
趁五一假期有空，總結常見的信息架構導航設計和頁面布局設計
文章內容架構如下：
1.標簽式導航（選項卡式）
標簽式導航，也就是常說的Tab導航。是目前應用最廣泛、最常見的導航形式。一般作為主導航，也會作為輔助導航，如果其他導航和標簽式導航搭配使用時一般都會用作次級導航。
標簽式導航有如下幾種拓展形式：
頂部標簽導航、底部標簽導航、頂部導航+底部導航（雙導航模式）、舵式導航、滾動式標簽導航
根據操作系統不同，標簽位置也不相同。ios的標簽推薦在底部 ，Android的則推薦是在頂部。但是當前全面屏手機逐漸成為主流，支持全面屏手勢，Android和ios的設計差異逐漸減小，主要還是根據產品功能進行設計。
1.1 底部標簽導航
底部標簽式導航是最常用的導航形式，一般存在於頁面底端，
采用文字加圖標的方式展現。一般有3~5個標簽，適合在相關的幾類核心信息中間頻繁的切換使用。這類信息優先級較高，需要圍繞產品戰略層范圍層進行歸類，用戶使用頻繁，彼此之間相互獨立，通過標簽式引導，用戶可以迅速的實現頁面之間的切換且不會迷失方向，
使用場景：如果app有多個核心模塊，並且它們之間的切換比較頻繁，這個時候非常適合使用標簽式導航。
優點：
1.入口扁平化，直接展現最重要的入口信息，用戶在各入口頻繁跳轉不會迷失方向；
2.導航控件占據面積大，能夠輕松進行點擊操作，進行功能間的快速切換。
缺點：
1.會占用顯示面積，不超過5個模塊，否則容易分散注意力增加用戶選擇難度，不利於沉浸式體驗，例如在微博發現標簽中，下滑瀏覽時會隱藏底部標簽；知乎app中，首頁、通知、我的三個模塊在下滑瀏覽時，也會隱藏底部標簽導航，向上滑動才觸發顯示。
1.2 頂部標簽導航
當內容分類比較多，用戶對不同內容的打開率相差不是很大，需要快速切換/調出的時候，經常會采用頂部導航設計模式，常見於工具類APP中如滴滴打車，這樣設計有一部分目的是為了不與安卓端底部虛擬按鈕組合在一起產生信息堆疊和誤操作，能更多展示標簽下的內容，還有一部分是支持快捷操作，例如安卓版音樂類app，方便操作下方區域的內容和按鈕（播放/暫停和下一曲）。
如果多於5個就采用滾動式標簽導航，下面會有介紹。
1.3 頂部導航+底部導航（雙導航模式）
如果產品分類的內容和維度較多，則采用頂部和底部結合的導航形式。
類似騰訊新聞和網易新聞這種新聞類APP，采用了頂部導航+底部導航結構，且加入手勢切換的操作，方便用戶在高頻的標簽中快速切換，能帶來更好地閱讀體驗，當欄目頻道較多時，可再結合超級菜單式導航准確定位類目。
使用場景：可以和超級菜單式導航相結合，滾動式標簽導航的特點是顯示數目有限，但是能夠實現快速的切換，超級菜單式導航能快速定位入，能夠顯示足夠多的條目，但是切換起來比較麻煩，兩者結合，正好進行優勢互補。
1.4 滾動式標簽導航
前面介紹頂部標簽導航時，任務切換如果超過5個，這時候應該使用滾動式標簽導航。使用該導航需要給用戶提示，告訴用戶頁面之外還有一些標簽存在。例如會露出界面外的一部分文案，表示界面之外還有內容，例如Lofter
1.5 舵式導航
當頁面有處於同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口，那就可以采用這種舵式導航。中間項標簽不緊操作最頻繁，最重要，且需要引人注意，方便尋找。
舵式導航可以看為底部標簽式導航的一種變體。它在后者的基礎上，突出強調了一個高頻核心功能，並且放在中間。
使用場景：如果app有幾個重要的功能，並且需要頻繁切換，其中一個作為app的核心功能或者是高頻操作，這個時候可以選擇舵式導航。案例：soul、隨手記、薄荷健康
2 宮格導航
宮格式導航適合入口相互獨立，且不需要交叉使用的信息歸類，宮格導航將主要入口全部聚合在頁面，讓用戶整體了解app的服務，各個入口之間相互獨立，沒有太多的交集，無法跳轉互通。
采用這種導航的應用已經越來越少，作為教科書式使用宮格導航作為主導航的美圖秀秀，現在也轉變成了舵式導航，目前大多數app會把宮格導航作為頁面的輔助導航，或是作為一系列工具入口的聚合。例如支付寶首頁
優點：
1.類目清晰、可容納多種類目
2.清晰展現各入口，方便快速查找
缺點：
1.信息獨立，無法相互通達
2.不能直接展現入口內容，只能點擊進去才能獲知
3.容易形成更深的路徑
4.選擇壓力較大
3 列表式導航
作為信息梳理條目，一般會作為次級導航，也有作為主導航的應用，例如QQ郵箱、系統自帶的信息、聯系人。
可以通過間距將列表分模塊進行展示，比如微信的設置頁面，用留白的方式來區分內容的不同，“新消息通知、隱私、通用”是一組，“幫助與反饋、關於微信”又是一組。即使不仔細觀察也能通過間距感受出微信團隊已經對其進行歸類。只要善用這個細節，可以更好的加以區分次要功能，並提升用戶體驗度。
用作為次級導航
標題式列表：一般只顯示一行文字，有的顯示一行文字加一張圖片等等。
內容式列表：主要以內容為主，所以在列表中就會體現出部分內容信息，點擊進去就是詳情。例如薄荷健康的首頁，頭部是儀表盤式布局，結合內容式列表展示信息內容。
拓展式列表：類似QQ聯系人的頁面，形成分組產生明顯的主次級關系。
嵌入式列表：嵌入式其實就是由多個列表層級組合而成的導航。
優點：
1.層次展示清晰，利於理解，快速定位
2.可展示內容較長的標題
3.可展示標題的次級內容
缺點：
1.內容過多時，用戶瀏覽容易產生疲勞
2.排版靈活性不是很高
3.只能通過排列順序、顏色來區分各入口重要程度
2.目的個數與條目的詳細程度成反比。
例如美團外賣需要每個列表足夠詳細，用戶直接看列表就可以知道想要的信息。通訊錄用戶要尋找聯系人，這時候就要展示足夠多的條目，列表信息詳細程度反而沒那么重要。
4 抽屜式導航
抽屜式導航常用搭配主導航用作於次級導航，因為抽屜式導航的核心就是“藏”，隱藏低頻操作的功能，如設置、關於、會員等功能，使用頻率少，讓核心功能更加突出。抽屜式菜單隱藏在當前頁面后，只要側面滑動或者點擊入口就能將拉出來，減少了主界面中導航控件的數量，讓主界面更加干凈利落。例如QQ我的頁面，滴滴出行，網易雲音樂。
優點：
節省頁面空間，擴展性好。
缺點：
1.次功能入口比較隱藏，用戶不容易發現，同時次功能需要二次點擊，增加用戶操作成本。
2.在大屏手機上，左上角的導按鈕存在於單手拇指操作熱區難以到達的位置，導致導航按鈕難以觸達；
5 陳列館式導航
也有人會叫做卡片式布局，但是卡片式布局會更加明顯，下面會有介紹。陳列館式導航設計一般用作輔助導航，最適合呈現經常更新的，視覺效果直觀，彼此獨立的內容，例如用來展示豐富的圖片文字信息，常見於購物類、照片、新聞，可以布局成網格或瀑布流式進行展示。
特點：
布局比較靈活，設計師可以平均分布這些網絡，也可根據內容的重要性不規則分布，更具有流動性，曝布流就屬於其中一種。
優點：
1.樣式多種，能直觀展現各項內容
2.方便瀏覽經常更新的內容
缺點：
1.適合作為主導航
2.如設計不好，容易導致界面內容過多，顯得雜亂
6 超級菜單式導航（下拉導航）
也有叫作下拉導航，有些app是點擊控件下拉式，有些會新打開一個新頁面。
使用場景：一般作為輔助導航，和滾動式導航相結合，滾動式導航的特點是顯示數目有限，但是能夠實現快速的切換，而超級菜單式導航的特點是能夠顯示足夠多的條目，但是切換起來比較麻煩，兩者結合，正好進行優勢互補。
優點：
1.層次展示清晰
2.能容納很多分類
3.可快速切換定位到另一個分類中
缺點：
1、菜單之間的跳轉要回到初始點
2、同級內容過多時，用戶瀏覽容易產生疲勞
3、排版靈活性不是很高
7 輪播式導航
使用場景：應用信息足夠扁平,想突出沉浸式體驗,適用於一些小而美的應用,可以嘗試輪播導航，例如天氣app。
優點：
1.單頁面簡潔，整體性強
2.線性的瀏覽方式有順暢感、方向感
缺點：
1.不適合展示過多頁面，容易視覺疲勞
2.不能快速定位到對應的分頁內容，只能按順序查看相鄰的頁面
3.由於各頁面內容結構相似，容易忽略后面的內容
其中，所有的主要導航都可以做為次級導航，但次級導航不太適合用作主要導航 。其他一些零散的如隱喻式導航(游戲），點聚式導航，如蘋果的懸浮按鈕。
8 儀表盤式布局
儀表盤式布局可以展示一功能中關鍵數據即可，一般用作輔助導航，結合主導航展示數據信息，這種導航模式常用於金融應用程序、記錄分析工具、銷售和營銷應用程序，如薄荷健康和Timi記賬
9 多面板布局
在電商模塊中，用戶需要選品定位時會遇見這類布局，其特點是能同時呈現比較多的分類及對應的內容，適合分類多及其內容同時展示的頁面。
優點：
1.減少界面跳轉的層級
2.對分類有整體性的了解
3.分類位置固定
4.清楚當前所在的入口位置
缺點：
1、界面比較擁擠
10 卡片式布局
卡片式導航模仿生活中撲克牌，翻牌等動作來切換內容，常用作輔助導航，像探探，最美有物，其中最美有物首頁畫報使用卡片式內容展現，讓人第一次使用覺得很驚艷，當然長時間使用這種形式獲取信任容易疲勞。
優點：
特定內容上展示效果明顯，而且單個條目的點擊率會相應的提高。
缺點：
當運營量較大的時候，這種結構會降低用戶尋找信息的效率。
到此總結結束，大部分app都是基於功能組合搭配，滿足功能情況下，選擇最優的展示方式即可。
小禮物走一走，來簡書關
作者：Richard_L
鏈接：https://www.jianshu.com/p/07647d3d65ef
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。