设计师必读:搜索栏设计的“潜规则”

人生的路口,向左还是向右,会让你遇到不同的人,过上截然不同的生活。无所谓哪边更好,不过是若干年后回头望时,给你留下一个想象空间,假如当初当初没做设计……用户体验设计里,一个图标的摆放位置,比如搜索图标,靠左还是靠右,则会分分钟影响你的心情。

UX设计师日常问答场景再现:

问:为什么你的设计里这个放大镜要放在中间,而不是放在右边,或者放在左边?
自言自语:为什么?
自言自语:为什么?
自言自语:为什么?
答:因为苹果这么做的。

苹果1.png

继续答:网易也是这么做的。

有道1.png

沉默片刻,继续发问,
问:那为什么QQ是放在左边?为什么微软是放在右边?

QQ.png

PC.png

答:因为苹果和网易的用户体验做的好。
问者表示不能接受。

对话到此,我自己也表示不能接受自己的解释。
于是,我尝试着用Fitts’ law来解释这个问题,当然,我对这个定律应用的还不是那么娴熟。我接下来又要一本正经的胡扯了,目的还是一样,让自己更好的吸收这个知识,也希望可以达到抛砖引玉的效果。一切都是为了我自己。
首先先复述一下Fitts’ Law / 菲茨定律(费茨法则)

费茨法则 是一个人机互动以及人体工程学中人类活动的模型,它预测了快速移动到目标区域所需的时间是目标区域的距离和目标区域的大小的函数。费茨法则多用于表现 这个动作的概念模型,无论是用手或者手指进行物理接触,抑或是在电脑屏幕上用假想的设备(例如鼠标)进行虚拟的触碰。 该法则由Paul Fitts 于 1954 年提出。
费茨法则可以用多种不同的公式进行表达。比较通用的是用于一维运动的 Shannon 公式(由MacKenzie约克大学教授提出,并因为其与香农定理的相似而命名)。

T = a + b \log_2 \Bigg(1+\frac{D}{W}\Bigg)

T 是完成动作的平均时间。(传统的命名方式,会写成MT ,表示运动时间 Movement Time
a 代表装置(拦截)开始/结束的时间,b 表示该装置本身的速度(斜率)。这些常数可以以测得数据进行直线近似的方式通过实验取得。
D 是起始位置到目标中心的距离。(传统上来说,研究者多用 A 来表示,意味着运动的振幅 Amplitude
W 是目标区域在运动维向上的宽度。因为运动的最终点必须落在目标中心 ±W
⁄2以内,所以 W 也可以被认为是被允许的最终位置的容差。
从这个等式我们可以看出,小并且/或者远的目标,需要更长的时间才能得以准确到达,这便是权衡指的动作的 速度的准确性

Fitts_law.png

这个公式对我来说,开始的时候很复杂。因为这里出现了log2,据说这是我们中学时候学过的以2为底的对数…….我表示完全没有印象。不过,不慌,科技进步为懒蛋造福。

计算器.jpg

也许你会说,说什么呢,看不下去了。好吧。

其实,你也不用计算。请注意这句话,a和b这些常数可以测得数据进行直线近似的方式通过试验取得。什么意思?
意思就是,有人已经做过试验了,比如coursera交互设计课程考试题里有道计算题就告诉你a和b的值。

The Fitts’ law formulation to use is: t = a + b·log2(d/w). For the fixed cost portion a, use 0.8 seconds. For the control rate b of the mouse use 0.204 s/b (the reciprocal of 4.9 b/s).
……

假如我要对比Icon放置的位置,对鼠标移动的速度的影响,那也就是意味者使用 t = a + b·log2(d/w)这个公式时,a.b和w都是一样的。区别就在D,距离这个因素上。距离越远,移动时间越长。

为了一目了然,我稍微夸张了一下,以鼠标停留的位置画了一个直角三角形,显而易见,斜边大于直边。
我们大胆猜测放在中间这个方案更优,因为更快。

到这里,只能算我装B成功。也许可以唬住一部分人。但是,不管是装B也好,真研究也好,这条定律请作为设计师的你知晓,它很重要。

如果遇到有人直接跟你说,我数学不好,不要听。或者有人表现出了极大的兴趣,较真。。。。。
比如我。我后来又尝试了把窗口最大化,最小化,自定义窗口大小等等操作。用这个定律来解释貌似也有点不是那么确定。但是,菲茨定律对于设计来说,真的是个重要的东西。它至少给我指明了方向。我下意识的去点搜索输入框的时候,我发现了,无论图标在哪,我点的都是中间。
我又去观察了我貌美如花的视觉设计师偲偲小姐(她经常出现在我的用户观察作业里,我所有的故事板的女一。)

鼠标默认移动位置苹果.JPG

鼠标默认移动到的位置qq.JPG

鼠标默认移动到的位置pc.jpg

她也是点中间。
你点哪里,请试试,欢迎留言反馈。

由此,我大胆猜测。搜索图标放在中间的方案比较优,更符合用户习惯。因为不论图标放哪里,人们都习惯去点中间。所以,苹果的设计就把图标放中间,迎合用户习惯。

同时,图标放在中间,在视觉上也有一定聚焦作用,我觉得可以让用户,尤其是新手用户可以在很短的时间内明确移动时目标,减少参数A,从而让移动速度更快。
最后我也大胆表白,研究用户体验,把玩竞品,我喜欢网易。

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部