導(dǎo)航是互聯(lián)網(wǎng)產(chǎn)品中利用最普遍的基本元素之一，領(lǐng)導(dǎo)用戶懂得到網(wǎng)站的內(nèi)容結(jié)構(gòu)進(jìn)而找到所求。作為基本控件，導(dǎo)航看起來(lái)簡(jiǎn)略，但卻是產(chǎn)品設(shè)計(jì)中最龐雜繁瑣的一局部。由于咱們想要讓網(wǎng)站構(gòu)造更清楚、想要向用戶轉(zhuǎn)達(dá)所有的信息，所以就賦予了導(dǎo)航越來(lái)越多的內(nèi)容，使他們宏大異樣，非常糾結(jié)。簡(jiǎn)化了，用戶無(wú)奈懂得到頁(yè)面構(gòu)造以及本人的處境，發(fā)生迷惑;龐雜了，導(dǎo)航臃腫不堪，層巒疊嶂，既不雅觀也不好用。

　　那么，在清晰的信息架構(gòu)下能不能讓導(dǎo)航盡可能的更輕巧、更靈動(dòng)，是筆者本文想要探討的話題。筆者看來(lái)，為導(dǎo)航塑身能夠從以下多少個(gè)角度來(lái)進(jìn)行：1.簡(jiǎn)化結(jié)構(gòu);2.優(yōu)化情勢(shì);3.打磨UI。

2.優(yōu)化形式

　　有些時(shí)候，我們無(wú)法斷定用戶在閱讀產(chǎn)品或網(wǎng)站時(shí)是否是線性思維，也無(wú)奈對(duì)導(dǎo)航結(jié)構(gòu)進(jìn)行再精簡(jiǎn)，那么我們?cè)趺醋寣?dǎo)航再“瘦”那么一點(diǎn)呢。

A.將一維導(dǎo)航變?yōu)槎�維導(dǎo)航

　　將一維導(dǎo)航轉(zhuǎn)化為二維導(dǎo)航，可能有效的減少層疊導(dǎo)航帶給人的反復(fù)感跟復(fù)雜感，可以讓操作富有變更，進(jìn)而晉升休會(huì)。

　　相似的列子也有良多：

B.將復(fù)雜的層級(jí)獨(dú)自處理

　　當(dāng)某一層級(jí)的導(dǎo)航內(nèi)容豐盛到必定水平，他就可以充任一個(gè)獨(dú)破控件來(lái)獨(dú)自設(shè)計(jì)了，他們可以作為頁(yè)面的元素來(lái)單獨(dú)存在，可能看起來(lái)都不太像是導(dǎo)航。

　　網(wǎng)站作為信息的聚集體，要囊括海量的資源，從首頁(yè)到二級(jí)頁(yè)再到專(zhuān)題頁(yè)進(jìn)而底層頁(yè)等等等等，信息的層級(jí)多且復(fù)雜，所以就輕易造成tab套tab再套tab的局勢(shì)。那么作為導(dǎo)航塑身的第一步，我們要做的就是把這負(fù)責(zé)的結(jié)構(gòu)盡量簡(jiǎn)化，讓導(dǎo)航變得輕盈起來(lái)，或者至少看起來(lái)不那么臃腫。

A.通過(guò)面包屑來(lái)簡(jiǎn)化導(dǎo)航結(jié)構(gòu)

　　面包屑通常水平川呈現(xiàn)在頁(yè)面頂部，個(gè)別會(huì)位于題目或頁(yè)頭的下方。它們提供應(yīng)用戶返回之前任何一個(gè)頁(yè)面的鏈接(這些鏈接也是能達(dá)到當(dāng)前頁(yè)面的門(mén)路)，在層級(jí)架構(gòu)中通常是這個(gè)頁(yè)面的父級(jí)頁(yè)面。面包屑提供應(yīng)用戶回溯到網(wǎng)站首頁(yè)或進(jìn)口頁(yè)面的一條疾速門(mén)路。

　　一個(gè)門(mén)戶網(wǎng)站常見(jiàn)的結(jié)構(gòu)是首頁(yè)-頻道頁(yè)-專(zhuān)題頁(yè)-子專(zhuān)題-底層頁(yè)。如果我們想在門(mén)戶網(wǎng)站看NBA的視頻直播，那么我們來(lái)看下他的導(dǎo)航：

　　假如把信息層級(jí)全體展當(dāng)初用戶眼前，就會(huì)構(gòu)成上面的這種tab套tab的情勢(shì)，使得導(dǎo)航臃腫不堪，盤(pán)踞頁(yè)面很大的空間。可是假如咱們把用戶關(guān)懷的導(dǎo)航內(nèi)容提掏出來(lái)，就會(huì)得到下面的結(jié)構(gòu)：

　　再扁平化一下：

　　這就是清晰的面包屑導(dǎo)航。綜上，面包屑導(dǎo)航可以讓復(fù)雜的層級(jí)結(jié)構(gòu)扁平化，使得導(dǎo)航更加輕巧。

　　面包屑導(dǎo)航還有一些變體，是基于用戶線性操作邏輯衍生出來(lái)的。在無(wú)線端產(chǎn)品中運(yùn)用更為普遍，由于挪動(dòng)裝備的顯示區(qū)域有限，無(wú)力支持宏大的導(dǎo)航結(jié)構(gòu)。在用戶點(diǎn)擊當(dāng)前導(dǎo)航內(nèi)容后，當(dāng)前導(dǎo)航消散進(jìn)去下一級(jí)導(dǎo)航，并供給返回按鈕。

　　當(dāng)然，應(yīng)用面包屑來(lái)簡(jiǎn)化導(dǎo)航結(jié)構(gòu)也是有前提的，不是所有的導(dǎo)航層級(jí)都可以用這種方法來(lái)簡(jiǎn)化。面包屑導(dǎo)航更合乎用戶線性思維導(dǎo)向下的操作邏輯，例如，用戶想要看NBA直播，那么他必定不關(guān)懷娛樂(lè)圈產(chǎn)生了哪些八卦，也不care足球或者網(wǎng)球有什么消息，CBA，CUBA他可能也不十分在意，那么面包屑的線性導(dǎo)航就可以滿意用戶的需要。或者是因?yàn)榭臻g或者裝備起因，我們無(wú)法供給更為具體的導(dǎo)航，而采取線性簡(jiǎn)化導(dǎo)航的處理方法。

B.合并導(dǎo)航層級(jí)

　　導(dǎo)航的龐大往往是因?yàn)閷蛹?jí)過(guò)多導(dǎo)致，那么減少層級(jí)的一種有效方式就是合并導(dǎo)航層級(jí)，例如把二級(jí)和三級(jí)導(dǎo)航合并，就減少了三級(jí)導(dǎo)航，讓導(dǎo)航輕便一些。

　　如上圖，圖片庫(kù)包含動(dòng)態(tài)圖片和靜態(tài)圖片，每個(gè)分類(lèi)下面又有小的分類(lèi)，這樣的導(dǎo)航層級(jí)在產(chǎn)品中非常常見(jiàn)，略顯臃腫。那么通過(guò)合并層級(jí)就可以把導(dǎo)航精簡(jiǎn)到兩級(jí)，處理后的導(dǎo)航如下：

　　瘦身后的導(dǎo)航看起來(lái)結(jié)構(gòu)也比擬清楚，而且不影響到信息的轉(zhuǎn)達(dá)產(chǎn)品經(jīng)理    。

　　對(duì)照下美團(tuán)和糯米的導(dǎo)航：

　　美團(tuán)把注冊(cè)登錄跟個(gè)人信息等功效性導(dǎo)航和網(wǎng)站主導(dǎo)航做了合并處理，為網(wǎng)站首屏節(jié)儉出了可貴的空間。

C.暗藏局部導(dǎo)航

　　簡(jiǎn)化導(dǎo)航結(jié)構(gòu)的第三種辦法是把部門(mén)層級(jí)或者導(dǎo)航內(nèi)容暗藏起來(lái)，使得導(dǎo)航看上去輕巧一些。

　　當(dāng)導(dǎo)航里的內(nèi)容特殊多的時(shí)候，能夠抉擇把重要內(nèi)容留下，次要內(nèi)包庇藏的方式來(lái)處置。例如：

　　當(dāng)頁(yè)面空間有限，無(wú)法包容更多層級(jí)的時(shí)候，可以取舍把次層級(jí)隱蔽收起，鼠標(biāo)滑過(guò)或者點(diǎn)擊后觸發(fā)此層級(jí)的辦法處理，這樣的例子有許多：

3.打磨 UI

　　說(shuō)到讓導(dǎo)航輕巧，UI是最為常用的伎倆，在此筆者不做太多的陳說(shuō)，然而須要留神的是，導(dǎo)航的輕盈與否與導(dǎo)航所處的頁(yè)面以及主要水平有很大關(guān)聯(lián)。比方在首頁(yè)，用戶須要對(duì)頁(yè)面有整體認(rèn)知的情形下，導(dǎo)航的UI就不能改太輕薄，而是應(yīng)當(dāng)先聲奪人，讓用戶直接注意，并閱讀發(fā)明所求;同樣的，當(dāng)用戶進(jìn)入到相干的頁(yè)面開(kāi)端瀏覽時(shí)，導(dǎo)航的作用就是路燈和司南，這時(shí)的導(dǎo)航就不如在首頁(yè)時(shí)那樣主要，那么導(dǎo)航就需要微微的、偷偷的在用戶旁邊隨時(shí)等候著被留神并應(yīng)用。

　　電商首頁(yè)的導(dǎo)航UI上吸引了不少眼球，然而到了成果頁(yè)導(dǎo)航變成了簡(jiǎn)直不裝潢的后果，因?yàn)樵诔晒��?yè)，用戶重要是來(lái)瀏覽產(chǎn)品，所以導(dǎo)航的作用就弱了。

　　綜上，是筆者對(duì)導(dǎo)航塑身的一點(diǎn)意識(shí)，清晰的導(dǎo)航可能讓頁(yè)面簡(jiǎn)略易用，反之也會(huì)大大影響頁(yè)面的信息流利度，所以在導(dǎo)航設(shè)計(jì)時(shí)要精心處置，一點(diǎn)淺見(jiàn)與大家分享。交互設(shè)計(jì)      
 

本文由http://www***ixueba***/  整理并發(fā)布！