发布时间：2020-3-17 分类： 电商动态
导航菜单是人机交互最重要的桥梁和平台。它的主要功能是防止用户失去方向。如今，市场上有很多种菜单栏。什么样的菜单是出色的导航菜单设计？良好的菜单设计不仅可以改善整个产品的用户体验，还可以使用户感到神清气爽。本文将重点介绍导航菜单，并分享我们对导航菜单的知识和经验。
一、导航菜单有什么作用?
1.改进产品内容和功能结构和水平
导航是APP的骨架，支持整体内容和信息，允许内容根据信息架构有机地组合，并且在用户面前直观清晰地显示，使得碎片内容变得完整有序。该结构还增强了生态意识。
2.专注于核心职能
每个产品投入开发并进入市场后，都是其核心功能。因此，核心功能必须放在用户的触及范围内，应控制辅助功能的比例，并且显示不应该是压倒性的。通过导航，您可以突出显示核心并适当隐藏辅助功能。
3.简化用户旅程
合理的导航系统和流畅的任务路径使用户能够快速实现目标并创建流畅的用户体验。用户旅程的简化直接影响用户的用户保留和转换率，高效的导航可以直接激发用户的痛点。
二、导航菜单的分类
在了解导航菜单的基础知识后，我们使用快速原型制作工具Mockplus来显示导航菜单的分类。
1，经典的导航菜单Tabber
Tabber是Apple ios可以自动生成导航控件，易于开发。因此，这款经典的底部导航栏受到绝大多数应用程序设计师的青睐。这种设计符合手机用户单手操作的习惯，包括新版微信，淘宝，支付宝，百度手机等。这种APP导航方式占大多数。
优点：清除当前入口位置;直接显示最重要入口的内容信息。
缺点：当功能条目太多时，此模式很麻烦且不切实际。
2.矩形网格式导航菜单
这种网格导航是聚合页面上的所有主要入口，允许用户做出选择。这种组织无法让用户在第一时间看到内容，选择压力相对较大，而使用此导航的应用程序变得越来越少，经常在辅助页面中用作内容的图形形式list，或者它是条目的集合，作为一系列工具。
Mockplus实现的Meggar导航效果[在线预览]
优点：简单但不简单，导航清晰，明显，并可提高效率。
缺点：设计时需要注意颜色匹配。过多的幻想会让用户感到视觉疲劳。
3.抽屉导航
抽屉式滑动导航是对Tabber导航中切换项目限制的一个很好的补充。通过垂直布置切换项来解决该问题。菜单隐藏在当前页面中，菜单可以像抽屉一样拉出。
使用Mockplus [在线预览]
的抽屉导航效果优点：节省页面显示空间;允许用户专注于当前页面;良好的可扩展性。
缺点：不适合频繁切换的应用程序。
4，方向舵导航
标签导航的一种形式目前很流行，通常被称为“方向舵导航”，因为它在风格上与船上使用的方向舵非常相似，两侧都有其他操作按钮。当页面具有相同级别的大量内容并且需要非常重要且频繁操作的门户时，可以使用该APP导航模式。
Mockplus实现的方向舵导航效果[在线预览]
优点：需要突出重要和频繁操作的入口。
缺点：用标签导航。
三、经典导航菜单设计
1. Google的Material Design使用“浮动操作按钮”来定义此导航。区分浮动在UI上方的图标，并且还具有适当的动态效果。创建了一个新的导航规范。
2.同样，Evernote使用此模型，用户只需单击右下角的浮动按钮即可快速记录当前的灵感。
3. Tumblr与图像图标和适当的标签配对。向下滚动内容时，这些图标自然会消失。
4.信使的结构严格遵循标签导航，一些标签固定在顶部，一部分清楚地显示底部的主要功能。图标清晰易懂，允许自定义标签创建精致，干净的视觉体验。
小结
越来越多的设计师意识到导航栏菜单的重要性，以增强用户体验。在Android中，我们看到汉堡导航中的迭代作为单独的标签栏。在iOS上，越来越多的应用程序正在删除小标签，并用更大，更清晰的图标替换它们。为了追求更好的用户体验并简化APP的设计，设计师将继续探索导航设计优化之路上的新设计方向。
