Axure RP-产品原型设计工具使用

官网：https://www.axure.com.cn

license可以在下面地址获取

http://www.cnblogs.com/zsy/p/6113614.html

今天就用axure一步步教大家做出一个简单的仿土豆网注册的页面，该页面效果图如下：

1：下载安装axure，由于安装过程简单，我就不赘述了；

2：打开axure，重命名相关页面：

3：双击节点“注册页面”，进入到注册页面的编辑界面，拖拽两个占位符到右边的编辑区，分别表示页头和页尾，然后拖一个矩形到中间，表示我们的注册表单区：

4：利用文本面板和文本框表示文字和输入框，文字大小样式可以在工具栏编辑，效果如下：

5：增加链接文字，将线框图中的超链接拖到编辑区，输入相关文字后在右边的部件属性框中双击Onclick事件，弹出事件编辑框，由于我们希望点击“注册一个吧”后，重新打开一个页面（邮箱注册页面），第一步描述用例，名称可以随便取，第二步添加动作，我们选择在新窗口/新标签页中打开链接，第三步组织动作，我们单击一下新增的用例，然后第四步配置动作，我们选择链接的页面邮箱注册页面，确定即可：

6.由于验证信息初始化的时候是隐藏的，所以我们需要对那些红色的提示文字进行编辑，右键红色文字，然后转换为动态面板，并且给它命名，用于标识这个控件，最后右键它，设置隐藏：

7：将email输入框获取焦点时清空里面的提示文字，首先点击输入框，给它起个名字text_email，然后在右边的事件框中双击OnFocus事件，第二步选择“设置变量/部件值”，第四步中打开设置编辑器，设置如下：

8：将email输入框跟验证信息进行动态绑定，我们的思路是这样的，当email输入框失去焦点时，如果里面的内容是空的，我们就显示红色的验证文字，然后如果用户输入了相关信息我们就因此验证文字。首先单击email输入框，在右边的事件编辑框中双击OnLostFocus，第二步添加动作中选择显示动态面板，第四步中选择要显示的动态面板check_email，此时需要添加条件（输入框内容为空我们才能显示这个验证的动态面板），条件设置如图所示：

然后我们再来编辑onkeyup事件，如果输入内容不为空我们就隐藏验证信息，双击右边的onkeyup事件，第二步添加动作选择隐藏动态面板，第四步中选择我们需要隐藏的面板名称check_email，同样添加条件，设置如下：

9：按照同样的方式配置其他的输入框和文字信息，其中验证码图片用的是图像部件，然后还用到了复选框和按钮，最终效果如下：

10：再在右方添加一个图片：

11：界面基本完成了，下面我们来导出html页面看看效果，点击工具栏中的生成-》原型，基本按照默认生成就行了，最终页面打开效果如下：

今天由于是第一次处女课，所以内容非常简单，也不知道合不合大家的胃口，如果感兴趣的同学很多的话，我们后续将会给大家介绍如何用axure制作一些功能更加丰富的页面，如tab页、时间框、图片轮换、流程图、树形控件等等。