F7.03.2Ease-out enter, ease-in exit设计研究
入场宜快出慢,出场宜慢入快
别名: 减速入场 · 加速出场 · 进出曲线
概念解释
入场的终点是静止可用,出场的终点是离开视野。两条路径对速度剖面的要求相反。入场需要一开始就看得见(速度快),再减速停稳,让命中区在后半段变得可瞄准。出场需要先让人看清「这个东西开始走了」,再加速离开,免得慢吞吞地挡着下一步。这是到达与离开的不对称,不是两条对称的淡入淡出。
机制
入场时,对象要从「还不在」变成「可以点」。前半段速度高,瞬变足够强,注意能抓住它;后半段减速,位置逐渐稳定,指向运动可以锁定。若入场也用慢起步,对象会在很长一段时间里又小又慢,像系统还没准备好。
出场时,对象已经在场。慢起步让「它要走了」被读成一次有意的离开而不是突然消失;后半段加速,尽快把像素和命中区清掉,把循环交还。若出场减速到达屏幕外,等于把一个即将无用的对象在视野里多停一会儿,阻碍下一次操作。
两端都不该用匀速:入场的刹车和出场的起步,分别对应「停稳」和「离开」这两种物理故事。
怎么研究
同一对入场/出场,交叉两条曲线(快出慢 / 慢出快 / 线性),做「界面是否已可点」的时机估计,以及出场后下一次点击的等待。自变量:进出曲线组合、对象尺寸。因变量:可交互时机的估计、出场后的输入间隔、自然度。
可交互的客观时刻(命中区已稳定)和主观「已经停好」常常错位,要两套指标都记。
边界
- 共享元素跨页时,入场曲线还要和另一页的出场对接,单独谈「快出慢」可能被打断。
- 减弱动效模式下位移被淡入替代,进出曲线的不对称几乎用不上,透明度交叉更要紧。
- 弹性过冲会把「停稳」推迟到几次振荡之后,抵消减速到达的好处。
怎么落地
- 面板、菜单、卡片进入用高初速再刹车;离开用可识别的起步再尽快出屏。
- 不要把同一条缓出曲线同时套在进入和离开上。
- 验证:入场结束前约 100 毫秒开始允许点击,看误点率;出场则量下一次有效输入相对动画开始的延迟。入场仍不敢点、出场仍在等,就是剖面反了。