文档章节

何时使用汉堡包菜单设计

mo311
 mo311
发布于 2017/07/25 11:18
字数 734
阅读 3
收藏 0
点赞 0
评论 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
博文 84
码字总数 141565
作品 0
阳江
前 Sun 公司 CEO 作证 Android 没有授权问题

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

mmogm
2016/05/13
5.2K
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
创业者必备的汉堡店经营法则!

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

智雨宝宝
01/22
0
0
Linux 用户的手边工具:Guide to Linux

“Guide to Linux” 这个应用并不完美,但它是一个非常好的工具,可以帮助你学习 Linux 命令。 还记得你初次使用 Linux 时的情景吗?对于有些人来说,他的学习曲线可能有些挑战性。比如,在 ...

作者: Jack Wallen
2017/11/23
0
0
为什么有些单身程序员不待见PHP这门语言?看看30万程序员怎么说!

  本人是先学的C入门的,但是在很多时候,我发现有很多程序员看不起 PHP 这门语言。虽然经常说PHP是世界上最好的语言,但是很多时候也是一种嘲讽。我认为PHP 这门语言很适合新手,而且开发...

楚阳
2017/12/29
0
0
LBHamburgerButton

LBHamburgerButton 是 iOS 控件,不需要图片就可以显示 3 行(汉堡包)图标和其他图标(后退,关闭等),还带有类似 Google Material Design 和 Paper 应用"关闭按钮"的炫酷转换效果。...

叶秀兰
2014/08/20
188
0
综合指南: 何时使用 Em 与 Rem

Chinese (Simplified) (中文(简体)) translation by Hlkyle Chou (you can also view the original English article) 你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用 ...

临江仙卜算子
06/29
0
0
Libreoffice 正打造全新的工具栏布局

LibreOffice 的开发者已着手打造一个新的工具栏布局,以给用户提供更好的使用体验。 在 LibreOffice Wiki上已经有这个新的 NotebookBar的介绍,“目标是提供一个替代的(可选的)界面,统一所...

oschina
2015/10/25
3.4K
17

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
13
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部