如何搭建组件库，提升原型设计能力？

刀哥 2023-08-03 16:55:21

画原型，是产品经理日常重要的工作之一，我发现很多产品经理在画原型的时候，会出现以下下问题：

每次做新项目的时候，原型所有组件、页面、模块都是从0到1，用最基础的组件进行组合，很费时间不说，画出来的原型还很丑；
没有迭代的思维，这次画了以后，下次再画又是相同的思路再画一遍，没有积累经验，没有积累更多的方案；
长期沦为人肉原型机，沉迷于原型无法自拔，产品底层能力无法得到提升，始终无法晋升为高级产品经理。

出现这些问题，主要是产品经理没有组件库的思维。这篇文章，分享如何搭建自己的组件库，避免出现以上问题。

一、组件库

组件库是由组件组成的一系列现成解决方案，组件有大有小，最小的组件是按钮、文字、图片、输入框等，这些组件通过组合形成组件块，再组合成页面，页面再组合成模块。

从物理层面来说，产品正是由这些大大小小的组件组成。

使用组件库，可以提升我们画原型的效率，比如，C端产品，都有登录注册的模块，B端产品都有用户角色权限模块，如果有现场的组件库，画原型的时候，直接从组件库里拖出来就可以了，省去了再去利用基础组件画原型的时间。

除此之外，使用组件库，还可以积累更多的方案，比如平时我们在做竞品分析的时候，看到别人家的某个模块做得好，可以直接把这个模块通过原型画出来，放在自己的方案库，以后再做类似的功能模块时，则可以择优而选。

通过自己方案和别人方案的对比，还可以分析出自己方案的优缺点，能进一步提升设计能力。C端产品千人千面，而B端产品组件相对比较统一，不会有太大的改变，C端产品的组件库可以通过产品分析来不断积累，B端产品组件库可以去参考一些开源的前端框架。

二、常见的前端框架

每个前端框架，都有标准的设计规范和详细的组件使用说明，阅读这些组件说明，可以丰富自己的方案库，提升原型设计能力。

常用的组件，B端有大厂的组件如字节跳动的ArcoDesgin，腾讯的TDesign，还有使用频率比较高的Element、iView，移动端有Vux、Vant、Muse等。管理后台可选的框架不多，界面组件差异也不大，将前端使用的框架组件，画成一个个标准组件，就可以快速构建原型。

列举几个常用的框架，有兴趣可以去看一下。

1. B端

1）iView UI组件库

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品，组件齐全、更新很快、文档详细。有公司团队维护，是比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。

官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。

官网：https://www.iviewui.com/

2）Element UI组件库

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0的桌面端组件库。由饿了么前端开源维护，更新频率很高，基本一周到半个月都会发布一个新版本。

组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。Element是一个质量比较高的Vue UI组件库。

官网：http://element.eleme.io/#/zh-CN

3）Ant Design Vue UI组件库

Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。

不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。

熟悉Ant Design的在使用Vue时很容易上手。官网：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

4）ArcoDesgin

接近2021年年末，字节跳动一下子发布了两款企业级中后台设计体系，一个是ArcoDesgin，另一个是SemiDesgin。ArcoDesgin团队描述，ArcoDesgin通过设计系统去解决产品面临的体验问题，以及通过给出的设计原则，来指导解决业务问题，并且它还可以促进设计团队与研发团队的协作。

他们认为ArcoDesgin是务实而又浪漫的，务实在于设计体系解决基础问题，浪漫在于设计体系具备开放性，允许浪漫的设计模式诞生。并且ArcoDesgin一推出时，就具备了非常完善的能力，组件库只是其中之一。

可见，ArcoDesgin直接对标Ant Design，设计体系在中国不再只有Ant Design一家。

官网：https://arco.design

5）TDesgin

2021年腾讯TDesgin组件库发布。

腾讯TDesgin设计体系不仅包括了企业级中后台组件库，基于腾讯广泛的业务能力，同时还推出了移动端、小程序端的组件库，并且包含了Figma、Sketch、Axure等常用的设计资产。按照设计团队的描述，其也是从腾讯繁杂的业务中寻找共性，抽取出普适的通用设计解决方案，为产品赋能。

在研发侧支持业界主流的 React/Vue/Angular/微信小程序/Flutter 开发技术栈；多端适配，提供桌面端和移动端两套风格统一的组件资源。

官网：https://tdesign.tencent.com

2. C端

1）Vux UI组件库

Vux是基于WeUI和Vue2.x开发的移动端UI组件库，主要服务于微信页面。Vux的定位很明确，一是Vue移动端UI组件库，二是WeUI的基础样式库。

Vux的组件涵盖了所有的WeUI的内容，还扩展了一些常用的组件。比如：Sticky、timeline、v-chart、XCircle。

Vux是个人维护的。但是GitHub上star还是很高达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux文档基本的组件用法和效果都讲解到位了。在vux官网上也展示了很多Vux的使用案例。在微信页面开发中，基本没有太多的bug，开发比较顺手。

官网：https://vux.li/

2）Vant UI组件库

Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的，主要维护也是有赞团队。

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。截止到目前，Vant已经开源了50+ 个经过有赞线上业务检验的组件。

比如：AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城，不太在意界面，实现业务逻辑的话，用Vant组件库开发还是很快的。

官网：https://youzan.github.io/vant/#/zh-CN/intro

3）cube-ui UI组件库

cube-ui 是基于 Vue.js 实现的精致移动端组件库。

由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。在交互体验方面追求极致。遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。

支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

官网：https://didi.github.io/cube-ui/#/zh-CN