赞助商
立即赞助

用一篇超全面的文章,帮你读懂经典的费茨定律

交互设计3年前 (2021)发布 流光
2.3K 0 0

费茨定律心理学家 Paul Fitts 提出,用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。举例来说,你伸手去拿桌子上的咖啡杯,开始你的手臂迅速地往杯子位置移动,接着你放慢速度直至找到杯子把手,个杯子把手的大小与你“抓住”它有着一定的关系。

用一篇超全面的文章,帮你读懂经典的费茨定律

上图所示,果光标现在在任易地点想要去点击目标 target,最短路径一定是 D,最短路径上容错的最长路径是 D+W,只要水平上移动超 D+W 你就点不到,而个点击动所耗的时间是一个常数加上一个以 D 为正比 W 为反比的函数的和。

让我们来看下这个例子:图右侧红色块代表目标,虚线代表从起至目标移动轨迹,其范围是用户到目标前微调以弥补误区域,在右有个较大目标,为积很大所以用户从任意快速击都会很容易,在目标上下来前不需要做太精细调。

用一篇超全面的文章,帮你读懂经典的费茨定律

相反,如把右边红色块缩小,用户快速击目标会困难多,需要做系列精细调动作。

用一篇超全面的文章,帮你读懂经典的费茨定律

如样大小目标距离很近话,为到目标范围所需初始动作很小,所以准确击它难度也会小很多。距离越近, 初始动作为幅度太大而出目标区域风险越小。

用一篇超全面的文章,帮你读懂经典的费茨定律

按钮越大越容易点击

在页面中,大而近的目标区域意味着用户不需要做太精细的整就以轻易的到达目标。比页面中的大按钮。

用一篇超全面的文章,帮你读懂经典的费茨定律

将按钮放置在离开始点较近的地方

夸克浏览器的搜索栏就离手近的屏幕底部区域,相比常见顶部搜索栏方便操作,效率。

用一篇超全面的文章,帮你读懂经典的费茨定律

相关按钮之间距离近点更易于点击

在计注册、登录界面的候,通常将「注册」和「登录」放一起,不仅可以在视觉上增用户对相关性的认知,还可以减少在之间的距离 。

用一篇超全面的文章,帮你读懂经典的费茨定律

△ 计图来网络 侵删

适用边界

费茨定律鼓励减少距离,增加目标大以提升用户效率,但反过来亦适用,比如 iPhone 关机,不使用按钮点击,而采用滑动操作,这虽然降低了用户操作效率,但增加用户操作间,以起警示用户谨慎避免误操作的目的,所以“取消”按钮放在底部方便点击的地方。

用一篇超全面的文章,帮你读懂经典的费茨定律

App 弹窗经常把“关闭”按钮放在卡片的右上角离远的地方,还有开屏广告,广告商希望用户花尽量多的间停留在广告内容上,这候广告主会把“跳过”按钮放在难以点击的右上角,以降低用户的误触机率提高转化。

总结思考

按钮越大越容易点击,在移动备上通常增加按钮点击热范围以便用户不必准地点击目标也能操作成功,但是可点击对象大尺寸要理不要过的大;

让相关的内靠近彼此,视觉增强用户对它们相关性的认知,不过也不能过分靠近,会造点击压力;

将按钮放置在离开始点近的地方,比屏幕底部易操区域;

屏幕边很适合放像菜单栏和按钮这样元素,为在屏幕边缘和落位时它们是“限可选”,可以大胆操作而需“微调”;

定律的反向使可适一些特殊场景,如想达到某种目的而降低按钮被点击的可。

欢迎关注作者公众号:「印迹拾光」

用一篇超全面的文章,帮你读懂经典的费茨定律

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如何从众多的设计点中找到一个清晰的设计主线呢?只需从3个方面切入。 小明的设计故事:身为设计师的小明,刚刚遇到下发的设...
业务目标
您最近填写过在线表单了吗? 答案应该是肯定的。根据最近的研究,84% 的人每周至少会填写一份线上表单。 虽然你可能没有感...
用户体验
没有人喜欢失败。那么玩家为什么可以花80%的时间体验挫折,还仍然热爱着游戏呢? ── Jane McGonigal 在之前的文章中,我主要...
Eugen Eşanu
视觉设计师≈美工/图标仔,是很多“圈外人”甚至设计师自己对“视觉设计”的理解。 当然,“美”作为信息传达的载体,其本质上,也...
行为召唤
编者按:我们看过太多游戏化设计的文章,其中太多内容都只是关于技巧,而很少从内核上把握游戏化设计。Eugen Eşanu 的这个新...
Eugen Eşanu
最近一直在恶补关于结构化思维的知识,作为一名视觉设计师的我,经常使用发散思维的方式来工作和思考。虽然在工作中常常能冒...
结构化思维
不知各位产品/交互/UI设计师们,平时都用哪些方法和维度分析用户需求的呢?? 可能有些人会用公式:「目标用户+用户行为+用...
卡片分类法
「你就照着这个风格给我抄」「肯定没有问题的」甲方爸爸如是说 大家好,我是美丫姐~年底了,大家有没有在电脑前面忙成狗呢?...
喜茶