当前位置:首页 > 壁挂炉 > 文章正文

拆解B端产品总结界面框架设计的3原则

编辑:[db:作者] 时间:2024-08-25 07:34:33

B端产品给人的觉得总是千篇一律的,基本便是图表、表格、详情页,或者业务流程,实际上也大抵如此。
毕竟B端产品紧张是工具型产品或者管理系统,面向企业用户,办理用户的实际需求,很少去勾引用户产生需求。

拆解B端产品总结界面框架设计的3原则

在这种背景下,产品的性能、功能、用户效率就成了第一位的。
必要时,乃至会捐躯一定的用户体验优先担保产品功能。
以是B端产品系统界面不能为了“看起来新颖”而不同,更要看重用户用起来的体验。

本文紧张谈论以下内容:

从0开始构建新的产品,首先要确定好界面框架。
B端界面框架并不繁芜,紧张包括顶部信息栏、左侧导航和内容区3大部分。
通过不同的组合形式,界面框架就形成了3种设计模式。

一、高下构造

这种页面构造将页面划分为「顶部导航」和「内容区」高下两层。
常见于一些企业官网、信息资讯网站中,更倾向于信息展示。
例如阿里云官网、新浪、知乎等信息网站。

一样平常包含系统logo、功能菜单、赞助功能、个人中央等。
功能菜单常日按照业务板块进行设置,并且会限定菜单数量,一样平常为4-6个旁边。

根据业务须要,功能菜单也可以进行级联扩展,许可涌现2级乃至3级菜单。
方便用户更深层地理解系统功能,同时提高用户的操作效率,实现深层页面的快速直达。

我个人认为,顶部导航的上风并不是不占用页面横向空间。
由于信息展示类的网站对横向空间哀求并不高,有些网站为了避免用户视觉横向跨度过大,采取的是版心定宽设计。
企业官网产品则采取相应式布局,让界面可以适应不同的屏幕宽度。

顶部导航的上风在于面积小,对页面的分割比较弱,不会对内容产生太大的影响。
其余横向排布更符合用户的视觉习气。

在展示形式上,顶部导航更加灵巧,可以将菜单形成独立的信息空间。
例如百度官网的顶部导航,与Banner形成强烈比拟,内容清晰可见。

顶部导航也可以与页面内容融为一体,减少对内容的滋扰。
例如巨量引擎的官网中,将顶部导航与Banner信息稠浊,更加强调内容信息的通报。

在交互操作方面,页面向下滚动时,顶部导航可以自动隐蔽,从而为内容供应更大的可视面积;页面向上滚动时自动展示,方便用户的快速切换到其他菜单。

二、旁边构造

对付大略或者繁芜的业务系统,顶部导航数量会面临过少或者过多的问题,于是就涌现了旁边构造布局。

面对大略的业务系统,左侧导航的形式不会产生大量的页面空缺。
例如百度网盘网页版,Teambition都是采取的这种界面框架,将一级菜单简化,与二级菜单并列展示,视觉关联性也更加紧密。

面对繁芜的业务系统,左侧导航可以承载较多的菜单量,并且树形构造合营展开收起面板功能,具有很好的延展性。
例如有赞个人店铺左侧导航承载了10+个的业务功能。

不过左侧导航的毛病也比较明显,紧张有以下几个方面:

尺寸空间大。
为了尽可能地减少挤占内容区信息空间,常日会增加「收起」功能;限定多。
为了掌握导航宽度,菜单名称的长度须要做出限定,避免涌现无法完备展示的情形;对系统logo和名称也会有哀求,不太适用于名称较长的系统;操作效率不高。
默认收起的菜单项中,须要展开才能操作;如果信息层级较深,逐级渐进展开的办法也未便应用户操作,因此对信息层级也须要做出限定;其余用户无法直不雅观地全览所有业务功能,尤其是对付新人用户不友好,须要逐个点击才能理解系统功能。

以是在设计时,须要针对以上问题进行优化设计。
以下是部分产品供应的办理方案:

(1)单层信息+级联信息

有赞产品左侧导航,沿用了顶部导航的交互办法。
没有采取收起展开的办法,而是采取级联菜单形式,悬停即可显示,从而方便用户快速切换。

(2)默认全展开

菜单功能默认全展开,减少用户的操作。
在微信"大众年夜众号、阿里云、知乎创作中央等平台中,左侧导航都是默认展开的,用户不须要逐级展开,便于用户快速切换菜单。
在后续的利用过程中,用户根据的自己的须要,手动收起不常用的功能就可以了。

(3)双列布局

对付功能繁杂的系统,默认全展开的办法,会导致导航区过长,用户查看起来未便利。
因此须要增加菜单的信息密度,减少导航的整体长度。
例如拼多多商家后台采取双列布局的形式,当然这种场景下,会增加左侧导航宽度,挤占内容区的空间。

(4)查看全部

在门户网站中,信息分类非常多,普通用户常日只会用到高频信息。
为了让用户能够全览网站所有的信息门类,网站还供应了「网站导航」功能。

在B端产品中,也须要考虑如何让用户理解平台的全部功能清单。
例如钉钉管理后台在左侧导航底部增加了「查看全部」功能,展开后用户就可以看到全部的功能菜单。

在形式感上,旁边构造的布局会对系统logo 和名称进行压缩,我个人认为整体风格不如高下构造正式,对品牌形象表现力不敷。
因此该构造紧张用于一些工具产品或者轻量型的系统,在大型的业务平台或者G真个项目运用较少。

通过上面的案例,我们可以看到B端产品基本上因此「稠浊布局」的模式构建界面框架。

三、稠浊布局

在B端产品中,稠浊布局既有贯穿的顶部区域,可以承载导航菜单和产品框架信息,又在内容区增加左侧导航,提升导航信息承载量,更好地知足业务功能须要。

例如巨量纵横产品中,采取了顶部导航和左侧导航相结合的办法,将产品划分为几个独立的业务单元,用户可以根据自己的事情目标去选择对应的功能。
同时也减少了左侧导航的信息承载量和层级,方便用户操作。

如果系统功能极其繁芜,传统的「顶部导航+左侧导航」的模式已经无法知足产品需求。
例如云类产品都是大型的业务平台,包含几十项业务功能,于是构建了「产品与做事」的中央模式,集中全量展示所有业务功能,方便用户浏览查看。
在一定程度上也增加了用户探索更多功能的希望。

在这种模式下,每个独立的产品或做事则形成了子系统空间,采取统一的稠浊布局办法,让原来繁芜的业务系统变得大略。

其余还有一个小细节。

左侧导航菜单带给用户的生理暗示是「切换」,用来掌握右侧内容区信息。
当我们在左侧导航中嵌入其他系统功能时,如果是「跳转」的操作办法,须要增加指示图标,如下图所示。

四、总结

以上便是关于B端产品界面框架的内容,我们可以得到3个设计原则:

符合产品的定位和业务须要。
产品界面框架要能够承载产品的全体业务体系,并且具备足够的延展性,须要考虑到产品未来升级和发展。
担保用户的操作效率。
导航的形式会影响到用户的操作效率,因此在层级设定上须要谨慎,避免层级太深影响用户的操作效率,目前主流的左侧导航以2层为主。
全局视角。
导航是用户理解产品功能的第一渠道,在设计时既要考虑到用户用起来的感想熏染,也要能够让用户更直不雅观的理解系统全局。

#专栏作家#

子牧师长西席。
公众号:子牧UXD(HelloDesign),大家都是产品经理专栏作家。
产品体验设计师。
8年互联网行业履历,善于体验设计思维、设计方法论、交互设计研究。

本文原创发布于大家都是产品经理,未经容许,禁止转载。

题图来自 Unsplash,基于 CC0 协议。

本站所发布的文字与图片素材为非商业目的改编或整理,版权归原作者所有,如侵权或涉及违法,请联系我们删除,如需转载请保留原文地址:http://www.baanla.com/bgl/178889.html

XML地图 | 自定链接

Copyright 2005-20203 www.baidu.com 版权所有 | 琼ICP备2023011765号-4 | 统计代码

声明:本站所有内容均只可用于学习参考,信息与图片素材来源于互联网,如内容侵权与违规,请与本站联系,将在三个工作日内处理,联系邮箱:123456789@qq.com