博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
功能性转场动画效果设计
阅读量:6715 次
发布时间:2019-06-25

本文共 779 字,大约阅读时间需要 2 分钟。

hot3.png

       

功能性是用户体验设计的重要一环,它一般出现在页面衔接、命令执行或对象编辑的过程中,同时也有类似错误提示、操作提示中涌现出来的。它使人机交互更加友好,更人性化。

通过排列组合、分裂、变化形状,运动可以使对象更加灵动。功能性的动画,应该流畅地在导航内容间引导用户,解释屏幕内容的变化,并强调元素层级。

成功的动效设计具有以下6个特征:

1. 响应及时且恰当

视觉反馈在中极度重要,因为它符合了用户在日常生活中的体验。在现实生活中,拖拉、拨动各种物体,都会响应我们的操作,这符合用户的预期。

响应一是要及时,二是要恰当非常重要,否则就会造成对用户经验的挑战,造成体验差。

2. 提升关联性

让页面之间与触发它们的元素或操作关联起来。帮助用户在界面布局中理解刚发生的变化,是什么操作导致了这个变化。

3. 了解自然规律

不要刻意追求动画效果,所有的运动都应该遵循真实生活中力的作用,比如重力、磁场力、摩擦力、弹力等等。类似的,在好的界面设计中,你能时刻感受到这些。

4. 有目的的引导

设计好并引导用户到适当的位置。动画一定是页面中最为亮眼的那个部分。无论文字段落还是静止图片都无法与之相提并论。用好的过渡效果引导用户到下一步操作,适当的动画能帮助用户保持方向,不会感觉内容的突然改变。

5. 该快的一定要快

元素在不同位置和状态间运动时,运动要足够快,不要让人等待;也不可过快,让过渡能够理解。不要缓慢的动画,因为它产生了不必要的停顿,延长了整个过程。

6. 明确

过渡效果应当避免一次做太多事情,因为如果许多物体往不同方向或沿着不同路径运动,它们就会令人困惑。过渡效果应当明确、简洁、条理清晰。记住,关于动画,少即是多。我们应该只专注于动画能为用户带来的实际价值。

转载于:https://my.oschina.net/u/2971691/blog/811651

你可能感兴趣的文章
澳门2018年入境旅客3580万人次 创记录新高
查看>>
甘肃祁连山加大生态保护 北麓草原冬日现绿头鸭
查看>>
公务员周末送外卖是否违纪?官方暖心回复获网友点赞
查看>>
双星闪耀 上汽大众途岳、全新一代帕萨特联袂亮相
查看>>
监控系统云计算核心技术,主要包括十项技术
查看>>
下半年最值得关注的10个技术公众号
查看>>
MySQL 异步驱动浅析 (一):性能分析
查看>>
理解高性能网络模型
查看>>
提高 JavaScript 开发效率的高级 VSCode 扩展!
查看>>
30岁的你,还在写代码吗?
查看>>
阿里提出联合预估算法JUMP:点击率和停留时长预测效果最优
查看>>
世界杯要来了,AI预测冠军哪家强?
查看>>
代码这样写更优雅 (Python 版)
查看>>
SVG入门—如何手写SVG
查看>>
【面试必备】透过源码角度一步一步带你分析 ArrayList 扩容机制
查看>>
深入理解虚拟机之虚拟机性能监控和故障处理工具
查看>>
写个 vue-loading-template 组件
查看>>
北漂之毕业裁员后的又一波奇遇
查看>>
关于11月比特币现金将添加CTOR事件
查看>>
SIGIR2018大会最佳短论文:利用对抗学习的跨域正则化
查看>>