虎课网为您提供字体设计版块下的B端组件核心：组件库设计-B端产品设计零基础入门03图文教程，难度等级为新手入门，下面开始学习这节课的内容吧！

本节课讲解B端组件核心：组件库设计，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复，作业也可以在评论区进行提交。

学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一进行解答。

那我们开始今天的教程吧。

1.这节课学习B端组件核心，就是组件库设计，这是本节课的目录。

2.什么是B端设计组件，组是多种设计元素组合在一起，件是有不同个体元素组合而成，它们作为独立个体存在，可进行自由组合和替换。

3.整体理解B端组件：通过对B端功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成的规范化模块。

4.它就像组成完整框架的单元体，比如单选框、复选框、表单、表格等，具有标准规范和可复用场景的基本模块。

5.B端组件库的构成原理：B端组件最小单元都是原子，最小颗粒度就是原子级元素，一般包括颜色、字体、线条，圆角、按钮等。

6.一般来说原子级的组建包含一到两个及以上的设计元素，同时还具有自己独有的视觉属性，例如按钮同时包含公共全局元素文字与颜色，以及私有视觉元素按钮圆角、大小等。

7.搭建B端设计组件的好处，第一提升团队合作的工作效率，第二保障产品一致性。

8.利用B端组件，可以帮助设计师和前端更好的完成项目协作，从而减少频繁沟通和项目的多场景说明。

9.建立了B端设计组件，可以形成整个B端页面的视觉统一，从而规避用户对产品的认知错乱。

10.B端组件的设计原则，第一整体性，在组件使用上要考虑整体，例如相同类型的目标对象用同一种颜色表达。

11.第二合理性，根据业务场景合理选用组件，例如使用虚线按钮用于界面直接添加操作内容。

12.第三一致性，在界面排版上要保证界面的协调性，比如图标使用需要保持视觉一致和协调。

13.B端组件工作前的行为场景梳理：组件最难的是如何定义和区分组件行为层的类别，定义标准，目的是保证撰写组件时，状态不会模棱两可，难以取舍。

14.可以从应用、差异化、组件构成以下角度确立标准：组件应用标准是通过组件使用规律给组件下定义，组件差异化是通过限定场景突出功能特点，让用户感知到信息操作的差异，赋予业务场景特定交互特色。

15.组件分区是通过前期梳理哪些组件时常变动、哪些是不常变动的去定义，基础必备元素构成写死，基础元素以外的内容，可以写成活代码。

16.在设计组件时要思考以下6个问题：业务需要这个功能吗？这个组件能否复用到其他类似场景中？这个组件能否或有必要在分解一下吗？用户使用这个组件会怎么想？这个组件是否对其他组件造成了侵害？组件页面层级不能超过三级，超过要怎么减少？

17.设计师看待组件时由内容和距离形成的形式，而开发理解的组件都是由盒子构成，所以对于前端来说，更希望的方式是将边距放入某个具体的组件中，而不是在组件外建立边距，为了与开发协作，设计师可以理解在不同的组件之间，最好不要再存在边距，一个组件应该将它与外界的边距包含进来。

18.做B端组件库，在产品发展到较为稳定的时候在设计师比较合适的，因为B端产品需要有需求沉淀，有内容产出和反馈，而且只有结合真实业务，才能发现有价值的问题并做出正确调整。

19.全面的设计规范参照，包括蚂蚁设计，字节跳动，饿了么，Eva Design，谷歌，微软，这些都值得大家深层层次的进行推敲。

20.同学们记得上传自己的作业哦！

以上就是B端组件核心：组件库设计-B端产品设计零基础入门03图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！