通过用户行为研究，我发现了移动触摸屏设计的五大原则
在我的上一篇文章中，我分析了人们如何握持、触摸和查看手机和平板电脑。文章链接：无“触”不在，一起聊聊“触摸交互”的历史和设计策略 ，我还提供了一些关于如何为触屏移动设备进行设计的指南。现在，我将解释我是如何得出这些设计原则的，并更详细地介绍我所了解到的一切。除了简单的设计策略之外，本文还描述了人们的实际行为，并将帮助你理解他们为什么以这种方式与手机和平板电脑互动。
多年来，我一直在进行基础性研究，以及设计工作的附带研究。从这些研究中，我了解到了很多关于人们如何握持、触摸和查看智能手机的知识。但是因为收集了许多不同的数据，我了解到的信息开始变得混乱。
所以，几年前，我开始把这些知识分门别类地整理出来。我最后总结出了十个基本的用户行为或技术准则。对于其中的每一项，都有一套相应的使用原则和指南。这些都成了我为现实中的人，在现实世界中，在任何设备上进行移动触摸屏设计的启发式方法。在本文中，我将介绍这些启发式方法中的前五种：
设备多样性就是人的多样性；
人们习惯触摸屏幕中心；
人们习惯看屏幕中心；
手指有时会碍事；
人们以不同的方式使用不同的设备。
1.设备多样性就是人的多样性
“人们以多种方式握持手机，而且一直在变化。他们并不只有一种最喜欢的方式，而是经常变换握持方式。”
人们总是很容易做出假设，并将自己的观点与对用户的同理心混淆。但是，请记住，用户可能和你或你的朋友不一样。他们用不同的方式，使用不同的手机，这并没有什么问题。
那么大家是如何拿手机的呢？我引用最多的数据之一是75%的用户只用一个拇指触摸屏幕。然而，这些数据可能会产生误导，因为只有不到50%的用户单手拿着手机。大约36%的用户会双手托着手机，用第二只手来操作或加固。另外，有10%的用户用一只手托着，用另一只手点击屏幕。因此，用户将以三种完全不同的方式与手机互动。图1显示了各种握持和触摸方式。
人们拿手机的方式多种多样，而且一直在变化。他们并不是只有一种最喜欢的方式，而是经常变换握持方式。我观察的人越多，我就越惊讶于人们的交互方式是多么的多变，以及改变手的姿势如何让人感到舒适。图2是一张图表，显示了人们在特定类型的互动中，根据任务和情境的不同，如何改变自己的握持方式。
很少有人会用两只手和两个大拇指握住手机屏幕。至少，他们通常不会这样拿手机。但人们在打字时就会转变握持方式，41%的用户在打字时用双手握住手机，用拇指敲击。
总结：
为每个用户、每种类型和尺寸的手机设计。
针对人们使用设备的不同方式进行设计，而不仅仅是一种方式。
抛开你的偏见。不要假设每个人都使用和你一样的手机，或与以你相同的方式使用它。
2.人们习惯触摸屏幕中心
“可点击的关键项目不应该沿着边缘，而应在屏幕的中心。”
不管是哪种类型的触摸屏设备，人们都更喜欢触摸屏幕的中心位置。图3显示了用户在全屏滚动列表上选择项目时的实际点击位置热图。
我进行了一项研究，让用户将内容移动到屏幕上他们直觉合适的位置。一旦他们将内容移动到屏幕中央，他们就会点击选择它。这项研究证明了我在产品研究中观察了很久的东西。
因此，关键的可点击项目不应该沿着边缘，而应在屏幕的中心。考虑到内容的位置和不同设备的不同尺寸和形状，我发现大多数点击都在页面的中半部分。所有的手持设备都是如此，即使是大型平板电脑也是如此。
这既解释了为什么列表设计如此有效，也解释了为什么谷歌的MaterialDesign将功能按钮从屏幕边缘移开是一个很好的设计解决方案。
总结：
用户更喜欢触摸屏幕中央，只要你给他们这样的选择，他们就会这样做。
将关键操作放置在屏幕的中半部到三分之二的位置。然后，沿着屏幕的顶部和底部放置辅助选项和按钮，提供通往二级页面的途径。
3.人们习惯看屏幕中心
“人们更喜欢在屏幕中央查看内容。”
用户将注意力集中在屏幕中央的习惯也延伸到了阅读上。人们更喜欢在屏幕中央查看内容。另外，他们会更快地注意到屏幕中间的内容，并更准确地阅读。所以要遵循现有的、可靠的列表视图和网格视图的移动模式，将你的主要内容和主要交互放在屏幕中心的位置。
在设计滚动内容或占据整个可视区域的内容时，一定要垫高文章页面和表单的底部，这样用户就可以将最后一行文字或最后一个字段带到屏幕的中间。
即使你不这样做，用户还是会试图把内容移到屏幕中间，浪费他们的时间，增加他们的挫败感，让他们感到有点不满意。我们应避免流行的做法，即只显示适合可视区域的页面，然后在用户滑动时切换到下一个页面。我们现在了解了，有些人并不喜欢那样的阅读方式。
总结：
确保关键内容在页面的中间，无论是为了点击还是查看。
有时，这意味着允许内容滚动到中间位置。因此，我们应在页面底部提供额外的空间，让用户能将最后的内容滚动到视窗的中间。
4.手指有时会碍事
“用户在将手指或拇指移开之前，无法判断是否成功点击了一个过小的目标。“
在我的上一篇文章中，我谈了很多关于手指大小并不重要的问题。这是真的，但这只与触摸目标大小和触摸精度有关。然而，手指是不透明的，所以它们确实会妨碍操作。
在点击时，人们的手指或拇指完全覆盖了很小的图标——比如图4所示的Twitter转发图标。
当用户看不到目标时，就无法很好地锁定目标。用户在将手指或拇指从目标上移开之前，无法判断自己是否成功点击了一个过小的目标。因此，你应该在每个触摸目标周围留下足够的空间，以确保用户能够看到目标及其状态变化。
在我进行的测试中，我允许用户先滚动，然后再点击列表，我从他们触摸屏幕的方式中了解到的另一个关键问题是他们的手势方法。有些用户在屏幕中间做手势，但如图5所示，有很多人在屏幕最右边做手势，但几乎没有人在左边做手势。
滚动的位置根据内容的长度而变化
当内容延伸到整个屏幕的宽度时，更多的人在侧面做手势来滚动。因此，即使他们点击文本标签和图标等内容，他们也会通过点击内容的侧面来滚动。当你完全填满一个页面时（例如，用一个图片网格），人们一般会在最右边滚动，尽量远离内容。
这是相当普遍的事实。即使是惯用左手的人也会越过屏幕，在屏幕右侧的空白区域滚动。但当阅读从右到左书写的语言时，如阿拉伯语或希伯来语，这时左侧有空位而不是右侧，人们就会在左侧的空白处滚动。
你可能会认为，用户会在平板电脑上坚持使用屏幕边缘，因为他们的屏幕更大。但应用我们知道的原则：人们更喜欢在内容的中心和侧面滚动。因为平板电脑更大，滚动列表中的内容不太可能占据整个视口的宽度。所以，在使用平板电脑时，人们更多的是在靠近屏幕中心的位置滚动，而不是在边缘滚动。
总结：
确保人们的手指和拇指不会遮挡住内容，这样他们就可以看到他们正在点击的内容。
确保可选择的项目足够大，它们可以清楚地显示点击是否成功。尽量放置能够改变状态的内容，让用户能够看到操作的结果。以这样的方式放置，可以邀请用户执行你认为重要的操作。
确保内容有足够的留白空间，以及合理的边距，这样用户就可以放心地在一个与任何可选择内容区分开的区域内滚动或做手势。
5.人们以不同的方式使用不同的设备
“设备越大，位置离眼睛越远。“
不要再谈论人们的需求碎片化了，就好像它是一件坏事一样。相反，我们要尊重人们的不同选择。有这么多不同的设备，是因为人们的需求不同。人们使用设备的方式也证明了这种多样性。
我们发现，人们拿着典型的智能手机，一般距离眼睛大约12英寸，或者说30厘米，即使在走动时也是如此。但设备越大，人们放置设备的位置就离眼睛越远，如图6所示。
人们更多坐着使用大型设备，所以几乎三分之二的情况下，他们会把平板电脑放在支架上、桌子上或腿上。图7显示了这些行为的总结。
一般来说，设备越小，人们在移动时使用的越多。但“移动”并不一定意味着要坐公共汽车或火车，或是走在大街上。这通常意味着在家里或办公室里走动。人们可以在生活中边走边工作，而不一定非要停下来在桌子上使用平板电脑，或者坐在办公桌前用电脑打字。
随着移动设备越来越大，人们越来越少地将这些大设备作为手持设备使用。大约四分之一的时间里，人们使用较大的平板电脑，比如初代iPad，它有一个物理键盘和屏幕，就像台式电脑一样。而且，几乎10%的人会使用触控笔来代替手指。
对于特定的设备类型，我们可以使用角度分辨率的知识来确定最小内容尺寸，以及我们用于小标题等层次结构的尺寸大小之间的最小差异。
表1：内容和小标题的字体大小（磅）
总结：
支持所有的输入类型——尤其是当你正在构建响应式网站或期望为平板电脑和手机创建应用程序时。
如果可以的话，收集用户在实际环境中如何工作的数据。然而，对于大多数用户来说，我在这里概述的模式对你来说是非常安全的。你可以根据使用情况和设备类别来预测正确的字体大小。
为了获得最佳的可读性，调整字体、图标、文本框、复选框和按钮的大小，以适应特定设备类别的用户眼睛与屏幕的典型距离。
编译作者：叶苏 | 集创堂会员 | 纽约大学在读硕士
原文作者：StevenHoober
原文链接：https://www.uxmatters.com/mt/archives/2017/05/design-for-fingers-touch-and-people-part-2.php
小伙伴们，公众号开始采取 “智能排序”，不再按时间线排列了。如果你和我们的互动很少，那 “集创堂” 可能会越来越少地出现在你的公众号推送里哦 o(╥﹏╥)o
如果你愿意按时收到集创堂的专业干货和最新活动，一定要通过 “在看”、“留言” 或 “星标”“分享” 等方式，让算法记住你是爱我堂滴，么么哒 o(*￣▽￣*)o