【转帖】导航菜单设计五步法（二）

前文传送门：


导航菜单设计五步法（一）

三、菜单层级有区分

我将常见的导航区分进行总结，分为以下三种形式：

3.1颜色区分

颜色区分作为最直接最有效的一种形式，这种形式也是后台页面最初的状态，我通常会用颜色区分和移动端顶部状态栏的演变史做对比，就其功能而言他们都有很多相似的点：

微信在2018年12月份时，发布微信7.0，将顶部导航由黑色转变为白色，引得大家争论不休，而经过时间不断洗礼，大家也逐渐接受这个了事情，渐渐忘去



2019年也有类似的事情发生，有几个产品的WEB端进行了一系列的大改，YouTube、Twitch、Twitter都进行了重新设计，他们也不约而同的将块面去除，去掉多余的的灰色，通过留白和空间将页面拉开






这否是是下一个WEB端所要追寻的趋势，我还不得而知～
如果WEB端都有此改变，那么B端产品还会远吗？

说回B端设计，颜色上的区分和移动端类似，更多体现在导航层和内容层之间的区别，因为从本质上讲，这两个本身就属于不同的业务模块，通过颜色的区分，是最为直接，最简单的一种方式。
这种形式常见于很多复杂系统，例如：飞书
小唠一句：飞书的文档功能以及协同工作比钉钉好用太多，如果大家现在还在寻找协同软件，可以试试飞书～



左侧导航为深色，能够让用户更沉浸的体验，因为屏幕边缘都为深色，用户在使用时能够真正做到有区分

3.2 投影区分

在现如今的移动端产品，投影大行其道，弥散投影，高级投影随处可见，也逐渐影响更多WEB端的产品使用投影。增加自身产品Z轴空间

Z轴空间给导航带来了的纵深感，同时能够在功能层级上，通过分层设计，使页面层级关系十分明确，引导用户使用导航。



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

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



3.3 分割线区分


分割线针对导航功能性不高，同时要满足很高设计感的产品
分割线太深，页面十分割裂，分割线太浅，页面划分又不明确，因此需要设计师对分割线的把控十分合理

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

四、导航可配置

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

4.1 我的菜单

如果你的产品是针对多数角色不同的用户进行设计，那么在导航设计时，可以考虑增加一个菜单选项：我的菜单，对于菜单进行标签处理
设置一个我的菜单，将用户常用的菜单进行添加，能够满足每一位用户的菜单快速选择的需求，通过这样的自定义，用户在常用的菜单下，能够通过我的菜单进行快速跳转

举个栗子?：

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



4.2 角色配置

如果你的产品是为特定几类角色进行服务，那么在导航设计时，可以考虑根据用户角色的不同，给用户不同的导航展示
通过角色的筛选，使用对于复杂导航进行简化，同时管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦～

优秀呀，朋友