后台登录主要业务流程如下,用户输入登录信息,系统判断后给出结果,成功登录系统,失败给出提示。本文是关于后台用户登录的Axure教程,一起来看看~
效果预览,原型设计效果如下:
业务流程分析
后台登录主要业务流程如下,用户输入登录信息,系统判断后给出结果,成功登录系统,失败给出提示:
交互分析
登录时主要交互设计分四步,设计文本框聚焦事件、设计本文框失焦事件、设计登录按钮事件、设计登录提示。
四步操作中,登录按钮交互事件相对较复杂,需要处理3种场景:登录成功、用户名与密码不匹配、用户名不存在。
具体如下:
页面概要
交互说明
1. 文本框聚焦
登录操作文本框主要有用户名文本框和密码文本框,有些后台需要验证短信验证码,本文不做验证码验证。用户名和密码交互事件一致,以用户名文本框为例说明,密码文本框交互时间设置一致即可。
1)从部件库拖入3个部件:矩形、头像、输入框。将三个部件设置为组合,并为组合更改名字:
2)为组合中的矩形、头像设置交互样式,选中部件鼠标右键即可出现设置菜单,选择“交互样式…”:
切换到“选中”选项卡下,配置选中效果样式(样式效果可根据个人喜好调整):
设置好后,点击“确认”按钮即可。
3)设置文本框属性,将文本框边框隐藏,并设置提示文字:
4)设置文本框聚焦事件,鼠标点击文本框时,选中矩形和头像:
PS:密码文本框设置与用户名文本框设置唯一区别在于文本框类型设置,需将类型设置为“密码”,效果如下:
2. 文本框失焦
文本框失焦只需将矩形和头像设置为取消选中即可,具体如下:
3. 登录提示
登录提示只用于显示提示信息,无需做任何交互操作,显示、隐藏、提示内容都由登陆按钮来动态设置。
1)从部件库拖入2个部件:提示图标、文本标签。将部件设置为组合,并为组更改名字:
2)将组合状态设置为隐藏:
4. 登录按钮
登录按钮主要事件为“鼠标单击时”,根据不同场景添加不同点击事件:
每个事件,需要根据用户场景设置提示组合中提示文字内容:
因提示组合默认是隐藏,所以在设置文本后,需将提示组合设置为“显示”状态:
“等待”动作用于设置提示组合自动隐藏,当达到配置的时间后提示组合会自动隐藏:
PS:事件中的用例执行顺序是从上往下,如果动作顺序设置反了将会影响交互效果:
PS:点击登录按钮时,用户可选择不同用例,为方便区别不同用例的交互效果建议更改用例名称,更改方法如下:
源文件下载地址:
链接:https://pan.baidu.com/s/1ec3y3gQo4AV7jTNCWcmgIw
提取码:apwp
本文由 @Miss_Zhang 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议