工具类产品导航布局浅析

背景

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

三种常见的导航

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

二级结构

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

二级结构
二级结构

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

二级结构-2
二级结构-2

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

三级结构

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

三级结构
三级结构

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

三级结构2
三级结构2

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

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

四级结构

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

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

四级结构
四级结构

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

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

为什么都在左侧?

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

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

路径1


路径1
路径1

路径2


路径2
路径2

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

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

强调

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,815评论 25 709
  • //我所经历的大数据平台发展史(三):互联网时代 • 上篇http://www.infoq.com/cn/arti...
    葡萄喃喃呓语阅读 51,519评论 10 200
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,276评论 4 61
  • 人生旅途中,每个人总会遇到一些事儿,也会遇到一些人,一些可以成为朋友的人。朋友不似爱情那么狭窄,小小的感情世界只容...
    Sundayou阅读 3,180评论 0 0
  • 2017.4.7 22:54 H (洗澡洗头后,也洗了衣服,拖了地,抹了桌子,扔了枯萎的花,写了日记。头发干了,放...
    darlingH阅读 2,649评论 0 4