第3章　直言不讳

3.1　网站注册界面

案例描述

在注册页面输入“用户名”“密码”“手机号”，单击“立即注册”按钮，弹出注册成功信息，如图3-1所示。

思路分析

• ▷　使用“文本标签”“文本框”“按钮”元件，设置“密码文本框”类型为“密码”。
• ▷　为“立即注册”按钮添加“鼠标单击时”事件，当用户名为connie，密码为12345678时，登录成功。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在“元件库”面板中将“动态面板”元件拖入编辑区中，在工具栏中设置x为50，y为45，“宽度”为350，“高度”为340，在右侧“检视：动态面板”区域设置名称为register，如图3-2所示。

（3）双击“动态面板”元件，弹出“面板状态管理”对话框，在“面板状态”选项组中单击“添加”按钮添加状态，并设置名称分别为“填写信息”和“注册成功”，如图3-3所示。

（4）双击“填写信息”状态，进入“register/填写信息（index）”编辑区，在“元件库”面板中将“矩形2”元件拖入编辑区中，在工具栏中设置“宽度”为350，“高度”为340，在右侧单击“样式”标签切换至“样式”面板，设置“圆角半径”为8，如图3-4所示。

（5）在“元件库”面板中将“文本标签”元件拖入编辑区中，双击并输入“注册”，在工具栏中设置x为155，y为40，如图3-5所示。

（6）在“元件库”面板中将“矩形3”元件拖入编辑区中，在工具栏中设置x为155，y为66，“宽度”为42，“高度”为4，设置“填充颜色”为橙色（#FF9900），如图3-6所示。

（7）用同样的方式分别拖入3个“文本标签”元件和3个“文本框”元件，将其放在编辑区适当的位置，在右侧“检视：文本框”区域设置3个文本框名称分别为user、password、telephone，如图3-7所示。

（8）选择“password文本框”元件，在右侧“属性”面板的“文本框”区域设置“类型”为“密码”，如图3-8所示。

（9）在“元件库”面板中将“主要按钮”元件拖入编辑区中，双击输入“立即注册”，在工具栏中设置x为105，y为250，“宽度”为205，“高度”为40，设置“填充颜色”为橙色（#FF9900），如图3-9所示。

（10）选择“矩形”元件，按Ctrl+C快捷键进行复制，单击index标签进入index编辑区，双击“动态面板”元件，在弹出的“面板状态管理”对话框中双击“注册成功”选项，进入“register/注册成功（index）”编辑区，按Ctrl+V快捷键粘贴复制的元件，如图3-10所示。

（11）双击“矩形”元件，输入“您已注册成功！”，选择“矩形”元件，在工具栏中设置“字体尺寸”为16，如图3-11所示。

（12）单击“register/填写信息（index）”标签，进入“register/填写信息（index）”编辑区，选择“按钮”元件，在右侧“属性”面板中选择“鼠标单击时”事件，弹出“用例编辑<鼠标单击时>”对话框，单击“添加条件”按钮，弹出“条件设立”对话框，设立user不等于空，password不等于空，tel不等于空，如图3-12所示。单击“确定”按钮，返回至“用例编辑<鼠标单击时>”对话框。

（13）在左侧“添加动作”区域选择“设置面板状态”选项，在右侧“配置动作”区域选中“register（动态面板）”复选框，在下方设置“选择状态”为“注册成功”，如图3-13所示。单击“确定”按钮，返回至“register/填写信息（index）”编辑区中。

（14）单击index标签切换至index编辑区中，按Ctrl+S快捷键，以“3.1”为名称保存该文件，然后按F5键预览效果，如图3-14所示。