智将菌智将菌朝菌学园ZhaoDesign
0
写在前面
设计似乎没有科学可言，只有感觉和直觉。即使研究者们也难以将交互设计实践与科学联系起来，本质上将其视为一个“神秘的黑盒子”。虽然从我的个人经验来看，这在一定程度上是真实的，但我一直在尝试解构和挖掘出优秀交互设计背后的原因。
在互联网上搜索关于交互设计的深度解析，会得到大量重复的内容，这些内容过于关注用户角色、故事板和标有“UI”和“UX”的维恩图。除了一些例外的演讲之外，只有那些愿意疯狂搜索的人才能发现实质性的观点和洞察——要么通过研究晦涩冗长的研究论文，要么通过疯狂地重放成百上千次的慢放的屏幕录像。
仅仅坐下来进行思考，也不会神奇地产生有价值的发现。“交互” 这个词的本质，意味着人与环境之间的关系。在我的经验中，伟大的启示来自于创造某些东西——让问题充斥在你的脑海中——然后出去散步，进行全面综合的想象，从而激发设计灵感。
本文不是教程，也不是一系列指南，而是对我个人而言，对经常使用但很少深思的一些交互细节的观察。除了重现界面，我发现这种反思的练习是培养更强的设计直觉和设计词汇的一种绝佳方式。
01
隐喻
交互设计究竟是什么？从科技的视角来看，我这样理解：交互设计是一种艺术形式，旨在创造能够流畅地响应人类意图的体验。什么时候会触发滑动动作？手势是否保留动力？如果手指挡住了内容会发生什么？我们如何根据上下文预测意图？在这些细节上表现出色，使产品感觉像是我们自身的自然延伸。
但它与绘画或作曲的艺术形式不同。交互设计有着独特的人性因素。为什么？因为最终人们使用产品是为了完成一些任务。仅有形式和构成上的美并不足够。在形式与功能之间取得整体平衡时，会产生一种内在的满足感。
出色的交互设计通过重用隐喻来奖励学习。在大多数触摸界面上，只需使用两种手势：轻触和滑动。例如，在iOS上，你只需要学会一个明确的手势，就是向上滑动来打开：
现在你已经学会了滑动手势，这使你可以控制界面的许多其他部分。滑动的动作还告诉你，界面由堆叠的层级组成，就像一叠卡片。有了这样的认识，你可能会兴致勃勃地尝试在屏幕上向下滑动，以发现更多的控件。从概念上讲，界面进一步暗示你，向下滑动会显示系统功能的层级。随着你深入了解苹果生态系统，这种知识会不断积累。
我们可以进一步拓展交互设计的隐喻。为什么水平滑动在页面之间导航？因为这是我们几千年来直观地与书籍进行交互的方式。
优秀的交互是基于现实世界的属性建模的，比如可中断性（interruptability）。这听起来可能有点傻，因为当然，翻书是可以中断的。但是想象一下，如果这个过程是一个你必须等待的动画效果，那会是怎样的感觉！
捏合手势是另一种我们已经直观地与缩放相关联的手势。简单来说，缩放是一种精确的动作——调整可见的细节数量。
在日常生活中，我们常常使用放大镜来看清楚细小的物体或细节。在数字界面设计中，捏合手势就像是在屏幕上使用放大镜一样，通过捏合或张开手指来增加或减少内容的细节级别。这种直观的隐喻让用户能够自然而然地理解并掌握缩放功能，从而更加轻松地调整图像、地图、文本等内容的大小。
我们可以将捏合手势类比于需要复杂动作技巧的运动，比如拿起小物体或调味品的操作。自然而然地，我们使用捏合手指来获得更高的精确度：
在触摸屏幕上，界面首先需要确定一个锚点，从该点开始进行缩放操作，而使用捏合手势可以更轻松、更精确地选择锚点：
从技术上讲，当手指开始分开时，锚点也需要进行计算。但通常这意味着进行缩小操作，并且锚点的精确位置并不那么重要。而需要精确控制时，需要将两个手指从紧密贴合的位置开始，有点像抓取一个物体。
从科学或直觉上看，有数百个设计决策是由某人对最微小的差异进行反复琢磨而做出的，这样当它们起作用时，无人需要考虑。而且其中许多决策利用了我们的本能行为。
02
动态物理学
锁屏向上滑动的动作表明，实质上它只是一个可以通过向上滑动取消的覆盖层，而在这个框架中，一个应用程序也是如此。这意味着你现在也知道如何关闭一个应用程序。
让我们看一下 IOS系统如何将 “关闭应用程序” 的交互，转变成了动态岛屿（Dynamic Island）。请注意，交互操作过程中的手势保留了被抛出时的动力和角度。它从未完全居中，也没有固定的时间。
这种交互基于我们从现实世界中对物理的自然感知，就像我们在现实生活中轻轻划动一张纸牌一样。但纸牌的运动会展示出较少的弹跳效果，不会像动态岛屿一样通过磁性变形。
03
滑动手势
何时滑动会触发一个动作？这似乎很琐碎：你按下，稍微移动一下，然后在释放手指后触发一个动作。然而，在使用 SwiftUI 构建几个触摸交互后，我意识到情况可能并非总是如此。有时候我们期望在滑动过程中就触发交互动作。
对于轻量级的动作，比如显示悬浮层，我们更自然地期望在滑动过程中的任意距离后触发。例如，通过单个手势，我可以立即浏览覆盖在页面上的悬浮层，理解它提供了一个搜索输入框，并在不需要时将其关闭。在此等待手势结束会让操作感觉有点拖沓。
这是我在开发的 MercuryOS SwiftUI 原型中的一个例子。在这个例子中，当元素在交互的过程中达到它们运动逻辑最终位置时，触发动作会让人感到自然。请注意，在两个标题都吸附到它们的位置后，屏幕会解锁，然后通过单个手势将其重新锁定，而不需要松开手指。再次强调，在解锁之前等待手势结束会让界面感觉有问题，并且提供的暗示效果更差。
现在，让我们来看一些需要明确意图才能触发动作的例子。iOS应用切换器在手势结束之前永远不会关闭一个应用程序。无论距离有多远，或者应用程序是否部分超出屏幕：
这对我来说是有道理的，因为关闭一个应用程序是一种破坏性操作，如果应用程序在滑动过程中就关闭了，那会让人感觉很不好。如果我在一半的过程中改变主意，并意外地达到了关闭阈值，那我可能会丢失一些重要的进度！为了确保界面能够正确地响应用户意图，不管滑动的距离有多远，只在手势结束时触发关闭动作在这里是合适的。
这里还有另一个例子，在这个例子中，尽管滑动了足够的距离使得视图完全可见并吸附到位置，但它直到手势结束才会显示完全。这使得在寻找应用程序时，可以轻松地瞥一眼其他屏幕，而无需完全打开它，并且通过改变滑动方向快速中断手势。
04
响应性手势
真正流畅的手势是立即响应的。如上所述，手势可能有一个明确的触发阈值，但这并不意味着简单地执行动画 0 → 1 就会让人感觉很棒。
例如，一个卡片在捏合动作幅度达到一定阈值后，会呈指数级放大：
捏合一定的距离来进行动画，可能不会让人感到完全失效，但界面没有任何暗示让用户有信心表明卡片可以在较低速度下进行捏合。这种操作也不会给人带来满意的体验。
如果立即感受到缩放效果的变化，并在达到一定阈值后执行动画，会让用户感到更好：
对于某些原因，导航iOS设置界面的操作不像应用切换器那样感觉流畅。在设置界面中，一个层从右侧滑动过来，告诉我它可以通过向左滑动来关闭。但如果你偶然误触了，立即向后滑动并不能中断动画。你必须等待它结束才能重新操作。
05
空间一致性
动态岛屿有一个很好的交互方式，当点击时，应用程序从岛屿下面滑出，覆盖整个屏幕：
但如果动态岛屿被展开，这在概念上，向界面告诉我的意图是获得更多细节，应用程序就不会从岛屿下面滑出。相反，如果它是可见的，它会从图标上启动。或者，应程序会从右侧入：
我可以推测，通过从图标上启动 Spotify，可以更清楚地知道音频正在哪里播放。假设在同一行上有三个音乐应用程序。通过动画效果，这有助于建立音频播放器与其来源之间的关系。
同样地，如果应用程序从右侧滑入，它会传达它的空间位置——在应用切换器中。通过从右侧而不是左侧滑入（这个交互过程），还表明该应用程序现在是切换器中应用程序列表中的第一个。
然而，原生的时钟应用程序永远不会从其图标上打开。即使展开了动态岛屿，它仍然会从岛屿中跳出：
这似乎支持了前面的理论。因为动态岛屿中的定时器模块只适用于一个特定的应用程序，而且不会有另一个相同的岛屿，所以没有必要明确它来自哪里。
06
流动变形
我们都熟悉iOS中优美流畅的、可中断的手势，用于快速导航应用程序。向上滑动会将全屏应用程序转变为其图标：
这里有一个有趣的细节，即在图标从垂直矩形流畅地变形为均匀正方形时，它会有意地从底部拉伸以填满整个框架。当查看非标准的 GitHub 图标时，这一变化可能会更加明显：
这种技术确实假设应用程序图标遵循Apple提供的指南。如果图标忽略了推荐的安全区域，那么图标的底部约10pt的部分就会被裁剪、复制和拉伸，从而导致奇怪的重复图像效果：
实际上，这可能并不会完全让人感到不适，但肯定没有那么好的效果：
07
频率与新颖性
作为设计师，我喜欢给一切东西都添加动画效果。物体的永久存在特性（用户对界面元素的持久性认知）、营造焦点以及带来愉悦感都是这样做的好理由。但有时候，什么时候不给某些设计元素添加动画效果并不那么明显。
有时候，我们可以在鼠标或键盘交互时不使用动画，而不会让人感到突兀。外设设备的输入与屏幕上的反馈之间存在固有的割裂。按下按键的感觉没有触摸屏幕那样直观，更像是机械的行为。
一个很好的例子是命令菜单（command menus）。在覆盖层上添加不透明度和缩放淡入淡出效果很有吸引力。但是，如果我们考虑到这个交互动作每天可能会发生数百次，看到同样的动画已经是第一百次了，那么它就开始让人感觉像是认知负担了。
当交互动作频繁发生时，新奇性也会减弱。它不会让人感觉自己做了什么特别的、值得特别的华丽效果。
注：覆盖层（overlay）是指在页面或应用程序上覆盖一层内容或界面元素的技术或方法。它可以用于显示弹出窗口、菜单、对话框等，以提供额外的功能或信息。
这是一个很常见的情况。在刚开始添加动画效果时，可能会觉得界面更加生动和有趣。但随着时间的推移，这些动画可能会让用户感觉界面反应变慢，尤其是在与键盘进行交互时，这种感觉会更强烈。尽管可能会尝试让动画更加快速，但仍然会有一种不必要的等待感。
确实，在macOS上的上下文（右键）菜单也不会出现动画效果。它们每天被使用数千次，具有非常低的新奇性和高频率。尽管它们是鼠标交互，但不给菜单出现添加动画效果感觉是正确的：
有趣的是，这个菜单会有一个微妙的淡出效果。仔细观察，选定的项目会短暂地闪烁强调颜色（粉红色），以确认该元素已成功选择。我可以推测，菜单淡出的效果让这个交互感觉更加优雅和有意识，而不是在闪烁后突然消失：
另一个很好的例子是 macOS 上的应用切换器，对于键盘重度使用者来说非常实用。覆盖层从不使用动画效果，这使得在应用程序之间切换感觉非常迅速：
此外，如果按下 Command 和 Tab 键的时间间隔足够短，那么之前处于活动状态的窗口会立即获得焦点，而不会显示切换器菜单：
08
动作可玩性
精彩的交互并不一定要完全实用。我们都曾在数学课上，咬着嘴唇或者不停地点击铅笔，一边做数学题。这样的行为被称为玩弄。换句话说，这是一种重复性的动作，显然有助于释放情绪压力，甚至可以提高注意力集中力。虽然没有科学研究支持这一说法，但玩弄行为无疑感觉像是有意的交互设计的一部分。
这类趣味性的动作有时可能是事后想到的，然而，AirPods的充电盒的设计令人获得“满足感”的趣味，就不能单纯认为是巧合了。
注：这里指AirPods的充电盒因其设计和材质的特殊性，让人有一种想要玩弄和摆弄的冲动，这种体验可能不是偶然产生的，而是经过精心设计和考虑的。
苹果铅笔是一个更明显的例子，它被有意地增添了可玩性设计元素。铅笔的尖端是可以拧下的，这意味着它可以最终更换。有趣的是，转动铅笔的尖端和旋转铅笔的身体会提供令人满意的摩擦感，使人在思考时可以随意地玩弄。
09
滚动地标
在macOS上，你可以通过摇动鼠标来找到鼠标指针。这种交互感觉非常棒，因为它利用了人们在追踪鼠标指针时感到积极或沮丧的自然反应。
注：这里指的是macOS上的一个功能，当用户无法找到鼠标指针时，可以通过摇动鼠标来让鼠标指针变大，从而更容易找到。这种交互利用了人们在丢失鼠标指针时感到的困扰和自然反应，使得用户可以快速找到鼠标指针，提高了操作的便捷性和用户体验。
这在移动设备上浏览长篇内容时经常发生。我向下滚动了一半，然后在阅读过程中，我想快速回顾上面的内容。但是，我感到很尴尬，因为我会失去我的滚动位置和阅读进度。
我制作了一个小型原型，其中双击滚动条会在当前滚动位置放置一个地标。现在，我可以自由地在页面上导航，并双击地标回到之前的位置。
这种用法感觉很熟悉，因为在触摸设备上滚动条已经是交互式的。如果你不知道，长按滚动条会使其可拖动，这样可以更快地滚动页面。
这让我想起了我曾经制作的一个旧版小地图原型。受到游戏中始终有鸟瞰周围环境的启发，为什么不为浏览页面设计一个类似的悬浮显示界面呢？
10
触摸内容的可见性
在触摸界面上，有时手指可能会遮挡屏幕上正在发生的内容，这使得难以以像素级精度执行手势操作。通常，界面会渲染手指下方的临时表示。
例如，在iOS上，当按下并拖动以移动文本插入符时，会在触摸点上方显示一个放大镜，当手指向下移动，不再遮挡插入符时，放大镜会消失。
类似的细节也用于键盘。按下一个键会显示一个放大的键，让你相信界面已经理解了你的意思。
但并不总是有必要显示遮挡的区域。例如，滑块可以很小，在拇指的触摸下可能会消失。这时，确保在移开拇指但仍在按下状态时，拖动手势的交互不会被取消，就达到设计目的了：
在动图中展示的主要是一种视觉交互，但当与一个无法看见的元素进行交互时，往往会产生一种令人费解的不适感。
这里有一个更明显的例子，在这里理解菜单的内容非常重要：
11
隐式输入
多年来，我们一直在不断缩小人类与计算之间有效沟通的差距。以触摸进行输入的方式，通过引入手势和触觉交互提升了我们与机器沟通的效率。不久的将来，应用程序将不再受限于固定屏幕的约束。
键盘、鼠标、触摸、语音都是显式输入方式。理想状态下，它们就像是我们自身的自然延伸。但是，难道输入的鼻祖不就是“根本没有输入”吗？当一个界面使用已有的上下文作为输入，并且可以推断出你在不询问的情况下要做什么，它真的让人感到神奇。
例如，通过查看屏幕，苹果地图会显示活动的路线导航而无需解锁。Apple Wallet 在展示通行证进行扫描时会增加亮度。Spotify 在驾车时会调整界面以提高可访问性。
注：这里描述了隐式输入的概念。隐式输入是指用户无需明确提供输入，界面可以根据上下文信息推断用户的意图和操作。
一些自定义的iOS应用，在打开应用切换器时会模糊应用的内容。起初，我以为这只是一种性能优化。但事实证明，这是一种有意为之的尝试，用于隐藏可能包含敏感数据的内容，比如医疗记录或银行对账单。
12
费茨定律
Fitts's Law（费茨定律）指出，点击某个目标所需的时间取决于距离和大小。目标越大，离指针所在位置越近，点击速度越快。
操作系统利用屏幕边缘的"魔术角"，因为目标区域是无限大的。例如，在macOS上，你可以配置指针移动到角落时要执行的操作。你可以从左上角显示启动台：
目标的大小是无限的，因为指针无法超过角落，所以这种交互所需的精度非常低。向任何角落伸手都变成了鼠标的快速挥动。这也是操作系统将常用菜单（如苹果菜单）放置在角落的原因。
径向菜单是费茨定律的一个典型例子。它们围绕指针生成，使得所有操作的目标大小和距离都保持一致。随着时间的推移，用户的肌肉记忆将产生作用，甚至使得纯粹根据距离和方向就能选择动作成为可能。
13
滚动
在大多数操作系统中，你可以在任何区域滚动，即使窗口本身没有处于活动状态，这是很方便的。但当另一个窗口不经意间滚动时，就会产生问题。
使用 Magic Mouse，我可以在一个窗口上滚动，然后将指针移到第二个窗口上点击或查找内容，第二个窗口不会接收到滚动事件。对我来说，这感觉非常不错。
!Image
然而，对于任何传统鼠标，例如 Logitech MX Master 3，当你在第一个窗口上滚动时，滚动事件会被第二个窗口取消。当这种情况每天发生时，真的让人感到非常沮丧。
像 Magic Trackpad 和 Magic Mouse 这样的指针设备也为桌面计算解锁了直接操纵的功能。除了明显的功能，比如在应用之间进行滑动，还可以通过滚动来直接操纵滑块，所有这些都可以通过单一的交互实现：
对我来说，理解并清晰表达为什么某种设计感觉正确，并不像设计让其感觉正确那样直观。它可能是特定的弹簧曲线，也可能是更内在的东西，比如隐喻。分析和理解设计细节超越简单的 "感觉不错" 有助于培养品味，提升执行水平，并增加个人对追求卓越的信念。
引用资料：
- E. Goodman, E. Stolterman, R. Wakkary. Understanding Interaction Design Practices (2011)
- C. Karunamuni, N. Vries, M. Alonso. Designing Fluid Interfaces (2018)
- Brandur. Learning From Terminals to Design the Future of User Interfaces (2017)
- S. L. Kriescher. The Effects of Fidgets on Attention and Learning of College Students (2020)
- Paul Morris Fitts. The information capacity of the human motor system in controlling the amplitude of movement (1954)
- Kevin Hale. Visualizing Fitts's Law (2010)
- Apple Human Interface Guidelines (1987)
- Rasmus Andersson. The curious case of user interfaces (2023)
- Metamuse. Rethink the OS with Jason Yuan (2020)
- Jason Yuan. MercuryOS (2019)
- Paul Graham. How to Do Great Work (2023)
- App Dissection. Brian Lovi
参考文章：
作者：
rauno
译者：糖醋排菇
为尊重版权和译者
转载请联系我们
ABOU US