F7.03.2Ease-out enter, ease-in exit设计研究

入场宜快出慢,出场宜慢入快

别名: 减速入场 · 加速出场 · 进出曲线

概念解释

入场的终点是静止可用,出场的终点是离开视野。两条路径对速度剖面的要求相反。入场需要一开始就看得见(速度快),再减速停稳,让命中区在后半段变得可瞄准。出场需要先让人看清「这个东西开始走了」,再加速离开,免得慢吞吞地挡着下一步。这是到达与离开的不对称,不是两条对称的淡入淡出。

机制

入场时,对象要从「还不在」变成「可以点」。前半段速度高,瞬变足够强,注意能抓住它;后半段减速,位置逐渐稳定,指向运动可以锁定。若入场也用慢起步,对象会在很长一段时间里又小又慢,像系统还没准备好。

出场时,对象已经在场。慢起步让「它要走了」被读成一次有意的离开而不是突然消失;后半段加速,尽快把像素和命中区清掉,把循环交还。若出场减速到达屏幕外,等于把一个即将无用的对象在视野里多停一会儿,阻碍下一次操作。

两端都不该用匀速:入场的刹车和出场的起步,分别对应「停稳」和「离开」这两种物理故事。

怎么研究

同一对入场/出场,交叉两条曲线(快出慢 / 慢出快 / 线性),做「界面是否已可点」的时机估计,以及出场后下一次点击的等待。自变量:进出曲线组合、对象尺寸。因变量:可交互时机的估计、出场后的输入间隔、自然度。

可交互的客观时刻(命中区已稳定)和主观「已经停好」常常错位,要两套指标都记。

边界

  • 共享元素跨页时,入场曲线还要和另一页的出场对接,单独谈「快出慢」可能被打断。
  • 减弱动效模式下位移被淡入替代,进出曲线的不对称几乎用不上,透明度交叉更要紧。
  • 弹性过冲会把「停稳」推迟到几次振荡之后,抵消减速到达的好处。

怎么落地

  • 面板、菜单、卡片进入用高初速再刹车;离开用可识别的起步再尽快出屏。
  • 不要把同一条缓出曲线同时套在进入和离开上。
  • 验证:入场结束前约 100 毫秒开始允许点击,看误点率;出场则量下一次有效输入相对动画开始的延迟。入场仍不敢点、出场仍在等,就是剖面反了。

延伸

  • 同组F7.03.1 匀速运动显得机械且不自然 · F7.03.3 弹性曲线不适合频繁触发的动效
  • 相邻F7.05 入场与出场的方向 · F7.11 动效的可打断
  • 站内检索ease-out · ease-in · settle

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F7.03.2