動態就是溝通

動態在回答問題

想像兩個版面一模一樣的購物 App。一個有動態，一個完全靜止。

有動態的版本裡，加入商品時購物車徽章會跳一下，商品卡片會長成商品頁，按下結帳按鈕時它會微微下沉。

畫面上沒有多出任何新東西，它卻感覺更靈敏。

原因是每個操作都被回應了。好的動態，是在回答使用者還沒意識到的問題。

回饋：我的操作有被接收嗎

第一個問題是：「我的操作有被接收嗎？」回答它的動態叫回饋。

回饋動態又短又局部。它發生在手指所在的位置，就在操作之後。

注意動態就發生在手指按下的地方，而且緊接在操作之後，這就是回饋又短又局部的特性。

購物車徽章跳一下、結帳按鈕被按下時微微下沉，都是回饋。

待辦事項完成時，核取方塊快速劃上勾，也是回饋。

連續性：東西從哪裡來

第二個問題是：「那個東西從哪裡來？要去哪裡？」回答它的是連續性。

連續性動態連接兩個狀態。例如點商品卡片後，卡片展開成詳細頁。

這讓使用者知道兩者是同一個物件。

使用者因此不會搞不清楚自己在哪裡。

層級：什麼最重要

第三個問題是：「這裡什麼最重要？」回答它的是層級。

層級動態會排序注意力。例如頁面的主要內容先稍微落定，次要連結才跟著出現。

視線自然先落在最重要的地方。

三種動態各回答一個問題。看到一段動畫時，先問它屬於哪一種。

裝飾：只顧自己的動態

如果一段動畫三個問題都沒回答，它就是裝飾。

裝飾動態把注意力拉到自己身上，而不是使用者的任務。

常見例子：瞬間完成的操作還跑載入轉圈、永遠在彈跳的圖示、一天打開五十次的畫面卻用緩慢轉場。

同樣的視覺變化可能有用，也可能是裝飾。關鍵在它有沒有回答問題。

刪除測試：留或刪

判斷一段動畫要不要留，用刪除測試，依序問三個問題。

我的操作有被接收嗎？那個東西從哪裡來？什麼最重要？

只要回答其中一個，就保留。三個都沒回答，刪掉它對使用者毫無損失，畫面通常還會感覺更快。

每次載入都在旋轉的 logo 沒通過；待辦事項完成時快速劃上勾的核取方塊通過。

少而有目的

很多新手以為動畫越多，介面越精緻。實際上，上線的產品只用少量有目的的動態，大部分畫面保持靜止。

在 demo 裡看起來厲害，不代表是好的產品動態。

當你用 Claude Code 或 Cursor 生成動畫時，對每一段問：它在回答哪個問題？

說不出來，就刪掉。

使用者按下結帳按鈕後，按鈕在手指所在位置微微下沉。這段動態主要屬於回饋嗎？

• 是，屬於回饋
• 否，屬於裝飾

答案: 是，屬於回饋

是。回饋會在操作之後、操作位置附近短暫出現，讓使用者知道操作已被接收。

在 UI 動態中，購物車徽章在加入商品後跳一下屬於_____；商品卡片展開成詳細頁屬於_____；讓主要內容先落定、次要連結後出現屬於_____。

答案: 在 UI 動態中，購物車徽章在加入商品後跳一下屬於回饋；商品卡片展開成詳細頁屬於連續性；讓主要內容先落定、次要連結後出現屬於層級。

回饋確認操作被接收；連續性連接兩個狀態，讓人知道物件從哪裡來、要去哪裡；層級則排序注意力，指出什麼最重要。

你用 Claude Code 為購物 App 加入一段動畫：按下「儲存」後操作立即完成，但畫面仍顯示兩秒載入轉圈。依照刪除測試，最適合怎麼做？

• 刪除，因為它沒有回答任何使用者問題，還增加等待感
• 保留，因為動畫越多，介面越精緻
• 保留，因為轉圈能顯示按鈕和頁面是同一個物件
• 保留，因為轉圈能把注意力引到最重要的內容

答案: 刪除，因為它沒有回答任何使用者問題，還增加等待感

應刪除這段動畫。操作已立即完成，載入轉圈沒有確認新的操作、連接兩個狀態，也沒有指出重要內容，反而增加等待感。