制作Axure元件库

画原型图是一件费时的事，而且不同的产品经理所输出的原型图样式各异， 为了规范产品部输出的原型图，提原型图绘制的效率，专门制作了一套元件库供产品部门使用。也要感谢各位产品经理的支持！

为什么要制作Axure元件库？

Axure元件库能大大提高输出原型图的效率。在产品思路明确的情况下，利用元件库绘制原型图等同于堆积木一般，能大大提高工作效率。

其次，每个产品经理都有自己的习惯，所绘的原型图也各不相同。当然，这并不影响产品设计的输出。原型图的美观并不是原型图的核心要素，只要能把产品的流程、交互、功能等等表达清晰，在A4纸上手绘也不是不可。但是，我们部门要的就是优秀的一面，所有产品经理输出的原型图都是统一的、美观的，给其他部门同事看的时候不是更好吗！

制作前的准备工作

所制作的元件库用于PC端产品，那么需要了解PC端常见的数据输出方式、数据输入方式、反馈方式、导航方式。 从交互角度来讲，或者说从交互角度进行分类，所有的互联网产品应该都会有以上四类元素。只不过受硬件、操作系统和平台的影响，交互的形式会有一些差异性。

(当然，语音交互的产品可能会是一个特殊的例子。甚至，那种很神奇的，通过“意念”来完成某种交互的黑科技。)

元件库分组

将数据输出方式、数据输入方式、反馈方式、导航方式具体到PC端web的功能中，数据输出方式：信息展示；数据输入方式：表单、按钮、文本；反馈方式：操作反馈；导航方式：页面布局、导航。

导航方式。从布局结构上可分为顶部导航和侧导航；从功能上可分为步骤条、面包屑导航、Tab标签页、分页。

数据输入方式。主要涉及到的是表单控件和按钮。

数据输出方式。数据的输出体现在界面中信息内容的展示，元件内容也是比较多的。

反馈。反馈是基本交互中异常信息提示、重要信息提示的功能，也就是弹窗，具体还可分为模态和非模态两种状态。

(这套元件库中，我将每一个元件都单独拆开。将元件库导入到Axure中后，根据需求拖出要使用的元件即可。当然，这个是根据我们产品部的同事使用习惯来进行单独拆开的。)

(还有一种做法，将同一类别的元件集合到一起，在使用的时候直接拖出这一类元件，然后选择自己所需的元件，删除其他暂时不会用到的元件即可。)

元件库制作

关于元件库的制作，其实很简单，知道需要哪些元件时，就等同于用Axure在画界面。同时，还需要将一个功能画出多种状态，比如按钮，可点击是什么样式，禁用又是什么样式。