作為PM魂毁，信息架構(gòu)和頁面流的設(shè)計(jì)想必爛熟于心荒椭，當(dāng)確定好產(chǎn)品戰(zhàn)略層和范圍層即為何種目標(biāo)用戶提供何種服務(wù)后声旺，就要著手搭建功能架構(gòu)笔链，將目標(biāo)功能通過良好的用戶體驗(yàn)傳遞給用戶，目的是高效解決用戶痛點(diǎn)腮猖，從而實(shí)現(xiàn)價(jià)值為公司帶來流量鉴扫，讓商業(yè)變現(xiàn)成為可能。
趁五一假期有空澈缺，總結(jié)常見的信息架構(gòu)導(dǎo)航設(shè)計(jì)和頁面布局設(shè)計(jì)
文章內(nèi)容架構(gòu)如下：
1.標(biāo)簽式導(dǎo)航（選項(xiàng)卡式）
標(biāo)簽式導(dǎo)航坪创，也就是常說的Tab導(dǎo)航。是目前應(yīng)用最廣泛姐赡、最常見的導(dǎo)航形式莱预。一般作為主導(dǎo)航，也會作為輔助導(dǎo)航项滑，如果其他導(dǎo)航和標(biāo)簽式導(dǎo)航搭配使用時(shí)一般都會用作次級導(dǎo)航依沮。
標(biāo)簽式導(dǎo)航有如下幾種拓展形式：
頂部標(biāo)簽導(dǎo)航、底部標(biāo)簽導(dǎo)航、頂部導(dǎo)航+底部導(dǎo)航（雙導(dǎo)航模式）悉抵、舵式導(dǎo)航肩狂、滾動式標(biāo)簽導(dǎo)航
根據(jù)操作系統(tǒng)不同摘完，標(biāo)簽位置也不相同姥饰。ios的標(biāo)簽推薦在底部 ，Android的則推薦是在頂部孝治。但是當(dāng)前全面屏手機(jī)逐漸成為主流列粪，支持全面屏手勢，Android和ios的設(shè)計(jì)差異逐漸減小谈飒，主要還是根據(jù)產(chǎn)品功能進(jìn)行設(shè)計(jì)岂座。
1.1 底部標(biāo)簽導(dǎo)航
底部標(biāo)簽式導(dǎo)航是最常用的導(dǎo)航形式，一般存在于頁面底端杭措，
采用文字加圖標(biāo)的方式展現(xiàn)费什。一般有3~5個(gè)標(biāo)簽，適合在相關(guān)的幾類核心信息中間頻繁的切換使用手素。這類信息優(yōu)先級較高鸳址，需要圍繞產(chǎn)品戰(zhàn)略層范圍層進(jìn)行歸類，用戶使用頻繁泉懦，彼此之間相互獨(dú)立稿黍，通過標(biāo)簽式引導(dǎo)，用戶可以迅速的實(shí)現(xiàn)頁面之間的切換且不會迷失方向崩哩，
使用場景：如果app有多個(gè)核心模塊巡球，并且它們之間的切換比較頻繁，這個(gè)時(shí)候非常適合使用標(biāo)簽式導(dǎo)航邓嘹。
優(yōu)點(diǎn)：
1.入口扁平化酣栈，直接展現(xiàn)最重要的入口信息，用戶在各入口頻繁跳轉(zhuǎn)不會迷失方向汹押；
2.導(dǎo)航控件占據(jù)面積大钉嘹，能夠輕松進(jìn)行點(diǎn)擊操作，進(jìn)行功能間的快速切換鲸阻。
缺點(diǎn)：
1.會占用顯示面積跋涣，不超過5個(gè)模塊，否則容易分散注意力增加用戶選擇難度鸟悴，不利于沉浸式體驗(yàn)陈辱，例如在微博發(fā)現(xiàn)標(biāo)簽中，下滑瀏覽時(shí)會隱藏底部標(biāo)簽细诸；知乎app中沛贪，首頁、通知、我的三個(gè)模塊在下滑瀏覽時(shí)利赋，也會隱藏底部標(biāo)簽導(dǎo)航水评，向上滑動才觸發(fā)顯示。
1.2 頂部標(biāo)簽導(dǎo)航
當(dāng)內(nèi)容分類比較多媚送，用戶對不同內(nèi)容的打開率相差不是很大中燥，需要快速切換/調(diào)出的時(shí)候，經(jīng)常會采用頂部導(dǎo)航設(shè)計(jì)模式塘偎，常見于工具類APP中如滴滴打車疗涉，這樣設(shè)計(jì)有一部分目的是為了不與安卓端底部虛擬按鈕組合在一起產(chǎn)生信息堆疊和誤操作，能更多展示標(biāo)簽下的內(nèi)容吟秩，還有一部分是支持快捷操作咱扣，例如安卓版音樂類app，方便操作下方區(qū)域的內(nèi)容和按鈕（播放/暫停和下一曲）涵防。
如果多于5個(gè)就采用滾動式標(biāo)簽導(dǎo)航闹伪，下面會有介紹。
1.3 頂部導(dǎo)航+底部導(dǎo)航（雙導(dǎo)航模式）
如果產(chǎn)品分類的內(nèi)容和維度較多壮池，則采用頂部和底部結(jié)合的導(dǎo)航形式偏瓤。
類似騰訊新聞和網(wǎng)易新聞這種新聞類APP，采用了頂部導(dǎo)航+底部導(dǎo)航結(jié)構(gòu)火窒，且加入手勢切換的操作硼补，方便用戶在高頻的標(biāo)簽中快速切換，能帶來更好地閱讀體驗(yàn)熏矿，當(dāng)欄目頻道較多時(shí)已骇，可再結(jié)合超級菜單式導(dǎo)航準(zhǔn)確定位類目。
使用場景：可以和超級菜單式導(dǎo)航相結(jié)合票编，滾動式標(biāo)簽導(dǎo)航的特點(diǎn)是顯示數(shù)目有限褪储，但是能夠?qū)崿F(xiàn)快速的切換，超級菜單式導(dǎo)航能快速定位入慧域，能夠顯示足夠多的條目鲤竹，但是切換起來比較麻煩，兩者結(jié)合昔榴，正好進(jìn)行優(yōu)勢互補(bǔ)辛藻。
1.4?滾動式標(biāo)簽導(dǎo)航
前面介紹頂部標(biāo)簽導(dǎo)航時(shí)，任務(wù)切換如果超過5個(gè)互订，這時(shí)候應(yīng)該使用滾動式標(biāo)簽導(dǎo)航吱肌。使用該導(dǎo)航需要給用戶提示，告訴用戶頁面之外還有一些標(biāo)簽存在仰禽。例如會露出界面外的一部分文案氮墨，表示界面之外還有內(nèi)容纺蛆，例如Lofter
1.5?舵式導(dǎo)航
當(dāng)頁面有處于同一層級的幾大部分內(nèi)容，同時(shí)又需要一個(gè)非常重要且頻繁操作的入口规揪，那就可以采用這種舵式導(dǎo)航桥氏。中間項(xiàng)標(biāo)簽不緊操作最頻繁，最重要猛铅，且需要引人注意字支，方便尋找。
舵式導(dǎo)航可以看為底部標(biāo)簽式導(dǎo)航的一種變體奕坟。它在后者的基礎(chǔ)上祥款，突出強(qiáng)調(diào)了一個(gè)高頻核心功能清笨，并且放在中間月杉。
使用場景：如果app有幾個(gè)重要的功能，并且需要頻繁切換抠艾，其中一個(gè)作為app的核心功能或者是高頻操作苛萎，這個(gè)時(shí)候可以選擇舵式導(dǎo)航。案例：soul检号、隨手記腌歉、薄荷健康
2?宮格導(dǎo)航
宮格式導(dǎo)航適合入口相互獨(dú)立，且不需要交叉使用的信息歸類齐苛，宮格導(dǎo)航將主要入口全部聚合在頁面翘盖，讓用戶整體了解app的服務(wù)，各個(gè)入口之間相互獨(dú)立凹蜂，沒有太多的交集馍驯，無法跳轉(zhuǎn)互通。
采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少玛痊，作為教科書式使用宮格導(dǎo)航作為主導(dǎo)航的美圖秀秀汰瘫，現(xiàn)在也轉(zhuǎn)變成了舵式導(dǎo)航，目前大多數(shù)app會把宮格導(dǎo)航作為頁面的輔助導(dǎo)航擂煞，或是作為一系列工具入口的聚合混弥。例如支付寶首頁
優(yōu)點(diǎn)：
1.類目清晰、可容納多種類目
2.清晰展現(xiàn)各入口对省，方便快速查找
缺點(diǎn)：
1.信息獨(dú)立蝗拿，無法相互通達(dá)
2.不能直接展現(xiàn)入口內(nèi)容，只能點(diǎn)擊進(jìn)去才能獲知
3.容易形成更深的路徑
4.選擇壓力較大
3 列表式導(dǎo)航
作為信息梳理?xiàng)l目蒿涎，一般會作為次級導(dǎo)航哀托，也有作為主導(dǎo)航的應(yīng)用，例如QQ郵箱同仆、系統(tǒng)自帶的信息萤捆、聯(lián)系人。
可以通過間距將列表分模塊進(jìn)行展示，比如微信的設(shè)置頁面俗或，用留白的方式來區(qū)分內(nèi)容的不同市怎，“新消息通知、隱私辛慰、通用”是一組区匠，“幫助與反饋、關(guān)于微信”又是一組帅腌。即使不仔細(xì)觀察也能通過間距感受出微信團(tuán)隊(duì)已經(jīng)對其進(jìn)行歸類驰弄。只要善用這個(gè)細(xì)節(jié)，可以更好的加以區(qū)分次要功能速客，并提升用戶體驗(yàn)度戚篙。
用作為次級導(dǎo)航
標(biāo)題式列表：一般只顯示一行文字，有的顯示一行文字加一張圖片等等溺职。
內(nèi)容式列表：主要以內(nèi)容為主岔擂，所以在列表中就會體現(xiàn)出部分內(nèi)容信息，點(diǎn)擊進(jìn)去就是詳情浪耘。例如薄荷健康的首頁乱灵，頭部是儀表盤式布局，結(jié)合內(nèi)容式列表展示信息內(nèi)容七冲。
拓展式列表：類似QQ聯(lián)系人的頁面痛倚，形成分組產(chǎn)生明顯的主次級關(guān)系。
嵌入式列表：嵌入式其實(shí)就是由多個(gè)列表層級組合而成的導(dǎo)航澜躺。
優(yōu)點(diǎn)：
1.層次展示清晰蝉稳，利于理解，快速定位
2.可展示內(nèi)容較長的標(biāo)題
3.可展示標(biāo)題的次級內(nèi)容
缺點(diǎn)：
1.內(nèi)容過多時(shí)苗踪，用戶瀏覽容易產(chǎn)生疲勞
2.排版靈活性不是很高
3.只能通過排列順序颠区、顏色來區(qū)分各入口重要程度
2.目的個(gè)數(shù)與條目的詳細(xì)程度成反比。
例如美團(tuán)外賣需要每個(gè)列表足夠詳細(xì)通铲，用戶直接看列表就可以知道想要的信息毕莱。通訊錄用戶要尋找聯(lián)系人，這時(shí)候就要展示足夠多的條目颅夺，列表信息詳細(xì)程度反而沒那么重要朋截。
4 抽屜式導(dǎo)航
抽屜式導(dǎo)航常用搭配主導(dǎo)航用作于次級導(dǎo)航，因?yàn)槌閷鲜綄?dǎo)航的核心就是“藏”吧黄，隱藏低頻操作的功能部服，如設(shè)置、關(guān)于拗慨、會員等功能廓八，使用頻率少奉芦，讓核心功能更加突出。抽屜式菜單隱藏在當(dāng)前頁面后剧蹂，只要側(cè)面滑動或者點(diǎn)擊入口就能將拉出來声功，減少了主界面中導(dǎo)航控件的數(shù)量，讓主界面更加干凈利落宠叼。例如QQ我的頁面先巴，滴滴出行，網(wǎng)易云音樂冒冬。
優(yōu)點(diǎn)：
節(jié)省頁面空間伸蚯，擴(kuò)展性好。
缺點(diǎn)：
1.次功能入口比較隱藏简烤，用戶不容易發(fā)現(xiàn)剂邮，同時(shí)次功能需要二次點(diǎn)擊，增加用戶操作成本乐埠。
2.在大屏手機(jī)上抗斤，左上角的導(dǎo)按鈕存在于單手拇指操作熱區(qū)難以到達(dá)的位置囚企，導(dǎo)致導(dǎo)航按鈕難以觸達(dá)丈咐；
5?陳列館式導(dǎo)航
也有人會叫做卡片式布局，但是卡片式布局會更加明顯龙宏，下面會有介紹棵逊。陳列館式導(dǎo)航設(shè)計(jì)一般用作輔助導(dǎo)航，最適合呈現(xiàn)經(jīng)常更新的银酗，視覺效果直觀辆影，彼此獨(dú)立的內(nèi)容，例如用來展示豐富的圖片文字信息黍特，常見于購物類蛙讥、照片、新聞灭衷，可以布局成網(wǎng)格或瀑布流式進(jìn)行展示次慢。
特點(diǎn)：
布局比較靈活，設(shè)計(jì)師可以平均分布這些網(wǎng)絡(luò)翔曲，也可根據(jù)內(nèi)容的重要性不規(guī)則分布迫像，更具有流動性，曝布流就屬于其中一種瞳遍。
優(yōu)點(diǎn)：
1.樣式多種闻妓，能直觀展現(xiàn)各項(xiàng)內(nèi)容
2.方便瀏覽經(jīng)常更新的內(nèi)容
缺點(diǎn)：
1.適合作為主導(dǎo)航
2.如設(shè)計(jì)不好，容易導(dǎo)致界面內(nèi)容過多掠械，顯得雜亂
6 超級菜單式導(dǎo)航（下拉導(dǎo)航）
也有叫作下拉導(dǎo)航由缆，有些app是點(diǎn)擊控件下拉式注祖，有些會新打開一個(gè)新頁面。
使用場景：一般作為輔助導(dǎo)航均唉，和滾動式導(dǎo)航相結(jié)合氓轰，滾動式導(dǎo)航的特點(diǎn)是顯示數(shù)目有限，但是能夠?qū)崿F(xiàn)快速的切換浸卦，而超級菜單式導(dǎo)航的特點(diǎn)是能夠顯示足夠多的條目署鸡，但是切換起來比較麻煩，兩者結(jié)合限嫌，正好進(jìn)行優(yōu)勢互補(bǔ)靴庆。
優(yōu)點(diǎn)：
1.層次展示清晰
2.能容納很多分類
3.可快速切換定位到另一個(gè)分類中
缺點(diǎn)：
1、菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)
2怒医、同級內(nèi)容過多時(shí)炉抒，用戶瀏覽容易產(chǎn)生疲勞
3、排版靈活性不是很高
7 輪播式導(dǎo)航
使用場景：應(yīng)用信息足夠扁平,想突出沉浸式體驗(yàn),適用于一些小而美的應(yīng)用,可以嘗試輪播導(dǎo)航稚叹，例如天氣app焰薄。
優(yōu)點(diǎn)：
1.單頁面簡潔，整體性強(qiáng)
2.線性的瀏覽方式有順暢感扒袖、方向感
缺點(diǎn)：
1.不適合展示過多頁面塞茅，容易視覺疲勞
2.不能快速定位到對應(yīng)的分頁內(nèi)容，只能按順序查看相鄰的頁面
3.由于各頁面內(nèi)容結(jié)構(gòu)相似季率，容易忽略后面的內(nèi)容
其中野瘦，所有的主要導(dǎo)航都可以做為次級導(dǎo)航，但次級導(dǎo)航不太適合用作主要導(dǎo)航 飒泻。其他一些零散的如隱喻式導(dǎo)航(游戲）鞭光，點(diǎn)聚式導(dǎo)航，如蘋果的懸浮按鈕泞遗。
8?儀表盤式布局
儀表盤式布局可以展示一功能中關(guān)鍵數(shù)據(jù)即可惰许，一般用作輔助導(dǎo)航，結(jié)合主導(dǎo)航展示數(shù)據(jù)信息史辙，這種導(dǎo)航模式常用于金融應(yīng)用程序汹买、記錄分析工具、銷售和營銷應(yīng)用程序髓霞，如薄荷健康和Timi記賬
9?多面板布局
在電商模塊中卦睹，用戶需要選品定位時(shí)會遇見這類布局，其特點(diǎn)是能同時(shí)呈現(xiàn)比較多的分類及對應(yīng)的內(nèi)容方库，適合分類多及其內(nèi)容同時(shí)展示的頁面结序。
優(yōu)點(diǎn)：
1.減少界面跳轉(zhuǎn)的層級
2.對分類有整體性的了解
3.分類位置固定
4.清楚當(dāng)前所在的入口位置
缺點(diǎn)：
1、界面比較擁擠
10 卡片式布局
卡片式導(dǎo)航模仿生活中撲克牌纵潦，翻牌等動作來切換內(nèi)容徐鹤，常用作輔助導(dǎo)航垃环，像探探，最美有物返敬，其中最美有物首頁畫報(bào)使用卡片式內(nèi)容展現(xiàn)遂庄，讓人第一次使用覺得很驚艷，當(dāng)然長時(shí)間使用這種形式獲取信任容易疲勞劲赠。
優(yōu)點(diǎn)：
特定內(nèi)容上展示效果明顯涛目，而且單個(gè)條目的點(diǎn)擊率會相應(yīng)的提高。
缺點(diǎn)：
當(dāng)運(yùn)營量較大的時(shí)候凛澎，這種結(jié)構(gòu)會降低用戶尋找信息的效率霹肝。
到此總結(jié)結(jié)束，大部分app都是基于功能組合搭配塑煎，滿足功能情況下沫换，選擇最優(yōu)的展示方式即可。
