提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
如果你是一个数字化产品设计师,相信你已经读过很多关于汉堡菜单因为可见性和低效率的硬伤有损用户体验的文章。
所以,越来越多的网站和应用都开始采用其他设计方案来解决这个问题。本文就来列举几种方案,当然,并不是说以下这些方案就要比其他设计方案更好,因为它们的可行性与可用性还是要视其具体场景而定。
1、标签式导航
如果你的产品主要功能模块不多,又要保证用户能在不同功能间实现快速切换,那么标签式导航或许就是一个比较合适的解决方案。
标签导航可能是最简单的导航模式,但是,在设计过程中还是要注意以下几个方面:
1)标签数量不超过5个;
2)其中一个标签是最活跃的,视觉上也是凸显的;
3)第一个标签应该对应程序中的首屏或主屏幕,并且所有标签项的位置与它们的优先级或逻辑是相对应的;
4)标签可以放置在屏幕顶部也可以是底部,这取决于具体的设计场景或平台;
5)如果标签不使用文本说明,一定要保证那些标签icom是用户所熟知的;
LinkedIn中仅使用图标,Google Photos则使用图标和标签
2、“更多”选项卡
当标签数量超过5个时,可以把优先级最高的4个标签显示出来,其它标签则统一放置到“更多”选项卡下。
采用这种设计时要遵循的设计准则跟“标签式导航”基本相同,“更多”选项可以做成下拉菜单,也可以链向一个新的导航页面。
你可能会说,使用“更多”这种折叠选项的做法跟汉堡菜单不是一样吗,但是,如果你能依照正确的优先级来显示前4个标签,大部分用户也不会经常需要去点开“更多”选项,被折叠的不常用选项也不会对用户造成干扰。
3、渐隐式导航
「包含“更多”选项卡的导航」还有一个更酷炫的变种设计方案,就是:选项卡数量会随屏幕宽度进行自适应调整,宽度越小能显示的选项卡数量也越少,原有空间被占用的选项则会被折叠到“更多”选项下。
这种做法显然要比「包含“更多”选项卡的导航」更加灵活,对不同屏幕尺寸的适应性更强。
4、滚动式导航
如果你的产品需要展示的东西实在太多,都有同等的优先级,那使用“更多”选项卡进行折叠的做法就不合适了,这时可以尝试运用滚动式导航将所有选项显示出来。
但这种方法的缺点大家很快就能想到,就是在不滚动的情况下用户能看到的也只有前面几项,其他项还是处于隐藏状态,然而,在某些场景下,这依然不失为一种可接受的方法。比如一些网络商店或新闻客户端。
需要注意的是,在视觉设计上,你需要确保能提供足够的视觉线索来提示用户可以横向滚动看到更多的元素。
5、下拉菜单
还有一种不常见但挺有意思的设计,就是在其它选项的可见性和可达性都不那么重要的情况下,可以使用下拉菜单。
在这种情况下,下拉菜单实际上有双重的作用:首先,它充当了一个页面标题,而向下箭头则是提示用户里面有可切换的选项。第二,虽然里面选项被折叠了,但用户看到这种下拉设计很快就能明白里面的内容是与当前分类相关的,要么是同级要么是子级。
然而有时,汉堡式菜单可能依然是个不错的选择。
因为汉堡菜单被吐槽的就是其可见性不足,所以在设计主体导航时我们会倾向于采用其他替代方案。但是,当我们设计次级导航时(功能次级,而非可见性次级),这种方案还是可以考虑的。
如果主导航是围绕用户流程进行设计的,也就是说,导航在内容区就已经很好的融入的话,那么汉堡菜单就可以作为所有次级导航的去处。
Uber就是一个很好的实例:
主屏幕上的所有选项都是为了叫车而设计的,整个流程走下来,用户叫车的操作就已经完成了,不需要其他什么导航,而诸如历史行程和设置这样的次级功能都可以统一放置到汉堡包菜单下。
Google Translate 也类似:
主要功能就是切换语言并输入文本进行翻译,而其他的诸如帮助和社区这样的次级项就放到汉堡包菜单中去了。
总结
就移动端的导航结构来讲,并没有一个放之四海而皆准的解决方案,具体的设计要取决于你的产品、用户及场景。适用于其他产品的设计模式并不见得也对你的产品有用,反之亦然。然而,对每一个设计良好的导航结构而言,其基础在于整个信息架构的合理性——清晰的结构、优先级以及根据用户需求而定的标签等等。为什么不从今天起开始寻找最适用于你的产品的导航结构呢?
就移动端的导航结构来讲,并没有一个放之四海而皆准的解决方案,具体的设计往往要依赖于你的产品、用户及场景。好比一些适用于其他人的东西并不见得也对你有用,反之亦然。导航结构设计的是否合理,其基础在于整个信息架构是否合理。清晰的结构、优先级以及根据用户需求而制定的标签等等。最适合你的产品的导航还得靠你自己思考。
作者:Zoltan Kollin
译者:IXDC(微信号:ixdcorg)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册