备注：本文作者在2013年写过一篇专栏文章《用户如何真正持有移动设备？》，文中有一张我们在很多场合看到过的图片，如下图。随着设备的不断更新、交互方式的变化，文中的很多结论已不再适用。该文是作者通过大量的研究和分析后，在2017年新得出的结论。
图1:已过时的关于单手持手机时的触摸区结论
原作者：Steven Hoober发布时间：2017-03-06
原文章：Design for Fingers, Touch, and People, Part 1
1、关于触屏面积的研究
“接触面”指用户手指与电容式触摸屏接触的区域。如图所示，该区域的大小随用户触摸屏幕方式不同而发生变化，如用指尖还是指腹触摸、下压的力度等。没有把研究中发现的不同用户指腹触摸大小的数据拎出来是因为：指腹大小的差异并没有你想象中大，也没有你想象中重要。
图2:不同方式的触屏
2、关于手持手机姿势的研究
人们会以多种方式手持手机，并且手持姿势会不断变化。所以之前的图1中拇指扫动盲区的图示是不适用的。
图3:常见的6种持握手机方式
根据研究，关于用户持握手机得出以下几组数据和结论：
·人们会因环境、设备、需求的不同，采取多种不同的持握方式；
·人们持握手机的方式是无意识地变换的，是无法预测的；
·75％ 的用户仅用一个拇指触摸屏幕；
·不到 50％ 的用户单手持握手机；
·36% 的用户双手持手机，其中一只手来操作，既稳定又能提高触屏的准确性；
·10% 的用户一只手拿手机，另一只手的手指敲击。
3、人们擅长点击屏幕中心
触屏点击是不准确的，图4描述了左上角图标的触控精准性。目标点击区域不存在完美的目标尺寸，一些用户甚至都没有点到目标，因此只需达到一定的比率即可。图中绿色的圆圈是R95圆概率误差范围（95%的触击点都会落在这个半径范围内）。
图4-图标的触控精准性图
虽然触控是不准确的，但是这种不准确是有规律的。人们更擅长点击屏幕中心的目标，屏幕中心的目标的可点击区域可小至7mm，而屏幕角落目标的需要更大，约12mm。
图4:屏幕各区域触控精准性图
tips：
触屏是不准确的，所以触屏对象间会存在干扰，这时候设计就要注意避免将破坏性选项和正向选项放一起，如请勿将格式相关按钮和发送按钮放一起。（关于灾难性设计NNG上有一篇文章，我有将其翻译：勿将破坏性选项和正向选项放一起）。
综合考虑用户点击的不准确性和视觉偏好，在界面的信息层级设计有一些小建议。将次要操作放在屏幕的顶部或底部边缘，把第三级功能统一收纳到菜单里，用户通过点击角落的按钮查看它们。
屏幕顶部或底部的操作按钮数量要尽可能少，留出足够的空间。不要在菜单栏上放置4个以上的操作按钮。
图5-交互友好的信息框架设计模式
4、人们喜欢点击屏幕中心
在移动设备上，人们的视线不是从左上扫描到右下，手指操作也不是从右下到左上，人们的视线和操作都更喜欢集中于屏幕的中央。图 5 显示在全屏滚动列表中，用户的实际点击热力图。
在实验中发现，如果允许用户把内容移动到屏幕中的任意他们感到舒适的位置时，用户会内容移动到屏幕中央后进行操作。因此，重要的可点击的元素不应该放在屏幕的边缘，而因放在屏幕中央。即便不把重要信息放在页面中央，用户仍会尝试将内容移至屏幕中间，这样即浪费了他们的时间，增加了他们的挫败感，用户会感到不爽。
图6-全屏列表中用户实际点击热力图
tips:
在设计需要滚动或占据整屏的内容时，要在文章页面和表单的底部留出空白，方便用户可以将文本的最后一行滑到屏幕中央。不要将内容填满整个页面，也要避免一页内容结束刚好卡到下一页就开始的设计方式。
5、手指会碍事
在文章一开头说过手指的大小并不重要，这仅仅指的是指腹大小与触屏目标大小和精准度无太大关系，但是手指不是透明的，它会遮挡视线。用户无法看到他在操作的图标，也不知道是否操作成功，除非把手指移开。因此在设计时，因保证目标和目标状态变化能够让用户看到。
图7-手指完全挡住了Twitter上的转发图标
在一项让用户滚动并点击列表的调研中，发现了人们点击区域的偏好：大部分用户会点击右侧、一些用户点击屏幕中央、很少有用户点击左侧。当内容铺满全屏，用户习惯侧边滑动屏幕并在侧边点击，即便用户使用的是左手滑动也会跨过内容区滑右侧空白区。但是一些从右向左阅读文化如阿拉伯文的用户，他们习惯点击左侧的空白区域。
研究中还发现，因为平板的屏幕较大，一般情况列表不会撑满整个页面的宽，人们更倾向于在靠近屏幕中央的位置滑动操作。
图8-滑动页面的位置随内容变化
tips：
内容间要有合理的留白和足够的边距，给用户足够的安全感在远离内容区的空白区域进行操作。
6、手机不是平的
手机会有凸起的边框，比如手机壳，也有一些边缘是曲面屏的手机，在手机的边缘屏幕会逐渐弯曲，偏离用户的视觉平面，设计的时候要注意在边缘留有一定间隙。
图9-华为曲面屏
结论
· 将内容和功能放到屏幕中央
· 考虑到手指会遮挡内容，设计时确保交互操作的结果可以被看到
· 针对屏幕区域不同位置做不同的设计，在屏幕的边缘和角落处使用更大的触控目标
· 合理布局触控目标，避免用户误触造成灾难性后果
· 设计用户界面和交互时要保持一致性
· 关注用户以及用户使用的设备、模式和情景
· 使用实际尺寸设计移动界面
· 在真机上测试你的设计
· 请记住为手、手指、拇指和人类设计
网友评论