/B 端控件设计超实用小技巧
最新文章2023-07-18

B 端控件设计超实用小技巧

我们是一群执着于设计的黑马



@宋晚一 授权黑马家族发布
https://www.zcool.com.cn/article/ZMTQ4Mzg4MA==.html
-------------------------------------------


感谢大家对黑马家族的支持，今天给大家分享一篇关于 B 端控件设计超实用小技巧，希望可以带给大家更多设计思考。

正文


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

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


一.导航


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

1. 功能的数量

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


设计小技巧 
在功能数量多的情况下，为了提升功能查找的效率，就会对导航的排布做一些必要的调整 
1. 增加分类，通过相似性原则把同类的功能靠近，使其层级清晰 
2. 缩短功能描述字符，减少理解成本。减轻记忆负担。 

2. 导航的位置

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

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

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


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


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



3. 层级的划分

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


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




二. Tab


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

1. Tab的形式

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

层级上

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

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

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

数量上

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

功能上

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

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



设计小技巧 
除了以上说到的层级、功能、数量之外，我们是否选用一个tab样式还需要考虑到具体页面的设计，比如说颜色和整体UI风格 
举一个小例子，在之前设计一个页面的具体模块的Tab切换时，其实1、3、4都可以使用，但仔细斟酌一下，3号的底色和边界框加在模块的底色上，会让整体的嵌套感过深（我这里只粗略示例，实际数据中观感会更明显），而四号的分裂感又比较强，相比之下，1号的样式更为简洁开放，对于较宽的页面也会有更好的包容性。 

写到这里觉得有点多，那筛选和按钮就放在下次更新吧！码字辛苦


   设计提升 

 

如果你希望自己的设计思考更全面、设计技法更深入、作品输出更专业，或者你想跳槽去更大的公司。欢迎和黑马哥一起交流，我们互相进步。





感谢你的阅读支持 · 欢迎留言互动
-------------------------------------------
声明：本文内容及言论仅代表其作者之意，
并不反映任何黑马家族之意见及观点





多一点行动  ·  多一分设想

—

本文来自微信公众号“黑马家族”（ID：heimauiued）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章