理解 UI 设计的手势

点击、滑动、拖动、长按 — 这些只是主导我们数字体验的几种手势。几年前，触摸屏 iPhone 就成为移动手势的主流，从那以后我们就再也没有回头。

手势会影响我们与界面（包括手机、笔记本电脑和 iPad）的互动方式。但我们无需费力寻找，就能在工作和娱乐设备之外找到手势界面。与汽车屏幕或浴室水槽互动时使用手势已不再罕见。

自然用户界面 (NUI) 对用户来说非常自然，以至于界面感觉就像触摸屏界面，有时甚至是看不见的。一些 NUI 甚至使用手势控制，让用户无需直接身体接触即可与界面交互。宝马最近发布了一项手势控制功能，让用户无需触摸即可控制汽车音量、通话等。

手势在用户界面设计中越来越常见，并在我们的日常生活中发挥着越来越复杂的作用。

随着技术的进步，UI UX 设计服务和企业需要适应。您不必了解所有技术复杂性或对计算机智能有深入的了解。不过，您应该对手势技术的能力、功能和最佳设计实践有基本的了解。

怎样做才是好的姿态

那么，什么是手势？

手势是一种交流方式。长期以来，我们一直使用手势和点头来传达意思，而现在，手势在与用户界面进行交流方面也发挥着重要作用。

良好的手势能够提供有效、高效的沟通，与我们的思维方式相一致。我们的思想和知识影响着我们的说话方式，也影响着我们对手势的使用，尤其是在 UI 设计中。想想看，在现代科技的熏陶下长大的年轻一代更容易掌握手势——或者滑动动作如何模仿推开或擦拭某物。这就是为什么了解用户至关重要，即使在手势设计中也是如此。

手势跨越了物理世界和数字世界之间的障碍，让我们能够用身体与数字媒体互动。从某种程度上来说，手势让使用数字应用程序变得更有趣，但这还不足以让手势成为一个好的手势。

手势技术的优势

手势界面之所以得到广泛使用，是因为它具有诸多优势。手势的三大优势是界面更简洁、使用更方便以及任务完成度更高。

1. 更简洁的界面

人类消费的内容比以往任何时候都多，企业使用的数据也越来越多，技术也不断提供更多服务。随着内容的增加，界面和显示很容易显得杂乱。设计师可以使用手势来减少占用空间的视觉元素（如按钮）的数量。

2.易于使用

如上所述，手势界面的交互变得更加自然。简单的手势让我们能够以最小的努力和最快的速度使用技术。

3. 提高任务完成率

当用户需要做的事情更少时，任务完成率和转化率就会提高。当花费更少精力时，您更有可能完成任务。基于手势的用户界面利用了这一点，使任务变得简单快捷。它们甚至可以减少完成任务所需的步骤数。

UI 设计中的手势类型

触摸设计催生出多种类型的手势，其中最常见的是点击和滑动。手势分为三类：

1. 导航手势（导航）
2. 动作手势（采取行动）
3. 变换手势（操纵内容）

以下是所有（或几乎所有）用户都熟悉的一些最常见的界面手势——即使他们没有意识到。我们提到了屏幕，但你可以用触摸板或任何其他手势界面代替屏幕。

轻敲

点击手势是指用一根手指点击屏幕来打开或选择某个内容，例如应用或页面。这里有一个提示：设计可点击的界面元素时，应使整个框或行都可点击，而不仅仅是文本。为用户提供更多空间可提高可用性。

双击

双击是指连续两次点击屏幕。许多应用程序都使用此手势来放大照片，但在 Instagram 上，用户可以双击照片来表示喜欢。

滑动

滑动是指将手指沿一个方向在屏幕上移动，在一侧触碰，在另一侧抬起手指。滑动手势通常用于滚动或切换页面。Tinder 使用向右滑动来匹配个人资料，向左滑动来跳过个人资料。

多指滑动

您还可以用两根或三根手指进行滑动手势。这是笔记本电脑触控板上的常见功能，使用两根和三根手指滑动可执行不同的操作。

拖

拖动与滑动使用相同的一般动作，只是移动手指的速度较慢，并且在将对象拖到所需位置之前不要抬起手指。您可以使用拖动将项目移动到新位置，例如在重新组织手机应用程序时。

一扔

与滑动类似，滑动手势是指用手指高速在屏幕上移动。与拖动不同，手指不会与元素保持接触。滑动通常用于将某些内容从视图中移除。

长按

长按是指您点击屏幕但按住手指的时间比平时长。长按可打开菜单选项，例如按住文本可复制文本或按住应用可删除应用。

捏

捏合是众多双指手势之一，即在屏幕上分开两根手指，然后以捏合动作将它们向彼此拖动。捏合手势通常用于在放大后缩小。有时它们会显示所有打开的屏幕的视图，以便进行导航。

捏开或展开

捏开或张开手势与捏相反。您将两根手指并拢，然后张开。张开，就像双击一样，通常用于放大。

回转

要进行旋转，请用两根手指按住屏幕并以圆周运动旋转。旋转的最佳示例是当您在 Google 地图上旋转地图以查看周围的情况时。

设计手势 101

利用人们所知道的东西

手势已经存在了一段时间，因此对于大多数手势来说，都存在一般的指导原则。

在大多数情况下，在为界面设计手势时，您需要遵循一些规则。例如，在创建应用程序时，您需要考虑用户将在哪些界面上使用您的应用程序。用户可能会在 Android 和 Apple 手机上下载您的应用程序，这两种手机都已经使用了特定于产品的手势。您需要评估产品界面的手势，并决定如何利用它们，或者是否值得添加用户不熟悉的手势。

以下是一些针对流行产品界面的便捷手势和动作指南。

• Google 手势指南
• Microsoft 手势指南
• Apple 手势指南
• Android 手势指南

在设计基于手势的用户界面时，遵循用户所熟悉的界面是一种很好的做法。如果需要，您可以发挥创意，但手势和界面之间的一定程度的一致性有助于保持用户的直观性，从而提高产品的可用性。

如果您认为有新的手势，则需要在实施之前对其进行广泛的测试。在向公众发布之前，您将进行一系列用户研究方法来测试手势的可用性、有效性、学习曲线和用户满意度。

你可以选择将一个众所周知的手势重新用于其他目的，但同样，你应该提前测试此策略的有效性。这样做的好处是用户至少熟悉该动作。

以 Instagram 为例，它使用双击来点赞或“点赞”帖子。双击通常用于放大，但对于 Instagram 来说效果很好。这也是一项关于效率的出色研究：点击帖子下方的心形需要少点击一次，但更精准。另一种双击方法允许用户更快地滚动，因为他们可以瞄准整个图像，而且点击您喜欢的对象是直观的。

设计师已经开始开发一种设计语言，用手势、圆圈和箭头向产品开发人员和战略家传达手势意图。这种语言几乎是通用的，几乎没有偏差。

跳出屏幕思考

除了使用手机和笔记本电脑外，手势还存在于日常生活中。越来越多的公共卫生间安装了动作感应水槽、空气干燥器和纸巾分配器。这些设备还可以防止细菌传播——这是流感季节的一大亮点。与此同时，自动驾驶汽车正在使用手势识别技术来提高其效率和安全性。

但您仍可以在屏幕之外发挥创意，使用手机手势。多年来，设备一直使用旋转和摇动作为交互方式。例如，Apple 的“摇动撤销”功能让用户可以通过摇动手机来撤销操作。现在，您可能已经熟悉水平旋转屏幕以全屏观看视频。

只要先进行测试，创造性的手势技术就可以推动产品进一步发展并提高可用性。

手势和辅助功能

手势和所有事物一样，都应具有可访问性。可访问性是指让产品在所有情况下可供所有人（包括残障人士）使用。手势应遵循无障碍设计最佳实践，以促进平等环境，遵守《美国残疾人法案》（ADA），并让所有能从您的产品中受益的人都能使用它。

除了确保界面手势可访问之外，还值得考虑如何使用手势来提高可访问性。Apple 意识到 iPhone 的平面、无纹理屏幕对盲人用户来说是一个障碍。因此，他们使用基于手势的界面创建了额外的基于可访问性的手势，帮助视障人士使用他们的产品。

不要忘记用户体验

人们通常会交替使用 UX 和 UI 这两个术语，但这是一种不准确的做法。UX 代表用户体验，它涉及用户在使用产品时的看法和情感。UI 代表用户界面，涉及用户与之交互的产品元素。UI 是UI UX 设计服务的重要元素。如果您有兴趣了解有关它们及其差异的更多信息，请查看我们的 UX 与 UI 设计指南。

这里的重点是 UX 和 UI 是不同的，但在设计界面时考虑用户体验至关重要。有趣但无用或有趣但可用性差的 UI 手势是设计师和开发人员忘记 UX 的结果。

无论你做了多少测试，都要让用户选择删除某些手势功能。点击是每个人都熟悉的重要触摸屏手势，但有些手势对产品的功能并不重要，只是为了让产品更易用而存在的。有时，这些手势会让不熟悉的用户感到厌烦，或者在无意中触发手势。

例如，在 Mac 上，用两根手指在触摸板上向左或向右滑动可以让网络浏览器前进或后退一页。许多用户会不小心做出这个手势，而当页面不断变化时，他们会感到沮丧。因此，Apple 为用户提供了禁用此功能和许多其他功能的选项。

完善用户入职培训

用户入门通过教会用户如何使用产品来提高产品的成功使用率。想象一下一个新程序，在第一次打开时，它会引导你完成所有功能或使用步骤。

用户入门对于触摸手势非常重要，因为它们通常很隐蔽，很容易被忽略，尤其是当用户不熟悉手势或没有在特定情境下使用过手势时。如果他们不知道可以使用它或不知道如何使用它，他们就不会使用它。

在引导用户时，您需要简短地讲解，一次只教一件事，并遵循在测试中被证明最有效的学习曲线。冗长的教程和分步列表很无聊，互动性较差，而且经常被跳过。

拥抱手势界面的未来

手势已经存在。它们存在于当下，在我们的日常生活中非常有用。对于用户来说，这些手势可以存在于他们的潜意识中，因为他们可以不假思索地滑动和双击。产品设计师、开发人员和策略师必须更深入地了解手势。

触摸设计是该领域中一个日益增长的部分。手势在浴室和汽车中都存在——谁知道接下来会发生什么？拥抱它吧。更易用的产品才是有效的产品。