打造高品质Axure组件库，就是这么简单！

提高效率是节约时间成本的唯一途径，产品组件库地打造可以有效的帮助我们解决一部分问题。

为什么要建立组件库？

减少重复性工作，让产品整体风格更统一，提高原型效率。

组件概念由来已久，我们生活中的许多事物都应用了组件/模块的概念。如乐高积木的概念，基础小积木的多次组合，构建出完全不一样的整体。不管是产品、设计、开发，在我们的工作中，如果合理运用了“组件库”我们的工作将会事半功倍。

基础元件

最终组合

最终效果：

实施目标

那只针对产品而言，如何构建一套适合产品设计的组件库呢？本文通过web前端的组件打造的实际案例向各位介绍如何进行“组件库”的搭建。

我们起初都会有很多计划，立很多Flag，真正能做到的确是少之又少，如何保证自己的执行力，是我们收获成功的重要手段。

不妨将产品常用的项目管理职能运用到本次的组件制作中，推动本次Web端的组件构建。

具体实施 1. 组件结构打造——基础夯实

根据目标导向对6大模块进行结构，细分如下：

2. 组件框架构建——外壳确定

确定好细分结构内容后，可以开始着手制作组件的框架，用以展示组件方便查看与制作，我会根据以下几方面着重考虑 。

（1）适用性

浏览的适用性：支持笔记本1366*768、大屏1920*1080的显示屏浏览。

结构的适用性：此结构具有通用性，不仅满足本组件的展示，作为一个展示类的框架可以适用于很多场景，如：简单官网的展示、文章浏览的展示。如果大家需要构建自己的组件，也可以活用此框架来构建自己全新的组件库。

（2）便捷性

好的交互组件除了其内容，更主要的其易用便捷性，故此才有了此组件框架的构建，目的就是为了可以更加便捷的查看与查找，我按照大模块进行了频道切换，各自细节拆分的板块也能看进行快速的切换查看。

这样整体的交互切换就十分便捷，能够快速的找到对应的板块进行效果查看进行复制使用。为了更加方便的使用，后期迭代版本2.0正在考虑rplib的组件格式的整理输出，更加方便大家的使用。

（3）拓展性

除了能够适用于此六大模块内容的展示外，如有新的模块加入也能够很好的拓展其内容，我在框架里加入了模块这一频道，为的就是后期的迭代版本拥有更多的可能性，拓展一些常用的流程性组件，如：登入/注册、支付、设置、发布、列表流等常用组件流。

3. 组件设计规范——筋脉打通

确定好了组件框架，接下来就是内容的整合制作，在制作过程前可以优先确立设计的规范，这有助于我们统一各组件页面的风格，让整体组件更具品牌性。

（1）设计规范——色彩定调

定义色彩：确定主色、辅助色、点缀色、背景色。

字体颜色：深、中、浅。

如有需要还可以设定暗色模式的色彩风格，现在mac新系统的暗色模式十分流行，大家也可以尝试一下，我这边为了通用性，在设计颜色时就已经考虑到了暗色模式，字体颜色做了一些修改，主色、辅助色、点缀色可以兼容。

（2）设计规范——字体大小

在设计规范中，字体大小也是不能忽视的，大小的定义可以区分信息，让内容排版更有层级，提高组件整体的可阅读性。

（3）设计规范——元素定义