背景
随着项目的越来越深入,产品功能的逐渐扩充,我对目前的导航设计感受到了一丝压力压力来自于日益增加的功能,已经超出了导航当初设计的层级设定,而如果继续基于这个设定来做下去,虽然也有一些妥协的方案,但一定会引发产品界面的失衡如果不想这类事情的发生,只有改变最初的导航设计还好,我们�还有机会修改
三种常见的导航
在整理产品的过程中,我浏览了诸多的工具类产品,逐渐发现无论哪一类的�产品,根据其产品的复杂程度,都可以概括为以下几种:
二级结构
复杂程度较低,常见于任务管理工具,一般这类结构的产品功能比较明确,相对略显单一,例如,Heroku、worktile,其结构可以解析为:
当然,一级菜单的展示就可以发挥设计师的想象空间,可以只有icon~也可以变换icon与文字的位置。
例如:
这类结构适用于产品的每个主对象下有数量可控的子对象,且子对象的界面功能目的明确。
三级结构
相对于二级结构,三级结构的复杂程度略有提升,一般这类结构的产品,会有较多功能页面,且功能分类较为明显,这类结构因为承载量较大,且层级相对简单,使用较为普遍,例如Google的Material design介绍网站,或者比较常见的bootstarp的各种前端样式样板,其结构可解析为:
或
当产品的对象比较明确,且对象下的菜单较多时,可考虑采用这种二层展开的方式,例如springloops:
三级结构相对于二级结构而言,一级菜单的作用更多的是分类和收纳,二级菜单才是工具的核心内容。
这类结构适用于,工具的功能较多,且零散,需要进行分类整合,其灵活性在于还可以根据情况扩充二级菜单下的三级子菜单。
四级结构
这类产品的特点就是庞大~充斥着各种意想不到的功能和“惊喜”,功能较多、功能之间的包含关系复杂、理解成本高是这类产品的共性,例如Google的Developer Console、蚂蚁金融云。
一般4级结构意味着用户至少3次点击才能进入到目标页面,即便是在目标路径清晰的情况下,仍然让页面背负着较大的体验压力~结合浏览过程中的一些实践,可以考虑减少用户对于目标路径的点击,如下:
减少用户发现菜单的路径,如果在二级菜单下还有三级菜单,则默认将三级菜单直接展开~结构上加以区分,从来减少用户的点击次数。
当然,四级结构并不意味着整个产品所有的层级都是这么复杂,往往这类工具会出现三、四级交叉并存的情况,四级结构往往适用于大型工具类的配置部分,或者需要多次分类的部分。
为什么都在左侧?
上述介绍的框架结构全部是基于左侧的设计, 其实有很多产品仍然采用Headline作为菜单的方式,例如Teambition,但是就我一家之言,工具类产品最适合将导航放置在左侧的原因,我认为可以总结为以下:
- 展示性好~ Headline作为菜单,会出现二级菜单隐藏在一级菜单之中的情况,例如
- 扩展性强~与移动端不同,PC端界面在横向的扩展上总是弱于纵向的扩展性,当横向菜单累积到一定数量的时候,如果产品层面不做归纳和区分,整个横向菜单的扩展就会变成一项负担。
- 操作路径简洁~以最远举例的菜单项为例,比对下操作路径的复杂度:
路径1
路径2
可以看出路径2在路径切换上,会比路径1少一次,路径相对简单,并且视野范围相对集中在左侧~相对于路径1而言会更加容易操作。
综上~就个人而言,更加偏向于左侧导航的设计风格。
强调
页面导航的设计与业务的复杂程度密切相关,交互设计本身就有半只脚踏在产品设计里面,必须在对整个业务非常了解的情况下,综合考虑后,决定使用哪种风格~为了追究简单扁平而使用简单导航的后果,可能会对后续的设计工作带来更多困难,并且有返工重新设计的危险。