UI设计

认知心理学与交互设计(2)--菲茨定律、引导定律

作者:口袋使者 2016-10-26 我要评论

在屏幕上定位某个对象和移动指针沿着受限的路径移动,都遵循一致的,可以量化的规律,也就是下面要写到菲茨定律和引导定律。 菲茨定律 简单地说,菲茨定律是指物...

在屏幕上定位某个对象和移动指针沿着受限的路径移动,都遵循一致的,可以量化的规律,也就是下面要写到菲茨定律和引导定律。

菲茨定律

简单地说,菲茨定律是指物体越大,越靠近起始位置,则可以越快地指向它。在设计中,我们只要知道这个就够了,但就像昨天所说的,了解背后的机制有其意义所在,所以让我们来看看更精确的定义。


如上图,指向某个目标的时间,取决于启动速度,移动难度,物体宽度,移动距离。如果是用手指的话,启动速度相当于你手指的反应时间,移动难度相当于手指移动的快慢。因为考虑了设备和人的因素,所以菲茨定律的应用非常广泛。可以适用于各种类型的指向设备,包括鼠标,轨迹球,触控板,操纵杆等,同时也适用于各种人,不论年龄,体能或精神状态。
我们也可以从另一个角度来理解这个公式,假如我们要用手指向某个东西,首先一开始手的启动速度是较慢的,然后迅速加速至最高速度,但此时运动的很粗糙的,只是往一个大致的方向运动,随着目标的接近,运动速度慢了下来,并有意识地微调,最后控制在目标范围内停下来,完成了这次指向。

下面来看菲茨定律的应用。

  1. 边缘的目标很容易点击
    根据上面的理解,最后的微调和控制是需要花费一定的时间的,但是如果目标位于边缘,则不需要了。或者说,边缘目标可以看作是无限大的,所以不用担心会超出范围,所以边缘目标的点击很容易。
    所以有人说苹果系统的设计很好,每个窗口的操作都直接放在边缘,操作起来很方便。当然,边缘效应只适用于桌面端,手机是没有边缘可言的。

  2. 让目标够大并保证可点击区域的大小
    目标要足够大这个显而易见,就不多说了。要注意的是,不仅仅是简单地让目标本身变大,还可以通过增加可点击区域,比如多选框,除了框本身,文字标签也应该可点击。

  3. 目标之间要有足够的空间
    减小微调的难度,提高点击精度。

  4. 尽可能使用弹出菜单和饼状菜单,而不是下拉菜单。
    因为下拉菜单的鼠标和菜单打开的位置总有距离。但是弹出菜单和饼状图是直接在原地打开。

引导定律

引导定律是从菲茨定律推导而来的,表示路径的长度和宽度对移动速度的影响。简单地说,路径越宽,越短,则移动速度越快。其公式也比菲茨定律简单得多。而且同样很直观。

T=a+b(D/W)

直接来看引导定律的相关应用

  1. 右拉菜单(或称为行走式菜单)
    右拉菜单必须将鼠标移动到某一个菜单项里,才能打开下一级菜单,同样要继续保持在该菜单内向下一级移动。如果稍有偏差,就会打开别的下级菜单。改善这种体验的办法就是增加每个菜单项的宽度,也可以加大延迟时间,或者干脆使用别的方式吧。

  2. 滚动条
    水平或者垂直的滚动条,同样要求用户将鼠标保持在一个又窄又长的区域内,使用起来又慢又容易出错。好在有滚轮的存在,不过一些网站仍然需要指针保持在某个位置,才能使用滚动,而且水平的常常无能为力。所以水平方向的滚动比较少见,可以使用其他方式代替,比如轮播图。



阅读原文 本文来自:口袋知识网 news.papocket.com

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 淘宝刚发布的新版本,可能会引领2017年

    淘宝刚发布的新版本,可能会引领2017年

  • 学会这个教程,可以把任何一张人物照都

    学会这个教程,可以把任何一张人物照都