## 費茲法則 (Fitts's Law) 目標的選取時間取決於目標的距離與大小。 --- ## 起源 費茲法則是由心理學家 Paul Fitts 在 1954 年提出的， 描述人類移動到目標所需的時間與目標距離和大小之間的關係。 --- ## 費茲法則公式 ### ID = log₂(2D/W) **其中：** - **ID** = 輸入困難度 (index of difficulty) - **D** = 起始點到目標中心的距離 - **W** = 目標的寬度 --- ## 核心概念 - **目標越大，移動時間越短** - **目標越近，移動時間越短** - **對數關係表示邊際效益遞減** --- ## 人因因素：美國空軍失誤事件 1950年代，美國空軍面臨嚴重的飛行事故問題。 飛行員在操作飛機控制桿時經常出現失誤，導致飛機墜毀。 --- ### 費茲的研究 他發現大多數的墜機是因為飛行員在高壓情況下混淆了外觀幾乎相同的按鈕。 --- ### 解決方案 重新設計按鈕：透過不同的形狀，讓飛行員僅透過觸感便能輕鬆識別。 --- ### 影響與啟示 更好的設計意味著要理解人在分析、困惑或壓力下，無法理性思考的行為模式， 並確保在這些情況下仍能安全有效地運作。 --- ## 設計啟示：目標大小 ### 重要按鈕要夠大 - 常用功能按鈕應該有足夠的點擊區域 - 觸控目標最小尺寸：建議至少 44×44 像素 - 避免過小的可點擊元素 --- ## 設計啟示：目標距離 ### 相關功能要靠近 - 功能相關的按鈕應該放在一起 - 減少不必要的移動 - 常用功能放在容易到達的位置 - 考慮螢幕邊緣：邊緣和角落是「無限大」的目標 --- ## 實際應用：網頁設計 - **導航欄設計**：主要導航項目要夠大且容易點擊 - **CTA 按鈕**：行動呼籲按鈕要突出且易於點擊 - **表單設計**：輸入框和提交按鈕的合理佈局 --- ## 實際應用：行動應用 - **拇指友好設計**：考慮單手操作時的觸控範圍 - **底部導航**：重要功能放在拇指容易到達的區域 - **手勢設計**：滑動、點擊等手勢的目標區域設計 --- ## 實際應用：桌面應用 - **工具列設計**：常用工具要容易找到和點擊 - **選單設計**：下拉選單的項目大小和間距 - **快捷鍵**：減少滑鼠移動的需求 --- ## 常見錯誤：❌ 錯誤做法 1. **過小的按鈕**：用戶難以準確點擊 2. **功能分散**：相關功能距離太遠 3. **忽略邊緣**：沒有利用螢幕邊緣的優勢 4. **不一致的目標大小**：相同重要性的元素大小不一 --- ## 正確做法：✅ 最佳實踐 1. **適當的目標大小**：確保易於點擊 2. **合理的功能分組**：相關功能放在一起 3. **利用邊緣優勢**：重要控制項放在邊緣 4. **一致的設計語言**：相似功能使用相似的目標大小 --- ## 測試與驗證方法 ### 可用性測試 1. **點擊測試**：測量用戶點擊不同大小目標的時間 2. **眼動追蹤**：觀察用戶的視覺路徑 3. **A/B 測試**：比較不同設計的效果 4. **熱點圖分析**：了解用戶的點擊模式 --- ## 量化指標 - **點擊準確率**：目標是否容易被準確點擊 - **完成時間**：完成任務所需的時間 - **錯誤率**：點擊錯誤的頻率 - **用戶滿意度**：主觀的使用體驗評價 --- ## 總結 費茲法則是 UX 設計中的基礎法則，它提醒我們： 1. **目標要夠大**：確保用戶能夠輕鬆點擊 2. **距離要合理**：減少不必要的移動 3. **利用邊緣優勢**：螢幕邊緣是「無限大」的目標 4. **考慮用戶習慣**：設計要符合用戶的使用模式 **記住：好的設計應該是直覺的，用戶不需要思考就能完成操作。** --- ## References - [簡介費茲定律 (Fitt’s Law)](https://deephci.wordpress.com/2018/07/28/fitts-law/) --- ## ʕ •ᴥ•ʔ：Thank you