文档章节

何时使用汉堡包菜单设计

mo311
 mo311
发布于 2017/07/25 11:18
字数 734
阅读 3
收藏 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
博文 86
码字总数 143536
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 Windows 中以服务方式自动重启的原因

针对长时间使用的 Confluence,我们推荐你配置 Confluence 自动随操作系统重启而启动。针对一些 Windows 的服务器,这意味着需要让 Confluence 以服务的方式运行。 有下面 2 种方式来以服务的...

honeymose
32分钟前
1
0
day93-20180920-英语流利阅读-待学习

时尚之觞:外表光鲜靓丽,其实穷得要命 Lala 2018-09-20 1.今日导读 讲到时尚界,我们脑海里浮现的可能都是模特和设计师光鲜靓丽、从容潇洒的模样。可是,最近在法国出版的一本书却颠覆了我们...

飞鱼说编程
51分钟前
1
0
maven的pom.xml用解决版本问题

maven管理库依赖,有个好处就是连同库的依赖的全部jar文件一起下载,免去手工添加的麻烦,但同时也带来了同一个jar会被下载了不同版本的问题,好在pom的配置里面允许用<exclusion>来排除一些...

JAVA码猿
今天
1
0
20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
222
16

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部