delight
核心哲學
在使用者介面設計中，愉悅感並非惱人的動畫、緩慢漂浮的卡通，或是那些打斷使用者工作流程的煩人吉祥物。愉悅感是一種意想不到的優雅、智慧與尊重，發生在軟體以比預期更快、更周到的方式運作之時。真正的愉悅感是微觀人因工程的：即時的鍵盤快捷鍵、深思熟慮的空白狀態、尊重使用者時間的慶祝完成時刻，以及那些低調、有品味、能在不造成摩擦的情況下帶來微笑的彩蛋。
4 步驟愉悅感工程框架
步驟 1：使用者體驗的「峰值-終點法則」
- 鎖定情緒錨點：
- 心理學研究證實，使用者依據兩個時刻來評判體驗：峰值（價值的最高情緒點）與終點（工作流程完成的最終時刻）。
- 放大里程碑時刻：
- 部署成功：一個清脆的、400 毫秒的微爆發彩帶，或一個流暢的綠色完成脈衝。
- 第一筆付款處理完成：微妙的音效提示音，搭配令人鼓舞且低調的文案時刻。
- 達成收件匣歸零：一個寧靜、不帶優越感的插圖，慶祝工作完成。
步驟 2：微互動與觸覺回饋
- 基於物理的 UI 響應：
- 互動元素應以微妙的、基於彈簧的微動作出回應：
- 按鈕在觸碰時微微下壓（
scale: 0.98）。 - 切換開關以有機的彈簧曲線「啪」地一聲切換。
- 複製到剪貼簿的動作提供即時的視覺轉換（例如，帶有「已複製！」文字的勾號圖示滑入）。
- 按鈕在觸碰時微微下壓（
- 互動元素應以微妙的、基於彈簧的微動作出回應：
- 音效設計（可選且克制）：
- 在完成動作時使用極度微妙、低頻的點擊聲或木質悶響聲（始終尊重系統靜音設定，並提供關閉選項）。
步驟 3：深思熟慮的空白狀態與錯誤同理心
- 空白狀態作為啟動平台：
- 永遠不要顯示一個寫著「找不到項目」的空灰色方塊。
- 將零狀態轉變為可操作的、歡迎式的進入點：
- 「您的專案清單是空的。這是個 60 秒的入門模板，可用來部署您的第一個叢集。」
- 錯誤同理心：
- 當使用者犯錯時，用有幫助的、人性化的引導取代冰冷的公司通知。
步驟 4：非侵入式個性的黃金法則
- 永遠不要阻擋專家：
- 微互動的持續時間絕不能超過 300 毫秒。
- 動畫絕不能阻擋指標點擊或鍵盤輸入。
- 絕不能強迫使用者在繼續工作之前觀看動畫。
交付格式：愉悅感與微互動規格書 (DELIGHT-SPEC.md)
# 愉悅感與微互動規格書：[功能名稱]
## 1. 互動觸發條件與情境
- **功能時刻**：成功的 PR 合併與部署
- **使用者情緒狀態**：高度滿意 / 如釋重負（峰值時刻）
- **愉悅機制**：觸覺完成勾號 + 微妙的粒子瀑布效果
## 2. 動畫物理參數與時序
- **持續時間**：總計 280 毫秒（非阻塞）
- **緩動函數**：彈簧曲線：`cubic-bezier(0.16, 1, 0.3, 1)`
- **視覺動態**：
- 勾號縮放：`0.8 -> 1.05 -> 1.0`
- 粒子爆發：12 個微粒子，向外發射 40px 半徑，淡出至透明度 0。
- **減少動畫降級**：立即將圖示切換為靜態勾號，不產生任何粒子。
## 3. 個性化文案時刻
- **標準提示**：*"已複製到剪貼簿"*
- **愉悅變體（連續快速點擊 3 次後）**：*"雙重複製！您準備好了。"*
實作範例：開發者 CLI 愉悅時刻
- 實作：CLI 工具在執行
deploy --prod時，加入了一個微妙的終端機 ASCII 藝術動畫，並在結束時顯示執行時間："已於 1.4 秒內部署完成（比上次執行快 3.2 倍）⚡"。 - 影響：開發者自發性地截圖並在推特上分享該終端機輸出，在產品發布的第一週就為 GitHub 帶來了 4,000 顆星。
驗證檢查清單
- 微互動在 $< 300\text{毫秒}$ 內執行完畢，且不阻擋使用者輸入。
- 慶祝動畫與使用者的真實成就相符（峰值-終點時刻）。
- 空白狀態提供通往操作與學習的直接路徑。
- 音效設計預設為關閉，或尊重系統音量與靜音狀態。
- 當
prefers-reduced-motion啟用時，提供完整的降級方案。
反模式
- Clippy 症候群：用不必要的彈出視窗或試圖搞笑的動畫吉祥物打斷使用者的專注力。
- 緩慢的轉場：讓使用者等待 1.5 秒的模態框淡入，然後才能點擊「確認」。
- 慶祝失敗：當發生錯誤或帳單付款失敗時，顯示卡通人物哭泣或做出古怪行為。