microinteractions

微互動框架

設計使用者每天觸碰的那些微小、封閉的產品時刻——切換開關、密碼欄位、載入指示器、下拉重新整理、按讚按鈕。基於 Dan Saffer 的四部分結構（觸發器、規則、回饋、循環與模式），這個框架將看不見的細節轉化為讓產品從平庸變為受歡迎的精緻感。

核心原則

你容忍的產品與你喜愛的產品之間的差異，幾乎總是在微互動中。 微互動是一個圍繞單一使用案例建立的封閉時刻——變更設定、同步資料、選擇密碼——小到使用者幾乎不會有意識地思考，但他們能感受到。每個微互動都遵循相同的四部分結構：觸發器啟動它，規則決定發生什麼事，回饋顯示正在發生什麼事，而循環與模式定義其長期行為。

評分

目標：10/10。 根據微互動通過 8 項快速診斷中的多少項來評分——score = round(passed / 8 × 10)，然後閱讀區間：

• 9-10 = 通過全部 8 項：刻意可發現的觸發器，具有可見狀態；簡單可預測的規則；低於 100ms 的回饋，按事件重要性調整；隨時間演進；無模式或模式可見；無需幫助即可學習。
• 5-6 = 通過 4-5 項：能用但感覺普通——例如回饋存在但單一，或觸發器缺乏不同狀態。
• <=3 = 通過 2 項或更少：缺少回饋、看不見的觸發器，或隱藏模式破壞信任。

始終說明當前分數、哪些診斷項目未通過，以及每個項目的具體修正方式。

微互動結構

設計世界級微互動的六個重點領域。當你需要完整分析一個真實模式——表單提交、切換開關、下拉重新整理、載入狀態和通知，從首次使用到邊緣情況——請參閱 references/case-studies.md。

1. 觸發器

核心概念： 觸發器啟動微互動——手動（點擊、滑動、語音指令）或系統啟動（時間、位置、傳入資料、錯誤狀態）。它是每個微互動的大門。

為何有效： 觸發器的顯著性和標籤在使用者行動前就設定了他們的期望——一個紅色寫著「刪除」的按鈕表示不可逆的高風險結果，因此後續的回饋感覺可預測而非令人驚訝。

關鍵見解：

• 觸發器必須傳達三件事：它存在、它做什麼、以及它處於什麼狀態
• 將觸發器顯著性與動作重要性匹配——高風險動作需要顯著的觸發器
• 將不可見觸發器（手勢、搖晃、接近感應）與可見替代方案配對，以確保可發現性
• 讓觸發器狀態——預設、懸停、啟用、停用、載入——在視覺上有所區別

產品應用：

情境	應用	範例
切換控制	帶有二進位狀態的手動觸發器	iOS Wi-Fi 開關：點擊切換，位置顯示狀態
下拉重新整理	帶有可見預設用途的隱藏手勢	下拉超過閾值觸發重新整理動畫
系統提醒	條件滿足時的系統觸發器	電量低於 20% 時的通知

道德界限： 切勿將關鍵觸發器隱藏在手勢或不可見互動之後，而沒有可見的備用方案。

參閱：references/trigger-design.md 了解觸發器預設用途、狀態、放置位置以及降低觸發器複雜度。

2. 規則

核心概念： 規則定義微互動觸發後發生什麼事——事件順序、限制、處理和結束。使用者從不直接看到規則，但當規則錯誤時他們能感受到。

為何有效： 規則建立了使用者對互動如何運作的心智模型。一致的規則符合預期，感覺自然；違反規則——一個不會切換的開關、一個跳躍數值的滑桿——會破壞信任。

關鍵見解：

• 首先定義微互動的目標，然後從中推導出規則
• 符合現有的心智模型和平台慣例
• 限制輸入以防止錯誤：限制字元數、設定數值範圍、強制格式
• 明確處理邊緣情況：零、最大值、重複觸發、中斷

產品應用：

情境	應用	範例
密碼強度	規則即時評估輸入	使用者輸入時強度計更新；顏色從紅轉綠
字元計數器	規則限制並顯示剩餘字數	Twitter/X：計數器減少，達到上限時變紅
復原動作	規則設定可逆轉的時間窗口	Gmail「取消傳送」可在 30 秒內使用

道德界限： 保持規則透明且可預測——切勿隱藏會操縱行為的規則，例如讓取消訂閱比訂閱更困難。

參閱：references/rules-and-state.md 了解狀態管理、限制、錯誤狀態和邊緣情況。

3. 回饋

核心概念： 回饋將規則傳達給使用者，回答「現在發生什麼事？」——視覺上（顏色、動畫、移動）、聽覺上（點擊聲、提示音）或觸覺上（震動）。只顯示重要的內容：最小化、有意義、符合情境。

為何有效： 沒有回饋，使用者無法判斷他們的動作是否被記錄或系統是否在運作，因此他們會重複點擊、放棄或不信任結果。回饋將看不見的系統狀態轉化為可感知的回應。

關鍵見解：

• 回饋必須即時——直接操作應在 100ms 內
• 使用最不明顯但仍能傳達資訊的回饋，並優先動畫化現有元素（按鈕本身，而非單獨的提示）
• 將回饋規模與事件重要性匹配：小動作 = 小回饋，大結果 = 大回饋
• 視覺回饋是主要的；聽覺和觸覺是輔助的，絕不能是唯一管道
• 進度指示器能減少感知等待時間，即使實際時間不變

產品應用：

情境	應用	範例
按鈕按下	點擊時視覺狀態變化	按鈕下沉、顏色變化、文字變為「儲存中...」
表單驗證	使用者輸入時內聯回饋	有效電子郵件欄位旁出現綠色勾號
錯誤狀態	靠近錯誤來源的上下文回饋	欄位紅色邊框 +「密碼必須至少 8 個字元」

道德界限： 保持回饋誠實——沒有假的進度條、操縱性的倒數計時或欺騙性的完成百分比。

參閱：references/feedback-patterns.md 了解回饋管道、時機和防止過載。

4. 循環與模式

核心概念： 循環是隨時間變化的元規則——互動在第 100 次使用後會改變嗎？會過期嗎？會適應嗎？模式是規則的分支，同一個控制項暫時表現不同（編輯模式 vs. 檢視模式）。

為何有效： 深思熟慮的循環讓微互動優雅地成熟——為進階使用者減少摩擦，同時對新手保持可發現性。模式在謹慎使用下，讓一個控制項服務多種用途而不會使介面雜亂。

關鍵見解：

• 開放循環持續直到明確停止（重複的鬧鐘）；封閉循環執行一次後結束（計時器）
• 長循環隨時間改變互動：首次使用顯示工具提示；第 50 次則不顯示
• 漸進式簡化：隨著使用者展現熟練度，移除輔助提示
• 模式很危險——它們違反「相同動作，相同結果」；盡量減少模式，並讓當前模式高度可見（大寫鎖定指示燈、編輯橫幅）

產品應用：

情境	應用	範例
入門引導提示	長循環在 N 次使用後移除提示	前 3 次會話顯示「滑動以歸檔」；之後停止
鬧鐘	開放循環重複直到停用	每個工作日早上 7 點響鈴，直到關閉
文字編輯	模式：檢視 vs. 編輯	橫幅顯示「編輯中」，附有「完成」按鈕退出

道德界限： 循環應有益於使用者，而非商業——切勿為了增加通知或讓退出選項越來越困難而調整循環。

參閱：references/loops-modes.md 了解長循環、模式錯誤和漸進式複雜度。

5. 標誌性時刻

核心概念： 標誌性時刻是一種微互動，其獨特性足以成為產品身份的一部分——Facebook 的按讚、滑動解鎖、Slack 的載入訊息。每個產品應該有一兩個；但不是每個互動都該如此。

為何有效： 標誌性時刻創造情感記憶，讓產品感覺是精心打造而非拼湊而成。它們是使用者在向他人描述你的產品時首先展示的東西。

關鍵見解：

• 將標誌性時刻放在頻繁、可見的動作上——而非深藏的設定中
• 功能優先，愉悅其次——絕不為了新奇而犧牲可用性
• 動畫、聲音和文案是最常見的三種工具
• 與品牌個性一致：活潑的品牌獲得活潑的時刻
• 應用移除測試：如果使用者不會懷念它，那就是裝飾，而非標誌性

產品應用：

情境	應用	範例
社交反應	對參與的動畫回應	Facebook 按讚：大拇指動畫搭配粒子效果
載入狀態	品牌化的等待體驗	Slack：載入時旋轉的引言
完成	慶祝性的確認	Stripe 付款：動畫勾號搭配五彩紙屑

道德界限： 切勿將輸入或下一步驟擋在不可跳過的慶祝動畫之後——讓使用者可以點擊穿過五彩紙屑繼續操作。

參閱：references/signature-moments.md 了解何時投入以及如何讓平凡互動變得愉悅。

6. 減少與簡化

核心概念： 最好的微互動幾乎不被注意到，因為它非常簡單且快速。減少（更少的選項、步驟、決策），然後簡化剩下的內容，直到感覺毫不費力。

為何有效： 每個選項、欄位和決策都會增加認知負荷——使用者不想設定一個切換開關，他們希望它直接運作。最優雅的微互動具有零配置、一個動作和即時結果。

關鍵見解：

• 如果微互動需要說明，那就太複雜了
• 透過智慧預設移除選項——選擇最佳選項並堅持使用
• 盡可能將多步驟互動折疊為單一動作
• 使用漸進式揭露：先顯示簡單內容，僅在要求時顯示複雜內容
• 保持規則數量與使用頻率成比例：常見動作需要較少規則

產品應用：

情境	應用	範例
智慧預設	消除設定	相機應用預設開啟拍照模式，而非設定
單一動作	一次點擊取代多步驟流程	雙擊按讚取代選單 + 選擇反應
預測性設計	預測並預先填寫	運送表單從郵遞區號自動填入城市和州

道德界限：「智慧預設」必須服務使用者，而非商業——切勿預先勾選行銷同意、付費附加功能或資料共享作為預設選項。

常見錯誤

錯誤	為何失敗	修正
動作無回饋	使用者無法判斷點擊是否被記錄	為每個互動元素添加即時視覺狀態變化
過度設計簡單時刻	複雜動畫拖慢頻繁動作	將豐富動畫保留給不頻繁、高影響的時刻
忽略邊緣情況	互動在零、最大值或雙擊時失效	繪製每個狀態：空白、載入中、部分、完整、錯誤、停用
看不見的觸發器	使用者無法發現功能	將手勢觸發器與可見替代方案配對
模式錯誤	相同動作因隱藏狀態而產生不同結果	讓當前模式可見；盡量減少模式
忽略長循環	互動在第 1 天和第 100 天感覺相同	對回訪使用者使用漸進式簡化
回饋過載	每個動作都觸發提示、聲音或動畫	使用能傳達資訊的最小回饋
假的進度指示器	使用者發現進度條是假的時感到被欺騙	使用誠實、確定性的進度；未知時使用不確定旋轉器

快速診斷

審查任何微互動：

問題	如果否	行動
是否有清晰、可發現的觸發器？	使用者無法啟動互動	添加可見控制項或預設用途
觸發器是否顯示其當前狀態？	使用者無法判斷它是開啟、關閉或載入中	為每個觸發器狀態添加不同的視覺狀態
規則是否簡單且可預測？	使用者對發生的事感到困惑	簡化規則；符合平台慣例
是否有即時回饋？	使用者質疑他們的動作是否有效	在 100ms 內添加視覺回應
回饋是否與事件重要性匹配？	小動作感覺戲劇化，或大結果感覺微不足道	根據事件重要性調整回饋規模
互動是否隨時間演進？	進階使用者仍看到新手提示	透過長循環添加漸進式簡化
互動是否沒有不必要的模式？	使用者在錯誤模式下執行錯誤動作	移除模式或讓當前模式高度可見
首次使用者能否在無幫助下理解？	互動需要解釋	簡化或透過長循環添加一次性提示

延伸閱讀

此技能基於 Dan Saffer 關於細節設計的權威指南：

• 《微互動：細節設計的藝術》 by Dan Saffer

關於作者

Dan Saffer 是一位設計師和設計領導者，曾帶領 Twitter、Jawbone 和 Smart Design 的團隊。他的著作《微互動》將設計團隊全球使用的框架系統化，用以審查、設計和改善那些讓產品感覺精緻且生動的小細節。他還撰寫了《互動設計》和《手勢介面設計》。