激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)之垂直導(dǎo)航

發(fā)布時(shí)間：2024-03-26 15:00:27 瀏覽量：191次

2.8. Vertical Navigation 垂直導(dǎo)航

本文章屬于《跟我學(xué)線框圖》系列教程，轉(zhuǎn)載請(qǐng)注明出處。

垂直(又名“側(cè)邊欄”)導(dǎo)航，是一種沿產(chǎn)品一側(cè)顯示站點(diǎn)或應(yīng)用程序持久結(jié)構(gòu)的方式。

Macos 人機(jī)界面指南對(duì)它的定義是: “側(cè)邊欄通常由表格視圖或大綱視圖組成，用戶可以在主窗口中瀏覽和選擇要操作的項(xiàng)目?！?/p>

垂直導(dǎo)航在網(wǎng)絡(luò)上被廣泛使用，通過(guò)滑出式的“導(dǎo)航抽屜”模式，垂直導(dǎo)航在移動(dòng)設(shè)備上正變得越來(lái)越普遍，幾乎成為標(biāo)準(zhǔn)。

何時(shí)使用垂直導(dǎo)航

垂直導(dǎo)航和標(biāo)簽一樣，是 master / detail 模式家族的一員，它被描述為“通過(guò)允許用戶在同一屏幕上瀏覽項(xiàng)目，創(chuàng)造高效用戶體驗(yàn)的理想模式”

與選項(xiàng)卡不同，垂直導(dǎo)航適用于類別數(shù)量不小或用戶可自定義的情況(如電子郵件客戶端中的文件夾或標(biāo)記)。它被認(rèn)為是一個(gè)“安全”的導(dǎo)航模式，因?yàn)榱钊耸煜さ模`活的，并不占用太多的空間。當(dāng)沒(méi)有其他顯而易見(jiàn)的選擇時(shí)，常常使用它。

不使用它的一個(gè)主要原因是水平空間受到限制。這就是為什么許多網(wǎng)站(包括本頁(yè)面)刪除了小屏幕尺寸的垂直導(dǎo)航，取而代之的是面包屑或流行的“漢堡”菜單導(dǎo)航模式。材料設(shè)計(jì)指南根據(jù)屏幕尺寸和內(nèi)容區(qū)分了四種不同的變體: 標(biāo)準(zhǔn)的、模式的、永久可見(jiàn)的和不可見(jiàn)的。

如何使用垂直導(dǎo)航

突出顯示列表中選定的頁(yè)面 / 項(xiàng)目。它不應(yīng)該像其他項(xiàng)目一樣被設(shè)計(jì)成可點(diǎn)擊的樣式(即使它的行為是相同的)

使用標(biāo)題形成相關(guān)項(xiàng)目的邏輯分組

單擊或點(diǎn)擊分類標(biāo)簽應(yīng)該擴(kuò)展或折疊該分類，而不是鏈接到自己的頁(yè)面

保持導(dǎo)航鏈接名稱的簡(jiǎn)短，它們可以是頁(yè)面標(biāo)題的簡(jiǎn)短衍生物

根據(jù)對(duì)應(yīng)用程序用戶最有用的內(nèi)容對(duì)列表進(jìn)行排序

擁有分層數(shù)據(jù)并不意味著必須使用樹視圖。通常，列表視圖是一個(gè)更簡(jiǎn)單、更強(qiáng)大的選擇

一般來(lái)說(shuō)，不要在側(cè)邊欄中暴露超過(guò)兩個(gè)層次結(jié)構(gòu)級(jí)別

側(cè)邊欄可以在頁(yè)面的左側(cè)或右側(cè)，但應(yīng)該在整個(gè)應(yīng)用程序中保持一致

考慮一下當(dāng)側(cè)邊欄內(nèi)容比頁(yè)面內(nèi)容更長(zhǎng)(更高)時(shí)會(huì)發(fā)生什么。確保用戶仍然可以訪問(wèn)整個(gè)列表(也就是說(shuō)，滾動(dòng)到頁(yè)面內(nèi)容之外)

考慮將導(dǎo)航面板替換為小屏幕上的滑出面板或桌面顯示器上的面包屑導(dǎo)航

Basic Usage 基本用法

States 狀態(tài)

與選項(xiàng)卡一樣，垂直導(dǎo)航應(yīng)該有一個(gè)清晰的選擇狀態(tài)，通常是通過(guò)將選定項(xiàng)加粗和 / 或突出顯示來(lái)實(shí)現(xiàn)的。懸停狀態(tài)也很有用。

Variations 變化

References 參考資料

  • macOS Human Interface Guidelines 人機(jī)界面指南
  • U.S. Web Design System 美國(guó)網(wǎng)頁(yè)設(shè)計(jì)系統(tǒng)
  • GNOME Human Interface Guidelines 人機(jī)界面指南
  • Microsoft Windows Desktop Guidelines 微軟 Windows 桌面指南

Related Controls 相關(guān)控件

  • Tabs 標(biāo)簽
  • Menu Bars 菜單欄

Further Reading 進(jìn)一步閱讀

  • Standard Screen Patterns 12個(gè)標(biāo)準(zhǔn)屏幕模式
  • Sites Doing Vertical Navigation Right 10個(gè)做垂直導(dǎo)航的網(wǎng)站

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定