用戶為了完成任務(wù)需要找到必須的內(nèi)容和功能。左側(cè)導(dǎo)航條在垂直的緊湊的空間內(nèi)提供給用戶快速訪問已分類內(nèi)容的入口。

解決什么問題？

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

什么時(shí)候用？

分類至少有4個(gè)

分類可能會(huì)超過10個(gè)

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

頁面寬度沒問題

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

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

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

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

具體解決辦法是什么？

1、在頁面標(biāo)題下方以一列的方式顯示一系列鏈接，并且左對(duì)齊。

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

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

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

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

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

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

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

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

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

當(dāng)把左側(cè)導(dǎo)航條中的鏈接進(jìn)行分類后，分類的名字可以是靜態(tài)的（語義的）或者是動(dòng)態(tài)的（可點(diǎn)的）。靜態(tài)父導(dǎo)航只是定義了下面的子分類�？牲c(diǎn)父導(dǎo)航不僅僅是定義了子分類，他們還鏈接到一個(gè)特殊的目標(biāo)頁。

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

關(guān)注內(nèi)容的劃分范圍（符合用戶的心智模型）比關(guān)注頁面的展示更重要。因?yàn)樽畛Ｒ姷腻e(cuò)誤是將一系列沒意義的內(nèi)容歸在一類。

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

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

3、避免過于寬泛或者過于特殊的分類名字。

為什么使用這個(gè)組件？

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

可訪問性

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

開放式問題？

對(duì)于長(zhǎng)文字我們?cè)撊绾谓鉀Q？在左側(cè)導(dǎo)航中我們是否應(yīng)該避免文字換行？

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

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

原文地址：http://developer.yahoo.com/ypatterns/navigation/bar/leftnav.html

文章來源：pd4.me/blog/ 轉(zhuǎn)載請(qǐng)注明出處鏈接。

延伸閱讀：

• 手風(fēng)琴導(dǎo)航(Accordion)_Yahoo_Pattern(翻譯)
• 頂部導(dǎo)航條(Top Navigation Bar)_Yahoo_Pattern(翻譯)

標(biāo)簽： 左側(cè)導(dǎo)航條 雅虎組件 網(wǎng)站導(dǎo)航 

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