编辑导语:建立构件库，提高原型设计能力，可以有效封装解决方案，提高设计效率，但是在绘制原型的过程中总是会出现很多问题，主要是产品经理没有构件库的思维。本文主要分享如何建立自己的组件库，从而提高原型设计能力。让我们一起学习。

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

这些问题主要是产品经理缺乏组件库思维造成的。本文分享如何构建自己的组件库来避免上述问题。

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

从物理上来说，产品就是由这些大大小小的组件组成的。

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

此外，我们可以通过使用组件库来积累更多的解决方案。比如我们在做竞争产品分析的时候，看到别人家的一个模块做的不错，我们可以直接通过prototype把这个模块画出来，放到自己的解决方案库中。以后我们做类似的功能模块，可以选择最好的一个。

通过将自己的方案与别人的方案进行对比，也可以分析出自己方案的优缺点，可以进一步提高设计能力。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、阿里巴巴、百度、腾讯、JD.COM、滴滴出行、美团、新浪、联想等大公司的产品。

官方网站:https://www.iviewui.com/

2)元素UI组件库

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

完整的组件，基本涵盖了后台需要的所有组件，详细的文档和丰富的例子。元素是一个高质量的Vue UI组件库。

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

3)Ant Design Vue UI组件库

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

不过相比较而言，蚂蚁设计Vue更胜一筹。Antvue共享React设计工具系统的Ant设计，实现React的Ant设计的所有组件，支持现代浏览器和IE9及以上版本(需要polyfills)。

熟悉Ant设计的人都很好用Vue。官网:https://vue component . github . io/ant-design-vue/docs/vue/introduce-cn/

4)ArcoDesgin

临近2021年底，字节跳动突然发布了两个企业级中后台设计系统，一个是ArcoDesgin，一个是SemiDesgin。ArcoDesgin团队描述，ArcoDesgin通过设计系统解决产品面临的体验问题，通过给定的设计原则指导商业问题的解决，同时也能促进设计团队和R&D团队的合作。

他们认为ArcoDesgin是务实和浪漫的，务实在于解决基本问题的设计体系，浪漫在于设计体系的开放性，这种开放性让浪漫的设计模式得以诞生。而ArcoDesgin在推出的时候，就已经具备了完善的能力，组件库只是其中之一。

可以看到，ArcoDesgin直接标记了蚂蚁设计，蚂蚁设计不再是国内唯一的设计体系。

官网:https://arco.design

t开始

腾讯TDesgin组件库2021年发布。

腾讯的TDesgin设计系统不仅包含企业级中后台组件库，基于腾讯广泛的业务能力，还引入了移动端和小程序端的组件库，并包含Figma、Sketch、Axure等常用设计资产。按照设计团队的描述，也是在从腾讯纷繁复杂的业务中寻找共性，提取通用的设计方案，为产品赋能。

R&D方面，支持行业主流以REAT/Vue/Angular/微信小程序/Flutter开发技术栈；多终端适配，提供桌面和移动两套风格统一的组件资源。

官方网站:https://tdesign.tencent.com

2。C端子

1)Vux UI组件库

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

Vux的组件涵盖了WeUI的所有内容，还扩展了一些常用的组件。示例:粘滞、时间线、垂直图表、XCircle。

Vux是个人维护的。但是GitHub上的星还是很高的，达到了13k。很快就能在GitHub上看到问题的解决。Vux文档的基本组件用法和效果已经解释到位。官网上也展示了vux的很多用例。在微信页面的开发中，基本没有太多的bug，开发相对容易。

官方网站:https://vux.li/

2)Vant UI组件库

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

Vantwiapp是Vant的小程序版本，是移动端的组件库。基于相同的可视化规范，Vantwiapp提供了一致的API接口，帮助开发者快速构建小程序应用。截至目前，Vant已经开放了50+个经过在线服务测试的组件。

例如:AddressEdit地址编辑、AddressList地址列表、地区省市选择、卡片卡片、联系人联系人、优惠券优惠券、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

使用组件库其实就是用模型思维来封装解决方案，从而提高设计效率，通过迭代来升级解决方案。每个产品经理都应该有自己的组件库。

网上有很多现成的组件库。我不建议直接用它们。如果直接用别人的组件，会缺少一些设计流程。我不知道为什么。我建议组件库一定要自己命名，那些你做的好，用的频繁的组件会被收录到你自己的组件库中。

当你看到一个别人做得很好的组件，自己再画一遍，然后放入你的组件库中，这样你在画原型的过程中就会去思考。如果自己再画一遍，会有很深的印象，以后可以更方便的找到，分享给别人。

祝大家早日摆脱人肉原型，早日升任高级产品经理。

本文由@刀哥原创发布。每个人都是产品经理。未经许可，禁止转载。

图片来自Unsplash，基于CC0协议。