最近很多美妆博主都在发布红黑榜。其实他们说的是哪些产品有问题不推荐大家使用，哪些东西可以安利好东西。想想B端设计，这种情况也会存在。然后我打开AntDesign，浏览完所有的组件，你会发现：“组件中也有红黑名单~”今天我也来“带带货”说说组件中的红黑名单B端组件。先说说红黑名单定义的使用频率高：也就是这个组件我们平时使用频率高黑名单：在使用过程中，我们会遇到很多问题，导致无法使用正常使用红单：往往更能满足B端对产品的实际需求，对组件的了解更深。通过我的分享，可以让大家有个初步的了解。当然，整个组件都是基于我平时的设计观察和使用。目的是与大家分享，避免误入歧途。如果大家有什么疑问，欢迎在评论区和我们一起讨论~树的选择树的选择在B端系统中出现的频率非常高，比如我们常见的：表格，表单，各种详情页，只要涉及层级结构的选择，会有它的身影（注意，这里主要是指树选择组件）但是作为设计者，在使用树选择的过程中，会遇到很多意想不到的问题1.无法确定大小，因为treeselection这个组件本身的特殊性，它的大小需要根据内容的高和宽来决定，而在设计过程中，高和宽要慎重考虑，因为在使用treeselection的时候，需要考虑每个内容的具体大小，太高或太低都不行。如果太低，扩大选树会很麻烦；太高了，数据量小的时候给人的数据很空洞。水平空间也是如此。这也造成了设计时需要深入思考2.适用性太低。treeselection作为一个基础组件，无论是从它的显示选择上来说，作为一个基础组件，在处理复杂的选择需求时，显然都感到“力不从心”。内容还是大量数据时的选取难度，树形的适用性会大大降低。遇到这样的情况，建议多采用“业务组件”来优化选型。Classificationform分类表（也可以叫Tab表，不过是个昵称~）在B端产品中也很常见，以复杂的形式出现，但是作为设计师，在实际使用分类表的时候，你会发现有很多1.效率低对于用户来说，分类表单不能完整的查看表单信息，每一个都需要来回切换。这意味着在填写表单时，我们无法通过滚动查看所有数据。相反，我们必须点击每个单独的类别才能通过类别了解表单的具体内容。同时，必填项的提醒也很难在类目形式中处理，因为每一个都是独立的，作为用户其实并不清楚哪个分类有必填项，这样也会导致填写效率低下（其实会有办法处理的，但是大家对这样的提醒不是很熟悉。满意）2.编辑模式不好操作。当分类表处于编辑状态时，也很难处理。提交分类表单后，我们还需要考虑数据在详情页的展示形式，因为表单和详情页之间存在映射关系，此时在设计时，应该提供某个分类下的数据编辑，还是整个分类表格的数据编辑？其实这种情况，尤其是对于初级B端设计师来说，也是非常难以应对的。顶部导航顶部导航非常特别。虽然我在之前的导航菜单文章中提到过，但是在使用顶部导航的过程中，你还是会面临很多问题：顶部导航最大的局限就是显示数量太少。毕竟在空间布局上，横向空间和纵向空间的区别其实是非常大的。顶部导航的高度不能设置得太高。超级菜单只能使用下拉菜单，导致导航菜单的设计局限性过大，一旦项目开发出来也不容易解决。当然，顶部导航也不是没有用。在很多工具产品和官网中，顶部导航都有一席之地。其实这种形式更多的是基于内容型的网站结构，所以采用的是顶部导航，也就是上下导航。结构会更合理。严格来说，网格不是结构，但是由于很多设计师的误用和误用，设计师不得不为了网格而使用网格。因为在常见的移动端设计中，是没有网格的（主要是移动端横向空间小，使用不频繁）。在桌面的设计中，并不是网格不好，而是设计师在使用网格的时候往往很盲目。举个简单的例子，表格中需要用到网格吗？答案是：“不需要使用网格”。其实这种问题是目前很多设计师的问题，因为他们会盲目使用，导致在设计过程中出现很多为了网格而网格的现象。后面有时间再单独总结一下grid主要用在什么地方。希望大家不要盲目使用。滑动输入栏滑动输入栏经常出现在很多概念设计中，尤其是在Dribbble上的桌面设计中，这是每个设计师的标准配置，但是在实际的B端项目中，尤其是桌面端B端系统中，滑动输入栏是一个非常不合理的组件。因为在B端产品中，大部分产品都需要精准输入，而且数据范围非常大，所以也会造成滑动输入栏，给用户使用时的感觉非常不好，而且由于大部分用户expect还是以直接输入为主，这也是为什么现在B端产品中经常能看到滑动输入条的原因。Breadcrumbs面包屑导航在实际工作中经常用到，因为在常见的B端系统中，导航菜单和信息结构肯定非常复杂（除非你的系统只有一级导航菜单，没有其他页面的层级逻辑）所以，通过面包屑导航，我们可以清楚的知道整个页面的信息结构。因为它的体积小和灵活性，无论你是在一个完整的大页面还是一个小的泡泡卡片中，面包屑都可以使用。面包屑可以携带，也可以起到返回的作用，可以清晰的展示页面的路径信息。它是一个可以用于多种用途的组件。梭架梭架大家并不陌生。在设计B端产品的时候，或多或少都会涉及到。同时，由于穿梭架本身的复杂性，很多设计师会觉得它占的空间太大，所以不会去使用它。今天的安利穿梭箱，其实就是和安利一样的穿梭组件。你会发现很多业务选择组件会通过穿梭框进化，比如我们常见的“全国城市选择、部门成员选择”，甚至表单中的字段显示隐藏设置，都是在传统数据选择之后逐步进化而来的，所以这种类型的穿梭帧数据选择。其实更多体现在设计者基于当前组件的优化上，分析它为什么要这样做，这样做的原因，成为了穿梭盒上榜的原因。折叠面板折叠面板就像一个大“盒子”。当产品经理在你身后说：“我要放这个信息，那个信息不能留”，拖出一个折叠面板解决这个问题。其实在使用折叠面板的过程中，主要是在详情页和表单，因为折叠面板本身可以容纳很多信息，可以说明具体的层级关系，所以使用折叠面板可以有更多显示数据的可能性，即插即用，非常方便。气泡卡位于页面的任何位置，弹出气泡卡时您不会感到惊讶。其实泡泡卡片是我日常设计中经常用到的一个组件，因为它可以容纳任何内容，小到一串文字，大到一个视频，泡泡卡片中都可以使用。并且在信息中，泡泡卡作为信息的补充组成部分，所以在系统中，对于需要展示但又不是那么重要的信息，使用泡泡卡会更加方便。AnchorNavigation（锚点定位）是最后一个，自然也绕不开我们的AnchorNavigation。感觉在我的疯狂安利下，越来越多的产品开始使用锚定导航了。因为B端产品一定很复杂，信息量很大，自然我们在使用的过程中更要注意信息的承载。（锚点导航没有图片，大家自己去体验。）在使用过程中，锚点不像分类那么绝对，不会强行划分太多数据，所以会更容易使用。同时它的兼容性会更强，可以出现在表单页、详情页等各个地方~它的好处太多了，这里就不细说了，用过的人都说是好的。做一个小总结黑名单：树选择、分类表格、顶部导航、网格、滑动输入栏。红榜：面包屑、穿梭框、折叠面板、气泡卡片、主播导航。其实我们在做B端设计的时候，你会发现我们要解决的是组件设计。这里所说的内容都是基础组件，但实际上，工作中使用到的业务组件更多是在基础组件的基础上，由业务组件演化而来的。但是业务组件确实是一个“深坑”。它的特殊性、业务场景、具体问题我们会在后续的文章中讲到。
