一、導(dǎo)航模型綱要
1.平鋪模式
平鋪?lái)?yè)面就像一疊卡片缭乘，頁(yè)面通過滑動(dòng)切換司蔬，通常視覺精美邑茄，沒有滾屏。這種導(dǎo)航方式主要適用于只有一個(gè)主屏的簡(jiǎn)單應(yīng)用俊啼。
2.標(biāo)簽?zāi)Ｊ?/p>
標(biāo)簽欄是我們最常見的導(dǎo)航模式肺缕，這類導(dǎo)航的最大優(yōu)勢(shì)就是讓應(yīng)用的主要功能一目了然。我們根據(jù)應(yīng)用的功能類型和信息類型進(jìn)行標(biāo)簽分類吨些，每個(gè)標(biāo)簽對(duì)應(yīng)的頁(yè)面應(yīng)該有自己獨(dú)特的功能和內(nèi)容搓谆。
3.樹狀模式
樹形結(jié)構(gòu)就是將層級(jí)信息分類到一顆倒置的樹的樹枝上，展示起來(lái)就像是流程圖（類似家譜） 豪墅。對(duì)于組織大量信息內(nèi)容泉手，同時(shí)又能讓每個(gè)內(nèi)容觸手可及，樹形結(jié)構(gòu)是一個(gè)高效的方法偶器。
二斩萌、說(shuō)明與舉例
1. 平鋪結(jié)構(gòu)
平鋪?lái)?yè)面模式中的所有頁(yè)面都沒有按類型分組缝裤，而是全部摞成一疊，挨個(gè)切換颊郎，就像平鋪著的頁(yè)面憋飞。這種方式適合于瀏覽并發(fā)現(xiàn)的方式，瀏覽查看同類型不同內(nèi)容的頁(yè)面姆吭。最典型的代表就是Iphone內(nèi)置的「天氣」應(yīng)用榛做，每個(gè)頁(yè)面的結(jié)構(gòu)一致，但內(nèi)容根據(jù)所屬城市而變内狸。
孿生兄弟--分頁(yè)控件
頁(yè)面分頁(yè)控件就是如圖所示的一排小點(diǎn)检眯，它的存在，提醒了我們正在瀏覽的是一系列平鋪?lái)?yè)面昆淡，也讓我們?cè)跒g覽系列頁(yè)面時(shí)能保持方向感 锰瘸。該控件有一個(gè)很大的優(yōu)勢(shì)是：占用極少的界面空間。
同時(shí)昂灵，頁(yè)面分頁(yè)控件也是可操作的避凝，但我們只能點(diǎn)擊控件的左半部或右半部，滑到頁(yè)面的上一屏或下一屏眨补。我們無(wú)法直接從第一屏跳轉(zhuǎn)到最后一屏管削，只能挨個(gè)翻閱。這也要求我們?cè)谑褂眠@類模型時(shí)渤涌，要控制好頁(yè)面數(shù)量佩谣，一般不超過10個(gè)為宜。
所以這也凸顯出平鋪?lái)?yè)面模型的弊端：無(wú)法直接跳轉(zhuǎn)到特定頁(yè)面实蓬，這一弊端使其并不適用于功能或結(jié)構(gòu)相差懸殊的應(yīng)用茸俭。
平鋪?lái)?yè)面優(yōu)缺點(diǎn)
【優(yōu)點(diǎn)】
很適合于內(nèi)容少而精，操作少安皱，只需隨意瀏覽的頁(yè)面
適用于同類型不同內(nèi)容的頁(yè)面调鬓，需要自定義內(nèi)容和數(shù)量的頁(yè)面
易于使用，只需要左右滑動(dòng)手勢(shì)即可
頁(yè)面分頁(yè)控件占用空間
【缺點(diǎn)】
只能挨個(gè)翻閱酌伊，無(wú)法立即跳轉(zhuǎn)到非相鄰頁(yè)面
頁(yè)面數(shù)量不宜過多腾窝，一般不超過10個(gè)為宜
不適合滾屏（手勢(shì)操作相撞），對(duì)長(zhǎng)文本不利
標(biāo)簽欄
標(biāo)簽欄最大的優(yōu)勢(shì)就是能夠?qū)?yīng)用的主要功能明確的羅列出來(lái)居砖，讓應(yīng)用變得干凈整潔的同時(shí)易于操作虹脯，我們可以直接跳到特定頁(yè)面去完成特定操作。每個(gè)標(biāo)簽Icon對(duì)應(yīng)的頁(yè)面設(shè)計(jì)都大相徑庭奏候，為的是適應(yīng)當(dāng)前的功能和需求循集。
標(biāo)簽欄上標(biāo)簽設(shè)計(jì)的重要性不言而喻，它可以直接體現(xiàn)出一個(gè)App應(yīng)用的產(chǎn)品定位與調(diào)性蔗草，且其提供的功能選項(xiàng)必須要貼合用戶普遍的需求和心智模型咒彤。
比如社交類應(yīng)用中疆柔，QQ用戶人群更面向更年輕的一代，所以它的標(biāo)簽欄Icon風(fēng)格更具趣味青春感镶柱，符合QQ「樂在溝通旷档，歡樂無(wú)限」的產(chǎn)品定位。而微信的用戶人群更廣歇拆，標(biāo)簽欄Icon采用常見通用的樣式鞋屈，最大可能降低用戶的學(xué)習(xí)成本。再比如電商類應(yīng)用-網(wǎng)易嚴(yán)選查吊，標(biāo)簽功能分類簡(jiǎn)單清晰谐区，設(shè)計(jì)風(fēng)格上文藝簡(jiǎn)潔，能很明顯的體現(xiàn)出嚴(yán)選和其他電商平臺(tái)不太一樣的系列化逻卖、冷淡風(fēng)的獨(dú)特風(fēng)格，符合嚴(yán)選高品質(zhì)昭抒，精致生活的價(jià)值主張评也。
標(biāo)簽欄限定了最多5個(gè)按鈕，這個(gè)限制也是希望我們能削減應(yīng)用提供的主要功能灭返，讓用戶能夠記住并理解應(yīng)用結(jié)構(gòu)盗迟，讓結(jié)構(gòu)可控。
標(biāo)簽欄優(yōu)缺點(diǎn)
【優(yōu)點(diǎn)】
將應(yīng)用的主要功能明確的羅列出來(lái)熙含，并告知當(dāng)前所處位置
可自由跳轉(zhuǎn)在應(yīng)用所用的主要功能之間罚缕，操作簡(jiǎn)單
【缺點(diǎn)】
一般最多只能顯示5個(gè)標(biāo)簽
標(biāo)簽欄會(huì)占用不算小的頁(yè)面空間
平鋪?lái)?yè)面vs標(biāo)簽欄
平鋪?lái)?yè)面類的應(yīng)用不只是形式上類似于一疊卡片，我們甚至可以根據(jù)需要隨意添加怎静、移除卡片邮弹。這種頁(yè)面結(jié)構(gòu)類似但頁(yè)面數(shù)量會(huì)變化的情況下，平鋪?lái)?yè)面要優(yōu)于標(biāo)簽欄蚓聘。而在標(biāo)簽頁(yè)的模型中腌乡，導(dǎo)航項(xiàng)目分類和順序都是不變的，適合頁(yè)面內(nèi)容多樣夜牡，頁(yè)面數(shù)量少而固定的應(yīng)用与纽。
2. 樹形結(jié)構(gòu)
樹形結(jié)構(gòu)就是將層級(jí)信息分類到一顆倒置的樹的樹枝上，展示起來(lái)就像是流程圖（類似家譜） 塘装。
幾個(gè)世紀(jì)前急迂，文職人員就開始使用一種有效的文件與文件夾整理方式：找到檔案柜-選擇抽屜-打開抽屜-選取文件夾-抽取文檔。Ios樹形結(jié)構(gòu)就是借鑒了這種整理方式的隱喻蹦肴，將龐大的信息內(nèi)容分類到類別僚碎，子類別、子子類別冗尤、子子子類別……中去听盖，整理好層層嵌套的信息內(nèi)容胀溺。
Iphone「設(shè)置」的導(dǎo)航模式就是樹形結(jié)構(gòu)的典型案例：
目前我們最常見的樹形結(jié)構(gòu)例子就是表格視圖，如上圖皆看。這也是簡(jiǎn)單的列表仓坞，點(diǎn)擊列表項(xiàng)目可以深入到下一層中去。當(dāng)然還有更加圖形化的方式可以展示樹形列表腰吟，如下圖「支付寶」首頁(yè)无埃，用圖標(biāo)的方式來(lái)展示它的眾多功能：
無(wú)論何種形式，樹形導(dǎo)航模式都有類似的優(yōu)點(diǎn)：占用很少的界面空間毛雇，操作簡(jiǎn)單嫉称。
樹形結(jié)構(gòu)優(yōu)缺點(diǎn)
【優(yōu)點(diǎn)】
非常適用于管理大量的分類項(xiàng)目
組織方式垂直簡(jiǎn)單，易于操作理解
占用很少的界面空間
【缺點(diǎn)】
主功能只用在最頂層頁(yè)面才會(huì)被顯示出來(lái)灵疮。且若頁(yè)面層級(jí)較多织阅，無(wú)法直接返回最頂層頁(yè)面
次級(jí)頁(yè)面內(nèi)容需要用戶主動(dòng)挖掘，不直接不顯性震捣。用戶往往只對(duì)核心內(nèi)容有印象
3. 組合使用導(dǎo)航模型
大多情況下荔棉，我們都在一個(gè)應(yīng)用中混合使用不同的導(dǎo)航模型，用一個(gè)模型來(lái)組織應(yīng)用的主要功能蒿赢，用另一個(gè)模型作為子導(dǎo)航來(lái)組織次要頁(yè)面润樱。
混搭導(dǎo)航可以幫助我們克服單個(gè)導(dǎo)航的缺點(diǎn)。我們常見的一個(gè)組合方式是羡棵，使用標(biāo)簽欄導(dǎo)航來(lái)組織應(yīng)用的主要功能壹若，然后在標(biāo)簽欄內(nèi)頁(yè)使用樹形導(dǎo)航。樹形導(dǎo)航一個(gè)很大的缺點(diǎn)就是不能從一個(gè)功能快速的切換到另一個(gè)功能皂冰，而混搭標(biāo)簽欄導(dǎo)航的方式可以有效的彌補(bǔ)這個(gè)缺點(diǎn)店展。
比如「支付寶」用標(biāo)簽欄導(dǎo)航來(lái)組織它的主要功能，在「我的」頁(yè)面中使用了基于列表的樹形導(dǎo)航來(lái)充當(dāng)子導(dǎo)航灼擂。點(diǎn)擊子導(dǎo)航中的「螞蟻財(cái)富」功能壁查，我們可以看到子子導(dǎo)航中又采用了標(biāo)簽欄導(dǎo)航。這樣的混搭導(dǎo)航不但可以最大限度的利用界面空間剔应，又可以縮短用戶的行為路徑睡腿，且易于操作理解。
總結(jié)
除了以上三種標(biāo)準(zhǔn)導(dǎo)航方式峻贮，我們當(dāng)然也可以定義自己的組織方式席怪。但是，使用標(biāo)準(zhǔn)導(dǎo)航方式和控件會(huì)讓用戶盡快熟悉和習(xí)慣我們的應(yīng)用纤控，同樣也能幫助我們?nèi)谌肫渌麘?yīng)用挂捻。
也許我們都很熟悉這三種導(dǎo)航模式：平鋪?lái)?yè)面，標(biāo)簽欄船万，樹形結(jié)構(gòu)刻撒，但只有正確理解并思考每種導(dǎo)航模式的優(yōu)缺點(diǎn)骨田，我們才能更好的組織App的結(jié)構(gòu)，讓應(yīng)用自己說(shuō)話声怔，創(chuàng)造更好的用戶體驗(yàn)态贤。
