3.2　用户登录界面

案例描述

登录功能是任何产品都必不可少的，原型设计过程中都需要制作登录页面，在制作好的登录页面输入用户名和密码（初始用户：connie，密码：12345678），单击“登录”按钮进行登录，如图3-15所示。

思路分析

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

操作步骤

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

（2）在左侧“元件库”面板中将“矩形2”元件拖入编辑区中，在右侧单击“样式”标签切换至“样式”面板，在“位置·尺寸”区域设置“x轴坐标”为100，“y轴坐标”为80，“宽度”为450，“高度”为300，如图3-16所示。

（3）单击“填充”右侧的“填充颜色”下三角箭头，弹出颜色面板，在“填充类型”下拉列表框中选择“渐变”选项，切换至渐变面板，单击下方的颜色滑杆左侧色块，设置颜色为浅蓝色（#66CCFF），同样单击右侧色块，设置颜色为蓝色（#336699），并在“样式”面板中设置“圆角半径”为5，如图3-17所示。

（4）在“元件库”面板中将“文本标签”元件拖入编辑区中，并双击使其进入编辑状态，输入“用户登录”，在工具栏上单击Bold图标设置文本为粗体，单击“文本颜色”右侧下三角箭头，在弹出的颜色面板中选择白色色块，并设置“x轴坐标”为200，“y轴坐标”为120，如图3-18所示。

（5）用同样的方式分别拖入3个“文本标签”元件和2个“文本框”元件，将其放在编辑区适当的位置，并设置“文本颜色”为白色，其中一个“文本标签”放在下方设置为隐藏，作为提示信息，如图3-19所示。

（6）选择“用户名文本框”元件，在右侧“检视：文本框”中，将文本框名称设置为username，用同样的方法将密码文本框的名称设置为password，单击“属性”选项卡切换至“属性”面板，在“文本框”区域设置“类型”为“密码”，如图3-20所示。

（7）在“元件库”面板中将“主要按钮”元件拖入编辑区中适当的位置，并双击使其进入编辑状态，输入“登录”，并填充从#FFCC66到#FF6600的渐变色，如图3-21所示。

（8）在编辑区中选择“登录按钮”元件，在右侧“属性”面板中的“添加用例”区域双击“鼠标单击时”，弹出“用例编辑<鼠标单击时>”对话框，在上方单击“添加条件”按钮，弹出“条件设立”对话框，单击this右侧的下三角箭头，在弹出的下拉菜单中选择username选项，“值”设置为connie，单击右侧的按钮新建一条，用同样的方法，设置“元件文字”为password，“值”为12345678，如图3-22所示。

（9）按Ctrl+S快捷键，以“3.2”为名称保存该文件，然后按F5键预览效果，如图3-23所示。