跳到主要内容

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

分享这篇文章:

相关文章

评论

留下你的想法,或看看别人说了什么。