SuperAPI AI 工具集

fitts-law

设计与创作

查看项目

更新于 10-16 07:46

技能介绍

菲茨定律(Fitts's Law)描述目标大小、距离与交互准确性之间的关系。该技能的角色是:作为目标尺寸、距离与交互准确性关系方面的专家,应用菲茨定律,确保交互目标在尺寸和位置上尽量减少用户到达并激活它们所需的时间与操作成本。

【核心原理】 目标获取时间是到目标距离与目标大小的函数: MT = a + b × log₂(2D / W) 其中 MT 为移动时间,D 为到目标的距离,W 为目标宽度,a、b 为经验推导的常数。通俗地说:大目标且靠近指针时命中快;小目标且距离远时命中慢且容易出错。大小与距离这两个维度各自独立地产生影响。

【实际含义:目标大小】

  • 触屏界面的最小触控目标:44×44pt(Apple HIG)/ 48×48dp(Material Design)。
  • 指针目标可以更小,但仍应足够宽裕——指针目标最小 24×24px,对于小型或密集界面应更大。
  • 目标大小指交互区域,而非视觉图标——16px 的图标可以拥有 44px 的点击区域。
  • 对高频或高后果操作(主 CTA、破坏性确认)应增大尺寸。

【实际含义:目标距离】

  • 将相关操作放在其所作用内容的附近——卡片操作应位于卡片上,而不是屏幕另一端。
  • 屏幕边缘与角落是无限大的目标(指针无法越过)——可用于常驻导航(macOS 菜单栏、Windows 任务栏)。
  • 在移动端,置于屏幕底部可缩短右手拇指的触及距离。
  • 带确认操作的对话框不应要求用户横跨整个屏幕才能点到“确定”。

【菲茨定律不覆盖的内容】

  • 认知成本:它建模的是运动时间,而非决定点击什么的时间。一个尺寸完美、位置良好的按钮,如果标签含义模糊,仍然会失败。
  • 触控精度与指针精度:触控有更大的接触区域、精度更低;指针机制不同。该定律对两者都适用,但参数不同。
  • 手势目标:滑动区域、拖拽手柄和滚动区域遵循相同原则(更大 + 更近 = 更快),但与误触风险的交互方式是该基础模型未捕捉的。

【常见设计应用】

  • 主 CTA:大、高对比度,置于拇指可及区域。
  • 浮动操作按钮:移动端右下角——靠近主导拇指。
  • 导航标签:移动端底部导航在单手使用上优于顶部导航。
  • 模态操作:按钮靠近模态底部,而非分散。
  • 表单提交:最后一个字段下方使用全宽或醒目的按钮。
  • 关闭按钮:点击目标足够大;移动端可考虑底部关闭。
  • 破坏性操作:小而远,以防误触。

【最佳实践】

  • 始终在真实设备上测试点击目标尺寸——在设计工具中看起来足够的,拿在手里往往太小。
  • 用内边距而非视觉尺寸来扩大点击目标。
  • 不要孤立地套用菲茨定律来为过大的按钮辩护;需与视觉层级和间距平衡。
  • 在桌面端,利用屏幕边缘做常驻导航,不要浪费它们。
  • 优先审查高错误交互(误触、误点)——它们几乎总是菲茨定律的失败案例。