網(wǎng)站建設中導航的設置是一個(gè)重點(diǎn)，導航是互聯(lián)網(wǎng)產(chǎn)品中應用最廣泛的基礎元素之一，引導用戶(hù)了解到網(wǎng)站的內容結構進(jìn)而找到所求。作為基礎控件，導航看起來(lái)簡(jiǎn)單，但卻是產(chǎn)品設計中最復雜繁瑣的一部分。因為我們想要讓網(wǎng)站結構更清晰、想要向用戶(hù)傳達所有的信息，所以就賦予了導航越來(lái)越多的內容，使他們龐大異常，十分糾結。簡(jiǎn)化了，用戶(hù)無(wú)法了解到頁(yè)面結構以及自己的處境，產(chǎn)生困惑；復雜了，導航臃腫不堪，層巒疊嶂，既不美觀(guān)也不好用。
那么，在清晰的信息架構下能不能讓導航盡可能的更輕便、更靈動(dòng)，是筆者本文想要探討的話(huà)題。筆者看來(lái)，為導航塑身可以從以下幾個(gè)角度來(lái)進(jìn)行：1.簡(jiǎn)化結構；2.優(yōu)化形式；3.打磨UI。
網(wǎng)站作為信息的集合體，要囊括海量的資源，從首頁(yè)到二級頁(yè)再到專(zhuān)題頁(yè)進(jìn)而底層頁(yè)等等等等，信息的層級多且繁雜，所以就容易形成tab套tab再套tab的局面。那么作為導航塑身的第一步，我們要做的就是把這負責的結構盡量簡(jiǎn)化，讓導航變得輕盈起來(lái)，或者至少看起來(lái)不那么臃腫。
A． 通過(guò)面包屑來(lái)簡(jiǎn)化導航結構
面包屑通常水平地出現在頁(yè)面頂部，一般會(huì )位于標題或頁(yè)頭的下方。它們提供給用戶(hù)返回之前任何一個(gè)頁(yè)面的鏈接（這些鏈接也是能到達當前頁(yè)面的路徑），在層級架構中通常是這個(gè)頁(yè)面的父級頁(yè)面。面包屑提供給用戶(hù)回溯到網(wǎng)站首頁(yè)或入口頁(yè)面的一條快速路徑。
一個(gè)門(mén)戶(hù)網(wǎng)站常見(jiàn)的結構是首頁(yè)-頻道頁(yè)-專(zhuān)題頁(yè)-子專(zhuān)題-底層頁(yè)。如果我們想在門(mén)戶(hù)網(wǎng)站看NBA的視頻直播，那么我們來(lái)看下他的導航：
如果把信息層級全部展現在用戶(hù)面前，就會(huì )形成上面的這種tab套tab的形式，使得導航臃腫不堪，占據頁(yè)面很大的空間?？墒侨绻覀儼延脩?hù)關(guān)心的導航內容提取出來(lái)，就會(huì )得到下面的結構：
再扁平化一下：
這就是清晰的面包屑導航。綜上，面包屑導航能夠讓復雜的層級結構扁平化，使得導航更加輕盈。
面包屑導航還有一些變體，是基于用戶(hù)線(xiàn)性操作邏輯衍生出來(lái)的。在無(wú)線(xiàn)端產(chǎn)品中應用更為廣泛，因為移動(dòng)設備的顯示區域有限，無(wú)力支撐龐大的導航結構。在用戶(hù)點(diǎn)擊當前導航內容后，當前導航消失進(jìn)去下一級導航，并提供返回按鈕。
當然，使用面包屑來(lái)簡(jiǎn)化導航結構也是有條件的，不是所有的導航層級都可以用這種方法來(lái)簡(jiǎn)化。面包屑導航更符合用戶(hù)線(xiàn)性思維導向下的操作邏輯，例如，用戶(hù)想要看NBA直播，那么他一定不關(guān)心娛樂(lè )圈發(fā)生了哪些八卦，也不care足球或者網(wǎng)球有什么新聞，CBA，CUBA他可能也不十分在意，那么面包屑的線(xiàn)性導航就可以滿(mǎn)足用戶(hù)的需求?；蛘呤怯捎诳臻g或者設備原因，我們無(wú)法提供更為詳細的導航，而采用線(xiàn)性簡(jiǎn)化導航的處理方法。
B． 合并導航層級
導航的龐大往往是由于層級過(guò)多導致，那么減少層級的一種有效方法就是合并導航層級，例如把二級和三級導航合并，就減少了三級導航，讓導航輕便一些。
如上圖，圖片庫包括動(dòng)態(tài)圖片和靜態(tài)圖片，每個(gè)分類(lèi)下面又有小的分類(lèi)，這樣的導航層級在產(chǎn)品中十分常見(jiàn)，略顯臃腫。那么通過(guò)合并層級就可以把導航精簡(jiǎn)到兩級，處理后的導航如下：
瘦身后的導航看起來(lái)結構也比較清晰，而且沒(méi)有影響到信息的傳達。
對比下美團和糯米的導航：
美團把注冊登錄和個(gè)人信息等功能性導航和網(wǎng)站主導航做了合并處理，為網(wǎng)站首屏節約出了寶貴的空間。
C.隱藏部分導航
簡(jiǎn)化導航結構的第三種方法是把部分層級或者導航內容隱藏起來(lái)，使得導航看上去輕便一些。
當導航里的內容特別多的時(shí)候，可以選擇把主要內容留下，次要內容隱藏的方法來(lái)處理。例如：
當頁(yè)面空間有限，無(wú)法容納更多層級的時(shí)候，可以選擇把次層級隱藏收起，鼠標滑過(guò)或者點(diǎn)擊后觸發(fā)此層級的方法處理，這樣的例子有很多：
2.優(yōu)化形式
有些時(shí)候，我們無(wú)法判斷用戶(hù)在瀏覽產(chǎn)品或網(wǎng)站時(shí)是否是線(xiàn)性思維，也無(wú)法對導航結構進(jìn)行再精簡(jiǎn)，那么我們怎樣讓導航再“瘦”那么一點(diǎn)呢。
A．將一維導航變?yōu)槎S導航
將一維導航轉化為二維導航，能夠有效的減少層疊導航帶給人的重復感和復雜感，能夠讓操作富有變化，進(jìn)而提升體驗。
類(lèi)似的列子也有很多：
B.將復雜的層級單獨處理
當某一層級的導航內容豐富到一定程度，他就可以充當一個(gè)獨立控件來(lái)單獨設計了，他們可以作為頁(yè)面的元素來(lái)單獨存在，可能看起來(lái)都不太像是導航。
3.打磨UI
說(shuō)到讓導航輕盈，UI是最為常用的手法，在此筆者不做太多的陳述，但是需要注意的是，導航的輕盈與否與導航所處的頁(yè)面以及重要程度有很大關(guān)系。比如在首頁(yè)，用戶(hù)需要對頁(yè)面有整體認知的情況下，導航的UI就不能改太輕薄，而是應該先聲奪人，讓用戶(hù)直接注意，并瀏覽發(fā)現所求；同樣的，當用戶(hù)進(jìn)入到相關(guān)的頁(yè)面開(kāi)始瀏覽時(shí)，導航的作用就是路燈和司南，這時(shí)的導航就不如在首頁(yè)時(shí)那樣重要，那么導航就需要輕輕的、悄悄的在用戶(hù)旁邊隨時(shí)等待著(zhù)被注意并使用。
電商首頁(yè)的導航UI上吸引了不少眼球，但是到了結果頁(yè)導航變成了幾乎沒(méi)有裝飾的效果，因為在結果頁(yè)，用戶(hù)主要是來(lái)瀏覽產(chǎn)品，所以導航的作用就弱了。
綜上，是開(kāi)拓者對導航塑身的一點(diǎn)認識，清晰的導航能夠讓頁(yè)面簡(jiǎn)單易用，反之也會(huì )大大影響頁(yè)面的信息流暢度，所以在導航設計時(shí)要精心處理，一點(diǎn)淺見(jiàn)與大家分享。
鄭州網(wǎng)站建設 | 鄭州網(wǎng)絡(luò )公司 | 鄭州網(wǎng)站制作 | 鄭州做網(wǎng)站 開(kāi)拓者科技 m.cnmcafee.cn
技術(shù)創(chuàng )造價(jià)值 服務(wù)締造品牌
Copyright ? 2011-2024 鄭州開(kāi)拓者電子科技有限公司 All Rights Reserved