文档章节

何时使用汉堡包菜单设计

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
博文 101
码字总数 165872
作品 0
阳江
私信 提问
使用MvvmCross框架实现Xamarin.Forms的汉堡菜单布局

注:本文是英文写的,偷懒自动翻译过来了,原文地址:Implementing MasterDetail layout in Xamarin.Forms by MvvmCross 欢迎大家关注我的公众号:程序员在新西兰,了解美丽的新西兰和码农们...

yan_xiaodi
01/09
0
0
前 Sun 公司 CEO 作证 Android 没有授权问题

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

mmogm
2016/05/13
5.3K
22
超实用!网站导航栏设计形式总结

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

郑乔尹在旅游
2017/12/28
0
0
bootstrap里的sr-only是什么属性?sr-only表示什么意思?有什么用途?

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

sinat_34719507
2016/12/19
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

没有更多内容

加载失败,请刷新页面

加载更多

Flink 幕后之内存管理

Flink 幕后之内存管理 引言 目前很多大数据处理框架,例如Hadoop、Spark、Storm、Flink等。它们都基于JVM语言开发(java or scala),运行在JVM上。为了加速合并或者排序(基于磁盘的方式通常...

moyiguke
33分钟前
3
0
风起云涌,看云计算如何赋能媒体行业?

在媒体行业的转型升级中,云计算的出现多维度促进了媒体融合,打破传统媒体行业与新媒体的界限和竞争格局,在媒体素材管理、移动端功能演进的过程中扮演着重要角色,颠覆了传统媒体新闻采编、...

七牛云
36分钟前
1
0
Mybatis开发遇到问题汇总

mybatis 中![CDATA[...]] 在今天使用Mybatis的xml文件中写sql语句时写入了一些特殊字符 如 < > & 等,但解析xml文件的时候会被转义,事实上并不希望它被转义,可以使用<![CDATA[ ]]>. 这是XML...

wangwei2134
44分钟前
3
0
参数验证 @Validated 和 @Valid 的区别

来源:blog.csdn.net/qq_27680317/article/details/79970590 整编:Java技术栈(公众号ID:javastack) Spring Validation验证框架对参数的验证机制提供了@Validated(Spring's JSR-303 规范......

Java技术栈
47分钟前
1
0
JS实现继承的几种方式

前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。 JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: ...

不负好时光
51分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部