文档章节

何时使用汉堡包菜单设计

mo311
 mo311
发布于 2017/07/25 11:18
字数 734
阅读 5
收藏 0

汉堡包菜单,也叫侧边栏菜单。它由三个堆叠线条(你可以形象的想象成汉堡包中上下的两个面包和中间的肉)的图标用于表示菜单。点击图标时,会显示可用的导航选项。很多设计师写的有关汉堡包菜单设计的文章,都不看好这种设计。总结其缺点,主要体现在:1.可发现性较低;2.效率较低;3.与系统的导航模式冲突;4.不够一目了然。大家如果感兴趣的话,可以搜索相关文章详细了解一下。但究其根本,并不是图标本身,而是隐藏在图标后面导航选项。

尽管如此,在某些情况下,汉堡包菜单设计可能是一个不错的选择。

如:汉堡包菜单作为辅助导航

由于汉堡包菜单的主要缺点是其低可发现性,因此不推荐将其使用为主导航菜单。但是,在设计辅助导航选项时,这种模式可能是一个合适的解决方案。如果主导航选项在屏幕上以CTA按钮(即用户响应行动或叫用户行为召唤)或其他形式展现,在辅助导航中使用汉堡包菜单设计会是一个好的方法。

下面以Uber主屏幕作为例子:

1-D1EZn4iJeN6m3UCXcvVF0w.png

地图和搜索(Uber屏幕的两个重要导航元素)始终是可见的。

由于主屏幕的所有内容都是为了打车,所以诸如历史记录和设置等次要选项可以隐藏在汉堡菜单的后面(这些功能在每个人打开应用程序时不太可能都去使用)。这个汉堡包图标不会分散用户打车的注意力,而且仍然允许他们访问里面的辅助功能。

在这种特殊情况下:

导航元素越少意味着当用户与应用程序交互时受到的干扰就越少。而且,最小化导航使用户的注意力集中在打车上。

一般来说,在你选择是否使用汉堡包菜单时,请考虑“80%规则”。也就是,你想要隐藏在汉堡图标后面的导航选项会低于正常使用的80%吗? 如果你的答案是肯定的,那么把它们放在汉堡菜单里就没问题了。

结论:

虽然隐藏的导航通常不利于用户体验,但任何设计决策都必须对应用程序的目标情景进行综合考虑。换句话说,没有“好”或“坏”的设计模式。最重要的是使用情景。

原文作者:Nick Babich

原文链接:http://babich.biz/hamburger-good-ux/

更多设计类相关干货(文章及经验教程),尽在:UI/UX专业博客

© 著作权归作者所有

共有 人打赏支持
mo311
粉丝 2
博文 99
码字总数 163716
作品 0
阳江
私信 提问
前 Sun 公司 CEO 作证 Android 没有授权问题

前 Sun 微系统公司的 CEO Jonathan Schwartz 在甲骨文与谷歌一案中作证。 谷歌律师询问 Java 语言是否是免费和开放使用,Schwartz 回答从一开始就是如此。 他说,Sun 的兴趣是出售相关产品,...

mmogm
2016/05/13
5.2K
22
bootstrap里的sr-only是什么属性?sr-only表示什么意思?有什么用途?

bootstrap里的sr-only全称是 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性)。 有时候 UI 上会出现一些仅供视觉识别的元素,比如说“汉堡...

sinat_34719507
2016/12/19
0
0
超实用!网站导航栏设计形式总结

导航对于一个网站来说,起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用。下面跟大家分享下常用的几种网页导...

郑乔尹在旅游
2017/12/28
0
0
4.3、Bootstrap V4自学之路------组件---按钮下拉组件

单按钮弹出菜单 <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action ......

Asktao
2016/03/23
62
0
创业者必备的汉堡店经营法则!

汉堡品牌店在餐饮市场中占据一部分的地位,不仅因为社会的所需,更是因为文化的融合。如今,西式餐点店最受欢迎的就是汉堡包品牌店,它能够在中国的餐饮市场中风声水起,它经营的法则是什么呢...

智雨宝宝
01/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

结合lucene谈谈日期的压缩问题

说起日期值的压缩,一般容易想到的办法是将日期转化成long类型,然后再通过变长整形进行压缩,我算了一下按照毫秒来算最多占用5个字节(可以通过“谈谈变长整型”中的表查看),确实节省了部...

FAT_mt
28分钟前
0
0
导出私有函数与私有变量

在Go语言中, package中包含函数与变量通过identifier的首字母是否大写来决定它是否可以被其它package所访问。当一个函数或变量名称为小写字母时,默认是无法被其他package引用的. 有没有办法...

xtof
28分钟前
0
0
new Date() 在Safari下的 Invalid Date问题

问题复现 var timeStr = '2018-11-11 00:00:00';var time = new Date(timeStr);// error: Invalid Date... 在safari浏览器下,time为Invalid Date, 导致后面代码执行错误; 其他浏览器诸...

会写代码的husky
33分钟前
2
0
0009-如何升级Cloudera Manager和CDH

1.文档编写目的 本文档讲述如何升级Cloudera Manager和CDH,通过本文档,您将学习到以下知识: 1.如何对Cloudera Manager进行停机升级 2.如何对CDH进行停机升级 3.如何在不影响集群作业的情况...

Hadoop实操
42分钟前
1
0
vue2中引用 better-scroll的方法

文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法,使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下 使用时有三个要点: 一:html部分 <div class...

前端攻城老湿
53分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部