用超多实战案例,教你用费茨定律做设计

产品经验3年前 (2021)发布 流光
12.7K 0 0

前面我们讲了费茨定律的理论内,如果认真消化后应该对费茨律研究什么,以及影响指点事件效率的关键因素已所了解了。

为了茨定律更易于解,今天我挑了一些案例并总结,希望真实的场景帮助你打开一些实操设计的思路。

前情提要:费茨定律指“指点动消耗的时间 T 与距目标离 D 成正比,与目标大小 W 成反比。

费茨定律的常规思路

1. 从距离切入的常规使用

1.1 对于起始点明确的指点事件

以我 UI 控件专题中分析导航栏使用方法的时候,引用过滴滴的案例,谈到了我对滴滴的“取消订单”操作交互设的看法,当时将该操作与使用常规导航栏取消订单行了对比。

用超多实战案例,教你用费茨定律做设计

首先毋庸置疑,「取消订单」对于业务方一项负向绪操作(即:与业务流程、商业目标相悖的操作)。我们日常设界面与交互时,总希望避免用户产负向绪操作,这一点对于久沙场,常与产品、运营甚至老板对接的设师朋友,应该能够达共识。

我们看到滴滴对于「取消订单」操作采了茨定律中的减小目标区域大小 W 的设计,将「取消订单」按钮设计得小而显眼。

但尽管我们总是在极力避免用户负向情绪操,也无法彻底规避特殊场的产生。例示例中,滴滴虽不希望用户取消订单,但依无法规避用户误操呼叫、等待时间长等场而导致需要取消订单的行为。

从上图中容易,当用户点击「确认呼叫」,点击「确认呼叫」按钮是一个起始点确的指点事件,「取消订」的间距。对于有确取消订愿的用户,可以快速方便地进行取消呼叫操作。

再例如 PC 端,我们在任意位鼠标右键,都会在前位弹出右键菜单。击鼠标位是明确起始,在近位弹出菜单可以大大降低目标与起始位距离。

主流移动端规范中,iOS 与 Material Design 的气泡弹窗单,也 PC 端右键单的设异曲同之妙,许多 APP 中也屡见不鲜。

用超多实战案例,教你用费茨定律做设计

设计思想结

分析前设计场景功能与前后步骤是否有(关键)联动关系。如有,即可以将功能入口定义为起始明确指事件。如联动关系具有正意义,请进思考,是否采用减小目标区域距离 D 设计,来协助提高用户操作效率。

1.2 满足操作习惯指事件

有联动关系功能场景其实是常具体,具体案例然比较少见,而抽象场景其实才占据了我们设计需求绝大多数。有时候个页功能繁多,我们法具体弄楚用户到底想要做什么。

举例子,当用户点一电商历史订单,他什么呢?查看流、查看订单、价、复购、联系售后?可选择性太多。我们无法确用户究竟嘛。

那我们来看看天猫是怎么做的:

用超多实战案例,教你用费茨定律做设计

页面中的信息与功非多,且同的订单状态设计到的功展示各相同。但滑页面时,始终有几个键操作被固定在页面,并且右列。

和前面始点明确的操相比,我们的设计需求能包含太不能完明确始点的指点件,但为帮助用户做出选择,我们以尽量使关键指点动符合当前设备的操习惯。

例如机这的屏备,拇指最常操作的域就是屏幕的右侧中下部,拇指常是停留在这个操作域的,所以将主要功能操作放置在备中下部,虽然不能确起始点,但可以尽可能减操作的移动距离。

计思想总结

面临“一个页面不只做一件事”的情况,要帮助用户梳理繁多功能点中的功能优先和操作频次数据,优先高、频次高的操作可以结当前操作备的操作习惯,协助提高用户操作效率。例如:当计车载 HMI ,是否可以考虑将机高频功能,如广播、导航等置于偏主驾驶座方,方便机操作;而次要功能可以放置于偏驾驶座方。

2. 从尺寸切入的常规使用

2.1 简单粗暴地放大按钮尺寸

对功能点比单一、页面内容比简单的页面,放大按钮的尺寸一方面能够填充页面内容,同时也以用户点击。

用超多实战案例,教你用费茨定律做设计

2.2 扩大操作热区

考虑到平衡视觉系,我们可无法为了户操作体验,而在页面中将每一个操作都简单粗暴地放大。但我们可择在元素视觉大小变的情况,扩大触发操作的范围,即扩大热区。

用超多实战案例,教你用费茨定律做设计

设思总结

扩事件响应区域我认提升指点效率粗暴也效的方法(还记得一篇文章我提起的“指墙”的例子吗)。对于扩指点区域,我们可以根据页面具体内排版,往两方向思考:①直接扩视觉元素;②保持视觉元素不变,扩响应区。两方案分别从UI端落切入,所以记得效沟通。

费茨定律的反向使用

以我们所讲到的案例,都通过向思考产的。但许多交互与 UI 设中,反向思考、逆向使用费茨律的例子,也不少数。

这很好解,当我们希望户过于方地操作的时候,我们就可开始进行逆向思维,反向使茨定律,增户的操作难。么时候我们希望户过于方地操作呢?——重要或危险操作需要户小心谨慎,或者压根想阻挠户操作的时候。

反向使用费茨定律最常被人引用的案例就是 iOS 的关机操。

用超多实战案例,教你用费茨定律做设计

iOS 的确认关机操居设备的顶部区域,是不太满用户对手机的操习惯的。其次通滑动关机操也增加费茨定律中的「距离 D」。各种反向设计是为提高用户操的不便,放置用户误操。

同费茨定律的反向使用方法在一些商业需求中也经常被使用。

用超多实战案例,教你用费茨定律做设计

常常许多商业广告的关闭按钮被计得,且点击域也和用户习惯相悖,这也是反向使用费茨定律的案例。虽然从用户体验上来说,都希望尽量避免这些计存在,但在商业价值面前,你懂的。

写在最后

最后想再回费茨定律的公式 T=a+blog2(D/W+1) 谈一谈对于计法则的法。

高数学有些记忆朋友,应该 log 函数不陌生,是求幂逆运算。log 函数往往会大幅抵消真数变化底数影响。我举个具体数值例子:

我们如果简单记 T=log2(D/W),假设「距离 D」「小 W」的 32 倍,那么 T=log2(32)=5。如果保持「小 W」不变,「距离 D」缩小原的 1/4,即「距离 D」「小 W」的 8 倍,那么 T=log2(8)=3。

看到了吗,「距离 D」虽然缩小了 4 倍,但因为 log 函数的影响,T 缩小的倍数还到原来的 1/2。何况我们在移设备交互设计中,时间 T 往往连一个整数秒都达到,通是毫秒级的,就算「距离 D」与「大小 W」率成倍变,对时间 T 最后的真实数值改变实非微小。

在对费茨定律的讲结束之际,我讲个是为说明什么呢?

相读者中,抱有“其实这做和那做,最后的实质性差别并不大嘛”想法的大有人在,但对于老前辈写进书的理论羞于反驳。起初常和你一。

随着做设计时长越长,慢慢发现,多看多学“法则”其实往往是在巩固思维模和思考,而这些我们装在脑东西往往比法则本身更有价值。于费茨定律我希望大家不要像我起初抱着绝数学思想去理解,不然会走进个胡。多用开放思维去理解,可能更容易打开你设计思想和设计理解~

欢迎家关注作者微信公众:「UCD耍家」

用超多实战案例,教你用费茨定律做设计

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

相关文章

提问:以下水果中哪一种给你印象深刻呢?老规矩,读完这篇文章你就知道了。 苹果、桃子、香蕉、柿子、梨、橘子、橙子、西瓜...
经验分享
最近一直在恶补关于结构化思维的知识,作为一名视觉设计师的我,经常使用发散思维的方式来工作和思考。虽然在工作中常常能冒...
结构化思维
简介说明 1. 理论表述 任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。 2. 研究背景 19...
设计定律
众所周知,设计冲刺(Design Sprint)是一项需要集合多角色、经历五天的共创工作坊,目的在于帮助产品团队快速了解用户痛点需...
设计冲刺
不知各位产品/交互/UI设计师们,平时都用哪些方法和维度分析用户需求的呢?? 可能有些人会用公式:「目标用户+用户行为+用...
卡片分类法
您最近填写过在线表单了吗? 答案应该是肯定的。根据最近的研究,84% 的人每周至少会填写一份线上表单。 虽然你可能没有感...
用户体验
前言 视觉设计最重要的就是美学与风格,设计师在进行视觉设计时往往有较强的自我意识以及个人审美偏好。多目标追踪是通过多任...
vivo设计
缘起 前段时间应邀给部门内新入职的校招设计师讲一堂设计法则的基础课,作为交互设计师,交互设计定律肯定是绕不开的一个知识...
交互方法