了解 UI 设计的手势
已发表: 2021-03-29点击、滑动、拖动、长按——这些只是主导我们数字体验的几个手势。 触摸屏 iPhone 几年前就成为了移动手势的主流，从那以后我们就再也没有回头。
手势会影响我们与界面的交互方式，包括手机、笔记本电脑和 iPad。 但是，我们不必走太远就能找到超越我们工作和娱乐设备的手势界面。 在与汽车屏幕或浴室水槽交互时使用手势已不再罕见。
自然用户界面 (NUI) 对用户来说非常自然，以至于界面感觉，有时甚至是不可见的，就像触摸屏界面一样。 一些 NUI 甚至使用手势控制，允许用户在没有直接身体接触的情况下与界面进行交互。 宝马最近发布了一项手势控制功能，让用户可以对汽车音量、通话等进行非接触式控制。
手势在用户界面设计中变得越来越普遍，并且在我们的日常生活中扮演着越来越复杂的角色。
随着技术的进步，UX 和 UI 设计师和企业将需要适应。 您不必了解所有复杂的技术或对计算机智能有深入的了解。 不过，您应该对手势技术的能力、功能和最佳设计实践有基本的了解。
什么是好的手势
那么，什么是手势？
手势是一种交流方式。 长期以来，我们一直使用手势和点头来帮助传达意义，而现在，手势在与用户界面的交流中发挥着作用。
良好的手势可以提供符合我们思维方式的有效、高效的沟通。 我们的思想和知识会影响我们说话的方式，它们也会影响我们对手势的使用，尤其是在 UI 设计中。 想一想，对于在现代技术环境下长大的年轻一代来说，掌握手势是多么容易——或者滑动的行为如何模仿推开或擦掉某物。 这就是为什么理解你的用户是必不可少的，即使在手势设计中也是如此。
手势跨越了物理和数字领域之间的障碍，使我们能够与我们的身体与数字媒体互动。 在某些方面，它使使用数字应用程序变得更加有趣，但这还不足以让手势成为一个好的手势。
良好的动作手势通过使应用程序更易于在所有情况下使用来提高可用性。 精心设计的手势具有更短的学习曲线，因为它们感觉自然且易于上手。 引用比尔盖茨的话：
“直到现在，我们一直不得不适应技术的限制，并使我们使用计算机的方式符合一套任意的约定和程序。 有了 NUI，计算设备将首次适应我们的需求和偏好，人类将开始以对我们来说最舒适、最自然的方式使用技术。”
手势技术的好处
手势界面的广泛使用是由于它们带来的许多好处。 手势最显着的三个好处是更简洁的界面、易用性和改进的任务完成。
1. 更简洁的界面
人类消费的内容比以往任何时候都多，企业使用更多的数据，技术继续提供更多的服务。 随着内容的增加，界面和显示很容易显得杂乱无章。 设计师可以使用手势来减少占用空间的视觉元素的数量，例如按钮。
2. 易用性
如上所述，使用基于手势的界面交互变得更加自然。 简单手势的易用性使我们能够以最小的努力以最大的速度使用技术。
3. 改进任务完成
当用户完成任务所需要做的事情更少时，任务完成率和转化率就会提高。 当您花费较少的精力时，您更有可能完成任务。 基于手势的用户界面通过简化和快速的任务来利用这一点。 他们甚至可以减少完成任务所需的步骤数。
UI设计中的手势类型
触摸设计导致了多种手势的发展，其中最常见的是轻敲和滑动。 手势分为三类：
- 导航手势（导航）
- 动作手势（采取行动）
- 变换手势（操作内容）
以下是所有（或几乎所有）用户都熟悉的跨界面的一些最常见的手势——即使不是有意识的。 我们提到了屏幕，但您可以将屏幕替换为触摸板或任何其他手势界面。
轻敲
点击手势是指您用一根手指点击屏幕以打开或选择某项内容，例如应用程序或页面。 这里有一个提示：设计可点击的界面元素，以便整个框或行都是可点击的——而不仅仅是文本。 给用户更多空间会增加可用性。
双击
双击是指您连续两次连续点击屏幕。 许多应用程序使用此手势进行放大，但在 Instagram 上，用户可以双击照片来点赞。
滑动
滑动包括在屏幕上向一个方向移动手指，在一侧向下触摸，在另一侧抬起手指。 滑动手势通常用于在页面之间滚动或切换。 Tinder 使用向右滑动来匹配个人资料，向左滑动来跳过一个。
多指滑动
您还可以用两根或三根手指进行滑动手势。 这是使用两指和三指滑动来执行不同操作的笔记本电脑触摸板的常见功能。
拖
拖动使用与滑动相同的一般动作，只是您移动手指的速度较慢并且在将对象拉到您想要的位置之前不要抬起它。 您可以使用拖动将项目移动到新位置，例如在重新组织手机应用程序时。
一扔
与滑动一样，滑动手势是指您在屏幕上高速移动手指。 与拖动不同，您的手指不会与元素保持接触。 Flings 通常用于从视图中移除某些东西。
长按
长按是指您点击屏幕但手指按住的时间比平时长。 长按可打开菜单选项，例如按住文本进行复制或按住应用程序将其删除。
捏
作为许多两指手势之一，捏合是指您将两根手指分开在屏幕上，然后以捏合动作将它们相互拖动。 捏合手势通常用于在放大后缩小。有时它们会显示所有打开屏幕的视图以用于导航目的。
捏开或展开
捏开或展开手势与捏相反。 你将两根手指并拢向下，然后将它们分开。 展开，如双击，一般用于放大。
回转
要进行旋转，请用两根手指按屏幕并以圆周运动方式旋转它们。 旋转的最佳示例是当您在 Google 地图上转动地图以查看您周围的情况。
设计手势101
使用人们所知道的
手势已经存在了一段时间，因此对于大多数手势，都存在一般准则。
在大多数情况下，在为界面设计手势时，您需要遵循一些规则。 例如，在创建应用程序时，您需要考虑用户将在哪些界面上使用您的应用程序。 用户有可能会在 Android 和 Apple 手机上下载您的应用程序，这两种手机都已经使用了产品特定的手势。 您需要评估产品界面的手势并决定如何利用它们，或者是否值得添加用户不熟悉的手势。
以下是流行产品界面的一些方便的手势和动作指南。
- 谷歌手势指南
- 微软手势指南
- Apple 手势指南
- Android 手势指南
在设计基于手势的用户界面时，坚持用户所知道的内容是一种很好的做法。 如果需要，您可以发挥创意，但手势和界面之间的一定程度的一致性有助于使它们对用户保持直观，从而提高产品的可用性。
如果您认为有新的手势，您需要在实施之前对其进行广泛的测试。 在向公众发布之前，您将执行一系列用户研究方法来测试手势的可用性、有效性、学习曲线和用户满意度。
您可以选择为不同的目的重复使用众所周知的手势，但同样，您应该提前测试此策略的有效性。 这里的好处是用户至少熟悉动作。
举个例子，Instagram 使用双击来点赞或“收藏”帖子。 双击通常用于放大，但它适用于 Instagram 的目的。 这也是一项关于效率的伟大研究：点击帖子下方的心脏需要更少的点击，但需要更多的目标。 另一种双击方法允许用户更快地滚动，因为他们可以瞄准整个图像，并且可以直观地点击您喜欢的对象。
设计师已经开始开发一种带有手、圆圈和箭头的设计语言，用于向产品开发人员和战略家传达手势意图。 这种语言几乎是通用的，偏差最小。
在屏幕外思考
手势存在于手机和笔记本电脑使用之外的日常场景中。 越来越多的公共厕所安装了运动感应水槽、空气干燥器和纸巾分配器。 这些设备还可以防止细菌传播——这是流感季节的一个很好的特点。 与此同时，自动驾驶汽车正在使用手势识别技术来提高其有效性和安全性。
但是您仍然可以在屏幕外思考的同时通过手机手势发挥创意。 多年来，设备一直使用旋转和摇晃作为交互方式。 例如，Apple 的“摇动撤消”让用户可以选择通过摇动手机来撤消操作。 到目前为止，您可能已经熟悉水平旋转屏幕以全屏观看视频。
只要首先进行测试，创造性的手势技术就可以让产品更进一步并提高可用性。
手势和可访问性
手势，就像所有东西一样，应该是可访问的。 可访问性是指使产品对所有环境中的所有人（包括残疾人）都可以访问和使用。 手势应遵循无障碍设计最佳实践以促进平等环境，遵守美国残疾人法案 (ADA)，并允许每个可以从您的产品中受益的人使用它。
除了确保界面手势可访问之外，值得考虑如何使用手势来提高可访问性。 苹果意识到 iPhone 的平面、无纹理屏幕对盲人用户构成了障碍。 因此，他们使用基于手势的界面来创建其他基于辅助功能的手势，以帮助视障人士使用他们的产品。
不要忘记用户体验
交互使用术语 UX 和 UI 是很常见的，但这是一种不准确的做法。 UX 代表用户体验，它在与产品互动时处理用户的感知和情感。 UI 代表用户界面，涉及用户与之交互的产品元素。 UI是UX设计的重要元素。 如果您有兴趣了解更多关于它们及其差异的信息，请查看我们的 UX 与 UI 设计指南。
这里的重点是 UX 和 UI 是不同的，但在设计界面时考虑用户体验至关重要。 有趣但无用或有趣但可用性差的 UI 手势是设计人员和开发人员忘记 UX 的结果。
无论您进行了多少测试，都应为用户提供删除某些手势功能的选项。 轻敲是每个人都熟悉的重要触摸屏手势，但有些手势对产品的功能并不重要，只是为了使其更实用而存在。 有时，像这样的手势会惹恼不熟悉它们的用户，或者会在无意中触发手势。
例如，在 Mac 上，在触摸板上向左或向右滑动两根手指会向 Web 浏览器发送向后或向前页面。 许多用户无意中做出此手势，并且当页面不断变化时感到沮丧。 因此，Apple 为用户提供了禁用此功能和许多其他功能的选项。
优化用户入职
用户引导通过教用户如何使用产品来提高产品的成功使用率。 考虑一个新程序，它在首次打开时会引导您完成所有功能或使用步骤。
用户引导对于触摸手势很重要，因为它们通常是隐藏的并且容易错过，特别是如果用户不熟悉手势或在该上下文中没有使用该手势的经验。 如果他们不知道他们可以使用它或如何使用它，他们就不会。
入职用户时，您希望简明扼要，一次只教一件事，并遵循被证明在测试中效果最好的学习曲线。 冗长的教程和分步列表很无聊，互动性较差，并且经常被跳过。
拥抱手势界面的未来
手势已经在这里了。 它们存在于当下，使它们在我们的日常生活中发挥作用。 对于用户来说，这些手势可以存在于他们的潜意识中，因为他们不假思索地滑动和双击。 产品设计师、开发人员和战略家必须在更亲密的层面上理解手势。
触摸设计是该领域不断增长的一部分。 手势存在于浴室和汽车中——谁知道接下来会发生什么？ 接受它。 更有用的产品是有效的产品。
有疑问或想升级产品的 UX 和 UI？ 我们很乐意交谈。 只需伸出手。