Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

菲茨定律

Fitts’s Law

加入比较 +

菲茨定律是一个量化模型:用指点设备(鼠标、手指)到达一个目标所需的时间,随目标距离增大而增加、随目标尺寸增大而减少,且这种关系是对数式的,而非线性——距离翻倍,耗时增加但不会翻倍。

示意图 · 编辑插画,尚无可操作示例
一个虚构的 FIELDNOTES 界面,一条箭头状光标路径从起点分别指向右下角的大目标与画面中段的小而远的目标,两个目标以矩形的尺寸和距离对比暗示到达难度的不同。
一个虚构的 FIELDNOTES 界面,一条箭头状光标路径从起点分别指向右下角的大目标与画面中段的小而远的目标,两个目标以矩形的尺寸和距离对比暗示到达难度的不同。

识别特征

  • 常用或高频操作的目标更大,或被放置在更靠近当前指针/手指位置的地方
  • 屏幕边缘或角落被用来放置需要快速命中的控件(如系统菜单、任务栏)
  • 小而远的目标只在低频、低代价的场景中出现

概念边界

菲茨定律预测的是移动到目标所需的时间,不是用户决定选哪个选项所需的时间;后者属于希克-海曼定律(另一条尚未收录的独立词条),二者常被混用但机制不同。在桌面环境中,屏幕边缘与四角因为指针无法越过边界而移动速度不受影响,等效于“无限宽”的目标,这是它的一个特殊推论,而非额外假设。菲茨定律本身不主张“按钮越大越好”:它只描述时间随尺寸变化的趋势,具体尺寸是否合适、是否值得为更大目标牺牲布局空间,属于编辑取舍而非该定律本身的结论。

什么时候考虑它

  • 决定交互目标(按钮、图标、可点击区域)的尺寸与摆放位置
  • 在触控界面上评估手指是否能准确命中目标
  • 为高频或高代价操作设计更快、更可靠的到达路径

什么时候慎用

  • 用它来判断用户会不会做出正确的选择——那是决策时间,不是移动时间
  • 把它当作“所有按钮都应尽量放大”的通用理由,忽视布局与信息密度的取舍
  • 用它替代无障碍规范对目标尺寸的具体量化要求

取舍

把频繁或高代价操作放在更靠近指针、尺寸更大的位置能减少到达时间与误触,但会占用更多屏幕空间,并可能挤压其他内容或造成布局失衡;一味放大所有目标并不会带来同等收益。

条件规则 · 编辑建议

当设计任何用指点设备或手指操作的交互目标必须让目标至少达到 24×24 CSS 像素,或者在尺寸不足时保证与相邻目标之间有足够间距。
当识别出高频或高代价的操作建议把它放在更靠近指针或手指当前所在位置的地方,缩短到达距离。
当在同一区域布局高频操作与破坏性操作建议不要把破坏性操作紧邻高频操作放置,避免因到达路径过近而被误触。

相关词条

按下状态反馈 ↗可以配合 · 用户命中目标后需要确认操作是否成功

菲茨定律解决“能否准确到达目标”,按下状态解决“到达后是否得到反馈”,两者共同支撑一次可靠的点击。

错误预防 ↗提供解释 · 高频操作与破坏性操作在布局上相邻

把高代价操作放得离常用目标很近会缩短其到达时间,也同时提高被误触的概率,需要用间距或位置隔离来预防。

直接操纵 ↗可以配合 · 用户直接用指针或手指拖动、点击界面对象

直接操纵依赖用户准确地到达并抓取目标,目标的尺寸与距离直接影响这种操纵是否顺畅。

来源与支持范围

NN/g · Fitts's Law and Its Applications in UX ↗

移动时间是距离与目标尺寸的对数函数(T = a + b·log2(2D/w)):距离越大耗时越长但非线性增长,目标越大耗时越短;屏幕边缘因指针无法越过边界而等效于无限宽的目标。

检索日期:2026-09-15 · 存档于 2026-09-16
Laws of UX · Fitts's Law ↗

到达目标所需时间是目标距离与尺寸的函数;目标越小或越远,到达时间越长、出错率越高,应保持任务相关目标与操作区域的距离尽量短,并为触控目标预留足够间距。

检索日期:2026-09-15 · 快照待确认
W3C · Understanding SC 2.5.8: Target Size (Minimum) ↗

WCAG 2.2 AA 级要求:指点输入的目标尺寸至少为 24×24 CSS 像素,或在不满足尺寸时保证目标之间有足够间距,另有内联文本、等效控件、用户代理控件、必要呈现等例外情形。

检索日期:2026-09-15 · 快照待确认

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意,用于说明距离与尺寸对到达时间的影响,不代表已验证的实现。应用到实际产品前,仍须实测目标尺寸与间距是否满足 WCAG 2.5.8,验证高频操作的布局是否真的缩短了到达路径,并确认破坏性操作与常用操作保持了安全距离。

{
  "evidenceType": "量化的人体运动预测模型,源自实验心理学并被 HCI 广泛验证",
  "limit": "本词条只覆盖移动时间,不覆盖决策时间;不规定除 WCAG 24×24 之外的具体像素取值,也不提供本样例的测量数据。"
}
完整 Agent 条目 JSON
{
  "id": "fitts-law",
  "type": "principle",
  "name": {
    "zh": "菲茨定律",
    "en": "Fitts’s Law"
  },
  "aliases": [
    "Fitts' Law",
    "指点运动定律",
    "目标尺寸与距离定律"
  ],
  "granularity": "component",
  "intents": [
    "reach-target",
    "prevent-error"
  ],
  "tags": [
    "目标尺寸",
    "指点运动",
    "触控",
    "无障碍",
    "布局"
  ],
  "definition": "菲茨定律是一个量化模型:用指点设备(鼠标、手指)到达一个目标所需的时间,随目标距离增大而增加、随目标尺寸增大而减少,且这种关系是对数式的,而非线性——距离翻倍,耗时增加但不会翻倍。",
  "boundary": "菲茨定律预测的是移动到目标所需的时间,不是用户决定选哪个选项所需的时间;后者属于希克-海曼定律(另一条尚未收录的独立词条),二者常被混用但机制不同。在桌面环境中,屏幕边缘与四角因为指针无法越过边界而移动速度不受影响,等效于“无限宽”的目标,这是它的一个特殊推论,而非额外假设。菲茨定律本身不主张“按钮越大越好”:它只描述时间随尺寸变化的趋势,具体尺寸是否合适、是否值得为更大目标牺牲布局空间,属于编辑取舍而非该定律本身的结论。",
  "signature": [
    "常用或高频操作的目标更大,或被放置在更靠近当前指针/手指位置的地方",
    "屏幕边缘或角落被用来放置需要快速命中的控件(如系统菜单、任务栏)",
    "小而远的目标只在低频、低代价的场景中出现"
  ],
  "when": [
    "决定交互目标(按钮、图标、可点击区域)的尺寸与摆放位置",
    "在触控界面上评估手指是否能准确命中目标",
    "为高频或高代价操作设计更快、更可靠的到达路径"
  ],
  "when_not": [
    "用它来判断用户会不会做出正确的选择——那是决策时间,不是移动时间",
    "把它当作“所有按钮都应尽量放大”的通用理由,忽视布局与信息密度的取舍",
    "用它替代无障碍规范对目标尺寸的具体量化要求"
  ],
  "tradeoff": "把频繁或高代价操作放在更靠近指针、尺寸更大的位置能减少到达时间与误触,但会占用更多屏幕空间,并可能挤压其他内容或造成布局失衡;一味放大所有目标并不会带来同等收益。",
  "comparison": {
    "focus": "到达一个目标需要多久,而不是选哪个目标需要多久",
    "mechanism": "移动时间随距离增大呈对数增长、随目标尺寸增大呈对数下降",
    "cost": "更大或更近的目标会占用布局空间,需要与信息密度、视觉层级权衡"
  },
  "sources": [
    {
      "id": "nng-fitts-law",
      "title": "NN/g · Fitts's Law and Its Applications in UX",
      "url": "https://www.nngroup.com/articles/fitts-law/",
      "claim": "移动时间是距离与目标尺寸的对数函数(T = a + b·log2(2D/w)):距离越大耗时越长但非线性增长,目标越大耗时越短;屏幕边缘因指针无法越过边界而等效于无限宽的目标。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/fitts-law/",
        "status": "available",
        "checkedAt": "2026-09-16T04:01:31.264Z",
        "jobId": "spn2-e9a423560991668c050e8417e3a4764c0e5a0cdc",
        "url": "https://web.archive.org/web/20260916040156/https://www.nngroup.com/articles/fitts-law/",
        "timestamp": "20260916040156"
      }
    },
    {
      "id": "lawsofux-fitts-law",
      "title": "Laws of UX · Fitts's Law",
      "url": "https://lawsofux.com/fittss-law/",
      "claim": "到达目标所需时间是目标距离与尺寸的函数;目标越小或越远,到达时间越长、出错率越高,应保持任务相关目标与操作区域的距离尽量短,并为触控目标预留足够间距。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://lawsofux.com/fittss-law/",
        "status": "pending",
        "checkedAt": "2026-09-16T04:01:47.905Z",
        "error": "status-request-failed",
        "jobId": "spn2-006909d9cd4921fb94f4887a612db8a1e802241e"
      }
    },
    {
      "id": "wcag22-sc258",
      "title": "W3C · Understanding SC 2.5.8: Target Size (Minimum)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html",
      "claim": "WCAG 2.2 AA 级要求:指点输入的目标尺寸至少为 24×24 CSS 像素,或在不满足尺寸时保证目标之间有足够间距,另有内联文本、等效控件、用户代理控件、必要呈现等例外情形。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html",
        "status": "pending",
        "checkedAt": "2026-09-16T04:02:11.353Z",
        "error": "status-request-failed",
        "jobId": "spn2-54898850c9a143b79422b45d34bde84715206fe4"
      }
    }
  ],
  "relations": [
    {
      "target": "pressed-state",
      "kind": "composes_with",
      "condition": "用户命中目标后需要确认操作是否成功",
      "reason": "菲茨定律解决“能否准确到达目标”,按下状态解决“到达后是否得到反馈”,两者共同支撑一次可靠的点击。",
      "basis": "editorial"
    },
    {
      "target": "error-prevention",
      "kind": "informs",
      "condition": "高频操作与破坏性操作在布局上相邻",
      "reason": "把高代价操作放得离常用目标很近会缩短其到达时间,也同时提高被误触的概率,需要用间距或位置隔离来预防。",
      "basis": "editorial"
    },
    {
      "target": "direct-manipulation",
      "kind": "composes_with",
      "condition": "用户直接用指针或手指拖动、点击界面对象",
      "reason": "直接操纵依赖用户准确地到达并抓取目标,目标的尺寸与距离直接影响这种操纵是否顺畅。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "设计任何用指点设备或手指操作的交互目标",
      "instruction": "让目标至少达到 24×24 CSS 像素,或者在尺寸不足时保证与相邻目标之间有足够间距。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "识别出高频或高代价的操作",
      "instruction": "把它放在更靠近指针或手指当前所在位置的地方,缩短到达距离。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "在同一区域布局高频操作与破坏性操作",
      "instruction": "不要把破坏性操作紧邻高频操作放置,避免因到达路径过近而被误触。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "量化的人体运动预测模型,源自实验心理学并被 HCI 广泛验证",
    "limit": "本词条只覆盖移动时间,不覆盖决策时间;不规定除 WCAG 24×24 之外的具体像素取值,也不提供本样例的测量数据。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例;插画为编辑示意,用于说明距离与尺寸对到达时间的影响,不代表已验证的实现。应用到实际产品前,仍须实测目标尺寸与间距是否满足 WCAG 2.5.8,验证高频操作的布局是否真的缩短了到达路径,并确认破坏性操作与常用操作保持了安全距离。",
  "image": {
    "src": "/images/fitts-law.webp",
    "alt": "一个虚构的 FIELDNOTES 界面,一条箭头状光标路径从起点分别指向右下角的大目标与画面中段的小而远的目标,两个目标以矩形的尺寸和距离对比暗示到达难度的不同。"
  },
  "searchTerms": [
    "target size",
    "pointing movement",
    "touch",
    "accessibility",
    "layout"
  ]
}