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 頁:

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。