干货分享|B端控件超实用小技巧!(上)

干货分享|B端控件超实用小技巧!(上)

干货分享|B端控件超实用小技巧!(上)干货分享|B端控件超实用小技巧!(上)



今天给大家分享一篇晚一同学在B端产品设计工作中对于控件使用的心得

她说希望对你们有所帮助 :P
在B端系统中,设计师免不了要和各种控件打交道,但是出于B端产品本身业务的复杂情况,加上不同端口设备对交互的影响,我们在使用控件的时候更加需要仔细的甄别、并合理的选用,(个人认为)使用B端控件的准则,并不是越炫酷越新颖越好,有时候,能合适的解决问题才更重要。



干货分享|B端控件超实用小技巧!(上)




本文将以常用的控件类型为例,分别从常见形态、适用场景、各自优劣等方面去对控件进行分析和拆解,帮助你更好的作出选用决策。



干货分享|B端控件超实用小技巧!(上)






一.导航


作为产品结构把控的第一梯队,导航承载着对产品功能分发和层级交互的重要作用,帮助用户定位到自己需要的功能。设计导航的时候,我们需要从业务出发去梳理功能架构。同时需要理清楚几个问题



1. 功能的数量


一般来说导航的功能数量会控制在7±2个,太多会造成用户的记忆负担,降低查找功能的效率。太少了说明功能的分发效率还不够高(或者是产品真的很简洁)。但由于目前B端产品的功能体系都比较复杂,加上不断迭代增加的新功能,整体来说超过9个的导航都很常见,一般来说都是10个左右,如果不通过设计手段加以优化,很容易造成较差的体验。



干货分享|B端控件超实用小技巧!(上)





设计小技巧 
在功能数量多的情况下,为了提升功能查找的效率,就会对导航的排布做一些必要的调整 

1. 增加分类,通过相似性原则把同类的功能靠近,使其层级清晰 
2. 缩短功能描述字符,减少理解成本。减轻记忆负担。 



2. 导航的位置

常见的导航位置多见于顶部或者左侧位置,首先在选用两者之前我们得先知道两者的区别



干货分享|B端控件超实用小技巧!(上)




功能的可拓展性:侧边导航的承载性显然更好,后续产品迭代也更方便增加入口。而相比之下顶部导航的可外露功能较少,可拓展性较弱。


操作效率:B端用户使用产品的时候往往目的性是很强的,且基本上都有固定的操作流程,侧边导航的纵向排布更为紧凑,阅读路径更短,识别速度更快,更利于用户高频切换,顶部导航虽然也有二级菜单,但相比之下操作效率是比较低的。


适用场景:大多数B端产品都会选择侧边导航,但是在一些平台体系化的官网都会选择顶部导航,将产品矩阵放置在下拉菜单中,而页面本身则突出信息展示和介绍。


设计小技巧 

侧边导航和顶部导航并不是非此即彼,还可以结合起来搭配使用,在一些大平台的产品矩阵中,顶部导航和侧边导航会相辅相成,并加入搜索功能,辅助用户更快速的找到所需产品。 



干货分享|B端控件超实用小技巧!(上)





3. 层级的划分

目前比较常见的产品导航中多为一级或一二级。早期的产品中还能见到很多hover出现的二级三级菜单,现在已经很少见到了,因为这种hover出现的不确定性和带给用户的试错率太高,容易造成误操作,引起用户的挫败心理。而且层级太深的话也不利于用户对于该功能的感知,所以逐渐的被淘汰。


干货分享|B端控件超实用小技巧!(上)



设计小技巧 

设计导航需要注意尽量减少层级的嵌套,多采用直观、平铺式的设计,必要时增加分类辅助理解。 


干货分享|B端控件超实用小技巧!(上)




二. Tab

如果说导航是产品进行功能分发的重要途径,那么功能内的内容划分就是靠Tab来进行把关了。Tab切换常用用于信息划分,比如说在规定区域内信息无法全部展示时,会通过tab的形式前置凸显该页面的内容,或者是信息比较混杂,也会用到tab进行划分类别,核心都是为了帮助用户快速定位所需信息。


1. Tab的形式


下图是我整理的B端较为常见的四种Tab样式,不知道大家有没有想过,同样是分类信息,这四种tab使用起来究竟有什么区别。


干货分享|B端控件超实用小技巧!(上)




层级上


其实这4种tab都可以单独拿来使用互不影响,但是在层级复杂涉及到导航嵌套导航的时候,我们就需要去区分他们之间的展示关系,一般来说1号导航的层级是最高的(管的最宽),在产品的顶部导航和页面中承担比较大范围内容的切换。他也常和2号进行搭配使用,2号层级要低一些。一般会用在更为细化的分类。


干货分享|B端控件超实用小技巧!(上)




3号准确来说其实属于分段筛选器(样式会有区别),但是我们经常也会把它当作一个小的tab去使用,常用在图表模块中对内容进行不同维度的切换。相比于1/2号来说,他们更节省纵向空间,且更加针对具体模块,操控范围较窄一些


干货分享|B端控件超实用小技巧!(上)




4号其实在移动端更为常见,单独使用或是和1号搭配起来用于细分品类的切换,或者是大批量的筛选条件中使用



干货分享|B端控件超实用小技巧!(上)





数量上

不同的场景下去选用Tab的时候,我们也需要兼顾考虑数量和具体功能,比如说124导航能承载的功能一般比较多(2-6个),但是3如果放置4个以上的话就会略显拥挤(一般2-4个)。



功能上


相比起3号来说,4号在一些特殊场景下它会有更好的一个拓展性,比如说在日期切换的时候,4号还可以通过下拉的方式赋予这个tab更丰富的值。比较常用的就是在日期筛选的时候通过自定义下拉出具体的日期。或者下图所示选择具体的季度。


干货分享|B端控件超实用小技巧!(上)




除了切换信息之外,2号tab还带有标签关闭的特殊功能,其实最开始也是从浏览器的标签页样式演变过来,所以保留了关闭的交互,当产品内置需要打开多个页面进行协同对比的时候,标签tab就是个不错的选择。它支持不打断当前操作流程的情况下用户去新开一个页面,同时方便返回当前页。



干货分享|B端控件超实用小技巧!(上)




设计小技巧 

除了以上说到的层级、功能、数量之外,我们是否选用一个tab样式还需要考虑到具体页面的设计,比如说颜色和整体UI风格 

举一个小例子,在之前设计一个页面的具体模块的Tab切换时,其实1、3、4都可以使用,但仔细斟酌一下,3号的底色和边界框加在模块的底色上,会让整体的嵌套感过深(我这里只粗略示例,实际数据中观感会更明显),而四号的分裂感又比较强,相比之下,1号的样式更为简洁开放,对于较宽的页面也会有更好的包容性。 



干货分享|B端控件超实用小技巧!(上)



写到这里觉得觉得有点多,那筛选和按钮就放在下次更新吧


文章链接:https://www.zcool.com.cn/article/ZMTQ4Mzg4MA==.html

作者:宋晚一


·END·


干货分享|B端控件超实用小技巧!(上)


本篇文章来源于微信公众号: 应谋鬼计

UI/UX

烂红如火雪中开| 金山办公「立冬」节气壁纸初雪上线

2022-11-6 19:00:31

UI/UX

虚拟人设计探索

2022-11-7 9:00:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索