動態設計教室 · #02

動畫時長：API 很快，App 卻很慢？

發佈於 2026-10-18

花了一整週優化，API 從 1,298 毫秒降到 337 毫秒。上線後使用者的回饋卻是：「……還是好慢。」伺服器明明很快，到底慢在哪？這一課只講一件事：動畫的時長。

真相：慢的不是 API，是動畫

我們用 Hoppscotch 送一個 GET 請求，實測回應時間 337 毫秒。回應出現時，如果內容用 0.60 秒滑入，使用者要等 0.337＋0.60＝0.94 秒才看到完整結果；同一條曲線改成 0.25 秒，總等待變成 0.59 秒。API 一毫秒都沒變，只改了動畫。

同一條曲線，三種時長

曲線和第 1 課相同（ease-out，cubic-bezier(.16, 1, .3, 1)），只改秒數。以這個大小的面板來說：0.60 秒拖、0.30 秒剛好、0.15 秒快到像直接跳出來。面板類的元件，0.25 到 0.3 秒通常是好的起點。

秒數跟著距離走

同一個回應裡，移動距離不同的東西不必用同一個秒數。狀態列只往上移 16 px，用 0.15 秒；內容區塊移 120 px，用 0.30 秒。走得越遠，給它的時間越多；只動一點點的東西，給太多時間反而顯得遲鈍。

常用起點（不是規定）

按鈕回饋

0.1 秒

提示、小標籤

0.15 秒

下拉選單

0.2 秒

面板、側欄

0.25–0.3 秒

整頁轉場

0.3–0.4 秒

超過 0.5 秒

要有理由

這些是經驗值，和 Material Design 的動態時長設定、Nielsen Norman Group 建議 UI 動畫落在 100–500 毫秒的範圍一致。實際要多長，還是要看元件大小、移動距離和使用情境。

CSS 寫法

.response {
  opacity: 0;
  transform: translateY(120px);
}
.response.is-shown {
  opacity: 1;
  transform: translateY(0);
  /* 內容走 120 px：0.30 秒 */
  transition: transform 0.30s cubic-bezier(.16, 1, .3, 1), opacity 0.30s;
}
.status.is-shown {
  /* 狀態列只走 16 px：0.15 秒 */
  transition: transform 0.15s cubic-bezier(.16, 1, .3, 1);
}

非官方動態設計概念示範。介面取自 hoppscotch.io（MIT 開源），與 Hoppscotch 沒有合作關係；Hoppscotch 本身的回應沒有這段進場動畫，A、B 兩種都是我們加的。337 毫秒是這次實測 6 次中最快的一次，會隨網路而變。

差別，在那幾百毫秒裡。