文章目录[隐藏]
作者：Scott Hurff | 翻译：taitai，校审：天蛙
有种感觉你无以言表但却了然于心——当你在触屏上不能正确操作时，当你不得不小心翼翼地点屏幕上的一个小按钮来触发某个指令时，那种挫败混杂着气恼的滋味。
但假如你在日常工作中可以设计出避免这种窘境的用户界面，事情会怎样？假如你可以设计出帮助客户减少错误、更快地完成任务、并最终对你的产品更满意的触摸元件，事情又会怎样？
这是可能的。让我们一起来发现其中的原因。
这是你最后一次让我失望，iOS9
我在iOS9的锁屏上使用音乐控件时，常会碰到这个问题。
在我忙碌时，每当我想跳过一首歌时，我无论如何也无法一次就点中跳过按钮。我需要再点一次，有时需要点第三次。我甚至会因误操作而调高音量，或是暂停这首歌。
最终，这种负面体验迫使我改变了我的使用行为：我不再用它了。
这是一个严重的失败。这个旨在节省我时间的用户界面,反而浪费了我很多时间。
iOS 9的音乐控件肯定有某处违反了用户界面的关键原则。但究竟是哪一处呢？
谢天谢地，iOS 10的出现改变了这些。控件变大了，点击区域充足，艺术家和歌曲信息也变得更大，更容易阅读来获知现在播放的是谁的歌。
换言之，我忙碌时切歌的错误率明显下降了。
为什么？
科学有答案。
从1亿2千万次点击中学到的
2006年，来自芬兰奥卢大学和马里兰大学帕克分校的研究人员进行了合作。他们的研究目标是确定什么尺寸的按钮在单手使用触摸屏时最容易操作。
他们测试了两种场景。第一种：执行单个任务（如激活按钮、点选复选框或单选按钮）。第二种：执行连续任务，如输入电话号码。
在研究过程中，研究人员在每个场景下都测试了一系列不同大小的按钮。他们发现，当按钮小于9.2毫米时，单个任务的错误率显著增加；当按钮小于9.6毫米时，同样的事情发生在连续任务的场景中。
奇怪的是，在连续任务场景中，错误率在9.6至11.5毫米基本保持不变。一会再解释原因。
左图：单任务情景下各目标尺寸的平均错误率
右图：连续多任务情景下各目标尺寸的平均错误率（原文作者截图漏掉图标题）
X轴：目标尺寸（毫米），Y轴：平均错误率（%）
五年后，两所德国大学的研究人员进行了一项研究。他们的目标是：确定触摸屏按钮的最佳触摸目标尺寸。
为了进行这项研究，研究人员发布了一个Android游戏，该游戏被下载约10万次，记录了约1亿2千万次点击事件。游戏的玩法很简单：玩家要点击各种大小的浮动的圆圈来晋级。这些圆圈可能出现在屏幕上的任何地方。
分析游戏中的点击事件后，研究人员发现当圆圈尺寸小于15毫米，玩家的错误率逐步增加，且当圆圈小于12毫米左右时急剧上升。当点击目标小于8毫米时，玩家没点中圆圈的概率超过了40%！
X轴：目标尺寸（毫米），Y轴：错误率
奇怪的是，2011年的这次研究还发现，目标尺寸超过12毫米时，准确率没有显著提升。
还有无数的相关研究我可以引用，包括主要厂商如苹果、谷歌和微软设立的元件推荐尺寸（稍后我会提及）——但我们首先需要讨论所有这些标准的鼻祖：菲茨定律（Fitts’s Law）。
回顾历史
作为产品设计师，我们受益于前人的辛勤工作。在这个例子中，Paul Fitts——一位俄亥俄州立大学（雄鹿加油！译者注：Go Bucks为该校口号）的心理学家——在1954年创建了一项后来被称为菲茨定律的原则。它从此成为人机交互的基础。
最简单的来说，菲茨定律是你的手移动到一个对象上需要多长时间的模型。这个对象越近，且粗略地说，它越大，你就能越快、越容易地将手移动到这个对象上。
不但如此，菲茨能够用数学表达这个模型。举个例子，如果将此模型应用到触摸屏界面，只要我们知道屏幕上的对象的大小和距离，我们就可以确定将你的手指指向它们需要多长时间。
这就是它的方程式：
MT = a + b log2(2A/W)
其中：
- MT =完成动作所需的时间
- a,b =随情况变化的参数
- A =从起点到目标中心的移动距离
- W =目标在运动轴线上的宽度
我不是个数学家，但我对菲茨定律的研究表明，这个函数的对数部分是非常重要的。
认知科学家、《MindHacks》这本书的合著者汤姆·塔福德很好地总结了这个函数的动态变化：
虽然定律的基本信息平淡无奇（大的目标更容易被选中），但精确的数学描述才是令人兴奋的。这个数学描述中包括了一个对数函数——这意味着目标大小与反应时间的关系呈曲线形状，即小对象的尺寸增加一点点，就会导致选中它们变得容易得多（而大对象的尺寸增加一点点并不会造成这么大的差异）。这同样适用于目标距离的变化。
令人兴奋的是，现代研究一次又一次地证明了这点。在我之前引用的两篇论文中，每篇都显示当按钮尺寸超出某个特定值时——大约在12~15毫米之间，效果就会递减。
但最棒的是，我们可以利用这个定律来设计更好的用户界面。
下面是怎么做。
使用菲茨定律设计更好的用户界面
以菲茨定律为基础——且结合之前提到的研究——你就可以几乎每一次都设计出完美触屏的用户界面。
首先，下面列出了上述两项研究中建议的按钮大小：
- 9.2 x 9.2mm
- 9.6 x 9.6mm
- 12 x 12mm
- 15×15mm
下一步，让我们结合苹果、谷歌和微软推荐的触控目标的最低标准：
- 苹果：44×44points（逻辑分辨率）
- 谷歌：48×48dp +8dp或更多间距= 56 x 56dp（设备分辨率）
- 微软：9×9mm±两侧分别2mm的推荐间隔= 13×13mm
哎！我们要如何规范这些值？
我们需要把毫米转换为像素，并把设备独立像素点转换成逻辑分辨率（pixels）。由于根据定义，像素是没有标准度量的，我们需要使用下面的公式,来将显示屏的像素密度纳入考虑。
像素 = PPI（像素密度） ×（0.03937英尺/平方毫米）
为了便于讨论，让我们假设我们使用的是iPhone 7Retina显示屏。根据苹果的规范，iPhone 7的显示屏的PPI（像素密度）为 326。
所以，我们需要做的就是把每个用毫米表达的建议尺寸都代入这个公式：
像素 =326 ×（0.03937英尺/平方毫米）
我假设你们大多数人都用Sketch，因此让我们把结果转换成逻辑分辨率（points）。iPhone 7拥有200%像素密度，所以我们只需要将结果除以2，以便在1x尺寸中正确地设计（有点困惑？这里是Kurt Varner{在我的书《设计一个人人都爱的产品》中提到过此人}写的一篇很棒的关于为什么在1x尺寸中设计更有效的文章）。
第二步，当我们将所有这些尺寸转换过来后，让我们比较它们在iPhone 7屏幕上会如何显示。我还标出了每一个主要供应商的标准，以及在上述研究论文中提到的关键尺寸：
更进一步的是，我也很好奇：iOS 9和iOS 10的锁屏音乐控件的点击目标尺寸是什么？它们是否会跟上述的尺寸重合？
这是不是很有趣？从iOS 9到iOS 10，苹果的控件增大了约6毫米至12.8毫米。
这恰好符合微软的触控指引！
怎样使你的用户界面真正可点击
人类的指腹平均为10至14毫米——而麻省理工学院触屏实验室发现指尖平均为8至10毫米——我认为我们可以很容易地定义“完美触屏的用户界面”的元件尺寸范围：
一个完美触屏的用户界面由至少10毫米左右的元件构成，参考微软的标准，最佳的触摸原件尺寸应在13毫米左右。
在这些范围内，我认为你可以自信地创建能帮助客户减少错误、更快地完成任务、并最终对你的产品更满意的用户界面。
附：转换毫米到Points的Google Sheet
这是我把毫米转换成Points的Google Sheet。你可以复制下来用于自己的用途。如果你觉得我有任何错误或值得表扬的地方，请在Twitter上给我留言。
更多译文：
如何设计完美的移动端表单
30个笑死人的设计
2017年移动端用户体验设计趋势
人机交互的四次重大变革
迪斯尼电影APP用户画像高清中文版
全部170+篇译文>>
申请加入UXRen翻译组>>
译者：taitai 审校：天蛙
作者：Scott Hurff
原文链接：http://scotthurff.com （需翻墙）
原文标题：《Using science to make truly tappable user interfaces》
版权声明：
- 本文版权归：UXRen翻译组 所有；
- 转载带有“UXRen译”抬头的翻译文章，文章标题必须保留“UXRen译”字样；
- 转载文中必须保留：“UXRen翻译组”、“作者”、“译者”及“审校者”信息；
- 转载文末必须保留本译文网页链接地址；
- 如未遵照上述规则转载，视为侵权，UXRen社区保留随时追责的权利。
关注UXRen微信公众号(cnUXRen)
版权声明：除转载文章外，本站所有文章版权归UXRen社区所有，转载请注明出处：UXRen社区，并保留本站原文链接地址。本站部分文章来自互联网及公开渠道，如有侵权请及时联系我们。邮箱：contact@13tech.com.cn
原创文章，作者：震天下，如若转载，请注明出处：https://www.iamue.com/21050/
