B端组件库设计

组件可以让用户自然、有效地完成系统功能的使用，对于设计师来说掌握基础组件知识，能够快速的搭建出一套好看易用的产品页面；即时设计打卡挑战，利用「自动布局」「变体」功能做 5 个比较常用的组件，其中包含了数据录入、数据展示、布局、反馈等。

1.按钮

1）根据内容分为：「主要按钮」「次要按钮」「虚线按钮」「文本按钮」「图标按钮」，五个按钮分类。

2）根据尺寸大小分为：小、中、大三种尺寸。高度分别为28px/32px/36px。其中中等尺寸为系统默认尺寸。

3）根据交互状态分为：常规 default、悬停 hover、点击 active、加载中 loading 、禁用 disable 五种。

2.选择器

1）根据内容主要分为：「文本选择器」「标签选择器」。

2）根据尺寸大小分为：小、中、大三种尺寸。高度分别为28px/32px/36px。其中中等尺寸为系统默认尺寸。

3）根据交互状态分为：常规 default、悬停 hover、聚焦 focus、禁用 disable 四种。

3.下拉菜单

1）「下拉菜单」需要以最小颗粒度的组件单位，来通过「自动布局」功能来构建出不同类别的「下拉菜单」；因此按照需要确定的分类为：「常规下拉菜单」、「复选框下拉菜单」、「分组下拉菜单」。

2）根据交互状态分为：常规 default、悬停 hover、点击/选择 active/select、禁用 disable 四种。

4.通知提醒框

根据内容主要分为：「普通信息」「带图标信息」「带按钮信息」。

5.页头

对话框主要分为，「基础」「带有面包屑」「带按钮」。