Axure教程:忘记密码特效

2 评论 11059 浏览 30 收藏 6 分钟

今天和大家分享一个忘记密码表单特效,enjoy~

一、最终效果

二、制作方法

我们先看一下,本案例使用到的元素:

文本部分,我们就咱不做介绍了,这里依次说一下“输入框”的设置 & “动态面板”的设置。

/* 输入框设置 */

我们从元件库,拖拽一个文本框至对应位置,然后设置它的属性。如图所示:

/* 线条动态面板设置 */

(1)动态面板A-line

我们首先创建一个动态面板,命名为line,并且创建4种不同的面板状态:

  1. default:默认状态
  2. fcouse:输入框获得焦点状态
  3. true:输入框值验证通过状态
  4. flase:输入框值验证不通过状态

每种状态,使用不同颜色的线条来表示

(2)动态面板B-button

我们在创建一个动态面板,命名为button,同样创建三种状态:

  1. default:默认显示submit字样的按钮
  2. false:显示The account could not be found字样的按钮
  3. true:显示Email has been sent字样的按钮

(3)动态面板C-reset

最后创建一个reset的动态面板,用于恢复“line”&“button”2个动态面板至默认状态。

/* 交互设置 */

(1)输入框交互

我们选择输入框,双击“获取焦点时”,设置动态面板(line)显示“fcouse”状态。

同样,给输入框添加“失去焦点时”的交互,这里会要考虑到一个问题,如果输入框有值得情况下,我们就不做任何变更;如果失去焦点时,输入框没有值,则设置动态面板为default状态。

条件设置如下:

动作设置如下:

(2)button动态面板交互

button动态面板,前面说到过存在3种状态,所以我们要对点击动作进行条件判断,当点击按钮时,如果输入框值为demo@demo.com,则显示true状态,否则显示false状态。

(3)reset动态面板交互

reset动态面板的作用,是用于恢复输入框和button面板默认状态的,所以我们对其添加了点击动作。设置如图所示:

全部完成后,按F5进行演示即可。

下载地址

https://pan.baidu.com/s/1DlLApPUQMvQhaE89gvOJvA

如有问题,欢迎大家留言!

Axure教程:跟随鼠标移动的导航菜单特效

Axure教程:使用动态面板实现iOS开关效果

Axure教程:登录页间转场特效

Axure教程:App移动端单选效果美化

Axure教程:App移动端多选效果美化

Axure教程:App移动端弹窗广告

Axure教程:登录框交互特效

Axure教程:鼠标移入移出特效

 

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

题图来自作者

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 讲的啥,看不懂

    来自河南 回复
  2. email-input在哪里的?没看见有这个呀

    来自广东 回复
专题
13274人已学习14篇文章
数字营销有着精准度高、成本较低、效果可量化等优点,很多企业都尝试了数字营销。本专题的文章分享了数字营销的相关内容。
专题
17543人已学习15篇文章
游戏化指的是游戏的理念与设计方法运用在其他领域上,本专题的文章分享了游戏化技术的应用方向。
专题
13736人已学习12篇文章
OTA,在线旅游(Online Travel Agency)指“旅游消费者通过网络向旅游服务提供商预定旅游产品或服务,并通过网上支付或者线下付费。
专题
13555人已学习13篇文章
产品设计与用户的体验感息息相关,但是很多时候产品经理在产品设计过程中会忽略掉可能影响到用户体验感的一些因素,比如一些异常状态的出现会让用户产品卸载的想法。本专题的文章分享了产品异常场景设计指南。
专题
15107人已学习12篇文章
苹果发布了Vision Pro这款MR头显,而这一产品的出现,也让我们看到了更多有关空间体验设计的相关可能。本专题的文章分享了Vision Pro的设计和交互指南。
专题
13250人已学习14篇文章
对电商行业的从业者们而言,GMV这个概念估计都不陌生,不少人也开始拿GMV作为评判各家电商平台市占率的指标之一。本专题的文章分享了GMV破亿的经验总结。