隨著互聯(lián)網(wǎng)的不斷發(fā)展，網(wǎng)站越來(lái)越成為人們獲取信息、消費(fèi)、娛樂(lè)的主要場(chǎng)所。好的網(wǎng)站導(dǎo)航可以讓用戶更快、更準(zhǔn)確地找到所需內(nèi)容，提高用戶體驗(yàn)，提升網(wǎng)站的訪問(wèn)量和留存率。那么，如何設(shè)計(jì)出簡(jiǎn)潔明了的網(wǎng)站導(dǎo)航呢？本文首先分析了傳統(tǒng)的網(wǎng)站導(dǎo)航的缺點(diǎn)，然后提出了幾種簡(jiǎn)潔明了的設(shè)計(jì)思路和方法，并對(duì)其進(jìn)行了比較和評(píng)估，以期給網(wǎng)站設(shè)計(jì)者提供一些有價(jià)值的參考和指導(dǎo)。
傳統(tǒng)網(wǎng)站導(dǎo)航的缺陷
傳統(tǒng)的網(wǎng)站導(dǎo)航通常采用水平或垂直排列的二級(jí)、三級(jí)菜單，內(nèi)容繁多，層次復(fù)雜，導(dǎo)致用戶往往需要花費(fèi)很長(zhǎng)時(shí)間才能找到目標(biāo)內(nèi)容，且易發(fā)生迷途、重復(fù)點(diǎn)擊等問(wèn)題。此外，過(guò)于繁瑣的導(dǎo)航設(shè)計(jì)也會(huì)給網(wǎng)站帶來(lái)很多不必要的負(fù)擔(dān)，如增加網(wǎng)頁(yè)加載時(shí)間、降低頁(yè)面排版美觀程度等。
簡(jiǎn)潔明了的設(shè)計(jì)思路
設(shè)計(jì)出簡(jiǎn)潔明了的網(wǎng)站導(dǎo)航，需要遵循以下幾個(gè)思路：
1. 突出主導(dǎo)航：將網(wǎng)站的主要內(nèi)容分類，精簡(jiǎn)導(dǎo)航條目，突出主導(dǎo)航，減少次要導(dǎo)航和多余內(nèi)容的干擾，可以讓用戶更快速地找到目標(biāo)。
2. 風(fēng)格簡(jiǎn)單明了：簡(jiǎn)單大方的設(shè)計(jì)風(fēng)格可以為用戶提供更清晰、更直觀的信息。比較適合傳遞簡(jiǎn)單的信息和服務(wù)。
3. 內(nèi)容扁平化：通過(guò)減少層次、突出關(guān)鍵詞等方式，使導(dǎo)航菜單盡量扁平化，使用戶更容易理解網(wǎng)站的結(jié)構(gòu)。
4. 創(chuàng)新設(shè)計(jì)：嘗試采用不同的設(shè)計(jì)風(fēng)格、圖形、動(dòng)畫等元素，以獲得更好的引導(dǎo)效果。
基于以上思路，我們可以設(shè)計(jì)出一些簡(jiǎn)潔明了的網(wǎng)站導(dǎo)航的具體實(shí)現(xiàn)方法。
設(shè)計(jì)方案
1. 單層導(dǎo)航
單層導(dǎo)航是最簡(jiǎn)單、最清晰的導(dǎo)航方式。將網(wǎng)站的主要內(nèi)容用簡(jiǎn)單、主清晰的文字和圖標(biāo)展示在一個(gè)條目下，減少干擾和繁瑣。這種方式適用于內(nèi)容比較簡(jiǎn)單的網(wǎng)站。
下圖為兩個(gè)經(jīng)典案例：
圖1. 淘寶商城
淘寶商城采用了直接將主要分類列入導(dǎo)航的方法，讓用戶快速定位并進(jìn)入需要的頁(yè)面，使用效果較好。
圖2. 人人網(wǎng)
人人網(wǎng)從主要功能出發(fā)，分門別類地放置在一個(gè)導(dǎo)航欄內(nèi)，便于用戶快速地瀏覽和查找功能。
2. 折疊式導(dǎo)航
折疊式導(dǎo)航是一種簡(jiǎn)單實(shí)用的設(shè)計(jì)方式，將網(wǎng)站內(nèi)容折疊在一個(gè)導(dǎo)航條上，通過(guò)鼠標(biāo)點(diǎn)擊或手勢(shì)的方式展開(kāi)。折疊式導(dǎo)航方式比較適用于內(nèi)容比較豐富的網(wǎng)站。
下圖為一個(gè)經(jīng)典案例：
圖3. Twitter
Twitter采用了可以被折疊起來(lái)的較為簡(jiǎn)單的導(dǎo)航條，由于Twitter是社交網(wǎng)絡(luò)網(wǎng)站，它將頭像、搜索、新貼、私信等主要功能放在了導(dǎo)航條上，這種方式非常適合具有重要功能的網(wǎng)站。
3. 圖標(biāo)菜單
圖標(biāo)菜單是當(dāng)前設(shè)計(jì)中非常熱門、受到歡迎的一種選擇，主導(dǎo)航欄用簡(jiǎn)潔的圖標(biāo)代替文字，使界面更簡(jiǎn)單、干凈，便于用戶快速瀏覽。
下圖為幾個(gè)經(jīng)典案例：
圖4. 優(yōu)酷視頻
優(yōu)酷視頻了采用了紅色大氣的導(dǎo)航欄設(shè)計(jì)，并將主要欄目用圖標(biāo)展示，圖標(biāo)設(shè)計(jì)簡(jiǎn)單、直觀，用戶可以在發(fā)現(xiàn)其它欄目信息的同時(shí)也很容易找到目標(biāo)。
圖5. Airbnb
Airbnb和優(yōu)酷一樣，將一個(gè)靜態(tài)的非常簡(jiǎn)潔的導(dǎo)航欄放在頁(yè)面的頂部，不同之處在于，Airbnb將主要欄目都用圖標(biāo)展示并放置在底部，這樣，用戶可以非常方便地找到目標(biāo)。
評(píng)估
1. 復(fù)雜性
單層導(dǎo)航是最簡(jiǎn)單、最清晰的導(dǎo)航方式，使用起來(lái)非常直觀，但其承載的內(nèi)容相對(duì)較少，只適合內(nèi)容簡(jiǎn)單的網(wǎng)站。折疊式導(dǎo)航和圖標(biāo)菜單雖然一些比較復(fù)雜，但其內(nèi)容承載能力要強(qiáng)于單層導(dǎo)航，較好地平衡了可用性和可擴(kuò)展性，適合中等稍微大型的網(wǎng)站。
2. 導(dǎo)航效率
單層導(dǎo)航和折疊式導(dǎo)航都適合導(dǎo)航效率快的網(wǎng)站，因?yàn)橹鲗?dǎo)航目錄更少、整個(gè)內(nèi)部隱藏的界面可以快速列出，在效率上具有優(yōu)勢(shì)。圖標(biāo)菜單雖然方式更獨(dú)特、風(fēng)格更酷，但圖標(biāo)式的形式并不適合所有人，因此，不同用戶的需要還需要綜合考慮。
3. 體驗(yàn)流暢性
圖標(biāo)菜單的設(shè)計(jì)最為重要，反映出這類設(shè)計(jì)方案對(duì)于視覺(jué)體驗(yàn)的重視，甚至包括了對(duì)于音效指引的考慮。屏幕上的一些元素越小，其使用還需要細(xì)心地調(diào)整尺寸、按下鍵模型等其他細(xì)節(jié)，才能獲得最好的用戶體驗(yàn)。
結(jié)論
設(shè)計(jì)出簡(jiǎn)潔明了的網(wǎng)站導(dǎo)航需要遵循以下主要思路：突出主導(dǎo)航、風(fēng)格簡(jiǎn)單明了、內(nèi)容扁平化和創(chuàng)新設(shè)計(jì)?？梢圆捎脝螌訉?dǎo)航、折疊式導(dǎo)航和圖標(biāo)菜單等方法。導(dǎo)航設(shè)計(jì)所需簡(jiǎn)潔而不失承載能力的目錄結(jié)構(gòu)，必須遵循各種基礎(chǔ)設(shè)計(jì)原則，以達(dá)到最大程度的導(dǎo)航效率，最終盈利目的顯而易見(jiàn)：通過(guò)提升用戶使用體驗(yàn)，使用戶留存網(wǎng)站、增加與網(wǎng)站的互動(dòng)，提高網(wǎng)站的訪問(wèn)量和使用率。
