利用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的步骤，你可以完成所有视觉零件的转换。