许多网站都相当复杂信息体系结构，有许多级别的类别。而较低级别的类别通常显示在桌面中下拉菜单或超大菜单在移动设备上呈现这些子类别并不总是那么简单。
这些应该如何扩展菜单在手机上翻译?小屏幕尺寸不容易容纳许多子类．虽然思科的桌面网站可以在其超大菜单中显示30多个子类别，用户无需滚动屏幕，但单个移动屏幕很难容纳这些类别。另外，大屏幕二维所提供的一些视觉结构并不容易在手机上呈现出来，因为并不是所有的子类别都能同时呈现出来。
亚导航：设计目标
定义：子导航指帮助用户访问站点信息体系结构(IA)中较低级别的类别的导航UI。
在设计子导航时，要达到以下设计目标:
- 最小交互成本:用户应该能够以尽可能少的努力访问导航中感兴趣的元素。这意味着很少点击，很少滚动，如果可能的话，没有页面加载。
- 典型path支持:如果在单个会话中，用户很可能从页面的一个部分跳转到站点的另一个完全不同的区域，子导航应该使它变得容易。相反，如果大多数访问者将“生活”在网站的单个部分(例如，报纸的体育部分)，那么子导航应该侧重于支持这种模式。
- 可发现性:用户应该能够快速找到子导航UI，而不会将其与主导航混淆。
移动上的子导航类型
在移动设备上设计次导航有四种常见方法：
- 主导航菜单中的手风琴（也称为“子菜单”），例如汉堡菜单
- 连续的菜单
- 部分菜单
- 类别登陆页面
主菜单中的手风琴
当主导航隐藏在下拉菜单中时，实现子导航的简单方法是对主类别使用手风琴，每个手风琴展开以显示其相应的子类别。这种设计感觉就像一个较大菜单中的“子菜单”。
当子菜单只包含几个子类别（通常小于6个）时，子菜单工作正常，因此导航菜单在任何时候都不会过长。当主类别中有许多子类别时，子菜单会使主导航菜单过长，并使查找其中信息的任务变得单调乏味。
当导航菜单出现在网站的所有页面上时，这个子导航设计与前一节设定的目标相比效果最好:
- 它具有较低的交互成本，因为用户可以在站点的任何位置访问站点IA中的子类别（如果该页面上有菜单），而无需等待额外的页面加载。
- 它支持通过站点的所有路径，而不仅仅是典型路径。因此，它非常适合没有主导的站点导航模式的情况，并允许用户轻松地跳过站点信息层次结构的不同分支。
- 因为它是主导航的一部分，所以人们在两个导航ui之间进行选择时不会有混淆的危险。然而，确保主菜单中的主要类别与较低级别的类别看起来不同仍然很重要(使用缩进和可能的颜色来区分它们)。
连续的菜单
一个连续的菜单是一个只显示上一个选定类别的子类别的菜单。顺序菜单以显示主要类别开始;一旦人们选择了其中一个，主类别列表就会被所选类别的子类别所取代。在过去几年里，顺序菜单在移动设备上的流行程度显著提高，因为它们似乎是在小屏幕上显示多个类别和子类别问题的简单解决方案。
研究人机交互在顺序菜单的有效性上存在分歧:一些研究似乎表明，人们使用顺序菜单做得很好，至少对于那些不太复杂、不需要在同一层次结构的不同区域导航的任务来说是这样。然而，空间能力较低的用户(根据空间能力测试)使用这些菜单的效率似乎低于空间能力较高的用户。不幸的是，在移动设备上，由于中断的可能性增加，我们更有可能迷失方向，表现得像空间能力差的用户。
顺序菜单会导致用户意外出错，尤其是在Android手机上(或浏览器中)——通常人们会忍不住使用手机的物理功能回来按钮或浏览器的回来按钮，并意外地关闭了菜单，导航到不同的页面，而不是回到更高级别的菜单。
(另一点:我们不要建议在繁忙的图像上直接显示菜单，如下面的截图所示。)
有些网站故意使用不同的标签代替回来用于在信息层次结构中向上导航。例如，在梅西的网站上，菜单中会显示一系列面包屑，允许用户在IA中向上导航。
当顺序菜单保持状态时，人们有时会发现自己迷路了，或者没有意识到他们可以在层次结构的不同区域导航。例如，在梅西百货的网站上，菜单会改变，以反映当前页面在IA中的位置。所以一个用户登陆找一家商店当她打开菜单时，页面将看不到太多感兴趣的内容，可能会认为网站有缺陷，或者菜单没有内容。
当菜单变得太深，提示用户进行一系列选择时，它们相当于nested-doll导航-一个冗长乏味的模式，涉及在到达内容之前反复选择类别和子类别。许多手机用户讨厌这种模式，因为它迫使他们在看不到任何有用信息的情况下做出多个决定。
而顺序菜单只有适度的交互成本（至少当导航层次结构只有1-2个子级别时）允许用户很容易地遍历IA树如果他们学会了如何使用它，他们可能会迷惑用户-人们可能会失去对他们在站点上的位置以及属于哪个IA级别的类别的理解回来顺序菜单中的链接可能与浏览器的链接混淆回来按钮，我们通常不推荐它们用于子导航。
部分菜单
章节菜单是出现在章节主页上的独立菜单（与主导航菜单不同）。例如，在BBC网站上，每个主要章节（例如：。，新闻,体育等)有一个主页与它自己的节菜单。从本质上讲，这就像是一个带有独立导航的迷你网站。
部分菜单可以容纳相当多的子类别，并且通常在相应部分的所有页面上都可以访问。虽然可以通过节菜单轻松地在节中导航，但这种模式不支持从一个节的一个子类别跳转到另一个不同节的另一个子类别(例如，从高尔夫球在下面体育运动到科学在下面新闻)。因此，它非常适合大多数用户在单个站点部分使用会话的情况，但如果他们通常在同一次访问中浏览多个部分，则不太合适。对于这些用户来说，导航到该分区的主页以访问分区菜单的交互成本可能太高。
偶尔，部分菜单可能会与主菜单混淆，如果是这样，用户不会将它们用于部分导航，他们会想“我已经扩展了，我知道它不相关，所以我不会再麻烦了。”这就是为什么要确保:
- 主菜单和部分菜单看起来很明显，所以人们不会混淆。
- 您不能将用于主导航的同一UI元素重用为分区菜单。
上面的BBC例子在这两个标准上都做得很好。
类别登陆页面
当所有其他方法都失败，并且您有太多的子类别，甚至无法在一个分区菜单中容纳时，选择的解决方案是创建一个作为导航中心对于该部分中的所有页面。登录页通常包含所有二级子类别（甚至一些三级或四级子类别）的枚举。
分类登录页甚至更不灵活的部分菜单。区域菜单允许用户在同一区域内跳转页面，而类别登录页面则强制用户在每次想要更改IA树的分支时通过这些页面。这就是为什么当用户在一个会话中访问IA层次结构的单个区域时，类别登录页面通常是可以的。否则，切换子类别的交互成本太高，每次切换都需要访问(和页面加载)类别登录页面。
结论
由于有限的屏幕空间，设计移动子导航通常是具有挑战性的。下面是一个简单的决策算法，可以帮助你找出最适合你的子导航模式:
- 如果你有小于6所有主目录的子目录，然后在全局导航中使用子菜单或手风琴。
- 如果你有6至15岁之间对于至少一些主要类别的子类别，然后考虑一节菜单。
- 与超过15每个主要类别的子类别，考虑一个类别着陆页。
了解更多关于缩放导航和子导航到不同的屏幕大小在我们的类手机可用性和响应式设计的用户体验．
参考文献
Harry Hochheiser, Ben Shneiderman。随着任务复杂性的增加，同步菜单的性能优于顺序菜单．国际人机交互杂志, 2009.
Mari Carmen Puerta Melguizo, Uti Vidya和Herre van Oostendorp。在线信息搜索:菜单类型、导航路径复杂度和空间能力对信息收集任务的影响．行为与信息技术, 2012年
分享这篇文章: