2024-11-1 鹤鹤 B端ui设计文章及欣赏
以下是我在B端产品设计的过程中总结的一些控件使用心得，希望对你有所帮助。
在B端系统中，设计师免不了要和各种控件打交道，但是出于B端产品本身业务的复杂情况，加上不同端口设备对交互的影响，我们在使用控件的时候更加需要仔细的甄别、并合理的选用，（个人认为）使用B端控件的准则，并不是越炫酷越新颖越好，有时候，能合适的解决问题才更重要。
本文将以常用的控件类型为例，分别从常见形态、适用场景、各自优劣等方面去对控件进行分析和拆解，帮助你更好的作出选用决策。
作为产品结构把控的第一梯队，导航承载着对产品功能分发和层级交互的重要作用，帮助用户定位到自己需要的功能。设计导航的时候，我们需要从业务出发去梳理功能架构。同时需要理清楚几个问题
一般来说导航的功能数量会控制在7±2个，太多会造成用户的记忆负担，降低查找功能的效率。太少了说明功能的分发效率还不够高（或者是产品真的很简洁）。但由于目前B端产品的功能体系都比较复杂，加上不断迭代增加的新功能，整体来说超过9个的导航都很常见，一般来说都是10个左右，如果不通过设计手段加以优化，很容易造成较差的体验。
设计小技巧
在功能数量多的情况下，为了提升功能查找的效率，就会对导航的排布做一些必要的调整
1. 增加分类，通过相似性原则把同类的功能靠近，使其层级清晰
2. 缩短功能描述字符，减少理解成本。减轻记忆负担。
常见的导航位置多见于顶部或者左侧位置，首先在选用两者之前我们得先知道两者的区别
设计小技巧
侧边导航和顶部导航并不是非此即彼，还可以结合起来搭配使用，在一些大平台的产品矩阵中，顶部导航和侧边导航会相辅相成，并加入搜索功能，辅助用户更快速的找到所需产品。
目前比较常见的产品导航中多为一级或一二级。早期的产品中还能见到很多hover出现的二级三级菜单，现在已经很少见到了，因为这种hover出现的不确定性和带给用户的试错率太高，容易造成误操作，引起用户的挫败心理。而且层级太深的话也不利于用户对于该功能的感知，所以逐渐的被淘汰。
设计小技巧
设计导航需要注意尽量减少层级的嵌套，多采用直观、平铺式的设计，必要时增加分类辅助理解。
如果说导航是产品进行功能分发的重要途径，那么功能内的内容划分就是靠Tab来进行把关了。Tab切换常用用于信息划分，比如说在规定区域内信息无法全部展示时，会通过tab的形式前置凸显该页面的内容，或者是信息比较混杂，也会用到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号的样式更为简洁开放，对于较宽的页面也会有更好的包容性。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发