Axure制作“加载中”的交互效果学习教程

2020-07-2417:33:19交互设计Comments3,409 views字数 529阅读模式

“加载中”是很常见的交互效果,因为网速,服务器接口等原因,等待网络加载中,下拉刷新,上拉加载新内容,提交表单时弹出的浮层都会有一个加载图标或者加载文案,反馈给我们系统正在执行我们的命令。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

Axure制作“加载中”的交互效果学习教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

如上图。案例中的登录按钮,当输入完用户名,密码后,点击登录按钮,登录按钮中的文字变化登陆中,且有一个正在快速旋转的图标,右侧是提交操作命令时,系统返回的加载提示,都实时告诉我们正在执行,减少等待时的焦虑感。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

第一步:做出环形

可以直接调用网络上的,也可以利用Axure自己制作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

案例中的网络的,我教会大家自己DIY一个。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

拉一个圆环,大小改为25*25,线段类型修改为点点,线段宽度修改为稍宽一点,颜色为白色,填充为白色,要做在灰色按钮上,比较明显,如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

Axure制作“加载中”的交互效果学习教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

第二步:设置动态面板 转起来

拉入一个动态面板,随便命名为“旋转专用”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

复制两个动态面板,不需要命名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

Axure制作“加载中”的交互效果学习教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

设置载入条件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

当页面载入时,设置“旋转专用”动态面板循环向后切换,间隔10ms。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

Axure制作“加载中”的交互效果学习教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

4当“旋转专用”动态面板状态改变时,设置条件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

旋转环形图标逆时针旋转,旋转角度300,相对旋转,锚点为中心。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

Axure制作“加载中”的交互效果学习教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

设置完成,预览看下效果,当页面载入时——动态面板循环——环形图标旋转,可以添加其他条件,旋转3-5s跳转或者返回结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

来源:冯耀宗博客文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19787.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/jiaohu/19787.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定