一個要人靜下來的 App，該怎麼動

微互動的教學幾乎都在教同一件事：怎麼讓介面更有活力。彈跳、粒子、光澤、跟隨手指的視差。這些技巧背後有同一個目標：讓使用者覺得這個 App 很有反應、很好玩、想多待一會。

ZenDrip 的目標剛好相反。它是一個手沖咖啡的引導 App，希望你在那四分鐘裡把手機放著、專心注水、不要一直看螢幕。活力是它最不需要的東西。

所以在挑任何效果之前，得先想清楚：一個要人靜下來的 App，到底該怎麼動。

動畫只負責回答三個問題

我給微互動的職責定得很窄。它只回答使用者當下的三個問題：

1. 現在是哪一個沖煮階段？
2. 我剛才的操作，是否已經被接受？
3. 不看螢幕的時候，我還能不能知道結果？

一個效果如果三題都沒回答到，就不做。完成時的粒子、彩帶、慶祝彈跳，都是這樣被刪掉的。

這三題加上「要人靜下來」這個前提，整理成六條原則：

原則	意思
狀態優先	動畫要說明階段、進度或結果
平靜而非興奮	緩慢的加減速、低位移、低亮度變化
同一形體持續變化	五個階段共用同一張方形卡片，尺寸、圓角與畫面位置從頭到尾不動
不看螢幕仍然成立	重要結果一定要有文字、無障礙語意或一次觸覺
不跟心率同步	心率只供沖煮完成後觀察
「減少動態」是完整模式	關掉動畫後，靜態的階段差異、文字與進度仍然完整

微互動住在可以被關掉的那一層

這些原則最後整理成三層。最底下是文字與靜態狀態，畫面看得到的時候就負責講清楚階段、剩餘時間與操作結果；中間是低幅度的微動畫，補充方向與狀態轉換；最上面是聲音與觸覺，只留給重要事件。

每一層各有一條規則：中間層可以整層關閉，最底層不能缺，最上層不能濫用。

微互動就在中間層。它最容易被注意到，卻是唯一可以整層拿掉的一層。這也給了我一個判斷方法：如果拿掉某個動畫，整個流程就不成立，那代表資訊放錯層了。

五個階段，同一張卡片

Bloom、注水、等待、下水、完成。五個階段共用同一張方形卡片，切換在 0.5 到 0.7 秒內完成，整張卡片不彈跳，也不重新飛入。會變的只有內部的圓環、線條、水滴與亮度：

階段	動態語言	要避免的
Bloom	中心向外展開的小圓點與一圈緩慢擴散	像沸騰一樣快速冒泡
注水	水滴由上往中心移動，外圈一次柔和擴張	持續旋轉、追逐游標、模擬手腕動作
等待	細線或圓環接近靜止，只有低幅度呼吸	明顯脈搏、倒數閃爍
下水	水滴由中心緩慢向下，圓環同時向中心收束	快速墜落、強烈縮放
完成	所有動態收斂為穩定單圈或簡潔完成符號	粒子爆發、彩帶、慶祝彈跳

一般狀態的呼吸循環大約 3.5 到 4 秒；等待階段幾乎靜止，只保留很小的亮度變化。

驗收標準裡有一條特別重要：每個階段在關掉動畫之後，仍然要能只靠文字與靜態符號分辨。 做不到的話，就表示這個階段要靠動畫才認得出來，這樣不合格。

自己操作看看

五個階段的節奏、關掉動畫前後的差別，用文字很難講清楚。

所以原型做成了可以直接操作的網頁：

→ 打開 ZenDrip 微互動原型

可以切換五個沖煮階段，並打開右上角的「減少動態」看看關掉動畫之後還剩下什麼。所有數據都是本機示意，不保存資料也不讀取 Apple Health，瀏覽器的震動也重現不了 iPhone 上的實際觸覺品質。

不過至少可以拿它確認一件事：關掉動畫之後，這個介面還說不說得清楚它在做什麼。

---

設計參考來自 Inspora 的案例索引。ZenDrip 只借用互動原則，不複製素材、品牌或原始動畫成品。