B端设计：导航菜单的设计5步法

Material Design设计的出现，正是Z轴空间的鼻祖，在我们的屏幕中开辟了第三个设计纬度，在Z轴上展示增加了更多的交互形式。在几何体系中，Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴，我们通过引入 Z 轴在交互设计中呈现三维的物理空间感，使页面内容能够得到有效区分。

比如Teambiton在页面中运用投影，强化了页面层级的关系。

3.3 分割线区分

分割线针对导航功能性不高，同时要满足很高设计感的产品。

分割线太深，页面十分割裂，分割线太浅，页面划分又不明确，因此需要设计师对分割线的把控十分合理。

分割线在Dribbble上见到过很多，通过简单的线条加上空间的分割，将导航区与内容区分开，形成很好的视觉感受。如果你是刚开始尝试做导航，不太建议尝试这种形式，因为对于页面空间的把控要十分苛刻。

四、导航可配置

B端产品易操作性中，导航可配置操作算得上是一个重要的点。其中最主要是通过配置操作实现导航易用性的提升而如何让菜单可配置，通常的做法有两种。

4.1 我的菜单

如果你的产品是针对多数角色不同的用户进行设计，那么在导航设计时，可以考虑增加一个菜单选项：我的菜单，对于菜单进行标签处理。

设置一个我的菜单，将用户常用的菜单进行添加，能够满足每一位用户的菜单快速选择的需求，通过这样的自定义，用户在常用的菜单下，能够通过我的菜单进行快速跳转。

举个栗子：

在印象笔记当中，其快捷方式就是可以将用户想要的模块放置在此，可以快速跳转。

4.2 角色配置

如果你的产品是为特定几类角色进行服务，那么在导航设计时，可以考虑根据用户角色的不同，给用户不同的导航展示。

通过角色的筛选，使用对于复杂导航进行简化，同时管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦～

五、四种常见导航菜单

5.1 侧边导航

侧边导航在国内的 B 端产品当中最为常见的。将菜单栏放置在左侧，页面布局上基本为左右结构，将导航菜单放置左侧固定。

因为侧边导航在国内产品中最为常见，因此把他是优先提出来讲。国内厂商对于侧边栏导航的尤为偏爱，在很多人心目中，感觉就只有侧边导航和其他导航两种导航形式，也就造成了在 B 端产品的发展也逐渐趋同。

不过现阶段大家对于 B 端产品的重视，在设计上也开始多元化，话不多说，我们先来看看侧边导航的优点有哪些~

优点：

扩展性较强：多级导航可以流畅展示，可以涵盖很多大而全的产品。

展示灵活：侧边导 航可收折，收折过后用户的横向核心空间将会增大大，页面展示效率也会大大提高。

快速定位：视觉启始线统一，用户可以根据首字进行查找，方便查找。

缺点：

不易阅读：侧边导航文字垂直排列，有悖于眼动的正常视觉方向。

阅读沉浸感低：侧边导航容易打断用户的正常阅读顺序，使阅读感降低。

线上产品：

我们拿有赞零售进行举例，他就是一个典型例子。

菜单栏+功能菜单共有 15 个，然后通过导航的间隔将菜单进行分组，最多一个导航菜单共 9 个，满足7+-2原则。

同时可以看到，有赞在使用三级导航时，通过右侧面积统一展示二、三级导航，方便了用户导航展示的同时优化了用户的使用体验。

5.2 顶部导航

顶部导航在国外的产品当中，算是较为常见的。

将菜单栏放置在顶部，页面布局上基本为上下结构，将导航菜单放置上方固定。

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!