组件库怎么搭?看完你就会了,文末还有福利送

组建与组件库

什么是组件?组件是对数据和方法的简单封装。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组件库】高保真交互组件库

移动端组件:移动端交互元件库/页面模板



福利:关注并转发后,私信关键字“福利”可获取免费的组件库(如下图所示)。

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

推荐阅读更多精彩内容