網站左側導航樹的設計 避免錯誤的隱義

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

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

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

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

　　除了操作系統，目前一些主流的B2C網站也能看到類似的左側導航設計。下面的第一張圖片是主營服裝的gap，雖然不能將左側導航收縮和展開，但是它通過采用灰色以及分類名稱前方的圓形icon符號，十分明顯的表現出了當前選中的分類。值得一提的是，在分類名稱的對齊處理上，它也采用了縮進的方式來區別不同層級的分類。接著是沃爾瑪，當前選中的分類被醒目的顏色所標示，同樣采取了對齊時縮進的方法來區別不同層級的分類。需要注意的是在下面的第三幅圖中，向上的箭頭並不代表可以展開或收縮導航樹，而是點擊後直接跳轉到該分類的頁面，相當於一個內部鏈接。最後是大名鼎鼎的亞馬遜，顏色、對齊的縮進以及 icon都被運用在左側的導航樹中，不過這裡的icon(指向左邊的小箭頭)和沃爾瑪一樣，代表的是一個內部鏈接，而不是收縮和展開導航樹的按鈕。

　　所以我們在設計左側導航樹的收縮和展開按鈕時，盡量避免指向上方和左邊的箭頭或三角，而去使用更加常見的icon。如果左側導航樹不能收縮或展開(被固定死)，那麼可以用類似亞馬遜的icon來表示這些分類是一個可以點擊的內部鏈接。

　　作者：Jjacy

　　文章來源：im-ux.com/archives/365 轉載請注明出處鏈接。