多级菜单这么简单，为什么总不符合总监的要求？

任何超过两级的子菜单都会让用户感到困惑和不知所措。下拉级别太多会让用户感觉操作麻烦、失去注意力，从而无法做出选择，用户体验也很差。因此，菜单级别应该尽量不超过两级。例如，Pixso社区中的后台管理系统菜单栏选择了两级展现，用户易于理解和操作。

1.2子菜单用图标标记

通过始终指定子菜单何时可用来管理用户期望。当有下拉箭头图标时，告知用户此处含有二级菜单。而当用户点开后，箭头要相应地旋转为上拉箭头，用户点击可把菜单收起。

1.3直观地组织信息

确保信息的层次结构与用户的心理模型一致。如社区中的购物软件所示，用户点开“香水”类别，即可看到商品的名称、图片、价格，非常直观。

1.4确保用户始终知道他们在哪里

始终突出显示主菜单中与用户页面对应的链接。面包屑导航显示当前页面在系统层级结构中的位置，并能向上返回。当系统拥有超过两级以上的层级结构时，您需要告知用户“您在哪里”。此外，面包屑导航可以向上或向下操作。

1.5保持副本简单

菜单不是耍小聪明的地方，需要确保链接标签有强烈的信息气味。

1.6可读性优先

使用简单的无衬线字符，确保项目周围有足够的空间，以避免混淆。Pixso社区中的FreelanceerDashboardUI设计的菜单使用了大量留白，可操作范围较大。运用了无衬线的字体，一级菜单色号比二级菜单色号要深，容易拉开层级关系。

即使移动的发展飞速，但出于许多原因，客户可能还是需要一个功能齐全的PC端网站。桌面菜单应该易于扫描，并提供清晰的交互。当然，他们应该响应迅速。它还应尽可能与移动网站保持一致，以使回访体验更直观。

2.1菜单应在单击时打开

不要用鼠标悬停的方式设计菜单的打开方式。悬停菜单将强制用户把指针移入菜单。如果用户指针退出下拉菜单，菜单将被关闭，这无疑增加了用户操作的难度。

您需要做的最基本设计之一是用户如何访问网站菜单。鼠标悬停的方式很受欢迎，但单击“打开”是确保菜单在所有设备上能够可靠直观运行的最佳方式。

2.2可访问性

鼠标菜单可能会给使用屏幕阅读器或通过键盘导航的用户带来问题。选择正确的布局：下拉菜单和超级菜单。如果您的桌面站点使用传统的菜单布局（页面顶部的水平菜单栏），您可以考虑两种类型的子菜单：标准的单列下拉菜单或巨大的多列菜单。

2.3子菜单

如果主类别包含的链接少于八个，请考虑使用下拉菜单。如果下拉菜单足够长，可以垂直滚动，那么应该考虑以不同的方式组织信息——可能是作为一个大菜单，或者细化父类别。

超级菜单是一种嵌套菜单，通常使用大布局来扩展浏览器的宽度。如果子菜单包含许多可以按列分组的不同链接，则必须使用这种类型的菜单。通常，您会在大型电子商务网站上看到这样的菜单。

如图所示，Pixso的首页导航使用的是单列下拉菜单。

巨大的多列菜单

设计大型菜单时，请考虑以下几点：

如果尚未设计移动优先级，则需要优化移动设备的菜单。

3.1简化主菜单

由于移动设备的显示空间有限，因此大部分信息都隐藏在菜单中。移动设备的菜单应该以简单为主，位置一般放在侧边栏或底部。

浏览网页时，您经常可以在右上角看到“汉堡菜单”。它们通常堆叠成三排，类似于汉堡包。选项卡栏直接列出特定的导航类别，允许用户根据自己的目的进行选择。

如Pixso社区中的外卖app设计界面，菜单栏缩略为折叠汉堡的图标，展开后停靠在左侧边栏。

3.2允许用户轻松关闭菜单

用户可以直观地点击菜单关闭它，但也需要考虑添加一个关闭按钮。您可以将汉堡图标更改为“X”或在菜单的右上角添加。

3.3对单个子菜单使用展开部分

如果菜单只有一个子菜单层，请考虑使用展开部分。您可以在父级菜单下展开它们，并使用不同的背景色来保持它们的清晰。您还可以允许用户同时展开多个子菜单。考虑在父级的右侧使用向下角或三角形图标来指示子菜单可用。

如Pixso社区中的家居概念应用app所示，家具直接呈现类别。为了与背景色区分开，家具的图片叠加了灰色底填充色。

3.4用重叠菜单替换大型菜单和多个子菜单

如果需要展开多个子菜单或重新配置大型菜单，请选择覆盖方法：不要展开主菜单下方或旁边的子菜单，而是让子菜单替换主菜单。在桌面上，突出显示当前页面和主页非常重要，在小屏幕上，更要多加考虑。

3.5保持清晰一致

不同的iOS导航模式可以用于不同的应用场景，开发者需要根据应用程序的需求，选择合适的导航模式