解決什么問題?

用戶為了完成任務(wù)需要找到必要的內(nèi)容和功能.

什么時候用?

分類至少有4個

分類可能會超過10個

分類的標(biāo)題可能會很長或者是系統(tǒng)生成

頁面寬度沒問題

推薦二級導(dǎo)航內(nèi)容;比如,當(dāng)在信息架構(gòu)層面,所展示的分類是這個頁面標(biāo)題的子元素時 

當(dāng)展開/隱藏是有必要的

為了讓二級或三級導(dǎo)航條有更好的可見性,可以用來替代標(biāo)簽或頂部導(dǎo)航條 

分類是屬于一個單獨的產(chǎn)品

具體解決辦法是什么?

在頁面標(biāo)題下方以一列的方式顯示一系列鏈接,并且左對齊.

對于更高級別的導(dǎo)航可以結(jié)合標(biāo)簽組和/或頂部導(dǎo)航條

左側(cè)導(dǎo)航條給于當(dāng)前位置特殊的視覺標(biāo)識.通過對顏色,字體或者其他方式來表示”選中狀態(tài)”

左側(cè)導(dǎo)航條內(nèi)的所有頁面本身也該顯示在導(dǎo)航條內(nèi),同時必須正確的標(biāo)識當(dāng)前位置

左側(cè)導(dǎo)航條中文字標(biāo)簽周圍的元素都應(yīng)該是可點的,而不只是文字本身

一個左側(cè)導(dǎo)航條最多有兩層導(dǎo)航 

當(dāng)需要展示兩層導(dǎo)航并且有很多的一級分類和二級分類時,應(yīng)考慮使用可折疊的左側(cè)導(dǎo)航條(或者手風(fēng)琴導(dǎo)航)

可點父導(dǎo)航  VS  靜態(tài)父導(dǎo)航(Semantic Parents)

可點父導(dǎo)航(左圖)VS靜態(tài)父導(dǎo)航(右圖)

(譯者注:忘了過去某個項目中跟同事還爭了好久,現(xiàn)在看各有各的好處和用法,只要滿足基本原則即可)

當(dāng)把左側(cè)導(dǎo)航條中的鏈接進行分類后,分類的名字可以是靜態(tài)的(語義的)或者是動態(tài)的(可點的).靜態(tài)父導(dǎo)航只是定義了下面的子分類.

點父導(dǎo)航不僅僅是定義了子分類,他們還鏈接到一個特殊的目標(biāo)頁

永遠(yuǎn)不要在相同左側(cè)導(dǎo)航中將可點父導(dǎo)航和靜態(tài)父導(dǎo)航混合使用.

關(guān)注內(nèi)容的劃分范圍(符合用戶的心智模型)比關(guān)注頁面的展示更重要.因為最常見的錯誤是將一系列沒意義的內(nèi)容歸在一類.

盡可能降低分類之間的交集

讓分類之間的界限盡可能的清晰(例如,很容易猜到想要的東西是否在一個分類中)

避免過于寬泛或者過于特殊的分類名字.

為什么使用這個組件?

頂部導(dǎo)航條提供給用戶一種很方便,簡潔分類展示方式,讓用戶訪問品類繁多的有組織的內(nèi)容

可訪問性

當(dāng)使用”彈出式”或”滑動式”菜單時,粗心的做法會導(dǎo)致有鼠標(biāo)的用戶可以訪問下級菜單(通過鼠標(biāo)劃過)或者點擊鏈接,但是鍵盤用戶只能做到后者.解決辦法是讓用戶可以通過Enter或Return鍵來觸發(fā)(通常會用在靜態(tài)父導(dǎo)航中).

開放式問題

對于長文字我們該如何解決?在左側(cè)導(dǎo)航中我們是否應(yīng)該避免文字換行?

為什么至少需要4個分類?對于只有3個或者更少的分類時對那些設(shè)計師有什么建議嗎?

如果頁面寬度成問題,是否有其他的可選建議?