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

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

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

所以真正花時間的不是挑效果，而是先想清楚：一個要人靜下來的 App，到底該怎麼動。

動畫只負責回答三個問題

我們給微互動設了一個很窄的職責範圍。它存在的目的不是增加畫面的熱鬧度，而是回答使用者當下的三個問題：

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

只要一個效果沒有在回答這三題裡的任何一題，它就不該存在。這條規則刪掉的東西比它留下的多。

從這三題往下推，得到六條原則：

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

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

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

規則只有三句：中間層可以整層關閉，最底層不能缺少，最上層不能濫用。

微互動就住在中間層。它是最容易被注意到、卻也是唯一可以整層拿掉的一層。想通這件事之後，很多「這個效果做不做」的爭論就自動結束了——如果拿掉它整個流程就不成立，那代表資訊放錯層了。

五個階段，同一張卡片

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

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

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

驗收標準裡有一條特別重要：每個階段在關掉動畫之後，仍然要能只靠文字與靜態符號分辨。 如果做不到，代表這個階段的識別度是靠動畫撐起來的，而那是不合格的。

自己操作看看

上面這些動態語言，用文字描述都有極限。五個階段的節奏、關掉動畫前後的差別，讀是讀不出來的。

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

→ 打開 ZenDrip 微互動原型

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

但它足夠回答那個最重要的問題——關掉動畫之後，這個介面還說得清楚它在做什麼嗎。

---

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