实例解析「交互设计七大定律」在设计中的应用（上篇）

哥↖超神了

一、费茨定律（Fitts’ Law）1、费茨定律（Fitts’ Law）简介费茨定律是由保罗·费茨（Paul M. Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的，时间是 1954 年；该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。费茨定律指的是：使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。用数学公式表达为：时间 T = a + b log2(D/S+1)。如下图：上图中，T指的是：移动设备所需时长；a、b指的是：经验参数，它们依赖于具体的指点设备的物理特性，以及操作人员和环境等因素；D指的是：设备起始位置和目标位置之间的距离；S指的是：目标区域的面积大小。2、费茨定律（Fitts’ Law）在设计中的应用（1）按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作。案例一：比如淘宝和中国银行的手机网页端的登录页面从下图来看，左边淘宝登录界面的信息输入区域很明显比右边中国银行登录界面信息输入区域相互之间的距离和输入面积更大一点，在视觉及输入体验上面淘宝也要比中国银行的好很多；再看两个页面的登录按钮，右边中国银行界面的按钮视觉上很小而且距离上方验证码输入框的距离很近，这样的按钮不仅不好点击还容易产生误操作，相对而言，左图淘宝页面的按钮间距和大小就很合适了，输入和点击体验比左图好很多。案例二： 比如小黄车和小蓝单车首页扫码按钮小黄车和小蓝单车首页最重要的扫码用车按钮不约而同的使用了圆形按钮，我们不看放置的位置，单看按钮大小，小黄车的明显要比小蓝单车的大很多，笔者在使用两者的时候，小黄车的操作按钮要比小蓝的舒服很多，因为小黄车的按钮比较大，比起小蓝单车的按钮更容易点击。   请关注网站设计公司http://www.joyweb.cn