干货分享｜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号的样式更为简洁开放，对于较宽的页面也会有更好的包容性。

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

码字辛苦，