恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
传统汉堡菜单有哪些可替代的设计方案
0.0°
2016-11-12 自译外文 经验/观点 原作者: Zoltan Kollin 举报 1812 13 15 0

如果你是一个数字化产品设计师,相信你已经读过很多关于汉堡菜单因为可见性和低效率的硬伤有损用户体验的文章。

Image title


所以,越来越多的网站和应用都开始采用其他设计方案来解决这个问题。本文就来列举几种方案,当然,并不是说以下这些方案就要比其他设计方案更好,因为它们的可行性与可用性还是要视其具体场景而定。


1、标签式导航


如果你的产品主要功能模块不多,又要保证用户能在不同功能间实现快速切换,那么标签式导航或许就是一个比较合适的解决方案。


标签导航可能是最简单的导航模式,但是,在设计过程中还是要注意以下几个方面:


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

2)其中一个标签是最活跃的,视觉上也是凸显的;

3)第一个标签应该对应程序中的首屏或主屏幕,并且所有标签项的位置与它们的优先级或逻辑是相对应的;

4)标签可以放置在屏幕顶部也可以是底部,这取决于具体的设计场景或平台;

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

Image title


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


2、“更多”选项卡


当标签数量超过5个时,可以把优先级最高的4个标签显示出来,其它标签则统一放置到“更多”选项卡下。

Image title


采用这种设计时要遵循的设计准则跟“标签式导航”基本相同,“更多”选项可以做成下拉菜单,也可以链向一个新的导航页面。

Image title


你可能会说,使用“更多”这种折叠选项的做法跟汉堡菜单不是一样吗,但是,如果你能依照正确的优先级来显示前4个标签,大部分用户也不会经常需要去点开“更多”选项,被折叠的不常用选项也不会对用户造成干扰。

Image title


3、渐隐式导航


「包含“更多”选项卡的导航」还有一个更酷炫的变种设计方案,就是:选项卡数量会随屏幕宽度进行自适应调整,宽度越小能显示的选项卡数量也越少,原有空间被占用的选项则会被折叠到“更多”选项下。

Image title


这种做法显然要比「包含“更多”选项卡的导航」更加灵活,对不同屏幕尺寸的适应性更强。

Image title



4、滚动式导航


如果你的产品需要展示的东西实在太多,都有同等的优先级,那使用“更多”选项卡进行折叠的做法就不合适了,这时可以尝试运用滚动式导航将所有选项显示出来。

Image title


但这种方法的缺点大家很快就能想到,就是在不滚动的情况下用户能看到的也只有前面几项,其他项还是处于隐藏状态,然而,在某些场景下,这依然不失为一种可接受的方法。比如一些网络商店或新闻客户端。


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

Image title

Image title



5、下拉菜单


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

Image title


在这种情况下,下拉菜单实际上有双重的作用:首先,它充当了一个页面标题,而向下箭头则是提示用户里面有可切换的选项。第二,虽然里面选项被折叠了,但用户看到这种下拉设计很快就能明白里面的内容是与当前分类相关的,要么是同级要么是子级。

Image title



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


因为汉堡菜单被吐槽的就是其可见性不足,所以在设计主体导航时我们会倾向于采用其他替代方案。但是,当我们设计次级导航时(功能次级,而非可见性次级),这种方案还是可以考虑的。

Image title


如果主导航是围绕用户流程进行设计的,也就是说,导航在内容区就已经很好的融入的话,那么汉堡菜单就可以作为所有次级导航的去处。


Uber就是一个很好的实例:

Image title


主屏幕上的所有选项都是为了叫车而设计的,整个流程走下来,用户叫车的操作就已经完成了,不需要其他什么导航,而诸如历史行程和设置这样的次级功能都可以统一放置到汉堡包菜单下。


Google Translate 也类似:

Image title


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


总结

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


就移动端的导航结构来讲,并没有一个放之四海而皆准的解决方案,具体的设计往往要依赖于你的产品、用户及场景。好比一些适用于其他人的东西并不见得也对你有用,反之亦然。导航结构设计的是否合理,其基础在于整个信息架构是否合理。清晰的结构、优先级以及根据用户需求而制定的标签等等。最适合你的产品的导航还得靠你自己思考。


作者:Zoltan Kollin

译者:IXDC(微信号:ixdcorg)

更新:2016-11-12

收藏

13人已收藏

IxDC

国际体验设计大会(IXDC),专注用户体验设计。

  • 83

    作品

  • 871

    粉丝

  • 3

    关注

  • 挖掘用户行为,打造生活服务场景自动化升级
  • “宅经济”—— 刺激线上互娱新经济
  • 智慧服务健康,医疗行业迎来拐点式发展
  • 一场震撼的多人运动!从打造游戏的左手开火体验开始
相关标签

    猜你喜欢

      2016-11-12 自译外文 经验/观点 原作者: Zoltan Kollin 举报 1812 13 15 0

      传统汉堡菜单有哪些可替代的设计方案

      0.0°

      你确定要举报传统汉堡菜单有哪些可替代的设计方案

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年11月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      13
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录