AXure之向导型表单设计

   一、登陆注册进度条

 （1）在画布中拖入一个动态面板，双击它，设置动态面板名称为登陆指导，面板状态将state1改为注册进度（如图1），然后双击该面板，点击“注册进度”，进入到该面板的具体操作界面；

图1

（2）从左侧元件库中拖一个椭圆到面板，在右方的样式处设置其高度、宽度都为20，并设置填充色为红色，输入数字1（如图2），并命名为椭圆1（编号方便后续操作），再拖入一个文本标签，双击它重输入为设置登陆名（如图3）；

图2

图3

（3）选中椭圆和文本标签，按下ctrl+D，可快速复制，复制出三个，分别是填写账号信息，设置支付方式，注册成功，将后三个文本框文字设为灰色，序号填充色也为灰色（如图4）

图4

（4）添加一条长水平线，四条短水平线。四条短水平线填充为红色，除第一条外，其他的先设为隐藏（如图5）。并分别对四个椭圆ctrl + D，除序号1的复制对象填充为灰色外，其他三个均填充为红色，置于对应序号的同一位置，设其为隐藏状态（如图6），为便于识别可将椭圆按其序号进行重命名，并带上颜色标志，例如椭圆1_grey,椭圆1_red.

图5

图6

二、登陆主面板

（1）在向导表单画布中，再次拖入一个动态面板，置于登陆指导动态画板的正下方，命名为表单内容（如图7）。

图7

（2）、在表单内容动态面板内双击鼠标，弹出一个对话框，添加该动态面板的四个状态，分别为设置登录名，填写账户信息，设置支付方式，注册成功（如图8）。

图8

（3）双击“表单内容”动态面板，点击“设置登录名”，来到“设置登陆名”状态的面板，往里面添加文本标签，下拉列表框，矩形框，按钮button，布局如图9所示。下拉列表框操作很简单，不详说，我重点叙述一下手机号码矩形框如何实现文字提示及输入手机号时提示消失功能，以及进度条滑动功能。

图9

首先选中手机号码输入框矩形，在右边的属性中选择类型为phone number,提示文字输入“手机号码”，隐藏提示触发选择为获取焦点，长度设为11.

图10

     然后上拉菜单，来到“交互”，双击“获取焦点时”，选择“设置选中”，选中刚刚对应的手机号码输入矩形框；再回到交互的“失去焦点时”，选择“取消选中”，选中刚刚对应的手机号码输入矩形框。就可实现往矩形框中输入数字时，提示文字消失，矩形框高亮显示的功能。

图11

图12

（4）进度条滑动

    将用于滑动的进度条矩形框设置为动态面板，宽度为330，高度为30，命名为滑动块，点击state1状态，进入新界面，在新界面中添加一个宽度为300，高度为30的滑动条，填充为蓝色，再拖入一个宽30，高30的矩形框，输入“>>”符号，将其与滑动条组合在一起，设为动态面板，命名为“滑动进度条”，拖到最左边，只露出有“>>”符号的矩形框，如图13所示，

图13

选中滑动进度条，在交互界面，选择“拖动时”，双击，选择移动，水平拖动，添加界限，如下所示

图14

（5）设置“下一步”按钮的触发事件

点击下一步时达到，椭圆1成灰色，设置登陆名为灰色，椭圆2填充为红色，填写账户信息为黑色，椭圆2下面的红色水平线显示，椭圆1下面的红色水平线隐藏，表单为填写账户信息的内容。

图15

最终效果展示：http://6gl1az.axshare.com