<p><img src="https://upload-images.jianshu.io/upload_images/3617926-025147cc0e7e4e3c" /></p><div class="markdown-here-wrapper" data-md-url="https://mp.weixin.qq.com/cgi-bin/appmsg?t=media/appmsg_edit&action=edit&type=10&isMul=1&isNew=1&lang=zh_CN&token=1571565642&token=1571565642&lang=zh_CN" markdown-here-wrapper-content-modified="true"><h2 >2.8. Vertical Navigation 垂直導(dǎo)航</h2><p ><img class="rich_pages" data-ratio="0.24921630094043887" src="https://upload-images.jianshu.io/upload_images/3617926-47f5c6430f6b64a0" data-type="gif" data-w="638" ></p><div class="markdown-here-wrapper" data-md-url="https://mp.weixin.qq.com/cgi-bin/appmsg?t=media/appmsg_edit&action=edit&type=10&isMul=1&isNew=1&lang=zh_CN&token=1571565642&token=1571565642&lang=zh_CN" markdown-here-wrapper-content-modified="true"><blockquote ><p >本文章屬于《跟我學(xué)線框圖》系列教程顶瞳，轉(zhuǎn)載請(qǐng)注明出處。</p></blockquote></div><p >垂直(又名“側(cè)邊欄”)導(dǎo)航，是一種沿產(chǎn)品一側(cè)顯示站點(diǎn)或應(yīng)用程序持久結(jié)構(gòu)的方式。</p><p >Macos 人機(jī)界面指南對(duì)它的定義是: “側(cè)邊欄通常由表格視圖或大綱視圖組成派撕，用戶可以在主窗口中瀏覽和選擇要操作的項(xiàng)目〔腔辏”</p><p >垂直導(dǎo)航在網(wǎng)絡(luò)上被廣泛使用终吼，通過滑出式的“導(dǎo)航抽屜”模式，垂直導(dǎo)航在移動(dòng)設(shè)備上正變得越來越普遍氯哮，幾乎成為標(biāo)準(zhǔn)际跪。</p><h3 >何時(shí)使用垂直導(dǎo)航</h3><p >垂直導(dǎo)航和標(biāo)簽一樣，是 master / detail 模式家族的一員喉钢，它被描述為“通過允許用戶在同一屏幕上瀏覽項(xiàng)目姆打，創(chuàng)造高效用戶體驗(yàn)的理想模式”<br /><img class="rich_pages" data-ratio="0.5078125" data-s="300,640" src="https://upload-images.jianshu.io/upload_images/3617926-cfc984edde9f3f6f" data-type="png" data-w="768" ></p><p >與選項(xiàng)卡不同，垂直導(dǎo)航適用于類別數(shù)量不小或用戶可自定義的情況(如電子郵件客戶端中的文件夾或標(biāo)記)肠虽。它被認(rèn)為是一個(gè)“安全”的導(dǎo)航模式幔戏，因?yàn)榱钊耸煜さ模`活的税课，并不占用太多的空間闲延。當(dāng)沒有其他顯而易見的選擇時(shí)，常常使用它韩玩。</p><p >不使用它的一個(gè)主要原因是水平空間受到限制垒玲。這就是為什么許多網(wǎng)站(包括本頁(yè)面)刪除了小屏幕尺寸的垂直導(dǎo)航，取而代之的是面包屑或流行的“漢堡”菜單導(dǎo)航模式找颓。材料設(shè)計(jì)指南根據(jù)屏幕尺寸和內(nèi)容區(qū)分了四種不同的變體: 標(biāo)準(zhǔn)的合愈、模式的、永久可見的和不可見的叮雳。</p><h3 >如何使用垂直導(dǎo)航</h3><p >突出顯示列表中選定的頁(yè)面 / 項(xiàng)目想暗。它不應(yīng)該像其他項(xiàng)目一樣被設(shè)計(jì)成可點(diǎn)擊的樣式(即使它的行為是相同的)</p><p >使用標(biāo)題形成相關(guān)項(xiàng)目的邏輯分組</p><p >單擊或點(diǎn)擊分類標(biāo)簽應(yīng)該擴(kuò)展或折疊該分類妇汗，而不是鏈接到自己的頁(yè)面</p><p >保持導(dǎo)航鏈接名稱的簡(jiǎn)短帘不，它們可以是頁(yè)面標(biāo)題的簡(jiǎn)短衍生物</p><p >根據(jù)對(duì)應(yīng)用程序用戶最有用的內(nèi)容對(duì)列表進(jìn)行排序</p><p >擁有分層數(shù)據(jù)并不意味著必須使用樹視圖。通常杨箭，列表視圖是一個(gè)更簡(jiǎn)單寞焙、更強(qiáng)大的選擇</p><p >一般來說，不要在側(cè)邊欄中暴露超過兩個(gè)層次結(jié)構(gòu)級(jí)別</p><p >側(cè)邊欄可以在頁(yè)面的左側(cè)或右側(cè)，但應(yīng)該在整個(gè)應(yīng)用程序中保持一致</p><p >考慮一下當(dāng)側(cè)邊欄內(nèi)容比頁(yè)面內(nèi)容更長(zhǎng)(更高)時(shí)會(huì)發(fā)生什么捣郊。確保用戶仍然可以訪問整個(gè)列表(也就是說辽狈，滾動(dòng)到頁(yè)面內(nèi)容之外)</p><p >考慮將導(dǎo)航面板替換為小屏幕上的滑出面板或桌面顯示器上的面包屑導(dǎo)航</p><h3 >Basic Usage 基本用法</h3><p ><img class="rich_pages" data-ratio="0.6550308008213552" data-s="300,640" src="https://upload-images.jianshu.io/upload_images/3617926-91b954725a127f3c" data-type="png" data-w="487" ></p><h3 >States 狀態(tài)</h3><p ><img class="rich_pages" data-ratio="0.8413793103448276" data-s="300,640" src="https://upload-images.jianshu.io/upload_images/3617926-893286d45edbd891" data-type="png" data-w="145" ></p><p >與選項(xiàng)卡一樣，垂直導(dǎo)航應(yīng)該有一個(gè)清晰的選擇狀態(tài)呛牲，通常是通過將選定項(xiàng)加粗和 / 或突出顯示來實(shí)現(xiàn)的刮萌。懸停狀態(tài)也很有用。</p><h3 >Variations 變化</h3><p ><img class="rich_pages" data-ratio="0.24290220820189273" data-s="300,640" src="https://upload-images.jianshu.io/upload_images/3617926-ceb568ba73ac2ba0" data-type="png" data-w="951" ></p><h3 >References 參考資料</h3><ul class=" list-paddingleft-2"><li >macOS Human Interface Guidelines 人機(jī)界面指南</li><li >U.S. Web Design System 美國(guó)網(wǎng)頁(yè)設(shè)計(jì)系統(tǒng)</li><li >GNOME Human Interface Guidelines 人機(jī)界面指南</li><li >Microsoft Windows Desktop Guidelines 微軟 Windows 桌面指南</li></ul><h3 >Related Controls 相關(guān)控件</h3><ul class=" list-paddingleft-2"><li >Tabs 標(biāo)簽</li><li >Menu Bars 菜單欄</li></ul><h3 >Further Reading 進(jìn)一步閱讀</h3><ul class=" list-paddingleft-2"><li >Standard Screen Patterns 12個(gè)標(biāo)準(zhǔn)屏幕模式</li><li >Sites Doing Vertical Navigation Right 10個(gè)做垂直導(dǎo)航的網(wǎng)站</li></ul><p ><img class="rich_pages" data-ratio="0.27622841965471445" data-s="300,640" src="https://upload-images.jianshu.io/upload_images/3617926-ed2dd90ad9c0cabc" data-type="png" data-w="4518" ></p></div>