组建与组件库

什么是组件？组件是对数据和方法的简单封装。C++ Builder中，一个组件就是一个从TComponent派生出来的特定对象。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。VCL和CLX组件是C++ Builder系统的核心。

组件的概念在开发编程领域被广泛使用，随着开发与设计、策划、产品等其他岗位的密切沟通，为了统一沟通语言，设计、产品等岗位也在广泛的使用组件这一概念。与开发工程师们一样，设计行业也在普通运用组件库提升工作效率。凡事能够被经常重复使用的设计元素，都可以作为组件。

理解了组件的概念，组件库也就容易理解了。那什么是组件库呢？将大量重复使用的组件按照一定的规则或特征进行归类整理，就形成了我们常说的组件库。

为什么要搭建组件库

对于团队来讲，建立一套适合自己的组件库非常重要，也很有必要。组件库能够极大的提升团队内部的沟通效率，减少沟通成本，避免出现一些不必要的沟通问题。总的来说，统一的组件库具有以下几个优点：

1. 提升沟通效率，减少沟通成本
2. 提升工作效率，减少重复劳动
3. 统一设计风格，提升产品体验

如何建立组件库

01 组件分类

本文从产品经理、交互设计师的角度讲述如何搭建一套适合自己团队的组件库。当组件越来越多的时候，查找效率也会降低，所以建立组件库的第一步就是找到将组件分类的方法或规则。我们可以根据组件的使用场景、使用范围将组件进行合理的分类。如果，短时间内找不到合适的方法方法，我们也可以参照Ant Design，Element等国内大厂的组件分类方法。很多国内大厂也有一些开源的组件库可以供前端开发、UI设计师们免费试用。这些知名大厂开源的组件库都是一些通用的组件封装方法，并不是定适合所有的中小型项目，所以勤快的你，仍然有必要根据团队实际情况建立一套适合自己的组件库。

下面这张图是组件库的一个分类架构，仅供大家参考。

组件库的分类如下：

基础组件库：颜色、字体、按钮、图标、图片、头像

界面布局：设计尺寸、布局

导航：导航菜单、下拉菜单、面包屑、table标签页、分页器、步骤条、图钉、锚点定位、页头和页尾。

数据录入：各类输入框、单选框、复选框、各类型选择器、树、开关、上传、滑动输入条、评分、穿梭框、步进器、提及、自动完成、表单。

数据展示：标签、轮播图、时间轴、用户列表、徽标、表格、二维码、手风琴、评论列表、卡片、日历、空数据、描述列表、统计数值、列表、进度条、气泡卡片。

反馈说明：对话框、提示、警告、加载、消息、通知、抽屉、结果、异常、占位。

数据图表：柱状图、条形图、饼状图、环形图、折线图、面积图、漏斗图。

其它：回到顶部、搜索框、分割线、点赞、收藏、喜欢、分享。

02 组件命名

上一步我们做好了组件的分类，接下来我门就要为每一个组件命名，组件的命名我们同样可以参考Ant Design，Element这些开源组件库的命名方式。命名的时候，最好和开发岗位的同学一起商量，大家有一个统一的叫法，对于后续的沟通来说，也会很方便。

组件命名的时候建议中英文同时使用，开发的同学在工作当中习惯使用中文，产品、设计、测试等岗位的同学可能更习惯使用中文。所以，为了照顾尽可能多的团队成员，建议在使用中文名称的同时，增加英文名称。

03 设计规范

确立组件规范可以使得我们的产品设计具有统一的风格，便于后期维护，提升产品用户体验。制定设计规范可以从颜色、文字、尺寸等角度统筹考虑。

颜色规范：一个产品当中的颜色最好不超过3种，组件库的颜色规范也应该遵循这个规则。制定颜色规范的时候，需要确立1个主色调，2个辅助色。产品设计中尽量使用同一个色系中的其它颜色。

文字规范：制定文字规范的时候，我们需要从字体、字号、字色、字重、甚至饱和度几个角度考虑。不同类型的文字具有不同的文字大小、文字颜色，比如标题、正文、提示文字这三类文字的大小、颜色通常会不同。下面这张图是文字的设计规范，仅供各位参考。

尺寸规范：同一类组件应该遵循相同的设计尺寸，如按钮、icon图标、导航菜单都应该遵循统一的设计尺寸。避免出现相邻的两个按钮，一个尺寸大，一个尺寸小的情况。确定组件的设计尺寸应结合页面的尺寸而定，一般来讲移动端页面设计尺寸为375x667，设计移动端产品来说，又需要区分iOS系统和安卓系统，不同终端系统的组件设计以及尺寸规范是不同的。以下以iOS系统为例，说明移动端的设计尺寸。

状态栏 Status Ba

导航栏 Navigation Bar

搜索栏 Search Bar

标签栏 Tab Bar

提示框 Alerts

表格视图 Table View

行为区 Actions

分段控制器 Segment Controls

滑动球 Sliders

切换按钮 Switch

在讨论Web组件设计尺寸之前，我们先来看下Web端的网页设计尺寸，Web网页尺寸一般与屏幕设备的分辨率有关，目前主流的电脑屏幕分辨率为：

1920 x 1080：目前常用设备中最大的尺寸（Mac 5K屏除外）

1440 x 900：15寸MacBook Pro为代表，很多UI设计师首选

1366 x 768：普通的PC电脑

1280 x 800：13寸MacBook Pro为代表

1024 x 768：常用PC设备中最小的尺寸（陈旧的PC设备）

一般前端开发选择使用最小的分辨率进行开发，这样能够向上兼容主流的屏幕设备。由于网页两端需要保持一定的设计留白，所以Web网页内容的宽度一般为960,网页的设计高度则没有限制。在确定了Web网页的设计尺寸后，接下来我们来看看网页端的布局方案，不同的布局，对设计模块的尺寸要求也是不一样的。下图给出了网页端横向布局二等分、三等分、四等分、六等分的设计尺寸方案。

总结

组件库的搭建不是一蹴而就的，是一个长期积累的过程，也是一个动态变化的过程，需要结合团队、结合项目的实际情况，进行迭代调整。组件库的搭建不能单靠一个人的力量，需要利用团队的智慧，多方讨论后达成的一致方案，从而形成的共识方案。组件库的搭建虽然繁琐且工程浩大，但不可否则这件工作的价值，一套成熟的组件库势必会让我们的工作事半功倍。

对于怕麻烦的同学，作者将自己压箱底的组件库分享给大家：

PC组件库地址：

【Web组件库】高保真交互组件库 – AxureShop产品原型网

移动端组件库地址：

Axure RP移动端交互元件库/交互原型模板 – AxureShop产品原型网

福利：关注并转发后，私信关键字“福利”可获取免费的组件库（如下图所示）。

【Axure原型设计】专注分享Axure基础教程、交互案例以及经验技巧，并不定期赠送各种资源福利，包含：系统组件库、页面模板、实战案例等。