专栏名称: IXDC

IxDC由广州美术学院设计学院、香港理工大学设计学院、网易、腾讯、华为、中国电信、中国移动、金山等单位联合发起。是全国第一个受政府认可和领导的交互设计专业委员会，致力于引领中国交互设计行业发展。

交互设计的隐形细节：是什么让交互显得更自然？

IXDC · 公众号 · · 2024-09-26 08:30

正文

本文授权转自：We-Design（ID：WeDesignCenter）

Collection

原文引自 Rauno Freiberg的文章《Invisible Details of Interaction Design：What makes great interactions feel right》。该译文并非完整原文，内容已做删减和调整。

本文主要从相对「客观」和「科学」的角度去解析交互触发和动效设计中的细节，探究是哪些可量化元素导致了这些交互更加直观和优雅。

本期提纲：

• 隐喻

• 动能物理学

• 滑动手势

• 响应手势

• 空间一致性

• 流体变形

• 频率与新颖性

• 对当前定位的掌控

• 触摸内容可见性

• 无需输入的交互

• 结束语

很多人认为，设计似乎只凭感觉和直觉，与科学的方法论无关。很多从业者也难以将交互设计实践与「科学」联系起来，反而总是将设计视为一个神秘的黑匣子。在互联网上搜索有关交互设计的深度信息，会发现大量重复的内容，这些内容痴迷于讲述 persona、故事板和标有「UI」和「UX」的维恩图。

虽然我也承认「设计依靠直觉」这种看法并非绝对错误，但作为设计师，我一直在尝试解构和挖掘出色的交互设计背后的客观原因。本文不是教程或指南集，而是对我们经常遇到但很少考虑的一些交互不可见细节的观察。

隐喻

交互设计到底是什么？ 以下是我通过「科学」角度对它的看法：交互设计是一种艺术形式，旨在创造流畅响应用户意图的体验。在响应用户的维度上，滑动何时触发动作、手势是否会保持动量、手指轻触内容时产生的反馈、操作上下文带给用户了什么预期意图，在这些细节上执行得当，会让功能更感觉像是用户自身的自然延伸。

并且，交互设计并不像绘画或作曲那样是一种纯粹的艺术。人们最终是通过某种「交互」来完成任务，所以形式和构图的美感是不够的。 在形式和功能之间取得整体平衡才会带来内在的满足感 。

出色的交互设计通过重复使用隐喻来激励用户对交互操作的学习 。通常，用户只需两个手势即可使用大多数触摸界面：轻触和滑动。在 iOS 上，唯一被额外明确教育给用户的手势是向上滑动以打开：

当用户学会了滑动解锁，就可以应用到对界面其他部分的控制。滑动动作会告诉用户，界面是由堆叠的「层」组成的，就像一副牌。知道了这一点，用户可能会热衷于尝试在屏幕上向下滑动以发现更多控件。从概念上讲，界面进一步隐含地告诉用户，向下滑动可以揭示系统功能的层次。随着用户对苹果生态系统的深入了解，这种知识会不断积累。

我们可以 进一步 扩展 交互设计的隐喻 。例如，为什么水平滑动可以切换页面？因为几千年来，我们一直都是通过这种方式直观地与书籍交互的。

出色的交互是根据现实世界的特性建模的 ，例如滑动的可中断性。这听起来似乎自然而然，因为翻书显然是可中断的。但想象一下，如果滑动会随之而来的是一段用户必须等待的动画，体验必然会大打折扣。体验的愉悦就来源于这些 符合直觉 的设计。

捏合是另一种我们本能地与缩放联系起来的手势。简而言之，缩放是一种精确的动作，即调整可见细节的数量。

我们可以将捏手指想象成需要复杂运动技能的动作，例如拾起微小物体或处理香料。自然而然，我们会捏手指来提高精确度：

相应的，在触摸屏上，界面首先需要建立一个缩放起点的锚点，用手指捏在一起来选择锚点要容易得多，也更精确：

但显然，每次缩放都要从一个点开始是很不流畅的，而且在把页面放大的场景下，原点位置的精确度并不那么重要。所以，用户可以不需要一个真正的起点开始捏合，而是根据手势预期的终点自动计算。

不管是从科学还是直觉上讲，数以百计的设计决策都是由那些关心最基本细节的人做出的，这样当它们发挥作用时，就无需任何人思考。这其中的许多决策都利用了我们的本能行为。

动能物理学

在前文提到的上滑解锁手机屏幕中，我们知道这暗示着系统上的「覆盖层」可以被向上滑动移走，这当然也暗示着打开的 app 同样可以通过向上滑动被移走，也就是应用被暂时关闭。

让我们将目光聚焦到如何将 app 变成灵动岛。请注意上滑手势带来的动量和角度是怎么样在整个动画过程中保持的。起始的手势有差别时，后续的动画就会出现不同但非常合理的运动轨迹。

这种运动建立在我们对现实世界的自然物理感知的基础上，就像挥动扑克牌的感觉一样。扑克牌的运动表现出较少的弹跳，因为它在概念上更轻，并且不会因磁力或其他干扰而变形。

滑动手势

关于滑动，让我们思考一个简单的问题：「滑动」应该在过程中的「哪一个时刻」触发最终的结果？看起来答案似乎很简单：用户通过滑动让操作对象产生变化，结束滑动松手后发生结果。抱着这个预期我自己使用 SwiftUI 做了一些交互 demo，在实际设计过程中我发现这种逻辑可能并非最佳体验：某些情况下，在松手前就触发操作结果会更符合用户直觉。

具体来讲，某些场景下，当滑动达到一定距离后，无需用户通过「松手」表达这段滑动已经结束，就可以立刻触发某些轻量级操作结果。例如，在 iOS 系统向下滑动出现应用检索页面的蒙层时，用户在滑动一小段距离后，无需松手就会立即进入搜索页面。这种处理的好处是：如果用户看到页面后发现自己并不需要进入搜索输入，也可以很快地退出。如果等待手势结束后再出现结果，就感觉并没有现在这么流畅。

而在另一些情况下，用户则需要在明确的「结束」意图后才能触发操作。例如，iOS 应用切换器永远不会在手势结束前关闭应用，无论滑动距离多远，即使应用已经部分不在屏幕上：

这对用户来说很有意义，因为关闭应用程序具有破坏性，如果应用程序在滑动过程中关闭，感觉会很不好。如果用户中途改变主意并意外达到关闭的阈值怎么办？可能会导致用户丢失应用程序中的一些重要进度。为了确保界面响应用户意图的准确性，在手势结束时才触发都会让用户感觉更好。

来看另一个示例，在 app 翻页场景下，尽管滑动了足够的距离以使视图完全可见并可预期结果，但直到手势结束才会执行真正的翻页。这方便了用户在寻找应用程序时短暂地查看另一个屏幕（无需真正翻页），并可以通过改变手势方向快速中断翻页动作。

响应手势

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

例如，捏卡片的一个简单实现将在达到某个阈值后呈指数放大：

在这里，捏合达到一定距离后才开始执行动画并没有什么逻辑问题。但问题在于，触发过程中界面没有提供任何可见性反馈，执行过程中，用户无法直接确认自己的操作是否真正起到了作用。

如果可以在手势过程中立刻发生动作的响应反馈，然后超过给定阈值执行真正的下一步动画，愉悦感会带来提升：

空间一致性

动态岛具有良好的交互性，轻触灵动岛后应用程序就会从灵动岛下方滑出并覆盖屏幕：

但是，如果在灵动岛展开的状态下打开 app，从概念上，用户的意图在于接收更多细节，这时候 app 就不会从灵动岛下滑出。这种场景下，如果 app 的图标可见，app 会从图标启动，如果 app 图标不可见，app 则会从右侧滑入。

我只能假设，通过从图标启动 Spotify，到底打开了哪一个音频播放的信息会被传达更加清晰。假设用户在多个音乐应用，从灵动岛下出现并不能直接告知用户打开了哪一个音乐应用。而通过图标打开，就有助于建立用户打开的音频播放器与其来源之间的关系。

类似地，如果应用从右侧滑入，则会传达其在空间上的位置，通过从右侧（而不是左侧）移入，表示该应用现在位于切换器中应用堆栈的首位。

但是，原生的时钟应用永远不会从其图标中打开。它总是从灵动岛下跳出来，即使灵动岛展开状态也是如此：

可以提出一个假设：由于灵动计时器模块仅特定于一个应用程序，即系统的时钟，而非像音乐灵动岛可能服务于用户安装的多个音乐 app，就无需每次都从时钟 app 放大出现，让用户明确自己到底打开了哪个应用。

流体变形

我们都熟悉 iOS 流畅、可中断的导航手势来打开和关闭 app。在退出 app 时，向上滑动可将全屏应用变为其图标：

这里有一个有趣的细节，图标放大动画时，故意从底部拉伸以填充变形，同时流畅地将其形状从垂直矩形变形为均匀的正方形。当查看非标准 GitHub 图标时，发生的事情更加明显：

这里的处理建立在假设应用程序图标遵循 Apple 概述的图标绘制准则。Bluesky 图标忽略了建议的安全区域，因此图标底部约 10pt 被裁剪、复制和拉伸，从而产生了这种奇怪的重复图像效果：

实际上，这并非明显的错误，但感受上绝对不是那么好：

频率与新颖性

作为设计师，我喜欢为一切事物添加动画效果。不管是为了阐述页面元素流转的关系逻辑、为用户创造关注焦点，还是为埋藏设计师的小心思提供一些额外的愉悦感，多数情况下添加动效都是一种合情合理的设计手段。但什么时候应该「不添加动画效果」却是设计师应该关注的另外一个重要问题。

命令菜单就是一个很好的例子。在叠加层上添加不透明度和缩放淡入淡出效果很诱人。但如果我们暂时考虑到交互频率是每天数百次，那么在看到相同的动画一百次之后，它开始感觉更像是认知负担。

另外，如果动画过于平常，互动的新颖性也会降低。你不会觉得你在做什么特别的事情，也不值得特别炫耀。

我自己开发书签工具时候，直观地感觉活动指示器和从列表中添加和删除元素的动画效果很棒：

几天后，动画带来的愉悦感开始变得迟钝：完成键盘动作后总需要有一段等待动画执行时间，即使这很短，但也总归需要等待。我从核心交互中移除了动画，突然感觉响应速度快了很多：

macOS 上的上下文菜单（右键单击）也没有动画效果。作为每天使用数千次的动作，发生动画的新颖性很低，反而频率很高。于是，尽管是鼠标交互，但不为菜单显示添加动画效果感觉不错：

有趣的是，菜单会有巧妙的淡出效果。仔细观察后，所选项目会短暂地闪烁强调色（粉红色），以确保元素被成功选中。我只能假设菜单淡出比闪烁后突然消失更优雅、用户选中预期更明确：

另一个很好的例子是 macOS 上的 App Switcher，它为重度键盘用户带来了很多便利。Switcher 的出现和切换都并没有动画，这使得在应用程序之间移动感觉很流畅：

对当前定位的掌控

在 macOS 上，用户始终可以通过摇动鼠标来找到指针。这种交互感觉很棒，因为它利用了「摇晃鼠标」人们在找不到指针时感到的沮丧和自然反应。

当我在移动设备上浏览长篇内容时，类似的事情经常发生。我在阅读了文章的一半时想快速回忆一下上面的内容。但当我向上滚动回来时，我会丢失掉之前的滚动位置和阅读进度，这常常让我很沮丧。

我制作了一个原型，双击滚动条会为当前滚动位置放置一个蓝色标志。现在我可以自由浏览页面，双击蓝色标志即可返回到之前的位置。

这种交很容易学习和熟练使用，因为滚动条在触摸时本来就已经可以交互：长按滚动条会使其可拖动，这样滚动速度会快得多。

同时这也让我想起了我曾经制作的另一个原型。灵感来自于那些让玩家总是能鸟瞰周围环境的游戏。使用类似的平视视图来浏览页面，或许也是一种解决用户对自我定位的掌控感诉求的方式。

触摸内容可见性

在触摸界面上，有时用户可能会混淆屏幕上发生的事情，并且难以以像素级精度执行手势。这时候通常界面会临时聚焦展示手指下方内容，为用户带来指引。

例如，在 iOS 上，按下并拖动来移动文本插入符号时，触摸点上方会出现一个放大镜。但是，只要手指向下移动并且不再覆盖插入符号，放大镜就会消失。

iOS 的键盘也采用了类似的设计。按下某个键时，会显示一个放大的键，让用户确信界面理解了自己的意思。

当然，有一个明确映射的触点也并不总是有意义的。例如，iOS 的进度条并没有标明当下进度的小圆点滑块，因为滑块可能很小，在拇指触摸下则不再可见。反而取消圆点的展示有助于暗示用户的触摸点在离开滑块时，拖动手势并不会取消：

无需输入的交互

我们一直在探索人机交互之间的层层联系，键盘、鼠标、触摸、语音都是显性输入，触摸输入通过引入手势和触觉进一步提升了这种关系。但换个角度，输入最完美的情况可能是根本没有输入。当界面利用「上下文」作为输入并且可以推断出你想要做什么而无需询问时，确实会让用户感觉很神奇。

例如，通过抬起手机看屏幕，Apple Maps 将显示主动路线导航而无需解锁。Apple Wallet 在出示通行证进行扫描时会增加屏幕亮度。Spotify 会根据手机的运动状态调整界面，使其在驾驶时更易于操作。

交互设计的隐形细节：是什么让交互显得更自然？

正文

请到「今天看啥」查看全文