「转场」掌握这六个技巧，你的动态设计也能达到大师级别( 二 )
文章图片
文章图片
4、 特别的入和出设计
用户引导应该在合适的时间出现在合适的地点 。动态变化 ， 因其本质影响 ， 在一个用户界面中拥有最高的吸引力 。文本段落和静态图像都无法与其相比 。一个设计优秀的转场能带领用户从一个交互到另一个交互 。
对于一个新手用户 ， 他常常不能预测一个将要发生的交互动作会是怎样的 ， 而合适的动画则能够指引用户且不会让用户觉得内容的变化太过突然 。
Mac OS在最小化窗口的时候使用一个功能性的动画效果 。这个动画将窗口的两个状态连接在了一起 。
文章图片
文章图片
另一个很好的案例是下面这种父子层级间的转场 ， 用户选择了一个列表项或者卡片元素 ， 然后经由动画方法展开其详细信息的视图 。这样的转场效果允许了用户在变化前后保持上下文联系 。
文章图片
文章图片
5、合适的速度
元素在不同的位置或状态间转变时 ， 其运动应该足够快到不用让用户等待 ， 但同时也要足够缓慢好让用户能够理解这个过程（快速的同时保证用户理解） 。
不要让动画太慢 ， 好像是产生了不必要的延迟得让用户等待一样 。
文章图片
文章图片
减缓许多元素的变化速度会延长整体动态变化的时间 。
文章图片
文章图片
让你的动画足够快保证用户不必等待这个过程的逐渐完成 。
文章图片
文章图片
想想看 ， 很多转场用户是会频繁看到的 ， 你一定要让这个过程够快 ， 别让用户总是等 。这个时间应该控制在300ms以下 。
文章图片
文章图片
6、清新清晰的动态思路
转场动画应该避免一次性做太多事情 ， 试想在有多个项目需要朝不同方向或不同路径移动时 ， 看上去不混乱才怪 。
文章图片
文章图片
转场应该清晰、简单而连贯一致 。对于动画而言 ， 少即是多 。因此我们应该关注于对用户起到实用性作用的动画效果 。
文章图片
文章图片
结论
最后重要的一点是 ， 动态变化绝不是随机的 ， 每一个动作的背后一定有其实际目的 。它帮助指引用户关注于那些重要的地方而不至于迷失自己 。不管你的应用程序是有趣好玩的还是严肃直接的 ， 使用合适的动态设计原则必将能够帮你向用户提供一个干净而富粘性的用户体验 。
推荐阅读
- 『淘宝网』从4款主流产品出发，掌握“搜索”交互
- ：掌握这些技巧，拍出最绚烂的舞台
- 尼康中国@掌握这些技巧，拍出最绚烂的舞台
- ##先锋PIONEER PD7050CD机光盘不出仓维修，掌握拆解顺序和维修手法
- 「HIFI音响科技大咖秀」先锋PIONEER PD7050CD机光盘不出仓维修，掌握拆解顺序和维修手法
- 推销员■掌握这几个方面，线下买手机再也不怕，推销员的“套路”
- 数据库：数据分析小白手册 | 这些常见概念你都掌握了吗？
- ##掌握视觉层级原则，优化用户体验
- 【功能】快速掌握D850\\D750\\D810等相机功能、摄影理论及后期
- ■了解4大原则，掌握做好社群运营的关键