<p><img src="https://img.haomeiwen.com/i3617926/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 垂直导航</h2><p ><img class="rich_pages" data-ratio="0.24921630094043887" src="https://img.haomeiwen.com/i3617926/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 >本文章属于《跟我学线框图》系列教程，转载请注明出处。</p></blockquote></div><p >垂直(又名“侧边栏”)导航，是一种沿产品一侧显示站点或应用程序持久结构的方式。</p><p >Macos 人机界面指南对它的定义是: “侧边栏通常由表格视图或大纲视图组成，用户可以在主窗口中浏览和选择要操作的项目。”</p><p >垂直导航在网络上被广泛使用，通过滑出式的“导航抽屉”模式，垂直导航在移动设备上正变得越来越普遍，几乎成为标准。</p><h3 >何时使用垂直导航</h3><p >垂直导航和标签一样，是 master / detail 模式家族的一员，它被描述为“通过允许用户在同一屏幕上浏览项目，创造高效用户体验的理想模式”<br /><img class="rich_pages" data-ratio="0.5078125" data-s="300,640" src="https://img.haomeiwen.com/i3617926/cfc984edde9f3f6f" data-type="png" data-w="768" ></p><p >与选项卡不同，垂直导航适用于类别数量不小或用户可自定义的情况(如电子邮件客户端中的文件夹或标记)。它被认为是一个“安全”的导航模式，因为令人熟悉的，灵活的，并不占用太多的空间。当没有其他显而易见的选择时，常常使用它。</p><p >不使用它的一个主要原因是水平空间受到限制。这就是为什么许多网站(包括本页面)删除了小屏幕尺寸的垂直导航，取而代之的是面包屑或流行的“汉堡”菜单导航模式。材料设计指南根据屏幕尺寸和内容区分了四种不同的变体: 标准的、模式的、永久可见的和不可见的。</p><h3 >如何使用垂直导航</h3><p >突出显示列表中选定的页面 / 项目。它不应该像其他项目一样被设计成可点击的样式(即使它的行为是相同的)</p><p >使用标题形成相关项目的逻辑分组</p><p >单击或点击分类标签应该扩展或折叠该分类，而不是链接到自己的页面</p><p >保持导航链接名称的简短，它们可以是页面标题的简短衍生物</p><p >根据对应用程序用户最有用的内容对列表进行排序</p><p >拥有分层数据并不意味着必须使用树视图。通常，列表视图是一个更简单、更强大的选择</p><p >一般来说，不要在侧边栏中暴露超过两个层次结构级别</p><p >侧边栏可以在页面的左侧或右侧，但应该在整个应用程序中保持一致</p><p >考虑一下当侧边栏内容比页面内容更长(更高)时会发生什么。确保用户仍然可以访问整个列表(也就是说，滚动到页面内容之外)</p><p >考虑将导航面板替换为小屏幕上的滑出面板或桌面显示器上的面包屑导航</p><h3 >Basic Usage 基本用法</h3><p ><img class="rich_pages" data-ratio="0.6550308008213552" data-s="300,640" src="https://img.haomeiwen.com/i3617926/91b954725a127f3c" data-type="png" data-w="487" ></p><h3 >States 状态</h3><p ><img class="rich_pages" data-ratio="0.8413793103448276" data-s="300,640" src="https://img.haomeiwen.com/i3617926/893286d45edbd891" data-type="png" data-w="145" ></p><p >与选项卡一样，垂直导航应该有一个清晰的选择状态，通常是通过将选定项加粗和 / 或突出显示来实现的。悬停状态也很有用。</p><h3 >Variations 变化</h3><p ><img class="rich_pages" data-ratio="0.24290220820189273" data-s="300,640" src="https://img.haomeiwen.com/i3617926/ceb568ba73ac2ba0" data-type="png" data-w="951" ></p><h3 >References 参考资料</h3><ul class=" list-paddingleft-2"><li >macOS Human Interface Guidelines 人机界面指南</li><li >U.S. Web Design System 美国网页设计系统</li><li >GNOME Human Interface Guidelines 人机界面指南</li><li >Microsoft Windows Desktop Guidelines 微软 Windows 桌面指南</li></ul><h3 >Related Controls 相关控件</h3><ul class=" list-paddingleft-2"><li >Tabs 标签</li><li >Menu Bars 菜单栏</li></ul><h3 >Further Reading 进一步阅读</h3><ul class=" list-paddingleft-2"><li >Standard Screen Patterns 12个标准屏幕模式</li><li >Sites Doing Vertical Navigation Right 10个做垂直导航的网站</li></ul><p ><img class="rich_pages" data-ratio="0.27622841965471445" data-s="300,640" src="https://img.haomeiwen.com/i3617926/ed2dd90ad9c0cabc" data-type="png" data-w="4518" ></p></div>
网友评论