交互设计-要避免使用汉堡包菜单

小编阅读提示,图片是动态哦,需要单击才能看到动态图。

近来,越来越多的研究及测试表明,侧边栏菜单,也就是我们俗称的汉堡包菜单,很可能是一种弊大于利的设计模式。

不过我们也要知道,这个问题实际上是很微妙的,我们很难以一种非此即彼的标准来判断;我在一系列可用性测试当中所观察到的情况也证明了这一观点。

所以我个人仅希望各位在制定设计决策之前能够充分了解这种模式当中所存在的问题,有可能导致的结果,以及一些相关的替代方案。

问题所在

  1. 可发现性较低
  2. 效率较低
  3. 与系统的导航模式冲突
  4. 不够一目了然

1.可发现性较低

若不在视线中,便不在认知中。

默认状态下,侧边栏菜单和其中的所有内容都是不可见的。

此外,要使界面真正可用,首先要让人们了解到触发侧边栏展开的图标是可点击的按钮。我们见过不少产品都会在汉堡包图标旁边加注“菜单”,或使用气泡提示来告诉用户这里是可以点击的;显然,他们也感觉到了这一问题。这种做法并非不可取,但在应用最重要的界面中平白增加这样的元素,对于核心功能来说仍然属于一种干扰。

2.效率较低

即使用户知道了侧边栏菜单的存在,他们在使用导航时仍然会感受到摩擦力,因为这种模式要求用户首先打开菜单,然后才能寻找自己的目标。

01-hamburger-sidebar-menu-ui-ux-user-experience-design.gif

而下图所展示的是拥有传统的固定导航系统(tab栏)的模式,其中的功能模块一目了然,入口始终保持可见:

02-hamburger-sidebar-menu-ui-ux-user-experience-design.gif

3.与系统的导航模式冲突

所有问题当中最突出的就是这一点了。例如在iOS当中,我们很难在不引起冲突的情况下将菜单按钮与标准的回退按钮同时放置在导航栏里。

03-hamburger-sidebar-menu-ui-ux-user-experience-design.png

我们即需要在导航栏里放置汉堡包图标来唤出菜单,也需要回退按钮使用户能够退回上一级内容。最后,要么就是如上图所示的拥挤不堪的方案,要么就是取消显性的导航,强迫人们一次次的右滑来回到初始界面并唤出侧边栏菜单。

04-hamburger-sidebar-menu-ui-ux-user-experience-design.gif

4.不够一目了然

在默认状态下,你无法获取某个特定模块的信息,因为菜单本身就是隐藏的,要了解模块当中的信息,你首先要经由菜单进入模块才可以。

05-hamburger-sidebar-menu-ui-ux-user-experience-design.png

当然,也可以像Jawbone UP应用那样直接通过图标来代表信息。但这种方式的扩展性不强,你很可能需要针对不同类型的内容维护一套多个图标,最终不得不通过一种更通用的方式来呈现信息提示,以减少复杂性;从“一目了然”的角度讲,结果还是差不多。

而固定的tab栏,在任何上下文环境中都可以让用户清晰的了解到每个模块当中所发生的事情,并让他们能够随时进入相关界面。

交互设计-要避免使用汉堡包菜单

用户的认知

作为设计师,我们可能会为了节约可用空间而不得不使用汉堡包模式;不过,在现实当中,人们究竟是怎么看待界面的?这方面我们可能存有误解。你认为人们可以看到眼前的一切,其实他们只能注意到某个焦点区域,即使整个屏幕的尺寸很小。

节约屏幕空间——我们可以尝试通过其他不会对导航造成负面影响的方式来达成这一目标;那些最基本的人机交互设计原则仍然需要遵守,例如通过一目了然的方式为用户提供反馈、展示应用当前的状态等等。

何时使用汉堡包菜单

严格的讲,按照我们之前的分析,汉堡包菜单真正有意义的用法不是很多,多数情况下还是要尽量避免使用;不过例外也仍然存在。

IRCCloud是一个不错的例子,在这里,汉堡包菜单模式是利大于弊的,因为IRCCloud同时存在两套导航,通过汉堡包菜单,用户可以在同一个界面环境中去到频道菜单和会员菜单中进行导航。

07-hamburger-sidebar-menu-ui-ux-user-experience-design.gif

这种用法是可以接受的。它的内容界面只有一级结构,不再有下级界面,无需一层层的前后导航,因此不会发生导航冲突的情况。

不过即使是这样,我们也可以看到,导航栏中的信息负载已经相当严重了。

08-hamburger-sidebar-menu-ui-ux-user-experience-design.png

其他负面结果也比较明显。右侧的会员菜单按钮占据了通常情况下用来放置行动按钮的位置,与当前界面相关的操作无处摆放。设计师别无选择,只能将各种与上下文相关的操作集成在左下角设置按钮唤出的行动菜单当中。

09-hamburger-sidebar-menu-ui-ux-user-experience-design.gif

这也引出了本文的下一部分。

替代方案

最简单直接的替代方案就是传统的tab栏。

10-hamburger-sidebar-menu-ui-ux-user-experience-design.png

顺便说一句,侧边栏菜单模式对于不良的信息架构永远是来者不拒的,因为你总能很轻易的向里面添加项目,而不会产生直接的后果,直到用户展开菜单。

将侧边栏菜单移入底部tab栏,你也有机会重新梳理产品的信息架构。下图演示了将侧边栏菜单各条目移入tab栏的方式,你可以根据里面的彩色小点看出信息架构是怎样重新整合的。

11-hamburger-sidebar-menu-ui-ux-user-experience-design.png

启示

  1. 信息状态可以直接呈现在tab栏当中。
  2. tab栏中导航项持续可见,点击一次即可切换不同的模块。
  3. 不存在手势上的冲突。

使用传统形式的tab栏不意味着我们无法解决纵向空间缺乏的问题,例如在滚屏时隐藏顶部的导航栏;位置始终固定的tab栏本身就可以用来呈现当前界面属于哪个模块,使我们不需要一直依靠导航栏来呈现标题等信息。

12-hamburger-sidebar-menu-ui-ux-user-experience-design.gif

关键就在于不要隐藏导航信息,允许用户直接访问导航项,并且不要在手势上与其他操作产生冲突。

扩展性如何?

我们举的例子都是基于iOS的,所以有可能用到的导航控件就是iOS的tab栏或工具栏。那么如果你的导航项超过5个该怎样处理呢?

这种情况本身不太理想,而且搞不好也说明着你的app在信息架构方面不是很合理。但是如果导航项确实超过5个,那么通常的做法就是让第5个tab成为入口,也就是“更多”,使用户能访问到更多的导航项。

13-hamburger-sidebar-menu-ui-ux-user-experience-design.png

此外,可滑动的工具栏也是你可以考虑的模式,就像Rookie实现的那样。不过这种模式的代价就是在同一个栏中的点击与滑动手势有可能带来的误操作。

14-hamburger-sidebar-menu-ui-ux-user-experience-design.gif

要记住,相比于导航系统来说,这种模式其实更适合于作为工具栏,为操作行为提供容器。

此外在实际当中,这种模式有可能带来另一个问题,就是当你选中其中某个tab或操作后,再将栏整体滚动,那么界面中的内容有可能无法与底部栏中的选项建立关联。Rookie的解决方案是,当你选中某个功能后,工具栏整体会隐藏起来;完成该项任务后,底部栏会重新呈现。

联系我们:
QQ总群:156360020 | Email:io@ued.xyz | 我们的微信号:Aioued | 我们的新浪微博:艾欧交互学堂

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/1245/

(0)
iouedioued
上一篇 2014-11-06
下一篇 2014-11-07

相关推荐

  • 招聘 | 年薪百万不是梦,八爪鱼一大波高薪职位与伯乐奖在等你

    八爪鱼又开始招人啦如果你对大数据充满热情技术与才华兼并就赶快行动吧行业销售总监(政企)企)N15k-30k /深圳 / 经验3-5年 / 本科及以上 / 全职>>>岗位职责:基于公司的大数据产品、资源和技术,面向企业/政府等客户,提供数据采集软件、数据分析产品,数据服务,大数据解决方案等产品或服务;销售团队的人员招聘,管理及考核淘汰工作;完成客户需求的挖掘,商务谈判,项目回款工作;负责外部销售渠道和资源的对接,开发与维护;配合市场运营部...

    2018-03-15
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-18
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 刘克成:历史的回顾——90年代黄帝陵整修经历和关键点 | 黄帝陵国家文化公园规划设计大师工作营

    📌 编辑 | 璇仔编者按:“黄帝陵国家文化公园规划设计大师工作营”由陕西文化产业投资控股(集团)有限公司、陕西省黄帝陵文化园区管理委员会、黄陵县人民政府和CBC建筑中心共同发起。邀请了中国最具有代表性的六位规划大师及其领衔的团队作为核心设计团队,通过共同驻地对黄帝陵国家文化公园的调研、研讨,分别提出对未来黄帝陵国家文化公园的规划设计理念及方案。2018年3月23日,西安建筑科技大学建筑学院教授刘克成将作为探班大师来到工作营现场,以“历史...

    2018-03-22
  • 什么是交互设计?这篇文让你彻底弄清!

    达内UI设计,中国UID课程标准制定者通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽...

    2018-04-08
  • 手机“携号转网”磕绊多,用户体验太遭罪,手机跳槽为何这么难?

    轻点下图  纵横带您“听新闻”携号转网来自新闻纵横00:0005:59工业和信息化部在2010年和2013年,分两批在天津、海南和江西、湖北、云南五个省市,试点手机号码“携号转网”业务。但是到今年初,仍然有试点省份的用户反映,办理过程不如预期的顺利,质疑运营商故意设置障碍。记者调查发现,“携号转网”业务在不同的省份试点效果存在差异,主管部门坦承,有运营商为了挽留用户“搞小动作”,但试点工作整体向前推进,一些技术问题逐步解决。湖北武汉的白...

    2018-04-10
  • app交互设计:手势流

    在智能交互中,手势已成为新的“点击”。现在每次打开手机里的app、游戏时,都需要用到点击、拖、拉等动作。单看点击的话,设计师与开发者只需要考虑用户点击屏幕哪里体验更好。但是手势不同,手势操作还需考虑什么动…

    2015-11-17
  • 原创服装设计师APP产品概念

    这是针对原创服装设计师的APP,作者感觉现在很少有专门针对他们分享自己作品和交流的平台。这是作者模拟出来的一个产品的概念图,还有很多不足,慢慢优化... 我们不光有原创,同时也是原创的搬运工。  

    2015-01-23
  • 译文|优秀用户体验设计师该具备的8个习惯

    用户体验设计 界有个流传甚广的段子:美国太空计划和其对于反重力笔的需求。据报道,美国人花了几百万美元用于研制一种使用固态墨水写字的高科技笔,这种笔的墨水平时固态的,但写字时的压力会让它变为液态从笔尖流出,所以这种笔倒着也能写出字。然而俄罗斯的航空员则直接使用铅笔。

    2017-05-26
  • 12家公司2018春招开启,内推进行中!20W高薪岗位面向18/19届!

    春招现已全面开启cherry整理了春招开启以来还可以内推的公司请大家仔细浏览遇到心仪公司把握住机会不要错过拿到offer才是要紧事注:以下所有公司均可通过互联派内推,后台回复【内推】即可获得内推方式!可内推公司公司:今日头条面向人群:2018届&2019届工作地点:北京、上海、深圳、武汉职位分类:研发类产品类运营类市场类职能类网申时间:2月12日起网申地址:https://job.toutiao.com/2018/公司:蚂蚁金服面向人群...

    2018-03-03