B端组件的划分维度
精确划分B端组件
我们都知道 B端与C端不同，因为C端更加注重实现某一个目标，围绕一个具体的核心需求来展开相应的设计工作，那么弊端主要面对的是一个群体，一个有着共同目标的群体，他们分工非常的明确，但又非常的复杂，那么在做B端页面的时候，我们常常调用到我们熟知的组件库进行大件页面，同样这也是实现页面最快的方法和最高效的一种方法。
那么不同公司的B端组件库是有非常大的区别的，从一开始的颜色、字体，再到后面的精细化业务组件，都是各有区别，那么在这一堆庞大的组件库中，我们如何去精确的划分，以便下次能够更快的使用。就需要对组件进行精确的划分，本篇文章就是带你掌握B端组件的划分维度。
那么首先就是按照组件的大小对其进行划分，我们还记得最早提出原子设计的概念是brad frost，他是一名国外的网页设计师，他从化学元素周期表中得到启发，发现原子结合在一起可以形成分子，进一步形成组织，这就是所谓的最早的原子设计的概念。所以我们可以把B端组件按照它的大小，分为原子、分子、组件、模块和页面这5大维度。
可能一上来直接去告诉大家这五大维度，不是非常好理解。那么，我会详细的讲一下每个维度所包含的东西。
1.原子
原子是最小的单位，它不能再被其分割或者对其进行第2次的划分，那么原子底下包含的也是最基础的东西，就如同：色彩、字体、间距、圆角、分割线等，我们在创建一个新的B端组件，往往需要参考原子的内容，但是如果说我们要直接去调用组件，一般可以从分子或者从组件开始调用。
2.分子
原子构成分子，所以说分子是比原子大一个级别的单位，那么分子就包含了一些具体的我们所用到的功能控件，例如输入框，选择器、开关、上传、时间日期选择框等，这些功能框由于开发起来不是非常容易，所以在能用到组件的情况下，我们尽量要调用组件，实现降本增效。
3.组件
很显然组件是更大一级的单位，那么在制作一些同类型的页面是我们也可以直接调用组件，组件下面包括导航、表单、列表、数据可视化图表、筛选等。我们也可以发现，一个组件它是由多个功能控件组成的，也就是说当我们调用了一个组件的时候，我们实际上就已经完成了一个系统的功能，而不是像调用分子这样一个输入框只能完成一个小的功能，所以组件是更大的单位，在能用到组件的时候我们会优先选择调用组件，但是我们要记得是我们如果想对组件或者分子什么进行更改的时候，一定要创立新的组件库，不能用旧的组件库直接去更改颜色，我们需要创建新的组件库，纳入到设计和开发的双系统中才可以进行使用。
4.模块
模块就是页面中一个一个非常大的模块，那么一个页面中它又包含3~5个模块。模块分为卡片化分区，间距分隔等，这个模块虽然说是比组件要大一个级别，但它的理解非常简单，因为组件是包括很多个功能控件的一个功能合集，那么什么是模块？它是承载这个功能合集的一个载体，也就是说模块的规范，它就是卡片化分区或者是间距分割，大家要注意，这里的间距分割，指的是模块与模块之间的间距，并不是我们所说的原子之间的间距，当然我们要知道的是模块之间的间距分割也遵循原子的间距分隔，什么意思呢？如果说我们的规范是8点栅格系统，那么原子的间距最小单位是8，那么模块页面之间的这样一个间距，有可能就是24或者32，它们是8的倍数，但他们又不和8相同，这就是说为什么模块是遵循了原子的间距分割理念，但模块的间距又是新的间距。
5.页面
页面很简单，就是整个页面。也就是说当我们调用了整个页面的时候，我们什么都不用做，只需要去改数据即可，页面又分为工作台，表单页列表页，详情页结果页等等，只要你能想到的所有的B端的页面，它都可以称之为页面，但是不是所有的页面都是组件库的一部分？并不是。因为有些页面是临时性需求，也就是说当你用到这个页面之后，以后很可能很长一段时间不会再用这个页面，那这个页面成为组件库的价值就不高，我们可以不把它列入组件库中。当然如果你想的话，你也可以把所有的页面都纳入组件库中，但我们要考虑到一个工作效率的问题。
这就是按照组件的大小对他进行了分类，那么这里所说的大小不是组件本身的大小，而是我们组件的一个实际功能上的大小，像我们的原子，它无法承担任何的功能，因为它本身是一个最小的单位，它只能起到一个指导意义，而分子，分子是结合了许多原子组合在一起的功能控件。它实际上已经可以独立实现某个功能，而组件则是功能的集合，一个组件可以直接实现一套系统的功能，比如说我们的表单输入页那么表单输入页里面的表单输入模块，他就是一个组件，这个输入模块中可能包含日期选择，输入框，开关按钮等很多功能模块。所以它是一个集合，一个什么的集合？一个功能的集合，这就是我们的组件模块和页面。好，那这就是从第一维度对组件进行的划分。
那么，接下来我们来讲第二个维度对组件进行划分应该怎么去做，第二个维度，我们是按照组件的一个功能展示，或者说它具体的某项功能，对组件进行划分。我们可以把其分为通用、导航、数据录入、数据展示、反馈和业务组件。那么这些都是什么意思呢？我们可以发现我们把所有的组件进行了一个划分，根据他们所表达的功能不同，他们所在的类别也不同，比如说我们的数据录入，数据录入，顾名思义就是我们要用户去填写信息。那么输入框、选择框、单选框、时间选择等等，它们都是用户在填写信息的这样一个过程，那么此类组件就可以被划分为数据录入。这就是我们去划分的一个逻辑。接下来我给大家详细讲一下，每个分类底下究竟包括哪些组件？
1.通用
通用的意思是所有的页面都是可以用到的。而不仅仅是仅限于表单页，或者说仅限于商品列表页才能用到，既然所有的列表都能用到，所有的页面也都能用到，它包含的东西一定是最基础的一些东西，比如色彩、字体、间距、圆角、分割线、栅格、布局按钮等等。这些都是最基础的规范，被划为通用模块，细心的你可能会发现这个通用模块和我之前讲到的原子的模块是相同的，但是我们要知道的是，我们只能按照一个维度对其进行划分，否则容易产生组件混乱的问题，那么如果你遵循了上面那层按照大小对组件进行划分的原则的话，可以不需要再按照规范或者说按照功能对他进行划分。
2.导航
导航指的是一个页面的导航或者是一个功能模块的导航，那么导航的存在也是非常重要的。正如系统的可见性，一个好的导航应该能清晰明确的告诉用户，他现在处于什么样的位置，也能清晰的告诉用户他是从哪里来的，它的子级还有没有页面，怎样去返回上个页面，这都是我们在做导航中需要考虑的问题。那么所有的导航都可以划分到导航组件中，比如菜单，面包屑、分页、步骤条等等。无论是大的导航还是小的导航，他们都属于导航这样一个功能，所以它们都在导航的这样一个分类里。
3.数据录入
数据录入也就是我们需要让用户把所有的信息录入到表单中，或者是录入到任何一个页面中去。那么它包含的种类也就非常的丰富，比如输入框，选择框、单选框，多选框，时间选择，日期选择、开关、滑动、穿梭框、树形选择。我们可以发现用户去手动去书写的信息也罢，或者是用户进行选择的信息也罢，只要是用户传递出了一种信息，那么这种信息承载的组件，无论是什么样的形式去展现。都可以归为数据录入。那么数据录入的组件不仅仅包含以上所举的这些例子，所有用户去输入的信息都可以被列为数据录入。
4.数据展示
数据展示和数据录入不同，数据展示仅仅是展示某些数据，那么用户无法进行操作，但用户可以从数据展示上获得最新的信息以及获得数据的变化规律等等。数据展示，包括表格列表，标签，徽标日历，标签页，树形控件和可视化图表。与数据录入相反，凡是系统去传递给用户的信息，我们把它叫做数据展示，而数据录入是用户所传达给系统的信息。数据展示的形式多种多样，那么数据展示一般来说是实时的，或者说是定时更新的。数据展示，讲究一个时效性和重点性。
5.反馈
反馈是页面去反馈给用户的一种结果，它有可能是好的结果，也有可能是不好的，那么反馈，包括警告提示、抽屉、对话框、全局提示、通知、提醒框、进度条、气泡确认框。所有的反馈都遵循了一个理念，也就是我们所说的尼尔森交互原则中的系统的可见性，我们要让用户随时随地知道自己在做些什么，自己做的某些事情是否得到了反馈和结果，不能让用户盲目的去停留在某项操作中，也不能让用户停留在某个位置的页面中，所以我们不光要给予之前的这样一个导航，还需要给用户明确的反馈。无论是从大的方面还是从小的细节上都要做好反馈。
6.业务组件
业务组件很简单，也就是我们的业务所用到的组件。仅仅是此条产品线可以用到，换一个其他类型的产品，这条业务组件就不一定能用到了，所以如果说之前我们的5点都是一个产品中比较通用的一个模块，那么业务组件就是只针对我们此项业务进行划分的一些组件，例如看板、商品列表、会员卡等等。那么这些东西仅仅是在此条产品线上有用，也是针对我们业务的，所以说我们也要对它进行精细化处理，把这些组件单独的拎出来对他进行划分整理，以便下次能够调用。或者说我们在升级迭代的时候有了这样一个业务组件，也会比较方便地进行开发或者修改。
以上的内容就是我们对于B端组件的划分。通过以上的内容，我们可以更好地对公司的B端组件进行不同维度的划分，我们明确了不同组件所包含的功能，以及它的一个大小层级关系。那么也方便我们在设计中进行调用。
