<p><img src="https://img.haomeiwen.com/i3617926/6681d776bef6a3d0" /></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=1074266017&token=1074266017&lang=zh_CN" markdown-here-wrapper-content-modified="true"><h2 >2.9. 菜单栏 Menu Bars</h2><p ><img class="rich_pages" data-ratio="0.24921630094043887" src="https://img.haomeiwen.com/i3617926/eccb90e96dbbf6bf" data-type="gif" data-w="638" ><br /></p><blockquote ><p >本文章属于《跟我学线框图》系列教程，转载请注明出处。</p></blockquote><p >菜单栏允许用户使用类别和子类别进行导航。 它们在整个应用程序中是持久不变的。</p><p >在桌面应用程序中，菜单栏是应用程序顶部的项目，也称为文件菜单。 在 web 上，它们位于页面的头部 / 顶部。 在这两种情况下，它们都可以支持嵌套菜单或作为独立的分类(也称为“单斜分组”或扁平结构)。</p><h2 >何时使用菜单栏</h2><p >菜单栏专门用于主导航(不像垂直导航或选项卡可以作为辅助导航)。</p><p >它们应该用于应用程序或站点的类别，这些类别在整个使用过程中都是有意义的，只要没有太多的类别。 如果有太多的类别，以适应整个页面，考虑垂直导航。</p><p ><img class="rich_pages" data-ratio="0.2612244897959184" data-s="300,640" src="https://img.haomeiwen.com/i3617926/4f2aeebb48ea1e6d" data-type="png" data-w="980" ></p><p >菜单栏的主要优点是它们的持久性，也就是说，它们总是可访问的。 这一点在《About Face: The Essentials of Interaction Design》中得到了强调:</p><blockquote ><p >设计良好的 Web 站点谨慎地使用在整个购物体验过程中始终保持不变的持久对象，特别是页面顶部的顶级导航栏。 这些区域不仅提供了清晰的导航选项，而且它们一致的存在和布局也帮助客户确定方向。</p></blockquote><p >菜单栏可以包含子菜单(如上图所示) ，但是应该避免任何超过一个层次的操作，因为这会推动用户的心理模型，而“将事物组织成一个单一层次的群组是非常常见的，在你的家里和办公室里随处可见。”</p><h3 >如何使用菜单栏</h3><p >Macos 人机界面指南提供了一个在桌面应用程序中使用菜单的全面指南(其中许多也适用于网站)</p><p >使菜单标题尽可能简短而不牺牲清晰度。 理想情况下，他们应该被限制在一个词</p><p >对菜单标题使用文本，而不是图标。 (一个例外是，在网页上使用标志或图形代替「主页」文字通常是可以接受的。</p><p >禁用，不隐藏，不可用的菜单项</p><p >限制子菜单的使用、深度和长度</p><p >分配键盘快捷键并将它们显示在相关的菜单项旁边</p><p >使用分隔线可以在视觉上创建不同的相关菜单项组</p><p >一般来说，把最常用的项目放在菜单的顶部</p><p >对启动相关操作的菜单项进行分组</p><p >使用复选标记表示某事当前处于活动状态</p><blockquote ><p >其他重要的菜单栏指南:</p></blockquote><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.3601823708206687" data-s="300,640" src="https://img.haomeiwen.com/i3617926/480ddec4a5e9614d" data-type="png" data-w="658" ></p><h3 >States 状态</h3><p ><img class="rich_pages" data-ratio="0.06382978723404255" data-s="300,640" src="https://img.haomeiwen.com/i3617926/e54423a4db526fa8" data-type="png" data-w="658" ></p><h3 >Variations 变化</h3><p >为了保持标题的紧凑性，可以将其他功能合并到菜单栏区域，如搜索框或重要操作(如登录 / 退出)。<br /><img class="rich_pages" data-ratio="0.5288753799392097" data-s="300,640" src="https://img.haomeiwen.com/i3617926/a8f0c2539e52cd9b" data-type="png" data-w="658" ></p><p >对于更复杂的层次结构，可以使用“超级菜单”覆盖，显示子类别的多列(或者甚至额外的嵌套级别)。 在使用它们时，要密切关注实现细节，特别是菜单何时被触发和隐藏的时间。</p><h3 >References</h3><ul ><li >macOS Human Interface</li><li >GuidelinesU.S. Web Design</li><li >SystemKDE Human Interface</li><li >GuidelinesNielsen Norman Group</li></ul><h3 >Related Controls</h3><ul ><li >Tabs</li><li >Vertical Navigation</li></ul><h3 >Further Reading</h3><ul ><li >“About Face: The Essentials of Interaction Design”</li><li >Mega Menus Work Well for Site Navigation (Nielsen Norman Group)<br /><img class="rich_pages" data-ratio="0.27622841965471445" data-s="300,640" src="https://img.haomeiwen.com/i3617926/bfd8e4e428543d14" data-type="png" data-w="4518" ></li></ul></div>
网友评论