B端设计那些事儿 - 基础组件篇

B端基础组件篇

      近几年一直都在做B端产品相关的设计工作，深刻的体会到有一套组件库对于B端产品的设计来说是多么的香！现在呢我们结合B端项目，从多角度深入细节去解析组件库，帮助我们理解、构建组件库。那么我们该如何理解组件库呢？即 - UI KIT

组件库可以理解为是一个重复使用的界面设计元素的集合体，它是一个文件库。

组-是设计元素的组合方式

件-是有不同的元件组成，即可以直接复用

库-仓库，储存组件的地方

      这里提一下，组件库在整个系统中的作用属于团队内部设计师和开发间的横向协作，是保证产品输出一致的规范基础，设计规范更像是一份说明文档，组件库是设计规范组成里的一部分。

1：组件库的好处

高效、易用、一致、友好：

提高团队效率，保证产品一致的输出。

1：高效性

在团队中，避免多人多风格的现象；新成员加入，可快速接手工作；

在产品体系内，保证所有产品都呈现一致的设计语言，产品调性，建立产品的连贯性，一致性；

在用户侧，统一的体验，减少用户学习成本，提升使用体验。

2. 高效性

可以大大缩短设计和开发团队重复开发的时间，提升团队协作效率；

开发新项目或迭代时，可减少沟通时间，快速适应市场。

3. 灵活性

在组件库的基础上，根据产品发展，不断更新维护库，适应变化；

是规范不是规定，只是搭建基层框架，需根据实际项目在不脱离的基础的情况下，灵活应用。

做组件库的时机

     做组件库之前要思考时机是否恰当，那什么时机才适合去做呢？

在B端产品中，做组件库的时机要需要产品发展到较为稳定的版本，它需要有多个需求沉淀出内容来，毕竟B端的组件库需要结合业务设计出符合业务场景的样式，真正可以组件化的逻辑和样式是不可以凭空想象的，所以前提是要产品有一定的发展，要足够的了解业务逻辑，积累足够的业务场景，再开始着手设计组件库，这个时期将会一切顺其自然；

      对于我们产品目前已经过了探索阶段，处于向成长阶段过度的时期，整个公司这一季度把系统性提升产品和服务的竞争优势提上了日程，毕竟做出产品差异化的前提需要做好底层架构工作。也是趁着这个机会，我们设计部门又一次全盘复盘了一下组件库，迭代一个新版本，以更好的适应产品的发展。

组件库该怎么做？？

1. 理解阶段

我们在制作组件库的过程中应用到了两个概念 原子化设计理论 Atomic Design、结构细分。

在结构细分之前要了解什么是原子化，有关原子化的文章数不胜数

结构细分其实就是将各个独立的模块（组织）进行打散（原子）、细化、整合、重组。举个例子：

2. 拆解阶段

      在结构细分时，需要先从项目中筛选出满足复用性和拓展性的可拆解的模块，对于B端的产品来说我们在筛选的时候根据旧版本内容，把页面穷举罗列出来，分析相似性和可替换的模块，然后利用思维导图的方式罗列出可组件化的内容，做成可替换的组件，使每个原子可独立变化和替换，这种多嵌套组合式的细分方式，让组件最终呈现出来的样式满足多场景的业务需求。

      我们在根据产品类型把组件分为：基础组件、业务组件、数据可视化组件、常用模块四大类别，具体细分见思维导图：

3. 设计阶段

      拆解完之后就要进入具体的设计阶段了，在设计组件库时要用产品思维去做，包括从规划、设计、开发、跟踪完成一整个产品闭环。

基础组件在分解后，大概分为：筛选 、导航、按钮、弹窗、图标、表格等 ~

因为表格面积占比最大，页面呈现最为重要，会直接影响用户的使用体验。

在我们对表格的设计思考过程中，需要注意两项原则：易读与易用

易读是提升使用者在表格浏览时的体验，主要是从信息密度、色彩分隔、以及视觉节奏三个方面去理解；

易用是使用表格时的操作感受，比如快捷操作、多数据编辑等方面去理解。无论是B端的任何页面，表格都是必不可少的部分。

第一：表格篇

表格的构成   ————   （外部区域）：标题、操作区、筛选区；（内部区域）：表头、表体、表尾。

表格元素解析

1. 内部-标题

标题是整个表格内容概述的名称，此名称尽量简洁明了，不要太长，能两个字写清楚绝对不用三个字。如果标题名称难以理解的话，可以加二级提示，有两种常用样式：tooltips（常用）、二级提示语。标题的位置一般在左上角。

2. 内部篇-操作区

对表格内容的增删改等操作的区域。

使用建议：

有且只有一个主操作

特殊情况下可以没有主操作，但不能有两个主操作。

2-1：操作的优先级

根据使用的优先级，把常用的操作放到一级展示，不常用的收到二级展示。

不同操作状态区分要明确

不是所有的操作都是可以直接用的，比如有的操作在没有选择内容的时候是 禁用状态，那这时候就要和其他可操作的有明显的样式区别（比如做置灰处理），否则容易让用户分不清可不可以操作。

2-2：刷新按钮

有很多同学对这个操作是不是有些疑惑？有人觉得浏览器都有刷新功能啊，干嘛还要多此一举再加个刷新。其实这个刷新功能还是很有必要的，这个刷新只针对于列表内的内容。在有的后台管理界面中，因为数据量很大，如果每次刷新都用浏览器自带刷新的话，他会重新加载整个页面的内容，很不好用。很多情况下，用户只想重新加载一下列表的内容，那这个刷新就很好用啦。

同时刷新后要有即时反馈，告诉你点完操作后目前处于哪个阶段中。

2-3：导出功能

此功能可以把列表内容导出为你想要的格式（一般为 word / pdf）。

数据量较大的列表中，导出功能可以很方便的把自己过滤的内容下载到本地进行其他需求的查看。

导出内容的范围是哪些一定要事先想好，一般下载内容的范围包括以下几种：

当前页所有列表内容（常用，而且实现难度很低）；

经过二次过滤后，导出所有页上的列表内容；

所有页的列表内容（不常用，而且实现及数据处理难度会非常大，慎重选择）

2-4：导入功能

既然可以导出，就有导入。导入报表对文档会有要求，一般都是固定格式的文档，而且文档与列表中的字段都可以一一对应上，才可以完美导入。导入功能中 word 和 excel 是最常用的格式。需要注意的是，导入文档后最好有二次确认提示，告诉用户上传了哪些内容，成功了上传了多少条，失败了上传了多少条；同时该内容是否与现有的列表字段有冲突。

2-5：TAB切换

可以快速切换不同维度下的表格内容。

使用建议：

不同状态区分要明显；

Tab 数量不宜过多，如果不可避免的数量过多的话，一般有两种方案：最多显示出 5 个 Tab，超过 5 个 Tab 放在“更多里面”；交互上支持左右滑动 / 切换 Tab。

Tab 只放文本，最多可以放个 icon，尽量避免其他干扰信息；

✨✨1：筛选区

筛选区是对表格数据条件查看的主观再处理，用户根据筛选条件可以得到更精准的得到自己想要的信息

筛选的样式

输入框、下拉选择、日期选择器、单选、多选。

搜索功能：（观上图）

1）模糊搜索 or 精准搜索

搜索首先要确定哪几个字段可以被搜索到，名称？编号？等等…

模糊搜索使用的频率居多，毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的，两者皆可选择，根据产品选择即可。

2）单字段搜索

输入单字段进行搜索，比较常用的方式之一

3）多字段组合搜索

可以输入多个字段进行组合搜索（取并集），一般交互方式为回车完成书写。此方式比单字段搜索更加精准，数据量过大的时候优势就很明显

4）切换类别搜索

可以设置几个常用的类别来快速切换搜索的维度，方便用户使用。

5）多类别组合搜索

多类别组合搜索适合更加复杂的列表内容，并且类别名称会展示出来，可以比较清晰的看到用户用的哪种类别名进行搜索的。

好咯 ~ 今天就到这儿吧，期待下篇与这篇衔接 ⛽️⛽️ 期待能够帮助到你