作者：RAUNO FREIBERG. 编译：Cointime.com QDD

设计有时似乎没有科学可言，只有感觉和直觉。即使是研究人员也很难将交互设计实践与科学联系起来，本质上将其视为一个神秘的黑匣子。尽管根据我的经验，这在某种程度上是真实的，但我一直在试图解构和挖掘出优秀交互设计背后的原因。

"交互"一词的本质意味着人与环境之间的关系。根据我的经验，通过创造某物——将头脑空间充满问题——然后进行一段综合性的漫游散步，可以带来巨大的启示。

这篇文章既不是教程，也不是一系列指南，而是对我经常使用但很少思考的几个交互细节的观察。除了重建界面，我发现这种反思的练习也是培养更强的设计直觉和词汇的另一种好方法。

交互设计中的隐喻

交互设计是一种艺术形式，旨在创造与人类意图流畅响应的体验。什么时候滑动触发某个动作？手势是否保留动力？如果手指覆盖内容会发生什么？如何根据上下文预测意图？在这些细节上表现出色，使产品感觉像是自己肢体的自然延伸。

但它不像绘画或作曲那样是一种艺术形式。交互设计有一个独特的人类因素。为什么？因为最终人们使用产品来完成任务。形式和构图中的美不足够。在形式和功能之间实现整体平衡具有固有的满足感。

优秀的交互设计通过重用隐喻来奖励学习。您可以使用两个手势来操作大多数触摸界面：点击和滑动。例如，在iOS上，您唯一明确学习的手势是向上滑动以打开：

现在，您已经学会了滑动，这使您能够控制界面的许多其他部分。滑动的动作还告诉您，界面由堆叠的层组成，就像一副牌。有了这个认识，您可能会兴奋地尝试向下滑动屏幕以发现更多的控件。从概念上讲，界面还在隐含地教您，向下滑动会显示系统功能的各个层次。随着您深入苹果生态系统，这种知识会逐渐积累。

我们可以进一步拓展交互设计的隐喻。为什么水平滑动可以在页面之间导航？因为这是我们数千年来直观地与书籍进行交互的方式。

伟大的交互体验是模仿现实世界属性的产物，比如中断性。这听起来很愚蠢，因为翻书显然是可以中断的。但想象一下，如果它是一个您必须等待的动画效果。

捏合是另一个我们已经直观地将其与缩放关联起来的手势。简单来说，缩放是一种精确的行为——调整可见细节的数量。

我们可以将捏合类比为需要精细运动技能的动作，比如捡起小物体或处理香料。自然而然，我们会用手指捏合以获得更高的精确度：

在触摸屏上，界面首先需要确定一个缩放起点，而双指捏合在选择起点时更容易更精确：

从技术上讲，当手指开始分开时，也需要计算缩放起点。但通常，这意味着缩小，并且起点的精确性不那么重要。刻意的精确性要求两个手指从紧密的位置开始，就像抓取一个物体一样。

无论是科学上还是直观上，有数以百计的设计决策是由那些对最微小差距苦苦钻研的人做出的，以便当它们起作用时，任何人都不需要思考。而其中许多决策都涉及到我们的本能行为。

动力学物理学

滑动解锁屏幕向上滑动的操作建立了一个事实，本质上它只是一个可以通过向上滑动取消的叠加层，而在这个框架下，应用程序也是如此。这意味着您现在也知道如何关闭一个应用程序。

让我们来看看关闭应用程序如何变成动态岛屿（iPhone 屏幕顶部的椭圆形切口）。请注意，手势保留了被投掷时的动力和角度。它从未完全居中或在时间上保持一致。

这种运动建立在我们对现实世界物理学的自然感知基础上，就像滑动一张扑克牌的感觉一样——尽管扑克牌的运动会展示出较少的弹跳，因为概念上它更轻，而且不会磁性地变形为其他东西。

滑动手势

何时触发滑动手势？这似乎微不足道：您按下，稍微移动一下，在释放手指后触发动作。在我使用 SwiftUI 构建了一些触摸交互后，我意识到情况可能并不总是如此。有时候，我们期望在滑动过程中触发动作。

轻量级的操作（例如显示叠加层）在滑动过程中的任意距离后触发会感觉更加自然。例如，通过单个手势，我可以立即理解叠加的界面表明它给我提供了一个搜索输入，并且如果不是我想要的内容，可以将其关闭。在这里等待手势结束会让人感觉不太顺畅。

这是我在制作的 MercuryOS SwiftUI 原型中的一个示例。当元素在手势过程中达到它们的逻辑最终位置时触发动作似乎是符合预期的。请注意，在标题与其位置对齐后，屏幕解锁，然后通过单个手势锁定，而无需释放手指。再次强调，如果在解锁之前等待手势结束，界面会感觉不完整，提供的指示也会减少。

现在，让我们看一些需要明确意图才能触发动作的示例。无论距离或应用程序部分脱离屏幕多少，iOS 应用程序切换器都不会在手势结束之前关闭应用程序：

我认为这是有道理的，因为关闭应用程序是一种破坏性的操作，在滑动过程中关闭应用程序并不令人愉快。如果我在一半的滑动过程中改变主意并意外达到了关闭阈值，我可能会在应用程序中丢失一些重要的进度。为了确保界面对意图做出响应，在手势结束时触发动作，而不考虑距离，对于这种情况来说是正确的。

这里还有另一个例子，即使滑动了足够的距离，使视图完全可见并吸附，但直到手势结束，视图也不会吸附。这使得在寻找应用程序时可以轻松地短暂查看另一个屏幕，而不需要完全切换，并且可以通过改变方向迅速中断手势。

响应式手势

真正流畅的手势需要立即响应。如上所述，手势可以有一个明确的触发阈值，但这并不意味着简单地执行一个从 0 到 1 的动画就会感觉很好。

例如，一个简单的实现方式是，当达到一定阈值时，指针放大的程度成指数级增加：

放大一个适当的程度以进行动画并不会感觉完全不对劲，但界面没有给出任何提示或信心表明可以使用较低速度进行捏合。而且这种方式并不令人满意。

如果在立即应用比例增量，然后在达到给定阈值后执行动画，会感觉好得多：

由于某种原因，导航 iOS 设置界面的响应性似乎不如应用程序切换器。一个图层从右侧滑入，这告诉我可以通过向左滑动关闭它。但是，如果您误触了，然后立即向右滑动并不会中断动画。您必须等待它结束。

空间一致性

动态岛屿在轻击时具有一个很好的交互，应用程序从岛屿下方滑出以覆盖屏幕：

但是，如果岛屿被展开，概念上表明我想要查看更多细节，应用程序不会从岛屿滑出。相反，它从图标启动（如果可见）。或者，应用程序从右侧滑入：

我只能假设通过从图标启动 Spotify，更清楚地知道音频正在从何处播放。假设您在同一行中有三个音乐应用程序。通过动作，这有助于建立音频播放器与其源之间的关系。

类似地，如果应用程序从右侧滑入，它传达了它在空间上的位置——在应用程序切换器中。通过从右侧而不是左侧移动，它还表示应用程序现在是切换器中应用程序堆栈中的第一个。

然而，本机的时钟应用程序从其图标打开时永远不会展开。即使展开了，它也总是从岛屿跳出：

这似乎支持上述理论。因为岛屿计时器模块只适用于一个应用程序，并且没有其他应用程序具有相同的岛屿，所以没有必要明确它是来自哪里。

流畅的变形

我们都熟悉 iOS 上美观流畅、可中断的手势，可以快速导航应用程序。向上滑动将全屏应用程序变形为其图标。

一个有趣的细节是，当图标在流畅地从垂直矩形变形为统一的正方形时，它的底部会故意被拉伸以填满框架。通过观察非标准的 GitHub 图标，更容易理解发生了什么：

这种技术假设应用程序图标遵循 Apple 提供的指导方针。Bluesky 图标不遵循推荐的安全区域，因此图标的底部约 10pt 被裁剪、重复并拉伸，导致出现奇怪的重复图像效果：

实际使用中，这并不感觉完全不对劲，但肯定不如前者好：

频率和新奇性

作为设计师，我喜欢给所有事物添加动画效果。对象的持久性、创建焦点和愉悦感都是进行动画的好理由。但是，并非总是明显哪些情况下不应该对某些事物进行动画处理。

有时候，我们可以忽略对鼠标或键盘交互进行动画处理，而不会感到突兀。外设设备的输入与屏幕上发生的事情之间存在内在的脱节。按下一个键的感觉不如触摸屏幕的感觉更加真实和机械。

一个很好的例子是命令菜单。往覆盖层上添加不透明度和缩放淡入淡出效果是很诱人的。但是，如果我们考虑交互频率是一天中数百次，经过数百次相同动画后，这会让人感觉更像是认知负担。

当这样频繁执行时，交互的新奇性也会减少。它不会让您感觉自己在做一些特别的事情，值得特别的华丽效果。

一个典型的例子是我正在开发的一个书签工具，直觉上我认为对活动指示器和列表中的元素进行动画处理会很好：

几天后，它们开始感觉有点迟钝。尽管我将动作做得更加灵敏，但我在与键盘进行交互时，感觉等待时间过长。我将核心交互的动画效果去掉后，突然感觉自己移动得更快了：

macOS 上的上下文（右键）菜单也不会带有动画。每天使用次数很多，新奇性很低，频率很高。尽管是鼠标交互，但不给菜单出现添加动画效果感觉更合适：

有趣的是，菜单会在结束时微弱地淡出。仔细观察，选择的项目会短暂闪烁主题颜色（粉色），以确保元素已成功选择。我只能假设，菜单的淡出效果使其看起来更加优雅和有意，而不是在闪烁后突然消失。

另一个很好的例子是 macOS 上的应用程序切换器，对于重度键盘用户来说非常有用。叠加层永远不会动画处理，这使得在应用程序之间移动感觉非常迅速：

此外，如果按下 Command 和 Tab 的时间间隔足够小，之前活动的窗口将立即获得焦点，而无需显示菜单：

指尖的刺激

精彩的交互不一定完全实用。我们在数学课上或在进行数字计算时，常常会咬唇或反复点击铅笔。这些行为被认为是焦躁不安的，换句话说，它们是一种重复的动作，有助于释放情境压力或提高专注力。虽然没有科学研究支持这种说法，但焦躁不安似乎是有意识的交互设计的一部分。

焦躁性也可能是事后的想法或愉快的副作用。然而，AirPods 的充电盒确实非常令人满意。假设这只是巧合可能还算是慷慨的解释。

Apple Pencil 是一个更明显的有意设计为令人愉快的候选者。铅笔尖是可拆卸的，这意味着它最终可以更换。很奇怪，旋转铅笔尖和旋转笔身会提供令人满意的摩擦感，可以在思考时随意玩耍。

这里有一个疯狂的例子，我不会打赌说这是有意为之的（尽管很酷）。

滚动地标

在 macOS 上，您可以通过摇动鼠标来始终找到指针。这种交互感觉很棒，因为它利用了当人们追踪指针时感到挫败和自然反应的情感。

在移动设备上浏览长文时，我遇到类似的情况。我已经向下滚动了一半，但在阅读时我想回顾上方的内容。但是，滚动回顶部会让我失去宝贵的滚动位置和阅读进度，这让我感到尴尬。

我制作了一个小小的原型，双击滚动条将为当前滚动位置设置一个地标。现在，我可以自由地在页面上导航，双击地标即可回到之前的位置。

这种使用起来很熟悉，因为触摸上已经有互动的滚动条。如果您不知道，长按滚动条会使其可拖动，这样可以更快速地滚动。

这让我想起了我制作的一个古老的小地图原型，受到了游戏的启发，您始终可以从鸟瞰视角看到周围的环境。为何不为导航页面设计一个类似的头顶显示屏呢？

触摸内容的可见性

在触摸界面上，有时手指可能会遮挡屏幕上的内容，使得难以以像素级的精度执行手势。通常，界面会渲染手指下方的临时表示。

例如，在 iOS 上按下并拖动以移动文本插入符号时，会在触摸点上方显示一个放大镜。然而，当手指向下移动不再遮挡插入符号时，放大镜会消失。

键盘也有类似的细节。按下一个按键时，会显示一个放大的按键，这使您确信界面理解了您的意图。

并不总是有意复制遮挡区域。例如，滑块可以很小，在拇指触摸下消失。这有助于确保在远离滑块并且仍然按下时，拖动手势不会被取消：

尽管寻找视频主要是一种视觉交互，但与无法看到的元素进行交互时会产生一种无法言喻的不适感。

下面是一个更明显的例子，关键是要了解菜单的内容：

隐式输入

长久以来，我们一直在缩短人类与计算机之间的距离。触摸输入通过引入手势和触觉将这种关系提升到了一个新的水平。不久的将来，应用程序将不再受限于固定屏幕的约束。

键盘、鼠标、触摸和语音都是明确的输入方式。当它们完美地融入我们自身时，它们感觉就像是我们肉体的延伸。但是，不需要任何输入方式才是真正的输入。当界面利用上下文作为输入，并能够推断您的意图而无需询问时，它才会让人感到神奇。

例如，通过查看屏幕，Apple Maps 将在未解锁时显示活动路线导航。Apple Wallet 在展示通行证进行扫描时会增加亮度。Spotify 将根据驾驶状态调整界面以提高可访问性。

一些自定义的 iOS 应用程序在打开应用程序切换器时会模糊应用程序的内容。起初，我以为这只是一种性能优化。但事实证明，这是一个刻意的尝试，旨在隐藏可能敏感的数据，如医疗记录或银行对账单。

菲茨定律

菲茨定律指出，点击某物所需的时间取决于距离和大小。目标越大，离指针越近，效果越好。

操作系统利用屏幕边缘的“魔术角” ，因为目标区域是无限大的。例如，在 macOS 上，您可以配置指针移动到角落时发生的操作。您可以从左上角显示 Launchpad：

目标区域是无限大的，因为指针不能超过角落，所以此交互所需的精确度非常低。到达任何一个角落只需要快速移动鼠标。这也是为什么操作系统将常用的菜单，如苹果菜单，放在角落的原因。

径向菜单是菲茨定律的典型案例。它们围绕指针出现，使得所有动作的大小和距离对于任何目标来说都是相同的。随着时间的推移，肌肉记忆会发挥作用，甚至可以仅基于距离和方向选择一个动作。

下面是一个您可以尝试的径向菜单：

滚动

在大多数操作系统上，您可以滚动任何可滚动的区域，即使窗口本身没有激活。这非常方便，但当另一个窗口意外滚动时就不太好了。

使用 Magic Mouse，我可以在一个窗口上滚动，然后将指针移动到第二个窗口上单击或查找某个内容，滚动事件将不会在第二个窗口上注册。对我来说，这感觉很棒。

然而，对于任何传统的鼠标，比如罗技 MX Master 3，第一个窗口上的滚动会被第二个窗口取消和接管。当这种情况每天发生时，感到非常沮丧。

使用 Magic Mouse，滚动通过明确地聚焦另一个窗口来被取消：

Magic Trackpad 和 Magic Mouse 等指向设备还为桌面计算机提供了直接操作。除了明显的交互方式（如在应用程序之间滑动），还可以通过滚动直接操纵滑块，只需进行一次交互即可：

超越直觉的设计

对我来说，理解和阐述为什么某些事情感觉正确并不像设计某些东西感觉正确那样直观。但它们是同一枚硬币的两面。一定有原因。它可以是特定的弹簧曲线，也可以是更本质的隐喻。分析和理解设计细节，而不仅仅是“感觉好”，有助于培养品味，提高执行水平，并对追求卓越的艰辛有更深的欣赏。