辉灿新闻网 原型设计 Axure教程:用户登录交互原型如何制作?

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

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

1. 元件准备

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

用户名输入框元件

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

用户名文本框设置

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

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

2. 登录交互

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

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

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

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

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

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

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

2.2 登录时校验交互

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

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

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

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

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

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

登录按钮设置

预览效果:

ok,今天就这样啦~

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

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

题图来自Unsplash,基于CC0协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/1353.html

作者: 今夜白_

Axure教程:如何制作3D动效?

Axure RP 9 教程:中继器实现模块排序

发表评论

您的电子邮箱地址不会被公开。

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部