本篇教程将为大家展示如何使用Axure制作带进度显示的注册表单特效。瓜子,板凳,雪碧准备好了嘛?好了我们就开始! 最终效果 效果解读 本案例通过渐进式的方式,引导用户完成账户注册,在每一步完成后,以背景色变换的方式显示注册正规流程的进度,提高用户体验。 制作过程 默认页面由:触发按钮、按钮文字、背景组成;通过点击触发按钮,开始表单注册过程。 同时为了方便点击后的特效变化,我们将触发按钮定义名称。 下面设置交互动作:选择触发按钮,增加单击动作,在该动作下添加"设置尺寸"的属性。这里需要注意的是锚点的设置,我们为了让按钮由中心点向2边扩展,所以将锚点设置为中心点。动画方式选择线性。 完成了点击后,背景色的扩展效果,我们还需要对按钮文字进行隐藏、显示输入表单、以及提示线的内容。再次给触发按钮增加几个动作。 完成以上设置,我们就可以得到这样的效果。 下一步,我们开始设置点击剪头按钮后的显示效果,从最终效果上可以看到,点击按钮后,隐藏username的表单,并且背景显示进度条,同时显示创建密码的表单。 大家可以看到,我使用了等待,这里的作用是为了在元件展示的时候,中间存在间隔,让动画看起来更加有条理性。完成以上设置,我们就可以得到这样的效果。 下一步我们对输入完密码后的特效进行设置,输入完密码后,点击剪头按钮,我们需要隐藏密码表单和白色的触发按钮,并且将背景绿色平铺,最后将欢迎词"WelcomeJason"进行显示。 到这里,我们就完成本案例的全部制作过程。看一下最终效果。 源文件下载地址 链接: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教程:忘记密码特效 如有疑问,可以给我留言。 欢迎&感谢大家订阅,早日成为专栏作家,为大家分享更多教程。