1.1 Axure基础知识

 

1.1.1 Axure常用部件

Axure常用部件有common（默认）、Forms（表单）、Flow（流程图）这三类。

 

 

 

1.1.2.添加元件到画布

左侧元件库中选择要使用的元件，按住鼠标左键不放，拖动到画布适合的位置上松开。

Axure RP8自带了3个元件库，分别时默认元件库（Icons）、流程图元件库（Flow）和默认元件库（Default）。

流程图形状含义表1

矩形：一般用来表示执行	梯形：表示手动操作
圆角矩形：表示程序的开始或结束	椭圆形：表示流程的结束
斜角矩形：不常用，可以自定义	六边形：表示准备或起始
菱形：表示判断	平行四边形：表示数据的处理或输入
文件：表示一个文件	角色：模拟流程中执行操作的角色是谁
括弧：注释或说明	数据库：保存的数据的数据库
半圆形：表示页面跳转的标记	页面快照：引用项目内某一页面的缩略图
三角形：数据的传递	图片：表示一张图片

1.1.3.给文本框添加文字

文本框添加说明文字

 

 

 

效果展示：

 

 

 

1.1.4动态面板

 

添加动态面板，在蓝色区域内的内容能全部显示，超出显示区域的内容没有显示出来。解决办法是：选中动态面板，通过拖曳的方式调整动态面板的大小，让内容完全显示出来。也可以通过修改面板的宽度和高度值调整动态面板的大小。

 

 

 

注意：

 

需要先将动态面板设置为隐藏。

1.1.5 文件自动备份与找回

 

 

 

Axcure自动启用备份，默认备份间隔是15分钟。可以设置备份间隔，或关闭自动启用备份功能。如果启用了自动备份，当出现意外情况导致文件未保存或丢失时，可以选择【从备份中恢复...】，选择最近备份的文件重新打开。

1.1.6文件的导入

场景：上一次文件的修改，需要合并到新文件中。

菜单：文件->从RP文件中导入

 

 

 

注意：

如果导入的文件中文件名称与原有文件名称一致，导入后会替代掉原文件，因此需要在导入之前修改要导入的文件名称，导入之后再将文件名改回。

 

 

 

1.1.7原型发布

一种方法是使用浏览器插件发布。

 

 

 

插件一般下不下来，可以自行网络搜索，网上资源比较多。

 

另一种方法，先注册，登录，选择发布，发布时选择绘制的页面

 

 

 

 

 

发布完成，生成共享连接https://cf0uvn.axshare.com，记住密码。

 

 

 

 

 

复制链接后，通过浏览器访问链接，查看原型图。

 

1.2 项目Axure设计

1.2.1线框图设计项目

上半年由于项目组中设计人员的速度赶不上开发的速度，有机会去软件设计组协助做设计工作。主要负责软件详细设计说明书的编写，依据需要绘制原型图。

设计组的主要工作除了编写设计文档以外，还需要在原系统的基础上，理清业务逻辑，并在详细设计说明书上给出具体的说明，包括流程转换、状态改变、点击按钮时页面提示、校验等等。我们主要依照原系统编写详细设计，如果涉及到需求变动模块，除了需要跟用户沟通确认（这20%的工作交给需求组同学就妥妥了）外，还需要绘制原型图。

    为第一个模块绘制原型图，用Axure工具。

 

 

 

这是基本的线框图。由于项目经理没有要求做这个，组长传递的信息有缺失，线框图没有继续优化。面对需求迭代频繁的情况，目前的项目组采用传统开发形式，个人觉得，如果采用原型图开发方式会更好些。

 

1.2.2原型图设计项目

第二个项目有需求变更，我们先绘制线框图，再优化成低保真原型图。

 

Axure是容易上手的，一周基本可以使用得炉火纯青了。当然有些技巧需要掌握，比如巧用动态面板（比如弹出框）、链接可以用蓝色标识、文本框添加说明文字。这个项目的设计稿既有原型，又有详细设计，其间修改了多版。这个项目的痛点在统计模块，最初评审会上提出该统计模块需求未确定。UI设计组的美工提出了专业建议，可将设计为两个页签，统计和比较。从原系统上抠的图分辨率与原型图不相符，后期了解到，统计和比较页上的UI图可以由UI组提供设计的。

历经一个月，这一模块详细设计和原型图的初稿形成。

 

1.2.3设计文档编写项目

第三个项目是辅助写设计文档。由设计同学画完原型图后，我来写详细设计，写详细设计过程中遇到的问题是流程不清楚。我们经过对照系统的BPM流程管理工具，翻译源代码，转化为流程描述。在详细设计编写过程中，同时优化原型。

 

1.2.4小结

通过这篇文章，和大家分享设计实战的心得。设计与测试的共通点就是需要反复地做件事，因此同样需要耐心和细心。掌握了Axure设计，了解设计原理，将需求转换为原型图和设计文档，会高效地帮助开发展现需求。