UI设计这么使用Axure

之前还是一个用ps作图的设计狮，PS设计稿+标注稿（标注+交互） 这已是浓缩了。这样的结果是规整好多的图片文件（虽然把好几个页面放一个ps文档里做，但为保证文件操作时的运行速度，有所限制）。设计稿要发给多个同事，修改调整后得更新一遍，版本文件多了同事也容易乱，不能保证他们会花心思管理设计稿。感觉做设计还是有很多繁琐的工作嘛？

 

用axure，感觉整个设计流程会简单点，大家都说一款设计软件表现一种设计思维、工作方式，再说我也较懒，简单好。

当然这基于我目前的工作，不敢说适合每个人，欢迎不同的想法予以交流，先行拜谢。

（本人工作于旅游电商平台，pc手机页面都有，页面更讲究排版，固定的视觉元素）

                                               

自定义元件制图

将视觉元素做成元件，所需要用到的控件、文字、边框都写好样式做成axure元件，常用图标（字体图标）做成元件，颜色、大小设置好（设成最常用的那种样式即可）。然后设计界面时只需拖出来，个别再调整，不用反复设置样式。如把弹框制成元件，使用时拖入界面，或修改文字、或改变框的大小、或增加删减按钮等。我目前工作建立了三个元件库：pc样式、H5样式、字体图标。

 

当然在使用元件的过程中也会觉得某些地方可以更好一些：

Axure默认自带的输入框、单多选控件等元件，无法修改边框、大小等样式。当然可以用其他默认控件和交互模拟出来，但发现实际工作中这些控件的交互效果必要性不强（不需要很真实的模拟用以演示），而且添加交互后的标记挺碍眼。所以，仅模拟所需控件的样式制成元件即可。

网上有很多元件库可下载，当时冲新鲜也下了，着实没用。很多图标用不着且占空间，图标不一定适合平台标准和统一感。所以极力推荐自己做图标元件库，找个生成图标字体的平台，挺方便的，如Iconfont。

 

直接明了地标注

Axure提供多种标注方式，可惜我都没用，我比较喜欢直接的写交互说明在旁边，前端也更方便看。

 

可分为视觉样式标注和交互说明标注。配合《视觉规范文档》不做视觉样式标注或部分标注（取决于前端对平台样式的熟悉度吧）。由于输出的是HTML形式，尺寸、颜色也可以通过浏览器插件识别或页面代码查看（特别提示：除字体外其他页面元素都以图片形式生成，无法通过代码查看具体样式）。另一种方法是从axure导出效果图在标注软件中快速标注。

 

交互

交互是axure很强大的点，可以做比较复杂的效果，操作逻辑相似于代码的编写逻辑，所以对没接触过代码的设计狮就不太友善了。 一般用于演示、个别地方的交互效果展示。不建议直接用于效果图，容易被开发人员遗漏。我平时工作也很少用到这模块，就不往下装逼了。

 

发布HTML用以团队协作

网页稿件的好处是可以发布成网站，通过网址查看，更新及时生效。

一、在本地搭建IIS服务器（方法网上找，多如米），axure发布稿件的时候保存到相应路径，为方便管理，自制一个目录页面（需会点简单的HTNL代码或让同事帮忙下）。

 

但是本地的服务器，关了电脑后别人就访问不了，所以

二、将本地的文件上传到公司内部服务器吧，请代码哥哥给你开个地址和账号，用ftp上传工具将文件夹传到指定目录就OK了。

慢慢的就形成一种规律：本地站点的原型用于与产品、设计之间的交流，确定执行后上传到公司服务器，提供服务器地址给程序员。不建议发布到外网，因为要保密点。

 

手机演示

最后，谈谈在手机上的演示，初尝试后，感觉并不实用，没特别需求就省去这个吧。

1.由于稿件频繁改动，要维护分开的设计稿和演示稿的话……（好吧，我又懒了）

2.交互效果修改起来略不方便。

3.很多情况其实没必要演示，个人觉得团队还没发展到一定程度又没有明确这方面需求的，果断省略它。（部分在交互说明那标注即可）

虽然觉得axure上做演示不太实用，偶尔用用还是可以的，不过有个方面要注意下：axure画出来的页面无法自适应手机分辨率（这还怎么演示嘛）。起初猜想是导出时设置的原因，认真尝试了手机演示相关的设置项，也查找了相关的设置介绍，还是行不通。偶然用了ps做的图片放入axure后发现这是可以自适应的，然后继续做了些尝试，比如在axure上画界面的时候，用一张空白的图片作为背景，或将设计稿的头部固定部分用图片形式，结果……恩，是OK的。