
導(dǎo)航是互聯(lián)網(wǎng)產(chǎn)品中應(yīng)用最廣泛的基礎(chǔ)元素之一,引導(dǎo)用戶了解到網(wǎng)站的內(nèi)容結(jié)構(gòu)進(jìn)而找到所求。作為基礎(chǔ)控件,導(dǎo)航看起來(lái)簡(jiǎn)單,但卻是產(chǎn)品設(shè)計(jì)中最復(fù)雜繁瑣的一部分。因?yàn)槲覀兿胍尵W(wǎng)站結(jié)構(gòu)更清晰、想要向用戶傳達(dá)所有的信息,所以就賦予了導(dǎo)航越來(lái)越多的內(nèi)容,使他們龐大異常,十分糾結(jié)。簡(jiǎn)化了,用戶無(wú)法了解到頁(yè)面結(jié)構(gòu)以及自己的處境,產(chǎn)生困惑;復(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)化形式;3.打磨UI。
網(wǎng)站作為信息的集合體,要囊括海量的資源,從首頁(yè)到二級(jí)頁(yè)再到專(zhuān)題頁(yè)進(jìn)而底層頁(yè)等等等等,信息的層級(jí)多且繁雜,所以就容易形成tab套tab再套tab的局面。那么作為導(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è)面頂部,一般會(huì)位于標(biāo)題或頁(yè)頭的下方。它們提供給用戶返回之前任何一個(gè)頁(yè)面的鏈接(這些鏈接也是能到達(dá)當(dāng)前頁(yè)面的路徑),在層級(jí)架構(gòu)中通常是這個(gè)頁(yè)面的父級(jí)頁(yè)面。面包屑提供給用戶回溯到網(wǎng)站首頁(yè)或入口頁(yè)面的一條快速路徑。
一個(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í)全部展現(xiàn)在用戶面前,就會(huì)形成上面的這種tab套tab的形式,使得導(dǎo)航臃腫不堪,占據(jù)頁(yè)面很大的空間??墒侨绻覀儼延脩絷P(guān)心的導(dǎo)航內(nèi)容提取出來(lái),就會(huì)得到下面的結(jié)構(gòu):