很久没有发表文章了，最近一直在研究产品设计标准的问题，之前有发过一篇关于Axure的教程，相信很多人已经学会如何使用，这次我给大家介绍一下如何利用Axure将视觉标准封装并使用。

交互设计师一般都是出线框图为最终产物，但是往往很多产品只需要利用现成的视觉标准就可以画出原型。为了减少流程、降低沟通成本，所以我建议交互设计师在做类似产品的时候能够直接利用现有视觉标准进行原型的搭建，一般很多交互设计师会用Photoshop来实现视觉原型，但是效率和不可交互性还是存在很多问题，所以需要有一套完成的封装来执行视觉标准并且产生可交互的高保真原型。

背景就不多说了，来讲讲Axure怎么使用视觉标准。这里用到最多的就是Axure里面的Masters的功能，（如果你还不清楚Axure如何使用，请点此查看教程）。

一、创建视觉零件库

1、把视觉标准中的元素进行提取。一般视觉标准的形式是以PSD、JPG、WORD等，你所要做的就是把每个元素单独保存成gif文件，最好背景是透明的，而且把元件上的文字都去掉保持可扩展性。分类可以按照自己需要来分，我是分为：Logo、icon、button、tab、table、flow。

图1-1 按钮的视觉标准

图1-2 视觉零件分类

2、在Axure里面的Masters功能区中新建一个文件夹，命名为“视觉零件”，在文件夹下面新建一个Master。

图1-3 新建Master

3、双击打开这个Master，在Widgets里面把图片组建拖动到中间的操作区域中，双击找到你已经保存好的gif文件，这样一个视觉零件就加到你的Axure里面了。

图1-4 将视觉组建放入Axure中

4、如果这个视觉零件本身需要文字元素，那么在Widgets里面把文字组件放到视觉零件上的相应位置，然后根据视觉标准调整文字样式。注意，因为Axure不支持中文，所以他的字体和html中的px是不同的，html中的12px字体在Axure里面要设置为9，14px的要设置为11，以此类推。

图1-5 增加文字元素

5、在Axure中Master可区分为可单独编辑和不可单独编辑，默认是不可单独编辑，也就是只要改动一个Master的样式，该Master在Page中所应用到的地方都会改变。因为这个是视觉零件，需要单独编辑，特别是在编辑文字的时候，所以右键点击Master列表中的零件，选择“Behavior”下的“Custom Widget”即可。你也可以将视觉零件Group一下，使其在page可以一起拖动，并仍然可以编辑。

图1-6 选择可单独编辑

5、保存并重复2~4的步骤，你可以完成所有视觉零件的转换。

图1-7 完成视觉零件的转换

二、结构库构建

有了视觉零件还不够，有时候我们更多倾向的是一块块现有结构的应用，类似于网站的头部和底部是可以直接调用不需要再设计的。类似于这类的结构，我们利用现有视觉零件进行搭建。方法和搭建视觉零件类似，只要新建一个文件夹然后新建Master，再把相应的视觉零件拖放到指定位置便可以完成。

这里要主要几点：1、要把一些基本交互要加到构建中，保证原型的可交互性（点此查看如何增加交互动作）；2、一般结构库的分类为：Layout、Menu、Flow、Information、Function，你也可以自行分类；3、结构组建是属于统一的内容，所以可以不需要转换成可单独编辑的模式，也可以根据个人需要自行转换。

图2-1 结构模板列表

图2-2 结构模板实例

三、视觉标准的更新

要记住一点：不断更新。要定期把新的视觉组建加入到Axure中。

完成一、二两大步骤其实你已经可以开始工作了，每次使用这套封装的组件时你只需要导入你的组件文件，并选择第二项“Masters”，以及Check All所有组建，点击确定完成就可以直接使用了。

怎么样？是不是觉得线框图不再是简单丑陋、而且不再需要为沟通而烦恼了（特别是有些没有视觉头脑的需求方在看到简单线框图的时候会一脸凝重地和你沟通）

图3-1 利用Axure搭建的高保真原型

PS：有些交互设计师会对一些布局细节担忧，害怕自己会一直调整对齐和细节。记住，我们出的是可交互的原型，不是最终产品，不需要考虑太多的视觉细节，这些会由前端开发去进行标准的把控。