传统的汉堡包菜单有哪些替代设计

如果你是一名合格的产品设计师,相信你已经读过了太多关于汉堡包导航是如何以其欠缺的可见性和低效率伤害用户体验的文章。(感兴趣的看这里:1234

幸运的是,越来越多的网络站点和应用程序都开始采用更有效的设计方案来替代这种传统方法。本文就将例举其中的几种方案,不过这些方案并不见得就比其他尚未提到的要更好,它们的可行性可实际表现显然要视其具体场景而定。

1、简单选项卡

如果在你的站点/应用程序中独立部分为数不多,又要保证用户能在不同部分间实现快速切换,那么选项卡式导航或许就是最合适的解决方案。

虽然这一方案看上去可能是最简单的导航模式,但是,在设计过程中你仍然需要考虑到至少以下几个方面:

1)标签数量不超过5个;

2)总有一个标签处于活跃状态并在视觉上凸显出来;

3)第一个标签应该对应程序中的首页,并且所有的标签项的位置遵从它们的优先级或逻辑性放置;

4)这些标签可以或放置在屏幕顶部或置于底部,这要看具体的设计场景和平台(Android系统中将其放在底部);

5)如果不使用文本标签,一定要保证那些标签图标是用户所熟知的;

6)>查看更多注意事项。

案例:LinkedIn 、 Google Photos

LinkedIn中仅使用图标,Google Photos则使用图标和标签

2、包含“更多”选项的选项卡

当标签数量超过5个时,不妨考虑把最优先的前4个标签显示出来,而多出来的其它标签则统一放置到”更多“选项下。

采用这种设计时要遵循的设计准则基本同”简单的选项卡“,”更多“选项则可以或链接向一个新的导航页面或作为一个下拉菜单项。

你可能会争论说这种使用”更多“标签的方法并不比传统的汉堡包式菜单好,但是,如果你能依照正确的优先级来显示这些标签,那么大部分用户就都会自然而然的将重点放在显示的4个标签上,而于多出来的其他选项又不会明显的打扰到他们。

实例:Facebook

3、适应屏幕宽度的菜单

针对上述【包含“更多”选项的选项卡】方案,一个更精致的做法是使菜单选项适应屏幕宽度来显示,尽可能显示更多的选项,多余的部分则放到一个“更多”选项下。

这意味着在分辨率越低的屏幕上,”更多“菜单下会包含更多的选项。这种做法显然要比上述【包含“更多”选项的选项卡】更加灵活,尤其在屏幕尺寸不大不小的时候。

实例:BBC

4、可滚动导航 

如果程序中有不少导航项,而各项之间的优先级却并没有大的差别,此时使用”更多“选项的做法就不再合适了,一个取代的方法是使用一个可滚动的视图将所有导航项显示出来。

这种方法的缺点是在不滚动的情况下用户依然只能看到前面几项,其他项还处于隐藏状态,然而,在某些场景下,这依然是不失为一种可接受的方法。比如在一个网络商店或资讯目录下,用户会自然地预期看到更多的内容。

需要注意的是,在视觉设计上,你需要确保能提供足够的视觉线索来引导用户横向滚动后还能看到更多的元素。

实例: Medium 、 Google

5、下拉菜单

还有一种不常见但挺有意思的设计,就是在其它选项的可见性和可达性都不那么至关重要时使用下拉菜单。

下拉菜单在这种情况下,实际上有双重的作:其一,它充当了一个页面标题,而向下箭头则提示用户从这里可能快速的切换选项部分。其二,虽然这里的选项被隐藏了起来,但是这种下拉的设计能有效的表明其列表项或指向当前页的同级页或指向当前页的子页面。

实例: Barnes&Noble 、Duolingo

当浏览书籍时,当前的分类总是显示在顶部
虽然对于大多数用户来说不是一个常见的交互,Duolingo允许用户下拉快速切换语言

然而有时,汉堡包式菜单可能依旧是一个不错的选择。

因为汉堡包菜单的主要缺点就是其可见性不足,以往的设计准则往往建议我们在设计主体导航时采用其他替代方案。不过,当设计次级导航项时,或许可以考虑这种方案。 

如果主导航项能够在屏幕上如操作按钮一样设计醒目可见,那么汉堡菜单似乎可以作为所有次级导航的好去处:

当主导航是围绕用户流设计,且相关选项清晰可见时不妨考虑这种模式。Uber就是一个不错的实例:

主屏幕上的所有选项都是为了叫车而设计,而其他的诸如历史行程和设置这样的次级项都统一放置到汉堡包菜单下

Google Translate 也类似:

主要功能就是切换语言并输入文本进行翻译,而其他的诸如帮助和社区这样的次级项就放到汉堡包菜单中去

总结

就移动端的导航结构来讲,并没有一个放之四海而皆准的解决方案,具体的设计往往要依赖于你的产品、用户及场景。好比一些适用于其他人的东西并不见得也对你有用,反之亦然。然而,对每一个设计良好的导航结构而言,其基础在于整个信息架构的合理性——清晰的结构、优先级以及根据用户需求而定的标签等等。为什么不从今天起开始寻找最适用于你的产品的导航结构呢?

译自:https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8#.cmnh1w9dk

如果喜欢我的文章,请点个👍;如果有任何意见或看法,请留下您的评论。更欢迎各位持续的关注,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容