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

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

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

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

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

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