张晓3小时学会Axure图文教程案例篇09 用户登录页面交互效果

3小时学会Axure图文教程案例篇

——09 用户登录页面效果

作者：张晓用户登录是论坛、网站、微博等平台必不可少的互动交互环节，这节我们就用Axure 来实现用户登录页面的交互案例。

一、用户登录效果

原型软件：Axure RP Pro 7.0中文汉化版

实例描述：根据用户的输入，给予对应的交互（提示）

1、用户不输入任何内容后点击登录按钮，提示“请输入用户名和密码”；

2、用户输入用户名，但未输入密码，提示“请输入密码”；

3、用户输入密码，但未输入用户名，提示“请输入用户名”；

4、用户输入的用户名错误，提示“用户不存在”；

5、用户输入的密码错误，提示“密码错误”；

6、用户输入正确的用户名、密码，提示“登录成功”。

备注：设置正确的用户名为“axure”，密码为“zhangxiao”。

二、交互设计步骤

（一）设计思路：通过多重逻辑条件（Conditions）判断，给予对应的提示。

（二）实现步骤

STEP1：控件（Widgets，也称元件/部件）的布局。完成文本标签（Label）、文本框（Text Field）、HTML按钮（HTML Botton）控件的位置布放及命名。

STEP2：对密码文本框进行类型设置。在输入密码时，我们需要让其显示为“*”，而不是显示出来，这需要对文本框的类型进行设置：选中“密码”文本框控件，在工作区右侧的【控件属性和样式】面板中选择“密码”类型。

STEP3：为提交按钮添加“鼠标单击时”交互用例。

双击“鼠标单击时”用例：

然后进入用例编辑器：

（1）用例1：未输入用户名、密码情况

设置【条件】：控件文字“用户名文本框”、“密码文本框”的值都为空值。

【设置文本】动作：设置“提示语标签”的文本标签内容为“请输入用户名和密码！”

设置【显示】动作：显示“提示语文本标签”控件。

条件设置：用户名文本框文字= 空值

动作设置参考用例1。

（3）用例3：未输入密码

条件设置：密码文本框文字= 空值

动作设置参考用例1。

（4）用例4：用户名输入错误

条件设置：用户名文本框文字≠ axure

动作设置参考用例1。

（5）用例5：密码输入错误

条件设置：密码文本框文字≠ zhangxiao

动作设置参考用例1。

（6）用例6：用户名、密码输入正确

条件设置：用户名文本框文字= axure；密码文本框文字= zhangxiao

动作设置参考用例1。

所有完成设置的交互用例如下：

最后，按【F5】键查看最终的原型交互演示效果：密码输入错误时：

用户名、密码均输入正确时：

三、下节课程预告

案例图文教程：第10节中继器实现网上商城效果

谢谢！