恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
交互设计原理之Fitts定律
0.0°
2014-11-23 好文转载 经验/观点 原作者: 中国雅虎UED 举报 5508 63 24 4


图趣这几篇文章持续在关注交互设计原理,今天的文章主题也不例外,是交互设计原理之Fitts定律;

Fitts’ Law,我们通常翻译为“菲茨定律”或“费茨定律”。它由保罗.菲茨在1954年首先提出,具体内容为:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小,用数学公式表达为时间 T = a + b log2(D/W+1),其中:T代表完成移动所需的平均时间,a代表光标开始/停止时间,b代表光标的移动速度,D代表从起点到目标中心的距离,W代表目标的宽度。



为了能更好的理解这一定律,我们可以做一个小实验来观察这一过程:举起你的手臂并试着用手指指向远处的一个小物体,例如远处墙上的一个电灯开关。你会发现你的手指很难迅速而准确的对准目标,于是你需要做一些微小的调整动作直到把你的手指对准开关的中心。现在你可以试着指向一个更大的物体 ,例如一面墙壁。这一次你很轻易的就能将手指对准目标, 而且基本不需要做任何的微调。

我们再来看一个例子:下图中的红色盒子代表目标;虚线代表从起点至目标的移动轨迹,目标上灰色左右箭头之间的范围是用户光标减速并微调以弥补误差的区域。在右方有一个较大的目标,因为面积很大所以用户从任意点快速点击应该不会很难:         

 


大的目标区域意味着光标在目标上停下来之前不需要做太精细的调整。我们再来看一个小目标的例子:



因为用户需要将光标移动较长距离而且目标面积很小所以在光标正确的对准目标前需要做一系列精细的调整动作,所以点击的难度增大了很多。但如果同样大小的目标距离很近的话,准确点击它的难度也会小很多。距离越近, 初始动作因为幅度太大而超出目标区域的风险也就越小。



对于形状不规则的目标而言,目标区域的大小和移动的方向是相对的。在上面的例子中,如果用户从和目标平行的位置水平移动光标,那么这个按钮的相对目标区域就很大。但如果用户光标的初始位置在目标的上方或下方,那么这个长方形按钮的相对目标区域则小得多。

除了调整目标的大小以外,我们还可以将目标放在屏幕的边缘或角落上来使其更容易被选中。屏幕的边界自然会阻止用户超出目标区域范围的大幅移动,这样的话第二步“微调”的动作也就不需要了。

总而言之:目标越大,指向越快,时间越短。同样地,目标越近,指向越快,时间越短。也就是说,定位一个目标的时间,取决于目标与当前位置的距离,以及目标的大小。

菲茨定律对我们设计上的启示:        按钮等可点击对象需要合理的大小尺寸,将用户最有可能点击最想要点击的按钮尽量放大。

  • 屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。
  • 让相关的操作按钮靠近彼此,这样做不仅可以在视觉上增强用户对它们相关性的认知,还可以减少光标在它们之间移动所需的距离和时间。
  • 出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

资料来源:《谈谈 Fitts定律(费茨法则)》《菲茨定律与互联网设计 Fitts’Law》《交互设计七大定律》

欢迎和我们共同探讨,一起做出好看好用的设计。

更新:2014-11-23

收藏

63人已收藏

  • 15

    作品

  • 356

    粉丝

  • 0

    关注

  • 设计的骨骼
  • LOGO设计思维方式和方法
  • 品牌LOGO设计的过程、要求及方法
  • LOGO设计全面解析
相关标签
交互理论

    猜你喜欢

      2014-11-23 好文转载 经验/观点 原作者: 中国雅虎UED 举报 5508 63 24 4

      交互设计原理之Fitts定律

      0.0°

      你确定要举报交互设计原理之Fitts定律

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      24
      63
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录