Joye Personal Blog

Back

动效 frequencykeyboardresponsiveness

高频操作别加动画

一天要触发几百次的操作,比如命令面板、快捷键、切标签,应该按下就出现。第一次看着精致的开场动画,到第一百次就只剩等待。

来源 ↗
views

我每天按得最多的快捷键之一,是打开命令面板的那一个:找文件、跑命令、切设置,一天下来多到数不清。这种东西如果每次打开都要先播一段缩放淡入,第一次会觉得精致,第一百次就只剩下等。下面两个面板长得一模一样,只差在打开的那 0.3 秒。

点一下窗口再连续按 K,或者直接:
✕ 每次都播开场动画
笔记
已打开 0 次 · 累计等待 0.0 秒

第一次打开,面板缩放、淡入、从模糊变清楚,挺好看。连按几次再看:你已经想好要选哪一项了,面板还在慢慢落位。

✓ 按下就出现
笔记
已打开 0 次 · 累计等待 0.0 秒

没有任何过场,手指刚按下去面板就在那里。按得越多,越能感觉到它跟得上你的节奏,而不是你在等它。

01加动画之前先问:这个操作一天会做几次。一年见一次的欢迎页可以尽情发挥,一天打开几百次的面板,最好的动画就是没有动画。
02键盘触发的操作尤其不要加。按下快捷键的人已经知道自己要做什么,任何过场都是挡在他和目标之间。
03动画的成本要乘上次数来算。每次 0.3 秒看起来很短,打开一百次,就是半分钟盯着同一段过场。
点“连按 10 次”,或者聚焦窗口后自己连续按 K,看下面的等待时间怎么累积。

为什么这样更好#

  • 动画的惊喜会被重复磨掉。第一次看到面板优雅地弹出来,会觉得用心;同一段过场看到第五十次,它就不再是惊喜,而是每次都要等它播完的一道手续。
  • 快捷键代表人已经想好了。用键盘打开面板的人,脑子里已经有下一步要做什么。面板这时候还在缩放、淡入,就是在挡路,人会觉得软件慢半拍、跟不上手。
  • 等待是乘出来的。单次 0.3 秒很短,但它会乘上使用次数。demo 里连按十次就是三秒,一天打开两三百次,就是一分钟以上盯着同一段过场。
  • 立刻出现本身就是反馈。按下去面板就在,这种“跟手”的感觉比任何动画都更能说明“我收到了”。
  • 省下的动画可以花在别处。不常见的时刻,比如第一次打开时的引导、完成一个大任务的那一下,才是动画真正能让人记住的地方。

判断要不要加动画,我现在会先问一句:这个操作一天会做几次。次数越多,动画越该短,到了每天几百次的程度,就干脆不要。

什么时候不该用#

  • 低频、一次性的场景不必这么克制。欢迎页、首次引导、偶尔才弹一次的反馈卡片,动画能带来记忆点,也不会被重复到让人厌烦。
  • 动画承担了说明作用的时候要保留。比如一个元素从列表移到了另一个位置,过渡能告诉人“它去哪了”,这时去掉动画反而会让人找不到东西。
  • 鼠标点开、频率中等的菜单,可以保留一个很短的过渡,而不是一刀切地全部去掉。

出处#

来自 Emil Kowalski 的 You Don’t Need Animations ↗。他用 Raycast 举例:自己一天要打开它几百次,如果每次都有动画会非常烦;文中也明确说,键盘触发的操作不应该加动画。