Axure教程:用户登录交互原型如何制作?

3周带你玩转Excel!在行第一行家手把手带学+作业实战+答疑辅导,升职加薪快人一步,了解一下>>

今天和大家分享的是最常见的用户登录的原型设计,适用对象:想加入产品坑的新手小白。

1. 元件准备

用户名、密码的输入框由矩形、icon、文本框三个元件组成。

用户名输入框元件

为方便区分,将用户名输入框元件中,矩形命名为“矩形1”,文本框命名为“用户名”,文本框元件属性设置为:text、隐藏边框,增加提示文件“用户名、邮箱、手机号”,三个元件排列好组合,命名为“用户名输入框”。

用户名文本框设置

将密码输入框元件中,矩形命名为“矩形2”,文本框命名为“密码”,文本框元件属性设置为:密码、隐藏边框,增加提示文件“登录密码”,三个元件排列好组合,命名为“密码输入框”。

参考网页登录样式,将各元件在界面中排列好。(可参考下图,本次教程只实现登录验证,不做注册和网络应用登录的交互)

2. 登录交互

登录的交互包括以下几个方面:

  • 输入框鼠标选中时,高亮;
  • 点击登录按钮时,用户名和密码校验;

2.1 选中时高亮交互

这里的交互逻辑为:鼠标选中输入文本框时,输入框边框和icon颜色高亮显示,取消选中时,恢复原来样式。(以用户名输入框为例)具体设置为:

第一步:设置用户名输入框中的矩形和icon的选中状态;

以同样的方式设置icon的选中状态。

选中用户名文本款,设置获取焦点和失去焦点时,矩形和icon选中状态的值。

以同样的方式设置密码输入框的交互效果即可,设置成功后,预览效果如下:

2.2 登录时校验交互

登录验证主要包括以下几个部分:

  • 用户名、密码为空;
  • 用户名不存在,登录失败;
  • 用户或密码输入错误,登录失败。

首先添加一个动态面板,命名为提示,设置为隐藏;添加四个状态:

  1. 用户名、密码为空;
  2. 用户名不存在;
  3. 用户名、密码错误;
  4. 登录成功(实际可不用,成功后直接跳转,这里只做展示)。

每个面板增加各个状态对应的提示内容,如下图:

然后,开始设置登录按钮的校验交互,添加鼠标点击时用例,通过的输入值判断显示提示面板的状态。提示面板显示时,增加下推元件效果。

登录按钮设置

预览效果:

ok,今天就这样啦~

Axure只是工具,产品设计最重要的是逻辑与表达。

 

本文由 @斑鸠 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!