《Axure教程:忘记密码特效》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强交互产品,线条等多维度案例或实操来进行更多的学习;此教程是由锋在2021-08-24发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
今天和大家分享一个忘记密码表单特效,enjoy~
我们先看一下,本案例使用到的元素:
文本部分,我们就咱不做介绍了,这里依次说一下“输入框”的设置 & “动态面板”的设置。
我们从元件库,拖拽一个文本框至对应位置,然后设置它的属性。如图所示:
(1)动态面板A-line
我们首先创建一个动态面板,命名为line,并且创建4种不同的面板状态:
每种状态,使用不同颜色的线条来表示
(2)动态面板B-button
我们在创建一个动态面板,命名为button,同样创建三种状态:
(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进行演示即可。
以上就是Axure教程:忘记密码特效的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure教程:图片的旋转和暂停
2022-06-22 09:57
2022-06-08 10:37
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论