UX的定律第一集-Fitts法則
後設資料
- URL:見 frontmatter
- 作者:KW
- 發表日:2018-01-24
- 媒體:Medium / AAPD-As-A-Product-Designer
- 語言:中文
- 閱讀時間:8 分鐘
- 原始靈感來源:Laws of UX(lawsofux.com)
一句話濃縮
費茲法則 把介面中的「點得到、點多快、會不會點錯」轉成距離與目標大小的問題:目標越近、越大,使用者越容易完成指向或觸控任務;因此按鈕尺寸、CTA 位置、連續流程下一步、螢幕邊角與相關操作群組都應被視為 使用者體驗設計 的操作摩擦設計。
提取要點
Fitts 法則的基本命題
- Fitts’s Law 指「取得目標所需時間,是目標距離與大小的函數」:離起點越遠、目標越小,使用者花的時間越長、錯誤率也更容易上升。
- 此法則源自 Paul Fitts 1954 年對人體運動系統的研究,後續成為 HCI 中評估輸入設備與介面操作難度的重要原則。
- 文章將其放在 UI/UX 場景:按鈕大小、按鈕位置、Call to Action、連續流程與螢幕邊角,都可用 Fitts 法則解釋。
原始模型與設計翻譯
- 模型中的核心變數是:
D:起點到目標中心的距離。W:沿運動軸測量的目標寬度,也可理解為可容錯範圍。ID:難度指標,依距離與寬度的比例計算。MT:完成移動的平均時間。
- 設計翻譯:介面元件不是只要「看起來漂亮」,還要考慮它在任務流程中是否容易被使用者取得。
Prime Pixel:從使用者當前位置預測下一步
- 文章把網頁任務想成「從 A 按鈕到 B 按鈕」的過程;若下一步按鈕越靠近使用者可能所在的位置,任務摩擦越低。
- 桌面右鍵選單是 Prime Pixel 的典型例子:選單從游標位置出現,使下一個選項距離極短。
- 網頁無法直接知道每個使用者游標位置,因此可用頁面目的、視覺引導與主 CTA 來預測第一個操作點。
- Google 首頁搜尋框置中、Dropbox Business landing page 將明顯 CTA 放在首屏,都是透過視覺焦點引導使用者知道「下一步在哪裡」。
Magic Pixel:桌面邊角的特殊價值
- 桌面介面中的螢幕邊緣 / 角落會擋住游標,使邊角在實務上變成非常容易命中的目標。
- 文章以關閉按鈕為例:角落雖然離視線中心遠,但滑鼠移到邊緣後不會越界,因此點擊容錯變大。
- 這個判斷主要適用桌面游標場景;手機沒有游標,且受螢幕方向、握持方式與拇指可達範圍影響,不能直接照搬。
操作群組與距離
- 相關任務按鈕應放在相鄰區域,讓使用者在同一流程中以較少移動完成任務。
- 不相關或高風險操作可刻意拉開距離,避免誤觸;這也是「減少摩擦」與「保留必要摩擦」的取捨。
- Fitts 法則不應單獨使用。文章提醒還要和 Hick’s Law、Jakob’s Law、視覺層級與其他設計法則搭配,才不會把所有決策簡化成「按鈕越大越近越好」。
提取概念
連結到此來源衍生 / 更新的 wiki 頁:
- 費茲法則 — 新建;HCI / UX 中關於目標距離、目標大小與操作時間的基礎法則
- 使用者體驗設計 — 補入操作性摩擦的介面法則
- 用戶流 — 補入人因 / HCI 中指向與觸控任務的具體法則
- 無障礙設計 — 補入觸控區大小與多輸入方式的底層理由
- MOC-UX — 將 費茲法則 加入介面表現工具層
- AAPD-As-A-Product-Designer — 補入第五篇來源與「UX 定律 / HCI 法則」支線
Ingest 筆記
2026-05-06
- 新建 費茲法則 的理由:本來源雖是入門文章,但主題本身是 HCI / UX 經典法則,且能穩定承接未來的 touch target、pointer interaction、mobile ergonomics、Apple HIG / Material Design 元件尺寸等來源。若只併入 使用者體驗設計 或 用戶流,會讓後續介面操作摩擦來源缺少單一錨點。
- 不建 Prime Pixel / Magic Pixel:兩者在本篇中是 Fitts 法則的應用語彙,不是獨立方法論;先收進 費茲法則 的「桌面游標場景」與本來源提取要點。若未來有多篇桌面 OS / web interaction 深入來源,再考慮拆頁。
- 不建 KW 作者 entity:作者署名僅為
KW,本來源未提供可穩定辨識的職涯 / 作品背景;先在 AAPD-As-A-Product-Designer 作者矩陣以純文字列入,不建立薄頁。 - 觀察清單同步:新增 AAPD「UX 的定律」系列其他篇 / Laws of UX 原站待 ingest。Hick’s Law / Jakob’s Law / Laws of UX 目前僅在本篇作為延伸提及,先不建概念頁。
原文(可選)
Ingest 時透過 Medium 頁面讀取,本文不保存完整原文;原始 URL 見 frontmatter。