無論是B2B網(wǎng)站還是B2C網(wǎng)站，左側(cè)導(dǎo)航樹使用的頻率都比較高。當(dāng)導(dǎo)航樹中存在二級(jí)甚至三級(jí)分類時(shí)，往往在設(shè)計(jì)上就會(huì)開始變得復(fù)雜。因?yàn)椴粌H有可能需要一個(gè)按鈕或符號(hào)來控制導(dǎo)航樹的收縮與展開，也要考慮當(dāng)前選中的分類狀態(tài)、曾經(jīng)瀏覽過的分類狀態(tài)以及不同級(jí)別分類之間的區(qū)分。在這樣一種情況下，設(shè)計(jì)師往往有可能忽略這些細(xì)節(jié)，從而導(dǎo)致錯(cuò)誤的隱義。

首先來看導(dǎo)航樹的收縮與展開，目前在我們的項(xiàng)目中經(jīng)常能看到下面左圖中的設(shè)計(jì)，收縮和展開的icon被放到了分類名稱的后方，但是這樣的設(shè)計(jì)往往會(huì)傳遞給用戶錯(cuò)誤的信號(hào)，他們會(huì)誤以為這是一個(gè)外部鏈接，如下面右圖CNN的導(dǎo)航標(biāo)簽所示。

為了照顧更多用戶的理解和使用習(xí)慣，我尋找了幾種主流PC操作系統(tǒng)中的左側(cè)導(dǎo)航樹的設(shè)計(jì)案例。首先是Windows XP，左側(cè)導(dǎo)航的收縮與展開了采用了加號(hào)和減號(hào)的方法，icon放在分類名稱左側(cè)。其次是Mac OS，左側(cè)導(dǎo)航的收縮與展開采用了小三角的表示方法，三角朝左表示分類收縮狀態(tài)，三角朝下表示分類展開狀態(tài)。Win7的左側(cè)導(dǎo)航和Mac OS類似，只是分類展開時(shí)的小三角是斜向下的。最后是谷歌文檔的左側(cè)導(dǎo)航的設(shè)計(jì)案例，只是小三角的樣式有所改變，其余狀態(tài)均和Mac OS一致。

對(duì)以上案例總結(jié)后不難看出，不管采用什么icon來表示展開和收縮的符號(hào)，一般都以放在分類名稱的左側(cè)為宜，放在右側(cè)會(huì)讓用戶誤以為是外鏈。其次加號(hào)減號(hào)以及小三角都是常用的icon形式。最后要說明的是，分類名稱在對(duì)齊上的縮進(jìn)處理可以很好的體現(xiàn)出分類之間的層級(jí)關(guān)系，建議在設(shè)計(jì)的時(shí)候借鑒這種方式來表現(xiàn)不同分類間的層級(jí)關(guān)系。

標(biāo)簽： 網(wǎng)站導(dǎo)航 導(dǎo)航樹 導(dǎo)航設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。