Loading on Tarragonhttps://tarrragon.github.io/blog/tags/loading/Recent content in Loading on TarragonHugo -- gohugo.iozh-TWTarragon (CC BY 4.0)Mon, 13 Jul 2026 00:00:00 +0800模組六：互動回饋設計https://tarrragon.github.io/blog/ux-design/06-interaction-feedback/Mon, 13 Jul 2026 00:00:00 +0800https://tarrragon.github.io/blog/ux-design/06-interaction-feedback/<p>回答「使用者按了按鈕之後發生什麼事」。核心原則：<strong>每個使用者動作都需要即時、誠實的系統回應</strong> — 沒有回饋的按鈕等同壞掉的按鈕。</p> <h2 id="設計問題">設計問題</h2> <p>使用者點擊按鈕後，有三個時間點需要回饋：</p> <ol> <li><strong>點擊瞬間</strong> — 系統收到操作了嗎？（點擊確認）</li> <li><strong>等待期間</strong> — 系統在處理嗎？（等待指示）</li> <li><strong>操作完成</strong> — 結果是什麼？（結果通知：成功 / 失敗 / 空結果）</li> </ol> <p>缺少任何一層，使用者的反應都是「再按一次」— 導致重複提交、重複導航、重複請求。</p> <p>「按了沒反應」在案例庫有四種被驗證過的成因，診斷時逐一排除：回饋未接線（<a href="https://tarrragon.github.io/blog/ux-design/cases/export-button-zero-feedback/" data-link-title="U.C5 匯出按鈕按下零回饋 — 狀態機完備但 UI 沒接線" data-link-desc="Flutter app 匯出設定頁的確認匯出按鈕 onPressed 是空 callback，按下畫面毫無變化 — 使用者無法分辨匯出成功、進行中、還是功能根本沒做。ViewModel 的 idle/inProgress/completed/failed 狀態機早已完備，缺的只是頁面接線與三層回饋">U.C5</a>）、佔位 handler（<a href="https://tarrragon.github.io/blog/ux-design/cases/management-actions-placeholder-only/" data-link-title="U.C20 管理模式操作全是佔位 — dev toast 讓未接線看起來有反應" data-link-desc="UI 有按鈕、domain 層功能也寫完、按下去只有開發提示或 log：佔位 handler 比沒有按鈕更糟 — 按鈕的存在承諾功能存在，dev toast 讓開發自測「有反應」、掩蓋未接線">U.C20</a>）、點到的不是按鈕（<a href="https://tarrragon.github.io/blog/ux-design/cases/status-icon-mistaken-for-button/" data-link-title="U.C18 狀態圖示被當成按鈕點 — 非互動指示與動作按鈕同形" data-link-desc="使用者回報「某個按鈕點了沒反應」、查程式發現那不是按鈕時使用。非互動的狀態圖示與動作按鈕同列混排且形態近似（描邊 vs 實心），使用者無法區分可點性">U.C18</a>）、回饋被版面壓縮（<a href="https://tarrragon.github.io/blog/ux-design/cases/selection-count-layout-starvation/" data-link-title="U.C19 「已選擇」計數被版面擠壓成省略號 — 回饋死在 layout" data-link-desc="狀態文字顯示成「...」、資料層查起來卻一切正常 — 回饋鏈的最後一哩是版面，flex 寬度競爭把關鍵計數整串壓成省略號，state 正確、使用者拿到零資訊">U.C19</a>）。</p> <h2 id="章節">章節</h2> <table> <thead> <tr> <th>章節</th> <th>主題</th> <th>回答問題</th> </tr> </thead> <tbody> <tr> <td><a href="feedback-three-layers/">互動回饋三層模型</a></td> <td>三層模型 + 畫面級狀態轉換</td> <td>使用者按了按鈕為什麼沒反應？</td> </tr> <tr> <td><a href="button-state-design/">按鈕狀態設計</a></td> <td>按鈕狀態 + 元件語意與版面（標籤 / 對比 / 溢出）</td> <td>一個按鈕需要幾種狀態？</td> </tr> <tr> <td><a href="response-time-strategy/">時間感知與回應策略</a></td> <td>等待時間的回饋策略 + 感知效能技巧</td> <td>什麼時候該顯示 Loading？</td> </tr> <tr> <td><a href="notification-pattern-selection/">通知模式選擇</a></td> <td>SnackBar / Dialog / Banner / Bottom Sheet 判準</td> <td>結果通知該用什麼形式呈現？</td> </tr> </tbody> </table> <p>每篇文末附設計檢查清單，可直接作為 code review 與規格驗收的依據。</p> <h2 id="模組邊界">模組邊界</h2> <table> <thead> <tr> <th>放在本模組</th> <th>放在其他模組</th> </tr> </thead> <tbody> <tr> <td>按鈕點擊回饋（視覺 + 觸覺）</td> <td>畫面狀態機設計（<a href="https://tarrragon.github.io/blog/ux-design/01-screen-state-machine/" data-link-title="模組一：畫面狀態機設計" data-link-desc="畫面狀態矩陣（顯示 / 操作 / 進入 / 退出）— 退出路徑為空 = UX 死胡同">模組一</a>）</td> </tr> <tr> <td>非同步操作等待指示（loading / spinner）</td> <td>錯誤訊息撰寫原則（<a href="https://tarrragon.github.io/blog/ux-design/04-error-recovery/" data-link-title="模組四：錯誤狀態與回復" data-link-desc="錯誤不只是紅色文字 — 是一個需要設計退出路徑的狀態">模組四</a>）</td> </tr> <tr> <td>操作結果通知（成功 / 失敗 / 空結果呈現）</td> <td>導航模式（<a href="https://tarrragon.github.io/blog/ux-design/05-navigation-patterns/" data-link-title="模組五：導航模式" data-link-desc="Push/pop stack、GoRouter 命名路由、tab bar、drawer — 導航方法選擇是設計決策">模組五</a>）</td> </tr> <tr> <td>防重複提交（debounce 防連點 / disable）</td> <td>表單驗證 UX（<a href="https://tarrragon.github.io/blog/ux-design/03-input-mechanism/" data-link-title="模組三：輸入機制設計" data-link-desc="Keyboard type / submit model / IME policy / special keys — 輸入機制是設計產物，影響 UI layout 和 protocol">模組三</a>）</td> </tr> <tr> <td>感知效能技巧（skeleton / 樂觀更新）</td> <td>無障礙宣告與可聽化（aria-live / aria-busy）</td> </tr> </tbody> </table>回答「使用者按了按鈕之後發生什麼事」。核心原則：每個使用者動作都需要即時、誠實的系統回應 — 沒有回饋的按鈕等同壞掉的按鈕。

設計問題

使用者點擊按鈕後，有三個時間點需要回饋：

  1. 點擊瞬間 — 系統收到操作了嗎？（點擊確認）
  2. 等待期間 — 系統在處理嗎？（等待指示）
  3. 操作完成 — 結果是什麼？（結果通知：成功 / 失敗 / 空結果）

缺少任何一層，使用者的反應都是「再按一次」— 導致重複提交、重複導航、重複請求。

「按了沒反應」在案例庫有四種被驗證過的成因，診斷時逐一排除：回饋未接線（U.C5）、佔位 handler（U.C20）、點到的不是按鈕（U.C18）、回饋被版面壓縮（U.C19）。

章節

章節 主題 回答問題
互動回饋三層模型 三層模型 + 畫面級狀態轉換 使用者按了按鈕為什麼沒反應？
按鈕狀態設計 按鈕狀態 + 元件語意與版面（標籤 / 對比 / 溢出） 一個按鈕需要幾種狀態？
時間感知與回應策略 等待時間的回饋策略 + 感知效能技巧 什麼時候該顯示 Loading？
通知模式選擇 SnackBar / Dialog / Banner / Bottom Sheet 判準 結果通知該用什麼形式呈現？

每篇文末附設計檢查清單，可直接作為 code review 與規格驗收的依據。

模組邊界

放在本模組 放在其他模組
按鈕點擊回饋（視覺 + 觸覺） 畫面狀態機設計（模組一）
非同步操作等待指示（loading / spinner） 錯誤訊息撰寫原則（模組四）
操作結果通知（成功 / 失敗 / 空結果呈現） 導航模式（模組五）
防重複提交（debounce 防連點 / disable） 表單驗證 UX（模組三）
感知效能技巧（skeleton / 樂觀更新） 無障礙宣告與可聽化（aria-live / aria-busy）
]]>