工具类产品导航布局浅析

背景

随着项目的越来越深入，产品功能的逐渐扩充，我对目前的导航设计感受到了一丝压力_{压力来自于日益增加的功能，已经超出了导航当初设计的层级设定，而如果继续基于这个设定来做下去，虽然也有一些妥协的方案，但一定会引发产品界面的失衡}如果不想这类事情的发生，只有改变最初的导航设计_{还好，我们�还有机会修改}

三种常见的导航

在整理产品的过程中，我浏览了诸多的工具类产品，逐渐发现无论哪一类的�产品，根据其产品的复杂程度，都可以概括为以下几种：

二级结构

复杂程度较低，常见于任务管理工具，一般这类结构的产品功能比较明确，相对略显单一，例如，Heroku、worktile，其结构可以解析为：

当然，一级菜单的展示就可以发挥设计师的想象空间，可以只有icon~也可以变换icon与文字的位置。
例如：

这类结构适用于产品的每个主对象下有数量可控的子对象，且子对象的界面功能目的明确。

三级结构

相对于二级结构，三级结构的复杂程度略有提升，一般这类结构的产品，会有较多功能页面，且功能分类较为明显，这类结构因为承载量较大，且层级相对简单，使用较为普遍，例如Google的Material design介绍网站，或者比较常见的bootstarp的各种前端样式样板，其结构可解析为：

或

当产品的对象比较明确，且对象下的菜单较多时，可考虑采用这种二层展开的方式，例如springloops：

三级结构相对于二级结构而言，一级菜单的作用更多的是分类和收纳，二级菜单才是工具的核心内容。

这类结构适用于，工具的功能较多，且零散，需要进行分类整合，其灵活性在于还可以根据情况扩充二级菜单下的三级子菜单。

四级结构

这类产品的特点就是庞大~充斥着各种意想不到的功能和“惊喜”，功能较多、功能之间的包含关系复杂、理解成本高是这类产品的共性，例如Google的Developer Console、蚂蚁金融云。

一般4级结构意味着用户至少3次点击才能进入到目标页面，即便是在目标路径清晰的情况下，仍然让页面背负着较大的体验压力~结合浏览过程中的一些实践，可以考虑减少用户对于目标路径的点击，如下：

减少用户发现菜单的路径，如果在二级菜单下还有三级菜单，则默认将三级菜单直接展开~结构上加以区分，从来减少用户的点击次数。

当然，四级结构并不意味着整个产品所有的层级都是这么复杂，往往这类工具会出现三、四级交叉并存的情况，四级结构往往适用于大型工具类的配置部分，或者需要多次分类的部分。

为什么都在左侧？

上述介绍的框架结构全部是基于左侧的设计, 其实有很多产品仍然采用Headline作为菜单的方式，例如Teambition，但是就我一家之言，工具类产品最适合将导航放置在左侧的原因，我认为可以总结为以下：

• 展示性好~ Headline作为菜单，会出现二级菜单隐藏在一级菜单之中的情况，例如
  Headline 这种隐藏的问题在于即便是同级目录下的切换，都需要通过点击一级菜单来实现_{这样无形中添加了用户反复操作的成本，而左侧菜单会将同级下的菜单全部展开}能够让用户更加了解这一部分都是包含了哪些功能。
• 扩展性强~与移动端不同，PC端界面在横向的扩展上总是弱于纵向的扩展性，当横向菜单累积到一定数量的时候，如果产品层面不做归纳和区分，整个横向菜单的扩展就会变成一项负担。
• 操作路径简洁~以最远举例的菜单项为例，比对下操作路径的复杂度：

路径1

路径2

可以看出路径2在路径切换上，会比路径1少一次，路径相对简单，并且视野范围相对集中在左侧~相对于路径1而言会更加容易操作。

综上~就个人而言，更加偏向于左侧导航的设计风格。

强调

页面导航的设计与业务的复杂程度密切相关，交互设计本身就有半只脚踏在产品设计里面，必须在对整个业务非常了解的情况下，综合考虑后，决定使用哪种风格~为了追究简单扁平而使用简单导航的后果，可能会对后续的设计工作带来更多困难，并且有返工重新设计的危险。