ToB web后台产品设计:导航设计

背景:最近在做B端的上门电商、餐饮的web后台设计,想把其中导航设计遇到的问题、思考点总结一下,也仅作讨论吧,抛砖引玉希望大家多多指点。


一、导航的基本展现形式:水平、垂直、混合型

第一种 水平型

即主导航是水平的,次级导航可以以下拉菜单的形势悬浮时展开。

水平导航

优点:

1) 作为传统且常见的导航 用户上手比较容易;

2) 更易读。 现代人习惯横向阅读,且眼动研究表明,眼球水平运动比垂直要容易;

《普通心理学》彭聃龄  错觉理论 : “ 眼睛做上下运动比水平运动困难一些”

3) 最不容忽视的一点 ,这种导航给页面具体内容留的版面大 尤其对于一些大型的列表页, 横向版面大是非常实用的。

4)大版面无侧边栏干扰,带来的沉浸感更强。

弊端:

1) 由于水平条的宽度有限,每个导航标题的必须起的很短(当导航变多水平条变短,有时文字真的会摆放不下,对于英文国家这也许更头痛)

2) 可扩展性不强 。

导致扩展性不强的原因有二:

一是电脑网页的横向宽度有限,业务扩展时水平导航条数目可能多到放不下,即广度限制;

二是这个导航其实只是一个主导航-次级导航的架构深度为二级的导航,即深度限制,如果后台设计的业务模块多,需要再深一层的架构,水平导航可能就不是最好解决办法了。


综上,水平型导航适用于功能较简单的,或者追求沉浸式体验的后台。


第二种 垂直型

这是目前最流行的一种后台导航方式,常见垂直导航如下图,主要区别就是信息是层级渐进显示还是一次性平铺,这点稍后分析。

垂直导航

垂直导航优点:即导航标题的字数限制放宽,广度上可扩展性增强—导航的数目限制放宽、设置可以开放成用户可以局部自定义导航(加一些常用操作的功能区进去,或者像微信公众号后台这样)

弊端:就是垂直排列阅读性减弱、不利于沉浸式体验;导航架构深度上仍有限制(主导航-次级导航)

垂直导航适用于功能较为专注(比如只是团购、或只是上门电商的后台)的、又有一定复杂度的后台。



第三种 混合型

混合型即综合了水平、垂直型的导航,导航深度可以更深一层,如下图:

混合型  深度为3层的导航


混合型 深度为2层的导航


适用情况:混合型适合功能模块较多、复杂度较大的后台。(比如大众点评 商家后台--既有团购 又有会员卡 预订 买单等不同功能模块的产品后台)


二、导航展现细节:是否需要信息渐进显示(层级隐藏)

用户对于导航的认知及操作的负荷主要来自于以下3种:

进入后台完成某种任务时,你需要思考和记忆(认知),需要浏览屏幕(视觉),需要点击按钮、操作鼠标和打字(行动)。

从人机工程学视角来看,负荷所花费资源从多到少排列如下:认知负荷、视觉负荷、行动负荷

——《设计师要懂心理学》  Susan Weinschenk  第四章 人如何思考


1、认知负荷:对导航归类的理解、 每次进行某项任务时猜测它是在哪个一级分类导航下       

2、视觉负荷:即导航够不够简洁

3、行动负荷:不同页面之间跳转切换的操作负荷  。


心理学的研究表明:当认知负担小(即用户能几乎不需要思考就能知道怎么点击)时,行动上的操作负荷可以忽略。

用户必须经过十几次点击才能完成任务,结果他们完成时还是会抬头笑道:“好轻松啊!”这是因为每个步骤都很合理,都提供了用户所预期的信息。他们不必动脑思考,思考的负荷比点击更沉重。

——《设计师要懂心理学》  Susan Weinschenk  第四章 人如何思考


所以,是否需要、适合信息渐进显示 要根据情况而定,大体上:

1) 当你的信息分类本身认知起来就轻松【分类边界模糊性小,确定性强(比如 数据统计包括用户量统计、访问量统计、购买量统计),且各个分类之间没有模糊的交叉语义】,那么可以考虑信息渐进隐藏式的导航,好处是视觉负担小。而认知轻松时操作上的切换交互用户几乎可以再无意识下完成,行动负荷可忽略不计。

例:信息渐进显示式 垂直导航


例:混合型导航 也是信息渐进显示式导航的一种


2) 当你的信息分类归属性模糊,需要用户记忆、学习且量较大,那么还是推荐使用 信息全部平铺式的导航。


附,对照分析表:

对照分析表


写在最后:

其实关于导航设计及后台设计,这些远远不够,以下列出其它的思考点,希望大家不吝赐教,分享一下自己的看法~

1.关于导航的分类:导航的分类依据有哪些?(语义、任务相近)

2.关于导航的排序:排序依据有哪些?是将常用功能排在前面,还是按照初始设置的流程顺序?

3.关于导航的文案:文案设计有哪些注意要点、文案长度是否最好保持一致

4.后台设计的其它要点:列表页、表单填写页、各种控件(事件控件、筛选控件) [以后再写文章总结]





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

推荐阅读更多精彩内容