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