「转场」掌握这六个技巧，你的动态设计也能达到大师级别
作者：沈照杰
来源：新片场网
文章图片
文章图片
功能性动画是具有明确的、合乎逻辑的目的的微妙动画 。它能够降低用户在认知上的负担 ， 阻止毫无征兆的变化出现 ， 并在不同页面、元素、层级间建立起一套更好的空间关系 。还有重要的一点就是 ， 动画使用户界面更符合真实 。
通过在用户界面间游刃有余的出现 ， 并改变它们的形状和大小 ， 动画可以使用户界面散发出生气 。你应该在具有导航意义的上下文间切换时、在解释页面元素的状态变化时、在强化元素的层级关系时考虑使用合理的动画来完成这期间平滑的过渡 。
成功的动态设计具有以下六个特征：
1、积极反馈
在UI设计圈 ， 视觉上的反馈是极其重要的 ， 好的视觉反馈之所以起到作用是因为它符合了人们在认知上的自然预期 。想想看 ， 在真实生活中 ， 按钮 ， 控件和其他物品大都能够针对我们的操作做出友好的响应 ， 而这种真实的体验也应该迁移到界面设计中 。
文章图片
文章图片
用户界面应该精确的在用户触发动作的地方及时响应 ， 并显示出触发的动作或元素本身跟新界面间的联系 。对用户来讲 ， 能够在应用程序中触发一定操作后意识到发生了什么是非常棒的感觉 。
文章图片
文章图片
【「转场」掌握这六个技巧，你的动态设计也能达到大师级别】2、视觉联动
关联性是以新的方式创建出那些在元素或动作的作用下所触发的新界面 。关联性背后的逻辑是帮助用户理解刚刚在视图布局中发生的变化以及触发的源头 。
下面可以看到两个关于菜单转变的例子 。例1中 ， 菜单出现在远离触发点的位置 ， 这种方式打破了两者间的关联性 。
文章图片
文章图片
在例2中 ， 菜单就是从触发点位置出现 ， 恰似菜单和触发点绑定在一起 ， 其关联项不言而喻 。
文章图片
文章图片
另一个例子是在特定条件下功能变化的操作按钮 。“播放” 和 ”暂停” 可能是最普遍的一个例子 。将播放按钮变换为暂停按钮意味着两个动作是关联的 ， 在操作时按压一个按钮后就将显现另外一个 。你应该在一个动作的不同状态间尝试使用这种过渡动画 ， 使它看起来平滑而不失连续性 。
文章图片
文章图片
3、流畅的惯性作用
避免出现意外的转变 。每一个动作都应该能映射到真实世界中 。在真实世界 ， 一个物体加速或减速要主要取决于自身的重量和接触面的摩擦力大小 。类似的 ， 在一个用户友好的界面中 ， 开始和结束都不要是突如其来的 。
下面是一个很好的例子 ， 用户选择一个列表项后放大查看其详细信息 ， 在卡片的扩展过程中 ， 原本的小卡片遵循了一条面向终点的弧线型轨迹 。
推荐阅读
- 『淘宝网』从4款主流产品出发，掌握“搜索”交互
- ：掌握这些技巧，拍出最绚烂的舞台
- 尼康中国@掌握这些技巧，拍出最绚烂的舞台
- ##先锋PIONEER PD7050CD机光盘不出仓维修，掌握拆解顺序和维修手法
- 「HIFI音响科技大咖秀」先锋PIONEER PD7050CD机光盘不出仓维修，掌握拆解顺序和维修手法
- 推销员■掌握这几个方面，线下买手机再也不怕，推销员的“套路”
- 数据库：数据分析小白手册 | 这些常见概念你都掌握了吗？
- ##掌握视觉层级原则，优化用户体验
- 【功能】快速掌握D850\\D750\\D810等相机功能、摄影理论及后期
- ■了解4大原则，掌握做好社群运营的关键