不向左也不向右,刚好摆中间

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

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 = 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,从而让移动速度更快。
最后我也大胆表白,研究用户体验,把玩竞品,我喜欢网易。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容