工具类产品导航布局浅析

背景

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

三种常见的导航

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

二级结构

复杂程度较低,常见于任务管理工具,一般这类结构的产品功能比较明确,相对略显单一,例如,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而言会更加容易操作。

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

强调

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

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