静电
管理员
管理员
  • UID1
  • 发帖数699
  • 威望16339点
  • 社区居民
  • 社区明星
  • 最爱沙发
  • 忠实会员
  • 喜欢达人
  • 优秀斑竹
  • 原创写手
阅读:1133回复:3

[教程]设计师必读:搜索栏设计的“潜规则”

楼主#
更多 发布于:2016-05-28 11:48
人生的路口,向左还是向右,会让你遇到不同的人,过上截然不同的生活。无所谓哪边更好,不过是若干年后回头望时,给你留下一个想象空间,假如当初......交互设计里,一个图标的摆放位置,比如搜索图标,靠左还是靠右,则会分分钟影响你的心情。

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

图片:640_010.jpg

Mac OS-Finder界面

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

图片:640_003.jpg

有道词典

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

图片:640_002.jpg

Mac QQ界面


图片:640_009.jpg

Windows8 文件管理器界面


答:因为苹果和网易的用户体验做的好。
问者表示不能接受。
对话到此,我自己也表示不能接受自己的解释。
于是,我尝试着用Fitts’ law来解释这个问题,当然,我对这个定律应用的还不是那么娴熟。我接下来又要一本正经的胡扯了,目的还是一样,让自己更好的吸收这个知识,也希望可以达到抛砖引玉的效果。一切都是为了我自己。

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

图片:640_002.png

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

T 是完成动作的平均时间。(传统的命名方式,会写成MT ,表示运动时间 Movement Time

a 代表装置(拦截)开始/结束的时间,b 表示该装置本身的速度(斜率)。这些常数可以以测得数据进行直线近似的方式通过实验取得。

D 是起始位置到目标中心的距离。(传统上来说,研究者多用 A 来表示,意味着运动的振幅 Amplitude

W 是目标区域在运动维向上的宽度。因为运动的最终点必须落在目标中心 ±W
⁄2以内,所以 W 也可以被认为是被允许的最终位置的容差。


从这个等式我们可以看出,小并且/或者远的目标,需要更长的时间才能得以准确到达,这便是权衡指的动作的 速度的准确性

图片:640.png


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

图片:640_008.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,距离这个因素上。距离越远,移动时间越长。

图片:640_007.jpg



为了一目了然,我稍微夸张了一下,以鼠标停留的位置画了一个直角三角形,显而易见,斜边大于直边。
我们大胆猜测放在中间这个方案更优,因为更快。
为了证明这个猜测,我又去观察了我貌美如花的视觉设计师偲偲小姐(她经常出现在我的用户观察作业里,我所有的故事板的女一。)

图片:640.jpg




图片:640_005.jpg




图片:640_004.jpg


你也试试,欢迎留言反馈。

由此,我大胆猜测。搜索图标放在中间的方案比较优,更符合用户习惯。同时,图标放在中间,在视觉上也有一定聚焦作用,我觉得可以让用户移动时目标明确,可以减少参数A,从而让移动速度更快。
最后我也大胆表白,研究用户体验,把玩竞品,我喜欢网易。
文/鲜核桃(简书作者)
原文链接:http://www.jianshu.com/p/d989586e29ad
著作权归作者所有,本文已获得原作者授权。

第一手原创设计文章及内容
尽在静design(长按关注)

图片:640_006.jpg

觉得本文涨姿势
赐个赞并在下方发表评论

最新喜欢:

idjinzeidjinz...
nug1989
Sketch大侠客
Sketch大侠客
  • UID3514
  • 发帖数2
  • 威望153点
沙发#
发布于:2016-07-04 17:13
太能扯淡了
黑皮诺
VIP读者
VIP读者
  • UID6976
  • 发帖数10
  • 威望320点
  • VIP会员
  • 社区居民
板凳#
发布于:2016-07-20 16:27
这太讲究了,不就一个搜索框至于嘛
idjinze
VIP读者
VIP读者
  • UID3220
  • 发帖数6
  • 威望189点
  • 社区居民
  • VIP会员
地板#
发布于:2016-11-18 18:42
说的好  我选择中间
游客

返回顶部