交互设计中的隐形细节
文章非常好，通过解构实际案例挖掘交互设计优秀作品背后的原因。
设计给人的感觉似乎没有任何科学依据——只有感觉和直觉。即使是研究人员也很难将交互设计实践扎根于科学，本质上将它们视为神秘的黑匣子。 1 虽然从我自己的经验来看，这部分是正确的，但我一直在尝试解构和挖掘交互设计出色展示背后的原因。在互联网上搜索交互设计的深度会产生大量的回收内容，这些内容痴迷于用户角色、故事板和标有“UI”和“UX”的维恩图。除了一些精彩的演讲之外，真正的实质内容和见解也向那些愿意狂热挖掘的人展示。要么通过研究晦涩难懂、冗长的研究论文，要么疯狂地重播数百个慢动作屏幕录像。坐下来仅仅思考并不能神奇地产生有价值的发现。"交互"这个词的本质暗示了人与环境之间的关系。在我的经验中，伟大的启示来自于创造——让问题充满你的头脑——然后进行一段综合性的漫游式思考，来激发思绪。这篇文章不是教程，也不是一系列准则的集合。相反，它是对一些经常使用但很少思考的交互细节的观察。除了重新创造界面，我发现这种反思的练习是培养更强的设计直觉和词汇的另一种绝佳方式。
1、隐喻
什么是交互设计？从科技的角度来看，我是这样理解的。交互设计是一种艺术形式，旨在创造出能够流畅地响应人类意图的体验。滑动何时会触发动作？手势是否能持续的动？如果手指点击内容会发生什么？我们如何用户的操作行为预测用户的意图？如果在这些细节上做好，能让用户感觉这个产品懂自己，像是另一个自己一般。交互设计和绘画或作曲不同之处在于：有一个独特的人为因素。因为最终人们使用产品是为了完成一些任务。形式和构成的美并不足够。在形式和功能之间取得整体平衡是一种内在的满足。出色的交互设计通过重复使用隐喻来进行学习。你可以只用两种手势来使用大多数触摸界面：点击和滑动。例如，在iOS上，你只需要学会一个手势，就是向上滑动以打开：
现在您已经学会了通过滑动来解锁对界面许多其他部分的控制。滑动动作还告诉您界面是由堆叠的层组成的，就像一副纸牌一样。知道了这一点，您可能会热衷于尝试在屏幕上向下滑动以发现更多控件。从概念上讲，该界面进一步隐式地告诉您向下滑动可以显示系统功能的各个层次。当您深入研究 Apple 生态系统时，这些知识就会更加丰富。
我们可以进一步延伸交互设计的隐喻。为什么水平滑动可以在页面之间导航？因为这就是数千年来我们与书籍直观互动的方式。
出色的交互是根据现实世界的属性（例如可中断性）建模的。这听起来有点傻，因为，呃，显然翻书的一页是可以被打断的。但想象一下，如果这是一部你必须等待的动画！
捏合是我们直观地与缩放联系在一起的另一种手势。简而言之，缩放是一种精确的行为——调整可见细节的数量。
我们可以认为捏类似于需要复杂运动技能的动作，例如捡起微小物体或处理香料。当然，我们会捏住手指以获得更高的精度：
在触摸屏上，界面需要首先从缩放起始处建立一个锚点，并且用捏在一起的手指来选取锚点要容易得多且更精确：
从技术上讲，当手指从分开开始时，也需要计算锚点。但通常这意味着缩小，并且原点的精确度并不那么重要。刻意的精确度需要两个手指从靠近开始，有点像抓住一个物体。
无论是从科学角度还是从直觉角度来看，有成百上千的设计决策都是由那些着迷于最微小利润的人做出的，这样当他们工作时，就没有人需要考虑。其中许多都利用了我们的本能行为。
2、动力学
锁定屏幕向上滑动表明，本质上，它只是一个可以通过向上滑动来关闭的覆盖层，并且在该框架内也是一个应用程序。这意味着您现在也知道如何驳回申请。让我们看看关闭应用程序如何演变成动态岛。请注意该手势如何保持其抛出时的动量和角度。它永远不会完全集中或在时间上保持一致。
这种运动建立在我们对现实世界的自然物理感觉的基础上，就像刷扑克牌的感觉一样。尽管纸牌的运动表现出较少的弹跳，因为它在概念上更轻并且不会磁性地变形为某种东西。
3、滑动手势
滑动何时触发动作？这看起来很简单：你按下，移动一点，然后松开手指后最终触发一个动作。在使用 SwiftUI 自己构建了一些触摸交互后，我意识到情况可能并非总是如此。有时我们希望在滑动时触发该操作。轻量级操作（例如显示覆盖层）在滑动任意距离后触发时感觉更自然。例如，通过一个手势，我可以立即理解覆盖的表面，了解它为我提供了搜索输入，然后如果它不是我想要的，则将其关闭。等待手势结束感觉就像是一种拖累。
这是我正在开发的 MercuryOS SwiftUI 原型中的一个示例。当手势期间移动的元素到达其逻辑的最终位置时，感觉预计会触发操作。请注意，在两个标题对齐到其位置后，屏幕如何解锁，然后在不松开手指的情况下通过一个手势锁定屏幕。同样，在解锁之前等待手势结束会让界面感觉破碎并且提供更少的功能。
现在，让我们看一下触发操作需要明确意图的示例。iOS 应用程序切换器永远不会在手势结束之前关闭应用程序。无论距离有多远，或者应用程序部分不在屏幕上：
这对我来说很有意义，因为关闭应用程序具有破坏性，如果应用程序在滑动过程中关闭，感觉会不太好。如果我中途改变主意，不小心达到了解雇的门槛怎么办？我可能会失去应用程序中的一些重要进展！为了确保界面响应意图，无论距离如何，都可以在手势结束时触发。这是另一个示例，尽管滑动了足够的距离以使视图完全可见并对齐，但直到手势结束为止。这使得在扫描应用程序时短暂地查看另一个屏幕而不需要执行它变得轻量级，并通过改变方向快速中断手势。
4、响应式手势
真正流畅的手势可以立即做出反应。如上所述，手势可以有明确的触发阈值，但这并不意味着简单地执行动画 0 → 1 就会感觉很好。例如，捏卡的简单实现会在达到某个阈值后呈指数放大：
捏足够的量来制作动画在这里不会感觉完全中断。但该界面提供了零可见性或信心，表明该卡甚至可以以较低的速度进行捏捏。执行起来也不令人满意。通过感觉比例增量立即应用，然后执行超过给定阈值的动画，感觉好多了：
由于某些原因，导航 iOS 设置感觉不如应用程序切换器响应灵敏。一个图层从右侧滑过，这告诉我可以通过向左滑动来将其关闭。但如果你碰巧按错了，那么立即向后滑动并不会中断动画——你必须等待它结束。
5、空间一致性
动态岛有一个很好的交互，点击应用程序就会从岛下方滑出以覆盖屏幕：
但是，如果岛被扩展，从概念上告诉界面我的意图是接收更多细节，则应用程序不会从岛中滑出。相反，它从图标（如果可见）启动。或者，应用程序从右侧滑入：
我只能假设，通过从图标启动 Spotify，可以更清楚地了解音频是从哪里播放的。假设您在同一行有三个音乐应用程序。通过运动，这有助于建立音频播放器与其源之间的关系。
同样，如果应用程序从右侧滑入，它会传达其空间位置 - 在应用程序切换器中。通过从右侧而不是左侧移入，还表示该应用程序现在位于切换器中应用程序堆栈中的第一个。
但是，本机时钟应用程序永远不会从其图标打开。它总是从岛上跳出来，即使是在扩展时：
这似乎支持了上述理论。由于 Island 计时器模块仅特定于一个应用程序，并且同一 Island 上不可能有另一个应用程序，因此无需明确它来自哪里。
6、流体变形
我们都熟悉 iOS 中流畅、可中断的手势来快速导航应用程序。向上滑动会将全屏应用程序变成其图标：
这里一个奇怪的细节是，图标被有意地从底部拉伸以填充框架，因为它的形状从垂直矩形流畅地变成了均匀的正方形。当查看非标准 GitHub 图标时，会发生的情况更加明显：
该技术确实假设应用程序图标遵守 Apple 概述的指南。Bluesky 图标忽略了建议的安全区域，因此图标底部约 10pt 被裁剪、复制和拉伸，导致出现这种奇怪的重复图像效果：
在实践中，这并没有让人感觉完全不对劲，但绝对没有那么好：
7、频率与新颖性
作为一名设计师，我喜欢将一切动画化。物体的持久性、创造焦点和愉悦感都是这样做的好理由。但何时不为某些东西设置动画并不那么明显。有时我们可以不设置鼠标或键盘交互动画，而不会感到不和谐。外围设备的输入与屏幕上发生的情况之间存在固有的脱节。与触摸屏幕相比，按键的感觉不那么强烈，而且更加机械。命令菜单就是一个很好的例子。在覆盖层上添加不透明度和缩放淡入淡出是很诱人的。但是，如果我们暂时考虑一下每天数百次的交互频率，那么在看到相同的动画第一百次后，它确实开始感觉更像是认知负担。当如此频繁地执行时，交互的新颖性也会减弱。感觉上你并没有做什么特别的事情，值得特别的赞美。
一个恰当的例子：我正在开发一个书签工具（bmrks.com），直觉上对活动指示器以及从列表中添加和删除的元素进行动画处理感觉很棒：
几天后，他们开始感到迟钝。尽管让动作变得更加敏捷，但我感知到的性能让我觉得在与键盘交互时我必须等待太多。我从核心交互中移除了运动，突然感觉自己移动得更快了：
macOS 上的上下文（右键单击）菜单也不会出现任何动作。每天使用数千次，新颖性很低，频率很高。尽管是鼠标交互，但不为出现的菜单设置动画感觉是正确的：
有趣的是，菜单巧妙地淡出。仔细检查后，所选项目的强调色（粉色）会短暂闪烁，以确保该元素已成功选择。我只能假设菜单淡出让这感觉比眨眼后突然消失更优雅和有意：
另一个很好的例子是 macOS 上的应用程序切换器，它为重度键盘用户带来了很多好处。覆盖层从不动画，这使得在应用程序之间移动感觉敏捷：
此外，如果按 Command 和 Tab 之间的时间增量足够短，则先前活动的窗口会立即获得焦点，而不显示菜单：
8、烦躁不安
精彩的互动不一定是完全实用的。我们都上过数学课，要么咬着嘴唇，要么在计算数字时重复点击铅笔。像这样的行为被认为是坐立不安。换句话说，重复的动作显然有助于释放情境压力，甚至增强注意力。尽管没有科学研究支持这一说法 4 ，但坐立不安确实感觉像是有意交互设计的一部分。
烦躁不安也可能是事后的想法，或者是令人愉快的副作用。然而，AirPods 充电盒的使用体验却出奇的令人满意。假设这是一个巧合，那就太慷慨了。
Apple Pencil 是一个更明显的候选者，故意设计得烦躁不安。铅笔的尖端是不可拧开的，这意味着它最终可以更换。奇怪的是，扭转笔尖并旋转笔身可以提供令人满意的摩擦力，可以在思考时随意玩耍。
这是一个疯狂的例子，我不会赌我的钱是故意的。虽然它是毒品。
9、滑动鼠标
在 macOS 上，您始终可以通过摇动鼠标找到指针。这种交互感觉很棒，因为它利用了人们在失去指针时所感受到的挫败感和自然反应。
当我在移动设备上浏览长篇内容时，类似的事情经常发生在我身上。我已经向下滚动了一半，在阅读时我想快速回忆一下上面的内容。但随后我会觉得向上滚动很尴尬，因为我会失去宝贵的滚动位置和阅读进度。我制作了一个小型原型，双击滚动条将为当前滚动位置放置一个地标。现在我可以自由地浏览页面并双击地标以返回到之前的位置。使用起来感觉很熟悉，因为滚动条已经可以通过触摸进行交互。如果您不知道，长按滚动条将使其可拖动，这样可以更快地快速滚动。
这让我想起了我制作的一个旧的小地图原型。受到游戏的启发，您始终可以鸟瞰周围环境。为什么不使用类似的平视显示器来导航页面呢？
10、触摸内容可见性
在触摸界面上，有时手指可能会混淆屏幕上发生的情况，这使得很难以像素级精度执行手势。通常，界面会呈现手指下方内容的临时表示。例如，在 iOS 上，当按下并拖动以移动文本插入符号时，触摸点上方会出现一个放大镜。然而，每当手指向下移动并且不再覆盖插入符号时，放大镜就会消失。
键盘也采用了类似的细节。按下某个键将显示放大的键，让您确信界面理解您的意思。
镜像混淆区域并不总是有意义。例如，滑块可以很小，并且在拇指触摸下就会消失。它有助于确保当远离滑块并仍然按下时拖动手势不会取消：
虽然寻找视频主要是一种视觉交互，但当与你看不到的元素交互时，会明显感觉到一种难以理解的不适感。这是一个更明显的例子，理解菜单的内容至关重要：
11、隐式输入
长期以来，我们一直在剥离人类与计算之间的界限。触摸输入通过引入手势和触觉来提升关系。很快应用程序将不再受到固定屏幕的限制。键盘、鼠标、触摸、语音都是显式输入。当达到完美时，它们感觉就像我们自己 2 的自然延伸。但所有输入之母难道根本就没有输入吗？当界面使用上下文作为输入并且无需询问即可推断出您要执行的操作时，这确实让人感觉很神奇。例如，通过查看屏幕，苹果地图将显示活动的路线导航，而无需解锁。Apple Wallet 在出示通行证进行扫描时会增加亮度。Spotify 将调整界面，使其在驾驶时更容易访问。
某些自定义 iOS 应用程序在打开应用程序切换器时会模糊应用程序的内容。起初，我认为这只是性能优化。但事实证明，这是故意隐藏可能敏感的数据，例如医疗记录或银行对账单。
12、菲茨定律
菲茨定律指出，点击某物的时间取决于距离和大小。 目标越大，距离指针所在的位置越近越好。由于目标区域无限大，操作系统会利用屏幕边缘的“魔角”。 例如，在 macOS 上，您可以配置当指针移动到角落时会发生什么。您可以从左上角显示启动板：
目标大小是无限的，因为指针不能越过拐角，因此这种交互所需的精度非常低。只需快速轻弹鼠标即可到达任何角落。这也是操作系统将常用菜单（如 Apple 菜单）放置在角落的原因。径向菜单是费茨定律的一个典型案例。它们围绕指针生成，使得所有操作的大小和到任何目标的距离都相同。随着时间的推移，肌肉记忆将会发挥作用，甚至可以纯粹根据距离和方向来选择动作。您可以尝试以下径向菜单：
13、滚动
在大多数操作系统上，即使窗口本身未处于活动状态，您也可以滚动任何可滚动区域。这很棒，除非另一个窗口无意中滚动。使用魔术鼠标，我可以在一个窗口上滚动，然后将指针移到第二个窗口上以单击或查找某些内容，并且滚动事件不会在第二个窗口上注册。这对我来说感觉很棒。
然而，对于任何传统鼠标，例如 Logitech MX Master 3，第一个窗口上的滚动会被第二个窗口取消并劫持。当这种情况每天发生时，真的很令人沮丧：
使用 Magic Mouse，通过聚焦另一个窗口来显示取消滚动：
魔术触控板和魔术鼠标等指点设备还可以解锁桌面计算的直接操作。除了在应用程序之间滑动等显而易见的操作之外，还可以通过滚动直接操作滑块，所有这些都只需一次交互即可：
总结
对我来说，理解和阐明为什么某些东西感觉正确并不像设计一些感觉正确的东西那样直观。但它们是同一枚硬币的两面。一定是有原因的。它可以像特定的弹簧曲线一样简单，也可以像隐喻这样更固有的东西。分析和理解设计细节，而不仅仅是“感觉不错”，有助于培养品味，提高执行水平，并增强对追求卓越的艰辛的认识。
E. Goodman, E. Stolterman, R. Wakkary. Understanding Interaction Design Practices (2011) E.古德曼，E.斯托尔特曼，R.瓦卡里。了解交互设计实践（2011）
C. Karunamuni, N. Vries, M. Alonso. Designing Fluid Interfaces (2018) C. 卡鲁纳穆尼、N. 弗里斯、M. 阿隆索。设计流体接口 (2018)
Brandur. Learning From Terminals to Design the Future of User Interfaces (2017) 布兰杜尔。从终端学习来设计用户界面的未来 (2017)
S. L. Kriescher. The Effects of Fidgets on Attention and Learning of College Students (2020) S.L.克里舍尔。坐立不安对大学生注意力和学习的影响（2020）
Paul Morris Fitts. The information capacity of the human motor system in controlling the amplitude of movement (1954) 保罗·莫里斯·菲茨。人体运动系统控制运动幅度的信息能力（1954）
Kevin Hale. Visualizing Fitts's Law (2010) 凯文·黑尔.菲茨定律可视化 (2010)
Apple Human Interface Guidelines (1987) Apple 人机界面指南 (1987)
Rasmus Andersson. The curious case of user interfaces (2023) 拉斯穆斯·安德森.用户界面的奇怪案例（2023）
Metamuse. Rethink the OS with Jason Yuan (2020) 梅塔缪斯。与 Jason Yuan 一起重新思考操作系统 (2020)
Jason Yuan. MercuryOS (2019) 贾森·袁. MercuryOS (2019)
Paul Graham. How to Do Great Work (2023) 保罗·格雷厄姆.如何做好工作 (2023)
