2026-10-26·by Sijie Wang#design#ergonomics#fitts-law

fitts-law

Fitts 定律:命中时间看的是距离和宽度的比

它是干嘛的。 预测一次瞄准移动要花多久(鼠标点按钮、手指点目标),让目标的尺寸和位置有证据可依,不凭感觉。

公式。

MT=a+b×log⁡2(D/W+1)MT = a + b \times \log_2(D/W + 1)

MT 是命中时间,D 是距离,W 是目标在移动方向上的宽度。ID = log2(D/W + 1) 是难度指数,单位 bit。a、b 是实验拟合出来的常数(Fitts 1954 年的敲击实验),不是第一性原理推出来的;而且 b 因设备而异,鼠标、触控板、手写笔不是同一个 b。

为什么是比值,不是距离本身。 时间随 D/W 的对数增长:距离翻倍,时间不是翻倍;宽度翻倍,收益递减。关键是比值,而且 W 是方向性的:一个又宽又扁的按钮,从侧面移过去还是难,因为它在移动轴上的宽度很小。

D = 400px,W = 36px,ID 约 3.60 bit:

∙  \bullet\ \raisebox{0.35em}{\rule{10em}{0.12em}}\ \rule{0.9em}{0.9em}

D = 400px,W = 44px,ID 约 3.33 bit:

∙  \bullet\ \raisebox{0.45em}{\rule{10em}{0.12em}}\ \rule{1.1em}{1.1em}

两行距离完全一样。真实宽度只差 8px,ID 就小了 0.27 bit:这就是比值在起作用。

边缘和角落:宽度做到无限大。 指针到屏幕边缘就停住了,过不去。贴着边缘的按钮,在朝边缘这个方向上的有效宽度就是无限大:滑过头了也没事,照样落在按钮上,这个轴根本不需要瞄准。W 趋向无限大时,ID 趋向 log2(1) = 0,只剩基线 a。角落是两个方向同时无限大,所以是桌面上最好点的目标。

管辖范围:只对指针成立。 边缘这招只在指针设备下成立。多显示器时,两个屏之间的边不是真边,指针直接穿过去,“边缘无限大”就没了;触屏更不用说:没有光标可停,手指还挡视线,边缘目标反而更难够。触屏不用边缘这招,改用最小尺寸:44pt(苹果 HIG)/ 48dp(安卓 Material),来历是手指指肚的尺寸。

实测:Lucerna 阅读页顶栏(按代码量,2026-10-25)。

  • design-system 的 Button 尺寸(仓 main 7 月快照):default 高 36px、sm 32px、lg 40px、icon 款 36x36px、图标 16px、圆角 4px。注意:MainApp 吃的 design-system 已发布版比这个快照新,线上尺寸可能已经动过。
  • 阅读页顶栏约 14 个动作(返回、收藏、目录、书签、生词、笔记、搜索、跳页、AI 设置、主题、字号、上一页、下一页、菜单、用户菜单,按 wrapper 传的 prop 数出来的)。这个数就是 Hick 那边的账:Fitts 要目标大,Hick 要选项少,顶栏就是它俩谈判的现场。
  • 断点:Tailwind v4 的 sm 默认 640px,MainApp 没有自定义;但阅读页根本不用 sm:/md:/lg: 类。真正的分界在 JS 里:useCompactViewport,分界线是 max-width: 639px。小于 640 走紧凑布局(另有手机单独的翻页条,正文字号小一档),大于等于 640 走完整布局。640 和 639 是同一条线的两面,只不过是用代码而不是响应式类实现的。
  • 效应量(先声明假设:鼠标、b 约 100ms/bit,只比相对值):D = 400px 时,W = 36px 的 ID 约 3.60 bit,W = 44pt 约 3.33 bit,省约 0.27 bit、一次点击约 27ms。D = 800px 时省约 0.28 bit。省的量基本不随距离变,这是对数比值的性质。
  • 没验到:顶栏是不是贴着视口顶边——这决定它能不能吃到“边缘无限大”。那份布局在已发布的 core UI 包(0.5.75)里,仓 main 分支里没有,所以这里不对它做边缘断言。

设计题深挖五问。

  1. 来历:这个数或常数是哪个实验给出来的?
  2. 边界:规则在什么条件下失效?
  3. 对家:它跟哪条规则打架?
  4. 实测:真界面的数是多少,按代码量出来的?
  5. 反例:照着规则做会在哪变差?

给 agent 的检查清单。读完本节点,按每一条去验界面,验出结果要带证据(文件、配置或算出来的 ID)。

  1. 各端目标尺寸,按代码量:高、宽、图标尺寸,按断点分别对;触屏端对照 44pt/48dp。
  2. 边缘与角落位置:哪些目标贴着真屏幕边,设备是不是指针设备?多显示器内侧边不算。
  3. 高频任务的 ID:每个任务写明 D 和方向上的 W,算出 ID,用 bit 比方案,不凭感觉。
  4. Hick 张力:数清同一表面上的动作数,说明缩小或分组要付什么代价。
  5. 触屏行为:同一表面改用触屏时,边缘推理是不是还出现?如果出现,标出来。
  6. 未验项:列出按代码确认不了的东西,别把它当测过的报。
about this entry

One of sijie's wiki entries. The AI on this site is grounded in the same corpus and answers in sijie's voice, with citations back to entries like this one — answering costs sijie money, so it waits behind a code: enter an access code →

fitts-law — Sijie Wang