遊戲設計這個領域過去 30 年研究怎麼讓玩家「想再玩一次」 — 這跟一般 web 應用「想再回來」的目標非常相像。但 web 設計師很少看遊戲設計理論。這篇分享 5 個從遊戲借來、實際用在本工作室網站的 UX 技巧。
1. 進度回饋：每個動作都有立即視覺反應
遊戲：撿金幣有 +50 飄字、打怪有血條減少、升級有閃光特效。
Web 應用：很多按鈕點下去什麼都沒發生，使用者不知道有沒有 work。改善：
- 按鈕點擊有 scale down 0.97（觸覺感）
- 表單提交立刻換 spinner
- 儲存成功有「✓ 已儲存」短暫顯示後消失
- 數字變動有滾動動畫（從舊數字滑到新數字）
本站的字級切換按鈕點下去整頁字會放大 — 動作 = 視覺結果，使用者立刻知道生效了。
2. 變動報酬（Variable Rewards）
遊戲：開寶箱不知道會出什麼。轉盤每次都不一樣。這個「不確定」讓人特別想試。
Web 應用：常見錯誤是「可預測」 — 每次刷新都長一樣。
正確應用：
- 新聞 app 把今天的「相關推薦」每次刷新略不同
- e-commerce 首頁的「為你精選」隨機輪替
- blog 的「閱讀更多」推薦不同主題
注意：不能濫用變成 dark pattern。變動是輔助，不是欺騙。
3. 新手引導：first-time experience
遊戲：第一關通常是 tutorial 包裝成「實際遊戲」 — 玩家學會操作但不覺得在學。
Web 應用很多用 modal 跳出說明書，使用者直接 X 掉。改用「漸進揭露」：
- 第一次按某按鈕後出現「✓ 完成第一個動作」
- 下一個按鈕周圍有微微脈衝（吸引視線）
- 用「半生不熟」的引導 — 不告訴使用者全部、只指引下一步
4. 記憶點觸發：sound + visual peak
遊戲：通關時的勝利音效 + 金光、解鎖成就的徽章彈出。這些 peak moment 讓玩家記得遊戲。
Web 應用：
- 第一筆訂單成功 — 播音效 + confetti 動畫
- 達成某里程碑 — 解鎖成就 toast
- 邀請朋友成功 — 慶祝動畫
不要每個小動作都慶祝 — 重要的事才有 peak。否則使用者麻木。
5. 零摩擦撤銷：取代 confirm dialog
遊戲：許多遊戲讓玩家「先做、後悔可以悔棋」。比「確定要做嗎？」流暢百倍。
Web 應用學會了，但很多沒做：
- Gmail 刪信件 — 立刻刪 + 「已刪除（復原）」5 秒
- Twitter 發推文 — 30 秒內可撤回
- Trello 移動卡片 — 立刻移 + Ctrl+Z
程式碼：
function deleteItem(id) {
// 1. 樂觀地立刻消失
ui.removeItem(id);
// 2. 顯示 toast with undo
toast.show({
message: '已刪除',
action: '復原',
onAction: () => ui.restoreItem(id),
duration: 5000,
});
// 3. 5 秒後才真的送 server
setTimeout(() => api.delete(id), 5000);
}
反例：什麼時候不該遊戲化
- 嚴肅工具：法律、醫療、財務工具，遊戲化反而不專業
- 重複任務：每天必做的事不該慶祝（會疲勞）
- 已經 dark pattern：變動報酬被誤用成賭博機制
夠克制就好
遊戲化 ≠ 加滿動畫跟音效。本站的「遊戲化」其實非常克制：
- 按鈕 hover 有微妙陰影變化
- 滾動觸發的 fade-in
- 連結 hover 顏色從藍到紫的過渡
沒有金光、沒有 confetti、沒有勝利音效。遊戲化的精髓是「讓人想再回來」，不是「看起來像遊戲」。
結語
遊戲設計的書（如 Schell 的 The Art of Game Design）對 web 設計師意外有用。這 5 個技巧是長期觀察累積的選集，每個都能直接套用。把使用者當「玩家」 — 他們在你的應用「玩」 — 比把他們當「user」更能設計出黏著的體驗。