3 小时学会 Axure 产品经理原型设计系列教程-实战篇 1 3 小时学会 Axure 图文教程案例篇 09 用户登录页面效果 作者：张晓 用户登录是论坛、网站、微博等平台必不可少的互动交互环节，这节我们就用 Axure 来实现用户登录页面的交互案例。 一、用户登录效果 原型软件：Axure RP Pro 7.0 中文汉化版 实例描述：根据用户的输入，给予对应的交互（提示） 1、用户不输入任何内容后点击登录按钮，提示“请输入用户名和密码”； 2、用户输入用户名，但未输入密码，提示“请输入密码”； 3、用户输入密码，但未输入用户名，提示“请输入用户名”； 4、用户输入的用户名错误，提示“用户不存在”； 5、用户输入的密码错误，提示“密码错误”； 6、用户输入正确的用户名、密码，提示“登录成功”。 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 2 备注：设置正确的用户名为“axure”，密码为“zhangxiao”。 二、交互设计步骤 （一）设计思路：通过多重逻辑条件（Conditions）判断，给予对应的提示。 （二）实现步骤 STEP1：控件（Widgets，也称元件/部件）的布局。完成文本标签（Label）、文本框 （Text Field）、HTML 按钮（HTML Botton）控件的位置布放及命名。 STEP2：对密码文本框进行类型设置。在输入密码时，我们需要让其显示为“*”，而 不是显示出来，这需要对文本框的类型进行设置：选中“密码”文本框控件，在工作区右侧 的【控件属性和样式】面板中选择“密码”类型。 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 3 STEP3：为提交按钮添加“鼠标单击时”交互用例。 双击“鼠标单击时”用例： 然后进入用例编辑器： （1）用例 1：未输入用户名、密码情况 设置【条件】：控件文字“用户名文本框”、“密码文本框”的值都为空值。 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 4 【设置文本】动作：设置“提示语标签”的文本标签内容为“请输入用户名和密码！” 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 5 设置【显示】动作：显示“提示语文本标签”控件。 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 6 （2）用例 2：未输入用户名情况 条件设置：用户名文本框文字 = 空值 动作设置参考用例 1。 （3）用例 3：未输入密码 条件设置：密码文本框文字 = 空值 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 7 动作设置参考用例 1。 （4）用例 4：用户名输入错误 条件设置：用户名文本框文字 axure 动作设置参考用例 1。 （5）用例 5：密码输入错误 条件设置：密码文本框文字 zhangxiao 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 8 动作设置参考用例 1。 （6）用例 6：用户名、密码输入正确 条件设置：用户名文本框文字 = axure；密码文本框文字 = zhangxiao 动作设置参考用例 1。 所有完成设置的交互用例如下： 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 9 最后，按【F5】键查看最终的原型交互演示效果： 密码输入错误时： 3 小时学会 Axure 产品经理原型设计系列教程-实战篇 10 用户名、密码均输入正确时： 三、下节课程预告 案例图文教程：第 10 节 中继器实现网上商城效果 谢谢！