对于设计师来说，移动设备屏幕上的每一寸空都是宝贵的资源。为了在小屏幕上做更多的事情，设计师在设计导航系统时通常需要花更多的时间打磨。汉堡图标是过去几年最常见的设计策略。这个小图标的背后隐藏着导航和选项，但实际上，虽然大众已经习惯了它的存在，但这并不是最好的导航设计方案。
在今天的文章中，我们将讨论为什么汉堡菜单这样的隐藏导航会影响用户体验，以及更可用的替代方案。
为什么汉堡图标会破坏用户体验
在移动设备上，我们实际上看到的可视导航比汉堡图标这样的隐藏导航更多，前者大约是后者的2.5倍。
如果你仔细研究过汉堡图标和用户体验设计相关的文章，可能会看到很多这样的讨论，对汉堡图标和用户体验的冲突有所了解。汉堡本身最大的问题就是可发现性低，这是有数据支持的。在定性研究中，NNGroup发现这种隐藏导航设计比显式导航更难发现，这意味着用户不太可能找到并使用它们。换句话说，汉堡图标降低了用户的参与度，增强了应用程序对探索的要求，可能会让用户感到困惑。
汉堡图标的替代品
虽然对手机APP和网站设计没有强制要求，但最好采用显性导航设计，至少保证主要导航类别对用户可见，加强导航的可发现性。
1。选项卡式导航栏
如果你的网站或者APP的导航项目数量相对有限，而且大部分都是常用的，那么这个时候你可以选择选项卡式导航。无论这种选项卡式导航是在页面的顶部还是底部，用户都很清楚。
标签导航似乎是最简单的导航方式。但即便如此，在使用时，还是需要注意以下几个常见问题:
标签导航通常只能显示不超过5个标签。
使用标签导航时，至少有一个标签始终处于活动状态，并且活动标签通过颜色对比突出显示。
第一个标签页通常作为主页存在，标签页中的内容要按照用户的优先级来排列。
在导航标签页中，最好使用图标+文字的方式呈现，搜索应用中的搜索按钮、Instagram中的拍摄按钮等常见且为人熟知的 *** 作，只需要用图标显示即可。
提示:保存空，导航条可以在滚动翻页的过程中隐藏，但在页面静止时会出现。
2。标签栏+“更多”选项
当你的导航栏中有太多的类别，但你仍然想使用选项卡式导航时，你可以在选项卡栏中显示优先级最高的四个选项，并对最后一个选项使用“更多”按钮。点击后，会显示更多优先级较低的隐藏选项。这个设计还是比汉堡菜单好。虽然它仍然隐藏了一些选项，但大多数重要的选项仍然会显示出来。“更多”选项的按钮被触发后，可以设计成下拉菜单，也可以链接到独立的菜单页面。具体的设计策略可以根据实际情况灵活处理。
3。渐进收缩菜单
这种渐进式收缩菜单，也称为“优先级+”菜单，是一种符合响应式设计规则的智能菜单设计。它会根据屏幕的宽度和大小，显示尽可能多的优先级相对较高的导航项，而无法显示的内容会存储在“更多”按钮中。“更多”按钮中可以携带的物品数量也取决于屏幕的宽度。这种方案的灵活性，相比相对固定的标签栏+“更多”按钮，更加灵活自然，提供了更好的体验。
4。滚动导航
类似于前两种模式，滚动导航是另一种解决方案。如果你的导航中有很多项，并且优先级没有大的区别，比如音乐流派分类，你可以使用滚动导航来呈现所有类别。用户可以滚动浏览导航项目，并点击切换类别。
这种方案的缺点是视野中能显示的项目还是有限的，其他项目都在屏幕之外，不需要滚动。用户还是需要适当探索才能发现。但总体来说，这还是比汉堡菜单更好的导航设计方案。
5。全屏导航
前四种设计方案的基本思路都是尽量少占屏幕空，而全屏导航则采取了完全相反的策略。用这种设计方法，可以直接把主页做成导航。打开主页后，用户可以在导航类别中上下滚动，根据需要点击不同的导航，找到自己想要的内容。
这种设计模式通常适合有明确目标和任务的网站和app，尤其是那些用户任务会固定在特定类别的应用和网站。这个结构良好的网站和应用程序对他们的普通用户来说非常清晰明确。一方面可以让网站设计和优化更加方便，也更容易让用户使用和集中注意力。
Yelp的全屏导航
使用全屏导航使设计人员能够以更一致的方式组织大量信息，并以有针对性的方式显示信息。
结论
在手机导航的设计中，不可能找到一个通用的解决方案。你采用什么样的导航总是取决于你的产品、用户和上下文。但是，每一个设计良好的导航都应该基于应用和网站本身的信息架构，参考用户需求定制合理的结构、优先级和标签内容。帮助用户更好地浏览信息是每个设计师的首要任务。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）