美文网首页设计解释 学产品之光
不向左也不向右,刚好摆中间

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

作者: 鲜核桃 | 来源:发表于2016-05-18 11:29 被阅读331次

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

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

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


苹果1.png

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


有道1.png
沉默片刻,继续发问,
问:那为什么QQ是放在左边?为什么微软是放在右边?
QQ.png
PC.png
答:因为苹果和网易的用户体验做的好。
问者表示不能接受。

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

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

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

相关文章

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

    人生的路口,向左还是向右,会让你遇到不同的人,过上截然不同的生活。无所谓哪边更好,不过是若干年后回头望时,给你留下...

  • 向左向右不纠结

    明一法师讲《博山和尚如何做功夫》系列 你说什么样才是到家?你看那个我们上一次在这个地方讲的时候。那个...

  • 经典的选择

    选择每时每刻都需要做,人生有着无数选择,向左、向右、向前,选不选人生都会继续。有时事情就像几米的《向左走,向右走》...

  • 老头日记.向左向右

    你可以向左,也可以向右,若左右为难就回头吧。 ——老头日记.向左向右

  • 从众

    向左向右?向左向左,向左向右,真的自己抉择过,就够了。

  • 选择

    人生会遇到许许多多的分岔路口,总会面临选择向右或向左...有人在爱情与面包之间犹豫不决左摇右摆...有人则在现实与...

  • 人在旅途——24一个人在路上

    爱情向左,亲情向右;滚滚红尘向左,风轻云淡向右;功成名就向左,诗与远方向右;挑战刺激向左,稳定安逸向右;音...

  • 天堂向左也向右

    Every mountain is unclimbable until someone climbs it. Ev...

  • 渐慢的摆

    渐渐,慢慢,摆啊,摆啊像心上人离开时,向左然后向右要去哪里,我不会过问转呀,转呀刻画一个完美的圆束缚回首的姿态,也...

  • 向左向右?喂你到底走不走!

    【哪一种办法最好?】很多人在面对选择时总是手握一个机会,等待更好的机会,结果所有的机会已经在等待中慢慢流逝了。这是...

网友评论

  • Lisn:就喜欢你装逼。
    鲜核桃:@Lisn 安啦。姐懂你。
    Lisn: @鲜核桃 姐,我错了。我想表达的是你说得真好!
    鲜核桃:@Lisn 你确定这是对姐的肯定?
  • 60yang:“研究用户体验,把玩竞品,我喜欢网易”
    能说说原因不? :grin:
    鲜核桃:@弹簧秤 做的最好,我认为

本文标题:不向左也不向右,刚好摆中间

本文链接:https://www.haomeiwen.com/subject/mqvmrttx.html