菲茨定律怎么用？电商按钮与触控设计

菲茨定律描述到达目标的移动难度：距离更远、沿移动方向的目标宽度更小，通常需要更多时间。用到电商界面时，应让尺码、数量和购买按钮容易触达，并留出避免误点的间距；不是把所有按钮无限放大，也不是故意把取消做得难点。可以在Pixso 原型里先比较一条完整购买路径。

购买流程同时涉及信息理解、选择与动作执行。菲茨定律主要帮助解释指向目标的动作成本，不能单独说明用户是否找得到商品、是否信任价格或最终是否购买；这些问题还需要信息架构、文案和真实使用观察。

什么是菲茨定律

定律内容：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（下图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。

公式可写作T = a + b log₂(D/W + 1)。这里采用常见的Shannon形式；它是对指向动作的建模，不是直接代入一个按钮尺寸就能算出网站转化率。

上图中，D是左侧起点到右侧目标中心的距离，W是沿移动方向测量的目标宽度。连续在两个目标间切换时，通常以目标中心之间的距离描述D。

字母解释：

T：完成指向目标动作的移动时间。

a，b是经验常量

D：指向动作起点到目标中心的距离。

W：沿接近目标的移动方向测量的目标宽度，不是界面元素任意方向的总面积。

log₂：以2为底的对数。

采用上面的公式时，难度指数为ID = log₂(D/W + 1)。不要把不同公式形式混写；a、b等参数还与具体实验、设备和任务有关。

当D一定时，W越小，T越大；W越大，T越小。

当W一定时，D越小，T越小；D越大，T越大。

当距离一定时，目标越小，所花费的时间越长；目标越大，所花费的时间越短。（小而 远的目标区域意味着用户需要将绿点移动较长距离，并且为了能对准目标需要做一系列 的微调，因为目标比较小嘛，所以耗费的时间自然就长了）

而当目标大小一定时，起点离目标中心的距离越近，所花费的时间越短；距离越远，所 花时间越长。

电子商务UI中的菲茨定律

根据菲茨定律，我们可以得出一个结论：

当目标较远时，增大有效点击范围有助于降低指向精度要求；也可以减少不必要的移动距离。应该比较这两种调整，而不是规定“越远就必须越大”。

虽然，绝大多数UI设计师都知道让一个UI组件变大的重要性，但电子商务网站设计应用菲茨定律，并不是为了增加视觉效果而扩大尺寸，而是为了减少用户用光标或手指到达组件所需的时间。

UI 设计师在设计一个电子商务网站时，需要考虑两件事：

• 界面目标相对于网站上其他项目的大小

• 目标与光标的距离。

UI设计师在设计网站的过程中，需要使产品易于用户发现，并使用户与产品发生交互，以便用户可以快速选购商品，进入下一个购买流程。

有些界面讨论会把当前光标所在位置称为“首要像素”。设计时可以观察用户从哪个操作接着去哪个目标，但这不是能事先精确预测所有人光标位置的依据。

更实际的做法是沿任务检查相邻动作：用户刚选完尺码，下一步是否很容易找到数量与加购按钮；打开下拉菜单后，移动到目标选项时会不会经过让菜单意外关闭的空隙。

图中标出的区域提示我们检查入口是否容易点击；实际可点击范围仍要在页面上核对，不能把着色范围当作已经测量的用户指针位置。

如何在电子商务UI中应用菲茨定律

1.让用户更容易找到目标产品

商品能否被找到，需要清楚的分类、搜索和商品信息共同支持。这里可以用菲茨定律检查搜索入口与输入区域是否容易点击，但不能把增加搜索功能本身当作该定律直接推出的结论。

搜索入口应容易发现，并明确能搜索什么。它的位置既受布局与用户习惯影响，也受相邻操作影响；不能仅凭阅读方向推算光标一定停在哪里。入口与输入框的清楚关系，比试图控制所谓“基本像素”更有帮助。

2.优化电子商务菜单

菜单帮助用户在商品类别之间移动。使用悬停展开的菜单时，应检查从一级入口到二级选项的路径是否连续，避免指针稍微偏移菜单就消失；触屏与键盘也要有可用入口，不能只提供悬停操作。

清楚的信息架构与商品照片有助于辨认目标；扩大有效点击范围可以降低精确命中的要求，但不一定缩短起点到目标中心的距离。两者应分别检查。

3.增加号召性用语按钮的表面积

• 突显CTA按钮

购买CTA是检查指向难度的典型对象：目标范围需要容易命中，名称需要说明下一步动作。

根据菲茨定律我们可以得知：获取更大的目标需要更少的精度。

按钮应有容易命中的点击范围，并与相邻动作留出间距。尺寸只是一个因素：清楚的名称、位置和视觉层级帮助识别目标，热区帮助准确点击；过大的按钮也可能挤压规格说明或遮住内容，不能把“更大”当成没有上限的优化方向。

• 按钮上的文案简洁明了

为了加强用户购买产品的行为方式，按钮上的文案还需要简洁明了，具有指导用户操作界面的作用。

• 区分物理屏幕边缘与网页容器

鼠标指针受到物理屏幕边界限制时，某些贴边目标容易命中；普通网页容器的边缘不是物理屏幕边界。窗口化浏览、多显示器和触屏也会改变条件，因此不应把所有CTA都推到边缘。

调整与用户交互的速度

低风险的重复操作适合减少不必要的移动；涉及付款或删除时，还要让用户理解对象与后果。确认信息与提高操作难度不是一回事。

避免买错尺码或填错收货信息，应清楚展示所选内容，并在提交前提供有意义的确认。不要把复选框故意缩小或移远来“让用户慢下来”；这会增加操作困难，却不保证用户理解。危险或不可逆操作应靠清楚后果、适当确认和恢复方式防错。

移动设备中的菲茨定律

设计师在移动设备的电子商务界面应用菲茨定律时，需要意识到移动设备的一些限制因素。如：

1.触控需要考虑手指遮挡

触屏操作中，手指可能遮住目标，精确点击小图标也更困难。可以适当扩大有效热区并留出间隔，但按钮不一定要横跨全屏；还需给商品信息、返回和系统手势留出空间。移动设备也可能连接鼠标或使用辅助技术，不能把所有输入都等同于一根手指。

2.考虑不同握持方式与触及范围

用户可能单手、双手或把设备放在支架上操作。把高频动作放在较容易触及的位置有价值，但需同时考虑屏幕尺寸、握持方式、系统手势和辅助技术。不要假设所有人都从同一只拇指的起点操作。

在将菲茨定律用于移动电子商务 UI 时，设计师必须考虑人类拇指通常可以达到多远。

用尺码到加购这条路线检查，而不是孤立量按钮

在同一件商品里放入尺码S、M、L、数量减/加和“加入购物车”。先确认点击尺码的整块区域都有效，再看数量两个按钮是否过近；如果只有小小的字形响应点击，视觉上宽大的选项仍不好操作。

可参考WCAG 2.2的目标尺寸说明检查热区与间距，其中24×24 CSS像素为相关AA条款的最低要求，并存在间距、内联目标等例外；这不是移动按钮的理想统一尺寸。重要触控操作仍应结合设备和使用环境做更宽裕的设计。

原型中让同事连续选尺码、改数量、加入购物车，再撤回修改；记录他在哪里点错或需要瞄准。真实热区、键盘焦点和触屏体验仍要在实现后测试，不能仅靠画板比例判断合格。

应用菲茨定律的注意事项

应用菲茨定律时，有两个关键问题值得考虑：

• 你希望用户访问你的网站，以此实现什么目标？

• 你怎样才能让用户轻松实现这个目标？

在设计电子商务网站时，UI设计师也需要考虑到网站的另一个方面：内容。内容是否对用户的购买行为能产生更大的影响、网站内容是否能产生更好的用户体验。

菲茨定律不是万能的。在某些情况下它是适用的，但这不代表菲茨定律在任何UI设计中都适用。例如让无数用户反感的，搜索引擎页面上的广告。这些广告通常显示在页面顶部，与用户想要交互的组件距离太近，进而产生一种它们本身就是搜索结果的假象。这种页面设计，往往是导致用户关闭网站的一个致命点。

Pixso小结

将菲茨定律用于界面时，可以从下面三个方向检查指向难度：

• 重要/常用的功能可点击区域变大

• 缩短起点距离目标距离，且关联类元素放在一起

• 只在指针确实受到边界限制的环境中，考虑贴边目标的优势。

使用这一定律时，把目标位置、可点击范围和相邻动作放在同一条任务路线里。需要进一步了解公式与实验差异，可阅读MacKenzie关于菲茨定律在人机交互中应用的研究；设计稿中的改动仍应回到实际操作表现，而不是仅凭定律名称下结论。