麻花vi设计的核心价值在于为企业打造独特的品牌,麻花vi设计可以给企业带来良好的社会声誉和经济效益。
注:本文“麻花vi设计”配图为本公司设计作品
屏幕空间是手机上的一项宝贵资源。为了应对小屏幕空间的挑战,同时仍然使导航可用,设计者经常依赖于将导航隐藏在汉堡包图标后面,这是隐藏导航的一个典型例子。在这篇文章中,我们将会看到为什么隐藏导航会产生糟糕的UX,以及设计师有哪些选择。
为什么汉堡包菜单不好在手机上,可视导航的使用是汉堡包的1.5倍[/pullquote]如果你正在使用数字产品,你可能已经读过几十篇文章,描述手机上的汉堡包菜单如何损害UX指标。主要缺点是发现率低,这一点有实际数字为证。在定性研究中,NNGroup发现隐藏导航比可见或部分可见导航更不易被发现。这意味着当导航被隐藏时,用户不太可能使用导航。汉堡菜单降低了参与度,减缓了探索速度,让人们感到困惑。
那么我们应该用什么来代替呢?虽然移动应用和网站没有硬性规定,但一般建议使用可见导航(主要导航选项显示在可见的导航栏中)或组合导航,其中一些主要导航选项是可见的,一些隐藏在交互元素下。
1.如果你的网站或应用程序中的顶级目的地数量有限,标签导航可能是解决方案。当菜单在顶部或底部可见时,它基本上是广告,导航就在那里,人们可以从一开始就看到导航选项选项卡似乎是最简单的导航模式。然而,在设计这种类型的导航时,应该考虑一些事情:
选项卡栏允许显示5个或更少的导航选项。
其中一个选项应该始终处于活动状态,并且应该在视觉上突出显示,例如,使用对比色。
第一个选项卡必须是主页,选项卡的顺序应该与它们在用户流中的优先级或逻辑顺序相关。
最好将图标和标签一起用于每个导航选项。没有标签的图标只适用于常见的操作,比如用于搜索的放大玻璃图标,以及用户经常使用的界面(例如Instagram).
提示:为了节省屏幕空间,向下和向上滚动时可以隐藏/显示导航栏。
2.带有"更多"选项的选项卡栏当您有5个以上的顶级目的地时,一个实用的解决方案可能是显示四个优先的部分,并将第5个元素作为剩余选项的列表。该解决方案的设计原则与选项卡栏的设计原则基本相同。只有一个例外:最后一个元素是"更多"项。"更多"项可以作为下拉菜单使用,甚至可以链接到包含其余部分的单独导航页面。乍一看,这个解决方案并不比汉堡菜单好多少,因为它也隐藏了内容,而且它的标签并没有说太多隐藏在它后面的东西。但是,如果你正确地设置了导航选项的优先级,大多数用户都会在屏幕上一直显示四到5个最优先的导航选项,这样他们的导航体验就会得到改善。
3.渐进折叠菜单渐进折叠菜单,也称为"优先"模式,是一种适应屏幕宽度的菜单。它显示尽可能多的导航,并将所有其他内容放在"更多"按钮下。基本上,这种模式是"标签栏更多"导航的简化版本,隐藏在"更多"菜单后面的导航选项的数量取决于可用的屏幕空间。这种解决方案的灵活性提供了比"静态"标签栏更好的用户体验。
图片来源:布拉德弗罗斯特
4.类似于前两种模式,这是另一种用于较长列表的方法。如果你有许多导航选项,但没有区分优先级,例如音乐流派,你可以在一个可滚动视图中列出所有项目。通过使列表可滚动,你允许用户从一边移动到另一边。这种解决方案的缺点是,在没有滚动的情况下,仍然
注:本文“麻花vi设计”配图为本公司设计作品


总监微信咨询 舒先生

业务咨询 张小姐

业务咨询 付小姐