菜单 关闭

移动导航

通过 Raluca Budiu7月16日2017年

简介:手风琴,连续的菜单,部分菜单和类别着陆页面实现移动导航的热门选择。IA低级类别的数量和在网站上用户的导航模式决定哪个是最适合一个给定的网站。。


许多网站已经相当复杂信息体系结构,有许多层次的类别。而低级类别通常显示在桌面下拉菜单大型的菜单,展示这些子类在移动设备上并不总是直截了当。。

思科。com:桌面网站使用横向导航栏的主要类别。在鼠标悬停,每个主要类别扩展与相应的2级和3级megamenu子类。超级菜单是视觉上分为三个列(产品,解决方案,服务) 还包含一个列表底部的标签(企业,服务提供者,中小型企业 )。。

这些应该如何扩展菜单是翻译在移动吗?吗?小尺寸屏幕无法轻易容纳许多子目录。而思科的桌面网站可以显示30或更多子类的超级菜单相当舒适,没有迫使用户滚动,这些类将不容易适应一个手机屏幕上。另外,一些提供的视觉结构的two-dimensionality megamenu不会轻易明显的移动,因为并不是所有的子类将可见的在同一时间。。

子导航:设计目标manbetx官方网站手机版

定义:子导航指的是导航界面,帮助用户访问网站的信息架构中的低级类别(IA)。。

在设计导航manbetx官方网站手机版时,目的为以下设计目标:manbetx官方网站手机版

  1. 最小交互成本:用户应该能够访问一个元素的兴趣导航与尽可能少的努力。这意味着几个水龙头,小的滚动,如果可能的话,和零页面加载。。
  2. 典型path支持:如果,在一个会话,用户可能会在一个部分从一个页面跳转到另一个完全不同的一分之一面积的网站,子导航应该很容易。如果,相反,大部分游客都将“活”在一个网站的部分(比如,一份报纸的体育版),那么子导航应该关注支持这种模式。。
  3. 可发现性:用户应该能够快速找到子导航界面,没有机会混淆的主要导航。。

类型的导航在移动

一般有四种方法来设计导航在移动:manbetx官方网站手机版

  • 手风琴(又名“”子菜单)在一个主导航菜单,如汉堡菜单
  • 连续的菜单
  • 部分菜单
  • 类别登陆页面

手风琴在主菜单

当主导航是隐藏在一个下拉菜单,一个简单的方法来实现导航是利用手风琴的主要类别,与每一个手风琴扩大暴露其相应的子类。这个设计感manbetx官方网站手机版觉“”子菜单在一个更大的菜单。。

潮流。com使用手风琴在主导航菜单来显示导航。。

子菜单工作当他们包含几个子目录(通常小于6),所以导航菜单在任何时间不是太长。当有许多子目录内主要类别,子菜单延长的主要导航菜单太多,使查找信息里面乏味的任务。。

SBNation。com使用手风琴扩张的主要导航分类。不幸的是,子类跨度超过整个萤幕的,让人很难找到任何感兴趣的一个项目。(然而,菜单包含团队的名字按字母顺序要求补偿这个问题,因为用户不需要阅读所有的标签,可以扫描所需的团队。)

当导航菜单出现在网站的所有页面,这个子导航设计票价最好的关于目标一节:manbetx官方网站手机版

  • 它有一个交互成本低,因为用户可以在任何地方访问子目录网站的IA在网站上(如果菜单出现在页面),无需等待一个额外的页面加载。。
  • 它支持所有路径通过这个网站,不仅是典型的。因此,它是适合的情况下没有主导网站导航模式,允许用户轻松地跨越不同的分支网站的层次结构信息。。
  • 因为它是主导航的一部分,几乎没有危险的人感到困惑,选择两个导航ui。然而,仍然是重要的,以确保主要类别看起来不同于低级的主菜单(使用缩进,也许颜色区分)。。
Seventhgeneration。com:主类别显示在一个不同的颜色比低级类别。。

连续的菜单

一个连续的菜单是一个菜单只显示最后选定的类别的子类别。首先显示的顺序菜单主要类别;一旦人们选择其中一个,主要类别的列表被精致的类别的子类别。顺序菜单已经显著增加的流行在过去的几年中,移动看起来轻松解决这个问题的一个小屏幕上显示许多类别和子类别。。

艾滋病毒。政府:当选择一个主类别(艾滋病基本知识 从主菜单),相应的子范畴而不是原创内容菜单所示。用户可以导航层次结构的信息点击按钮回来 在菜单。。

研究人机交互被分割的有效性顺序菜单上:一些研究似乎表明,人很好,至少在任务不过于复杂,不相同层次结构的不同区域导航的需求。用户空间能力较低(以一个空间能力测试),然而,高效的使用这些菜单似乎小于用户空间能力高。不幸的是,在移动设备上,由于中断概率的增加,我们更有可能成为迷失方向,像用户空间能力较差。。

连续的菜单让用户不小心犯错,尤其是在Android手机(或在浏览器)——通常人们倾向于使用手机的物理回来按钮或浏览器的回来按钮,最后意外关闭菜单和导航到另一个页面,而不是回到高级菜单。。

艾滋病毒。政府:用户不小心利用Android手机的物理回来 按钮在菜单上是相反的前一页的用户在浏览器中访问。到菜单层次结构的上层,他们必须使用回来 按钮在菜单。。
(作为一个单独的点:我们不建议直接显示菜单在繁忙的形象,如下面截图所示。)

一些网站有目的地使用不同的标签代替回来用于导航层次结构的信息。例如,在梅西百货网站,面包屑的痕迹所示菜单允许用户在IA。。

梅西百货。com:这个顺序菜单显示面包屑的痕迹(菜单- >商店- >女性 )当前菜单的视图,所以用户有更少的机会感到困惑或不小心按物理回来 按钮,当他们想要导航在父层次结构。(注意,然而,浏览路径记录不仔细一看,人们很容易错误的设置站点上可用的主要类别。)

当顺序菜单保存状态时,人们有时发现自己丢失或没有意识到他们可以在不同的区域的导航层次结构。例如,在梅西百货网站,菜单将会改变,以反映当前页面在IA的立场。所以用户登陆找到一个商店页面不会看到太多内容感兴趣的,当她打开菜单,可以决定网站车或菜单的内容无效。。

梅西百货。com:菜单顺序反映了用户的页面。用户登陆页面上找到一个店不会在菜单中找到感兴趣的内容,可能会认为网站的车或者菜单没有任何帮助。。
Mayoclinic。com:默认情况下,网站显示子分类的主要类别之一(病人护理和健康信息 ——左截图)。在我们的测试中,大多数参与者无法找到顶级类别(显示在右),他们假定下的子目录病人护理和健康信息 都是网站必须提供。。

当菜单变得过度深,提示用户选择的序列,他们数量nested-doll导航——一个单调的模式,不断选择类别和子类之前内容。很多手机用户讨厌这种模式,因为它迫使他们做出多种的决定,没有看到任何有用的信息。。

而连续的菜单只有温和的互动成本(至少当导航层次结构只有1 - 2子层次)并允许用户遍历IA树很容易如果他们学习如何使用它,他们可以迷惑用户,人们可能会失去他们的理解,他们在网站上和哪些类别属于哪些IA的水平。此外,因为回来链接顺序菜单可以用浏览器的困惑回来按钮,我们通常不推荐子导航。。

部分菜单

部分菜单是独立的菜单(不同于主要的导航菜单)出现在部分主页。例如,BBC网站上,每一个主要部分(e。g。,,新闻,,体育等。)有一个主页的菜单部分。从本质上讲,一节就好像是一个迷你网站独立的导航。。

英国广播公司。com:每个主类别着陆页中有一节菜单,类别(所有体育运动 体育运动 ,,部分 新闻 )。。

部分菜单可以容纳相当大数量的子分类,通常可以在所有页面中相应的部分。在导航中部分可以很容易通过部分菜单,这种模式不支持从一个片段一个子类跳到另一个不同的子类别部分(e。g。,从高尔夫球体育运动科学新闻)。因此,它非常适合在情况下大多数用户将在一个站点部分花了他们的会话,但不合适的,如果他们在相同的访问通常浏览多个部分。对于这些用户来说,互动导航到该部分成本的主页为了获得部分菜单可能太高了。。

偶尔,部分菜单可能与主菜单混淆,而且,如果是这样,用户不会使用它们部分导航,思考”我已经扩大,我知道这并不相关,所以我不会再打扰。”这就是为什么重要的是要确保:

  • 主菜单和菜单部分看起来足够不同的人不会迷惑。。
  • 你不重用相同的UI元素用于主要导航部分菜单。。

BBC上面的例子是在这两个标准。。

Breastcancer。(org:同样的UI元素菜单 按钮)用于主页上的主要导航菜单(左)重用更深层次上相应部分的菜单页面(右)。人不要指望一个按钮来做不同的事情取决于现场的地方,所以他们不会意识到他们可以点击菜单 按钮来达到当前类别的子类别。。
Mayoclinic:主菜单和菜单部分看起来截然不同,这样人们不会有混乱的另一个麻烦。。

类别登陆页面

当一切都搞砸了,你有太多的子类来适应甚至在部分菜单,选择的解决方案是创建一个登录页面,作为导航中心所有页面在这个部分。的着陆页通常包含一个枚举所二级子目录(甚至某种程度上3或4个子类)。。

斯坦福大学。edu:导航通过类别实现着陆页。的入学 着陆页面包含超过6整个萤幕的信息和链接不同的子类。。

类别登陆页面更灵活,部分菜单。虽然部分菜单允许用户跳过页面在同一节中,类别登陆页迫使他们通过这些页面每次用户想要改变IA树的分支。这就是为什么类别登陆页通常是好的情况下,用户通常访问IA的层次结构的一个区域在一个会话。否则,转换子类的互动成本太高,每次切换时需要访问(和一个页面加载)类别的着陆页。。

结论

manbetx官方网站手机版设计移动导航极富挑战性,由于有限的屏幕大小。这是一个简单的决策算法来帮助你找出哪些导航模式最适合你:

  • 如果你有小于6子类的所有主要类别,然后子菜单或手风琴在全球导航可能是适当的。。
  • 如果你有6至15子类至少你的一些主要类别,然后再考虑一段菜单。。
  • 超过15子类/主要类别,考虑一个类别的着陆页。。

了解更多关于扩展导航和导航上不同的屏幕尺寸在我们的类手机可用性万博官网manbetx下载响应用户体验设计manbetx官方网站手机版

参考文献

哈利·豪切斯那里借得创意,Ben Shneiderman。性能优势的同时连续菜单随着任务复杂性的增加。国际期刊的人机交互,2009年。。

玛丽卡门·普埃尔塔Melguizo,泌尿道感染维迪雅,和Herre van Oostendorp。。网上寻找信息:菜单类型的影响,导航路径复杂度和空间能力信息收集任务。。行为与信息技术,2012年