概述

1. 绘制一个注册界面

2. 点击 Verify Now，按钮进入倒计时状态

3. 进入下一步前判断输入合法性，如果不合法则给出提示

主要知识点有：

• Axure基础部件的使用
• 动态面板创建也使用
• 页面交互的使用
• 在页面交互中使用条件判断

1. 创建一个APP框图

创建框图可以用Axure自带的部件组合，也可以利用现成的框架。Axure官网有付费的部件下载，网上也有不少现成的部件可以下载。
这里就是利用了一个现成的框架作为APP的款图。

Axure提供的基础部件比较全面，可以根据需求在部件库里面选择所需的部件。

基础部件的组合可以满足绝大多数原型设计的需求了。当然网上也有很多已经制作好的部件可供使用。
从外部获得的部件，在 Widget(All Libraries)里面Load Library 进来就可以了。

2. 绘制手机号码和验证码输入框

1. 用基础部件组成输入框

• 标题用的是部件Label
• 输入框用的是部件Text Field

2. 设置输入框的提示文字

• 在 Hint Text 输入提示文字
• 在 Hint Style 把文字样式修改成灰色

3. 设置输入框文字长度

• 设置Max Length为11,电话号码输入不能超过11位

3. 绘制发送短信验证码按钮

1. 绘制按钮
按钮用的是部件 Button Shape

Button Shape 可以根据自己的需要改变成不同的按钮形状。

Axure还提供了修改部件样式的功能，可以设置部件线条，填充颜色，修改字体等。

2. 把按钮转成动态面板
把按钮转换成动态面板。

转换成动态面板后，可以在动态面板管理界面看到新增的动态面板。

动态面板是Axure原型制作中使用非常频繁的一个元件，主要用途就是实现一些动态的交互效果。可以让一个部件拥有不同的状态，通过不同的触发条件可以实现一个部件在各个状态之间切换。

3. 为按钮设置多个状态
双击动态面板进入状态模板设置界面。

• 编辑动态面板，修改动态面板的名字。
• 为动态面板增加5个状态并修改名字，分别为Verify Code，60s，40s，20s，0s。

4. 绘制按钮的每个状态
进入Verify Code状态，可以看到这个状态下按钮的状态。

进入60s状态，从Verify Code状态复制按钮过来。并把文字改成60s。

根据以上方法，依次设置40s，20s，0s。

5. 让按钮在各个状态下切换
1) 选择鼠标点击按钮的触发条件
在部件交互和通告界面选择动作的触发条件。这里选择OnClick触发动作，表示通过鼠标点击按钮条件来触发动作。

可以为部件设置的动作很多，可以根据字面意思猜测出能够执行的动作。

2) 设置鼠标点击按钮的动作
双击进入动作执行设计界面，依次选择：

• Set Panel State
• Set Verify Code Button state to

• Select the State选择60s
  表示鼠标点击后，动态面板状态从Verify Code切换到60s这个状态。也就是说，按钮点击后进入60s倒计时阶段。

  
  

3) 设置倒计时动作
进入OnPanelStateChange动作设置界面，选择Add Condition增加一个判断条件。
设置状态切换的动作的条件。增加一个条件，依次设置如下：

• State of panel
• Verify Code Button
• does not equals
• state
• Verify Code。
  意思为当Vrefiy Code Button这个部件的状态不等于Verify Code时，执行动作。也就是部件状态为Verify Code时即停止执行动作。

设置延时执行动作，依次设置：

• Wait
• Wati time设置为1000ms。
  设置延时1000ms执行动作。
  

依次设置其他状态的变更。

3. 绘制下一步按钮

1. 增加一个按钮Next

2. 设置按钮动作

我们在Next动作执行前，增加一个判断电话号码是否正确的判断。

• 增加电话号码输入错误提示

增加一个动态面板位于电话号码输入框下方。

编辑错误消息状态。设置状态Error message，增加一个Label设置为“请输入正确的电话号码”。把Error message的Hidden*勾上，一开始没错误时设置为隐藏的不需要显示出来。

• 电话号码合法性判断

简单把电话号码是否合法限定为: * 13000000000 <= 电话号码 < 20000000000 *

设置Next按钮OnClick动作，为动作增加两个条件:
if text on Phone Text Field is less than "13000000000"
or text on Phone Text Field is greater than or equals "20000000000"
即如果电话号码不满足合法性判断时执行动作。

Phone Text Field 是电话号码输入框的名称，这个是用户自己设置的。为部件命名是一个很好的习惯，当页面组件很多的时候可以快速找到需要的部件。

设置OnClick执行动作。依次设置：

• Show/Hide
• Phone Error Message
• 选择 show
  输入错误时，把Phone Error Message 显示出来

• 执行Next按钮动作
  为Next按钮的OnClick动作在增加一个Case为Case2。依次选择：
• Open Link
• Open in Current Window
• 选择 Password界面，进入下一个界面
  即点击按钮后在原窗口打开Password界面。

Axure可以为动作增加多个Case。默认情况下不同的Case之间是 “ IF Case 1 Else if Case 2 .... Else if Case n ”的关系，Axure先判断Case 1，满足就执行Case 1，不满足继续判断Case 2，以此类推。
也可以修改Case之间的关系。

修改后就变成了 “ IF Case 1 If Case 2 .... If Case n ”的关系了。

Axure实现APP注册(1)-验证手机页面
Axure实现APP注册(2)-设置密码页面
Axure实现APP注册(3)-欢迎页面

2015-05-13
深圳