本港台开奖现场直播 j2开奖直播报码现场
当前位置: 新闻频道 > IT新闻 >

wzatv:「大产品小细节」5分钟了解费茨定律

时间:2017-07-03 18:48来源:香港现场开奖 作者:本港台直播 点击:
大家有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,非常重

大家有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,非常重要的定律 —— 费茨定律。所以,开奖,本期「大产品细节」想跟大家聊聊「费茨定律」。

wzatv:「大产品小细节」5分钟了解费茨定律

一、概述

首先来看看费茨定律公式:

wzatv:「大产品小细节」5分钟了解费茨定律

很复杂吧~ 但是实际上并不难,我用一张图给大家解释下费茨定律是什么。当用户需要拖动黄色点到目标区块中时:

wzatv:「大产品小细节」5分钟了解费茨定律

费茨定律中的 D 就是从开始点到目标中心的距离,而 W 则是目标的宽度大小。根据公式可以看到,a 和 b 都是常量,那么 MT (黄点从左移到目标中心所需的时间)的大小取决于 D 和 W 的值:

当 D 一定时,W 越小,MT 越大;W 越大,MT 越小。

当 W 一定时,D 越小,MT 越小;D 越大,MT 越大。

翻译成「人话」就是:

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

wzatv:「大产品小细节」5分钟了解费茨定律

(2)当目标大小一定时,起点离目标中心的距离越近,所花费的时间越短;距离越远,所花时间越长。(这比较好理解,距离比较近嘛~ 所花时间自然比较短了。)

wzatv:「大产品小细节」5分钟了解费茨定律

二、启示与案例 1. 按钮越大越易于点击

正如前面提到的,如果你想要让按钮的点击率更高可以尝试将按钮做大点,比如这样:

wzatv:「大产品小细节」5分钟了解费茨定律

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

还是拿上面两个界面为例子,大家有没有发现那两个大大的按钮是放在屏幕下发的?原因就是「将按钮放在底部可以使 D 变小」,要知道用户完成整个点击操作是要先将手指移动到目标上方,最后进行点击的。那么在这里 D 就是手指开始悬停的位置到目标上方的距离。根据研究表明,人们在使用手机的时候,75%的交互操作都是由拇指驱动的,而拇指悬停的位置恰恰就是屏幕下方。

PS:关于用户是如何使用触屏设备的,欢迎大家看看这篇读书笔记——「阅读」触类旁通:多终端时代的触屏界面设计 文中提到的书本,也推荐大家买来看看。

那么对于 PC 端设备,又是如何使用这一定律的呢?

最常见的使用就是鼠标右键操作了。点击右键,鼠标的右下或右上方就会出现一个菜单,鼠标移动到对应按钮上,点击一下即可完成操作。

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

对于一些相关性较强的按钮,可以考虑将他们放在一起,比如:

在设计 PC 端的翻页按钮时,就可以将「上一页」和「下一页」放在互相靠近的位置

在设计注册、登录界面的时候,可以将「注册」和「登录」放到一起,如果想要突出「注册」则可以考虑将「注册」按钮做大点。

相关联的操作也可以尝试放在一起,不仅可以在视觉上增强用户对他们相关性的认知,还可以减少在他们之间的距离 D。

4. 无限大的四角与四边

文章开头,我提出了一个疑问:

为什么 Win 系统要将「开始」按钮放在角落 ?

原因就是屏幕的四角和四边 W 无限大,W 无限大的话,MT 就很小了。像 Mac 的 Docker 更是将费茨定律发挥得凌厉精致,当鼠标 hover 到对应的 App icon 上的时候,icon 还会放大,从而加大 App icon 的W 。

wzatv:「大产品小细节」5分钟了解费茨定律

估计大家又会有个疑惑,那就是——为什么四角和四边的 W 无限大?

那是因为光标没法移动到四角与四边之外的地方,你再怎么移动鼠标,光标也没办法移到屏幕以外的地方,所以他们就进入到了「无限可选中」状态。

但是,随着屏幕尺寸越来越大,而且双屏幕的配置越来越常见,这个设计也变没那么好用了,因为 D 变大了。同理手机端的四角与四边也是「无限可选中」位置,因为手点击屏幕以外屏幕不会响应嘛 ~ (所以各位可以发现左上角按钮一般为返回,右上角为确定)但是在手机上时候,依然会面临屏幕越来越大,按钮越来越不好点的问题。

三、小练习

最后,直播,我想跟大家一起做个小练习,那就是请大家和我一起设计手机的关机界面:

1. 明确设计目标

首先明确设计目标:设计手机的关机界面

2. 明确约束与限制

(责任编辑:本港台直播)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容