Axure RP 10制作用户登录界面

本文制作了一个用户登录页面，不涉及用户注册。当用户名和用户密码均正确时则登录成功，当用户名或用户密码错误时会显示提示信息。

1 准备并编辑所需元件

①拖动动态面板(Dynamic Panel)，命名为“用户登录动态面板”，插入2个状态页面
双击第一个状态页面，拖动以下元件：
②拖动矩形元件(Box 1)，命名为“用户登录边框”
③拖动一级标题(Heading 1)，命名为“用户登录标题”
④拖动两个文本输入框(Text Field)，分别命名为“用户名输入”和“用户密码输入”
点击“用户名输入”，在元件交互区中的文本框提示文字处(Hint Text)输入“请输入用户名”；同理，点击“用户密码输入”，在元件交互区中的文本框提示文字处(Hint Text)输入“请输入用户密码”

⑤拖动矩形元件(Box 1)，命名为“登录按钮”
⑥拖动矩形元件(Box 1)，命名为“提示信息”，输入文字“用户名或密码错误”，填充和边框均设置为透明，隐藏该元件


调整以上各元件大小和位置
进入动态面板的第二个状态页面，拖动矩形元件(Box 1)，命名为“用户登录成功边框”，与“用户登录边框”大小和位置相同
拖动一级标题(Heading 1)，命名为“登录成功提示”，输入文字“登录成功”，居中放置

2 创建用户数据库

拖动中继器(Repeater Table)，命名为“用户数据集”，删除第三列，将第一列和第二列分别命名为"user"和"psw"，填充数据。本文填充数据1和2，方便后续操作

3 设置全局变量

选择项目“Project”-全局变量“Global Variables”

添加全局变量"user"和"psw"

4 设置文本输入框的交互

点击“用户名输入”元件，交互界面中选择“文本改变时(Text Changed)”-“设置变量值(Set Variable Value)”，选择变量“user”，变量值类型(SET TO)选择“元件文字(text on widget)”，选择元件“This”

点击“用户密码输入”元件，重复以上操作，区别在于变量选择“psw”

5 设置登录按钮的交互

点击“登录按钮”元件，选择“鼠标单击时(Click or Tap)”-“中继器(REPEATER ACTIONS)”-“删除行(Delete Rows)”，选择中继器“用户数据集”，选择“已标记(Marked)”

6 设置中继器的交互

点击“用户数据集”中继器，在交互页面选择“每项加载时(Item Loaded)”-“设置条件(Add Case)”，设置如下：
值(text value)——[[Item.user]]——==(equals)——变量值(value of variable)——user

值(text value)——[[Item.psw]]——==(equals)——变量值(value of variable)——psw
以上条件可以判断用户的名称和密码是否与用户数据库中的数据一致

条件设置完成后，选择“设置面板状态(Set Panel State)”，选择“用户登录动态面板”，状态页面选择“State 2”

若不符合Case 1，即用户的名称和密码无法与用户数据库中的数据对应，则会执行Case 2。依然在“每项加载时(Item Loaded)”事件下，点击“设置条件(Add Case)”，设置如下：
元件文字(text on widget)——用户名输入——≠(does not equal)——text(文字)——空值
元件文字(text on widget)——密码输入——≠(does not equal)——text(文字)—空值
以上条件可以确保用户输入名称和密码并且点击“登录”后才显示“提示消息”，防止用户尚未输入时就显示“提示消息”

条件设置完成后，选择“显示/隐藏(Show/Hide)”，选择“提示信息”，可见性选择“显示(Show)”

以上逻辑如下图所示：

按F5预览效果，当用户名或密码错误时：

当用户名和密码均正确时：