Material 3 的动效曲线,抄哪一条
缓动曲线不是装饰。Material 3 给了几条标准曲线,用错地方会让界面显得迟钝或者滑腻。
212 字
Material 3 的动效规范里,常用的其实是三条曲线,对应三种意图。
- standard:元素在原地变化,比如展开、变色、淡入。进出对称,不抢注意力。
- emphasized:元素移动距离较远,或者需要强调。前段更快,收尾更慢。
- decelerate:元素从屏幕外进入;accelerate:元素离开屏幕。
时长比曲线更容易出错
同一条曲线,150ms 和 600ms 的观感完全不同。小控件(图标、chip、开关)适合 100–200ms,页面级的转场 300–400ms,超过 500ms 就需要有明确的叙事理由。
一条经验
如果一个动效让人等它结束,那它就太长了。动效应该让状态的变化可追溯,而不是表演。
版权声明
本文由 XiaYe 创作,采用 CC BY-NC-SA 4.0 许可协议;转载请注明出处。
- 作者
- XiaYe
- 发布于
- 许可协议
- CC BY-NC-SA 4.0
分享这篇文章:
相关文章
评论
留下你的想法,或看看别人说了什么。