辉灿新闻网 原型设计 Axure教程:带进度显示的注册表单特效

Axure教程:带进度显示的注册表单特效

本篇教程将为大家展示如何使用Axure制作带进度显示的注册表单特效。瓜子,板凳,雪碧准备好了嘛?好了我们就开始!

最终效果

效果解读

本案例通过渐进式的方式,引导用户完成账户注册,在每一步完成后,以背景色变换的方式显示注册正规流程的进度,提高用户体验。

制作过程

默认页面由:触发按钮、按钮文字、背景组成;通过点击触发按钮,开始表单注册过程。

同时为了方便点击后的特效变化,我们将触发按钮定义名称。

下面设置交互动作:选择触发按钮,增加单击动作,在该动作下添加“设置尺寸”的属性。这里需要注意的是锚点的设置,我们为了让按钮由中心点向2边扩展,所以将锚点设置为中心点。动画方式选择线性。

完成了点击后,背景色的扩展效果,我们还需要对按钮文字进行隐藏、显示输入表单、以及提示线的内容。再次给触发按钮增加几个动作。

完成以上设置,我们就可以得到这样的效果。

下一步,我们开始设置点击剪头按钮后的显示效果,从最终效果上可以看到,点击按钮后,隐藏username的表单,并且背景显示进度条,同时显示创建密码的表单。

大家可以看到,我使用了等待,这里的作用是为了在元件展示的时候,中间存在间隔,让动画看起来更加有条理性。完成以上设置,我们就可以得到这样的效果。

下一步我们对输入完密码后的特效进行设置,输入完密码后,点击剪头按钮,我们需要隐藏密码表单和白色的触发按钮,并且将背景绿色平铺,最后将欢迎词“Welcome Jason”进行显示。

到这里,我们就完成本案例的全部制作过程。看一下最终效果。

源文件下载地址

链接:https://pan.baidu.com/s/1KCWl7Udjais5RedN4e9z0g提取码:wtjl

在线演示地址

https://57mcel.axshare.com/

更多Axure教程

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

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

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

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

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

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

Axure教程:登录框交互特效

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

Axure教程:忘记密码特效

如有疑问,可以给我留言。

欢迎&感谢大家订阅,早日成为专栏作家,为大家分享更多教程。

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

题图来自作者

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

作者: 我是IT小白

Axure教程(中级):网易云音乐听歌识曲效果模仿

五种地图,带你摸清用户行为

发表评论

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

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

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

微信扫一扫关注我们

关注微博
返回顶部