分享最热门的资讯

原文

如果有一件事是经得起时间的考验的，那就是移动设备上的拇指区域。“拇指区”这个词在Steven Hoober的研究中，是移动界面设计与开发中的一个重要因素。

你是否曾有过这样的体验：在使用一个移动网站或应用程序时，对你的拇指很不友好？也许你不得不努力伸展拇指以便能够触到一个重要的菜单，或在滑动的时候与多个滑动区域打仗。 这些意外情况表明其对拇指区的考虑不足。

在这篇文章中，我将分享我所学到的关于拇指区的知识，以及如何将其规则应用到导航，卡片和滑动手势当中。

从最好的学习

如前所述，Steven Hoober在设计移动界面方面的研究和关于拇指区移动界面设计的理论，是我第一次接触这个概念，它是在开发的同时考虑拇指区域的重要依据。

继Hoober之后，Josh Clark在他的书“设计触摸”中记录了人们如何持有他们的设备的深入信息，你可以阅读列表中的摘录。

根据Hoober和Clark关于拇指在设备上如何交互的研究，我对改变设计元素位置的线框执行用户测试。我的测试运行在屏幕的顶部和底部的导航元素，具有在不同位置的按钮的卡片，以及拇指区域外部和内部的手势区域。

我的测试结果验证了Hoober和Clark的研究，同时提供什么可行，什么不可行的设计证据。下面，我将分享我对我测试的设计元素的发现。让我们开始吧。

拇指与触摸屏

拇指是个好东西不是吗？除了使我们比水母更酷，拇指也是我们如何与我们的移动触摸屏设备进行交互的关键。Hoober的研究表明，49％的人用一只手握着他们的智能手机，拇指承担了大部分的工作。Clark甚至进一步确定，75%的交互是用拇指驱动。

通过对手放置的这种理解，我们可以得出结论，用于拇指运动的某些区域适用于大多数智能手机。我们将它们定义为易于触及，难以触及和中间的区域。

左和右撇子用户的拇指区域映射。“组合”区域显示了大多数用户的最佳位置区域。

诀窍是如何设计拇指区的走向。这为制定更好的设计决策提供了框架，创造易用体验，减少用户费力度。通过用户测试和实验，我发现了在日常开发中使用这些知识的几种方法。

问题与导航

我们都记得曾经移动端导航只是一个简单的下拉列表的链接。它不漂亮，但它完成了它的使命。今天，我们看到了无数的导航模式的例子。什么是最适合拇指区的呢？

用户的自然动作是我学会思考的第一件事。提问：“我的应用程序有很长的链接列表吗？”“我需要混合菜单吗？“”什么样的控件适合我的网站？“这些问题的答案将帮助您确定在哪里放置导航点击区。

如果你的应用程序有一个较长的链接列表，那么建议您使用全屏幕覆盖菜单。这种类型的菜单为您提供了足够的空间来组织列表、社交按钮和其他有用的内容。这种类型在桌面设备和移动设备之间能够很好地缩放，它让所有需要点击的元素显示在拇指区域内。

使用一个巨大的全屏幕覆盖菜单。

在另一方面，如果你的应用程序没有一个长的链接列表，那么粘性的菜单可能是最好的。这种类型的菜单附加到顶部或底部的屏幕，并根据设计提供许多链接的空间，这取决于设计。

Airbnb的移动应用程序有一个粘性菜单，在屏幕的底部，提供方便的重要预订，信息和列表信息：

Airbnb的移动应用程序有一个固定的底部菜单

如果你有一个大的网站，混合菜单可能会有用。因为混合菜单可能很复杂，所以应该根据菜单链接在应用程序中的重要性来区分菜单链接的优先级。粘性菜单非常适合常用的链接，而全屏和抽屉菜单对于重要但优先级不高的链接非常有用。

参考Facebook的移动应用

Facebook的移动应用程序结合了多个固定的菜单和抽屉式菜单。

Facebook根据其内容来使用混合菜单。在上面的截图中，我们看到了两个粘性菜单，每个都包含有价值的链接给用户。顶部的粘性菜单是在拇指的拉伸区，但刚好在足够低的区域，所以使用时感觉是自然的。底部的粘性菜单的排布具为常用的链接提供舒适的点击。

通过收集用户数据、良好的设计和正确利用拇指区，Facebook把粘性菜单做的很牛。下一次看你朋友的帖子时，你可以记住一系列操作，使你的使用体验更好。

请记住，除了将重要的导航项目保留在缩略图（拇指）区域中，放置在友好区域以外的链接有时是可以接受的。一般规则是将频繁使用的链接放置在易于到达的区域中，并将不常使用的链接放置在难以到达的区域中。

保持卡片的友好

接下来，我们将回顾一个精心设计的卡片如何为您的应用程序工作。卡片模式已被广泛使用了一段时间了。卡片是快速，简单和可预测的，它提供少量的重要信息，这使它能在正确的时间提供正确的内容。

通常，我们将卡片与动作结合：发送，保存，完成，关闭等。

雨披：唤醒天气卡片模式

在这个例子中我们看到雨披：唤醒天气应用程序。这是在卡片上放置可操作链接的一个很好的例子：天气预报不需要拇指点击，所以它被放置在拇指区不能到达的区域内。操作项（在这个例子中，分享按钮）直接放置在自然区中。

一方面，Poncho将“位置搜索”和“使用当前位置”链接放置在拇指难以到达的区域内。这是可以接受的：用户不经常使用这些功能，因为应用程序会记住您上次打开时的位置。

另一方面，有时候，卡片设计不使用拇指区。Etsy的移动应用程序就是一个典型的例子。在结帐期间，Etsy在弹出的卡片中提供一个表单，供用户输入其航运信息：

Etsy的结账页面在卡片模式中有缺陷

乍一看，这种卡片的使用似乎是恰当的和设计精美的。深入挖掘，我们可以看到其缺陷。第一个问题是左上角的“取消”链接。该链接是否是关闭卡片或取消结帐过程（如果我很困惑，其他人也肯定会）。此外，“X”是在拇指区域的边缘，迫使用户努力伸展手指够到它。

这有一个困境：在卡片的顶角添加关闭按钮是一种常见的模式，但这违背了拇指区规律。如果你突破拇指区以满足用户的期望，寻找另一种解决方案。我们可以尝试通过在卡片的底部添加一个关闭按钮，或-因为卡片模式是最好的，当提供短时间的内容时-我们可以尝试限制卡片中的内容长度。

随着卡片设计的日趋成熟，把你的卡片内容放在拇指区域内是一个好主意，以确保大多数元素是容易访问和不混乱的。避免跟随趋势，相反，在整个应用程序的设计和开发中做出面向人性的决策。

姿势和动作

手势：点按，双击，滑动，拖动，捏和按。这些都是智能手机蛋糕上的糖霜。手势使我们能够通过我们的触觉与技术接触。

你可能会猜到这是怎么回事。将手势保持在拇指区域内。更重要的是，允许用户自然地执行手势。这似乎是显而易见的，但要真正地设计出一个舒适的经验，重要的是要计算手势应该在哪里发生。

让我们专注于滑动互动。通过滑动跟踪脚本，我发现了一些非常有趣的运动数据。

在用户测试中发现的滑动手势数据的可视化。

在上面的图中，圆圈代表触发点，箭头代表滑动轨迹。我从测试中收集的数据显示来看，用户通常会在设备的边缘向中间滑动，对角线向下。我还发现，用户一般在拇指区的自然区域滑动。

原来，我有一种误解，就是用户会水平方向横滑，这在测量用于滑动手势的拇指区域时产生了问题。 我设计的滑动区域没有提供足够的空间来避免同时触发另一个滑动区域。与大多数手机的设计元素一样，请考虑滑动所需的拇指空间。我发现一个适当的滑动区域的尺寸：至少45像素高和宽。

有了这些信息，我们可以得出结论，最好将轻扫手势动作放在容易到达的区域，同时允许足够的空间来防止意外输入。

滑动手势的一个很好的例子是Google的“收件箱”应用程序

Google收件箱支持在正确的位置滑动手势，并有足够的空间。

这里的明智决策是：

• 保持滑动手势在容易到达的区域内；

• 提供足够的触控空间；

• 允许在每个电子邮件列表元素中的任何位置滑动。

所有的这些，手势感觉自然和舒适，使电子邮件管理更快，更简单。继续保持，Google！

总结

我们学到了什么？希望你更好地理解为什么拇指区很重要。记住这些要点：

• 移动设备和语言都会发生变化，但只要有触摸屏，拇指区将仍是设计的关键部分。

• 如果重要的链接在容易到达区域，不重要的链接在难以到达的区域，那么你的导航设计对你的拇指将是友好的。

• 只有当内容和动作对拇指区是友好的时，卡片才是一个强大的设计形式。

• 只有当我们考虑人的拇指如何在玻璃屏幕上滑动时，你确定滑动手势区域才能变得更简单。

ios学习从入门到精通尽在姬长信