交互设计的隐性细节

见贤思齐

本文译者为 360 奇舞团前端开发工程师原文：Invisible Details of Interaction Design原文链接：https://rauno.me/craft/interaction-design译者：Dorothy设计给人的感觉似乎没有任何科学依据——只有感觉和直觉。即使是研究人员也很难将交互设计实践扎根于科学，本质上将它们视为神秘的黑匣子。虽然从我自己的经验来看，这在一定程度上是正确的，但我一直在尝试解构和挖掘优秀互动设计背后的原因。在互联网上搜索交互设计的内容时，可以找到大量重复的内容。这些内容痴迷于用户角色、故事板和标有“UI”和“UX”的维恩图表。除了少数出色的演讲之外，真正的实质内容和见解只向那些愿意狂热挖掘的人展示出来。无论是通过研究晦涩难懂的冗长研究论文，还是疯狂地重播数百个慢动作屏幕录像。坐下静思也不会像魔法般产生有价值的发现。"交互"这个词的本质暗示了人与环境之间的关系。根据我的经验，伟大的启示来自于创造——让问题充斥你的头脑空间——然后进行一次综合性的遐想漫步，以搅动思绪。这篇文章不是教程，也不是一系列指南。相反，它是对我经常使用但很少思考的几个交互细节的观察。除了重新创造界面，我发现这种反思的锻炼是构建更强大的设计直觉和词汇的另一种绝佳方式。隐喻交互设计是什么？以下是我从技术角度对这个问题的一些思考。交互设计是一种艺术形式，旨在创造能够流畅地响应人类意图的体验。在何时滑动会触发某个操作？手势是否保留动力？如果手指覆盖了内容会发生什么？如何根据上下文预测意图？在这些细节上做得出色，让人们感觉产品就像是我们自身的自然延伸。但它并不像绘画或音乐创作那样是一种艺术形式。交互设计有其独特的人文因素。为什么呢？因为归根结底，人们是在使用产品完成任务，仅有形式美和构图美是不够的。在形式和功能之间取得整体平衡，会带来一种内在的满足感。优秀的交互设计通过重复使用隐喻来奖励学习。大多数触摸界面只需要两个手势就可以使用：点击和轻扫。例如，在iOS系统中，唯一明确教你如何操作的手势就是向上滑动打开：现在，您已经学会了滑动可以控制界面的许多其他部分。滑动动作还告诉你，界面是由层层叠加组成的，就像一副扑克牌。了解了这一点，您可能会兴致勃勃地尝试向下滑动屏幕，以发现更多控制功能。从概念上讲，该界面进一步隐含地告诉您，向下滑动可以显示层层叠叠的系统功能。随着你对苹果生态系统的深入了解，这种认知会不断加深。我们可以将交互设计的隐喻延伸得更远。为什么水平滑动可以在页面之间导航？因为这是数千年来我们与书籍进行交互的直观方式。伟大的交互以现实世界中的属性为模型，例如可中断性。这听起来有点傻，因为翻书显然是可以中断的。但是想象一下，如果这是一个你必须等待的动画，你会怎么做呢？捏是另一个我们直观地将其与缩放联系在一起的手势。简而言之，缩放是一种精确的行为--调整可见细节的数量。我们可以认为捏手指的动作类似于需要复杂运动技能的动作，例如拿起微小的物体或使用香料。当然，我们捏手指的目的是为了获得更高的精确度：在触摸屏上，需要首先在界面上建立一个锚点，从这个锚点开始缩放，而手指捏在一起选择锚点要容易得多，也精确得多：从技术上讲，当手指开始分开时也需要计算锚点。但通常这意味着放大，原点的精确度并不那么重要。刻意精确需要两个手指从靠近的位置开始，就像抓取物体一样。无论是从科学角度还是从直觉角度，都有数以百计的设计决策是由某个人执着于最微小的边缘而做出的，这样当他们工作时，就没有人需要考虑了。其中很多都是我们的本能行为。动力学从本质上讲，锁屏向上滑动时，它只是一个可以通过向上滑动来解锁的叠加层。而在这个框架内，应用程序也是如此。这意味着你现在也知道了如何解锁应用程序。让我们来看看解锁应用程序是如何演变为 "动态岛 "的。请注意该手势是如何保持投掷时的动量和角度的，它在时间上永远不会完全居中或保持一致。这种运动建立在我们对现实世界的自然物理感知之上，就像刷扑克牌的感觉一样。尽管扑克牌的运动表现出较小的反弹力，因为它在概念上更轻，并且不会通过磁力变形。轻扫手势轻扫何时触发操作？这似乎是微不足道的：您按下，移动一点，然后在松开手指后触发一个动作。在使用SwiftUI构建了一些触摸交互之后，我意识到情况并非总是如此。有时，我们希望在轻扫的同时触发动作。轻量级的操作（例如显示覆盖图）感觉更自然的方式是在任意距离的轻扫过程中触发。例如，只需一个手势，我就能立即摸索出叠加表面，明白它为我提供了一个搜索输入，然后如果它不是我想要的，我就会将其取消。在这里，等待手势结束会让人感觉很拖沓。这是我正在开发的MercuryOS SwiftUI原型中的一个例子。当手势中移动的元素到达其逻辑上的最终位置时触发一个动作，这让人感觉很期待。请注意，在两个都卡到它们的位置后，屏幕是如何解锁的，然后又是如何在不松开手指的情况下用一个手势锁定的。同样，在解锁之前等待手势结束会让界面感觉不完整，并且提供的可负担性也较低。现在，让我们来看看需要明确意图才能触发操作的示例。在手势结束之前，iOS 应用切换器永远不会解锁应用。无论距离多远，也无论应用程序是否部分离开屏幕：我认为这是有道理的，因为解散应用具有破坏性，如果应用在轻扫过程中被解散，感觉并不好。如果我在中途改变主意，不小心触及到了解锁阈值怎么办？我可能会失去应用中的一些重要进展！为了确保界面响应用户的意图，在手势结束时触发，无论距离多远，感觉都是正确的。下面是另一个例子，尽管滑动的距离足以让视图完全可见并抓取，但直到手势结束才会抓取。这就使得在扫描应用程序时，在不投入使用的情况下短暂地偷看另一个屏幕，并通过改变方向快速中断手势变得轻便。响应式手势真正流畅的手势需要立即响应的。如上所述，手势可以有一个明确的触发阈值，但这并不意味着简单地执行一个0→1的动画就会感觉很好。例如，一个简单的卡片收缩实现会在一定阈值后呈指数级放大：在这种情况下，适度收缩来进行动画处理可能不会感觉很顺畅。但界面没有提供任何提示，即这个卡片可以以较低的速度进行收缩。这也无法带来令人满意的体验。而如果在感知到缩放差值时立即响应，并在达到给定阈值后执行动画，会感觉好得多：出于某种原因，浏览 iOS 设置时的感觉不如应用切换器反应灵敏。一个图层从右侧滑过，告诉我可以通过向左滑动将其取消。但是，如果您不小心滑动错了，那么立即向后滑动并不会中断动画，您必须等待动画结束。空间一致性动态岛屿具有一种很好的交互方式，即在轻触时，应用程序从岛屿下方滑出来覆盖屏幕：但如果岛屿被展开（从概念上来说这告诉界面我希望获取更多的细节），应用程序就不会从岛屿滑出。相反，它会从图标启动，如果它是可见的。或者，应用程序从右侧滑入：我只能认为，从图标启动Spotify可以更清楚地显示音频播放的位置。假设在同一行中有三个音乐应用程序。通过运动，这有助于建立音频播放器与其来源之间的关系。类似地，如果应用程序从右侧滑入，它传达了它在空间上的位置——在应用切换器中。通过从右侧而非左侧滑入，它还表示该应用程序现在是切换器中应用程序堆栈的第一个。但是，原生时钟应用程序永远不会从其图标中打开。它总是从 "岛 "中跳出，即使在展开时也是如此：这似乎支持上述理论。因为岛屿计时器模块只针对一个应用程序，并且不能有另一个具有相同相同岛屿的应用程序，因此没有必要明确它的来源。流畅的形态变化我们都很熟悉iOS系统中用于快速浏览应用程序的流畅、可中断的漂亮手势。向上滑动可将全屏应用程序变形为其图标：一个有趣的细节是，图标有意从底部拉伸以填充框架，同时流畅地将其形状从垂直矩形变形为统一的正方形。当观察非标准的GitHub图标时，这一点更加明显：此技术假设应用程序图标遵循Apple制定的指南。而Bluesky图标则忽略了推荐的安全区域，导致图标的底部约10pt被裁剪、重复和拉伸，从而产生了这种奇怪的重复图像效果：在实际应用中，这种效果并没有非常不自然，但绝对不是非常好的体验：频率与新奇性作为一名设计师，我喜欢将一切事物动画化。物体的持久性、创造焦点和愉悦感都是做动画的好理由。但是，并不是每个东西都适合添加动画效果。有时候，我们可以不给鼠标或键盘的交互添加动画，而不会感到生硬。外围设备的输入与屏幕上发生的事情之间存在固有的脱节。按键的感觉没有触摸屏幕那么直观和机械。一个很好的例子是命令菜单。我们很容易在叠加层上添加不透明度和缩放淡入淡出效果。但是，如果我们考虑一下每天的交互频率达到数百次，看到相同的动画第一百次后，就会开始感觉更像是一种认知负担。当交互如此频繁时，交互的新颖性也会降低。你不会觉得你在做什么特别的事情，值得一种特殊的华丽效果。一个典型的例子：我正在开发一个书签工具（bmrks.com），直观地感觉到活动指示器以及从列表中添加和删除元素的动画效果很棒：几天过后，它们开始感觉迟缓。尽管我使动画变得更加灵敏，但我感知到的性能让我感觉在使用键盘进行界面交互时需要等待太长时间。我将核心交互中的动画效果去掉后，突然感觉移动速度快了很多：macOS上的上下文（右键）菜单也没有动画效果。每天使用数千次，新奇性很低，频率很高。尽管是鼠标交互，但没有动画出现的菜单感觉是正确的：有趣的是，菜单会巧妙地淡出。仔细观察，被选中的项目会短暂闪烁强调色（粉红色），以确保该元素被成功选中。我只能认为，菜单淡出比闪烁后突然消失更优雅、更有意，而不是在闪烁之后突然消失：另一个很好的例子是macOS上的应用切换器，它对于经常使用键盘的用户非常有用。叠加层不会发生动画，使得在应用程序之间切换感觉迅捷：此外，如果按下Command和Tab键之间的时间差足够小，先前活动的窗口会立即获得焦点，而不会显示菜单：玩味性精彩的交互并不一定完全实用。我们都曾在数学课上，或者在做数字计算时，咬着嘴唇或者不停地敲打铅笔。这样的行为被称为玩味。换句话说，重复性动作显然有助于释放情境压力，甚至提高注意力。尽管没有科学研究支持这一说法，但不可否认，玩味似乎是有意的交互设计的一部分。玩味性也可能是事后的考虑，或者是一个愉快的副作用。然而，AirPods的外壳让人玩起来非常满意。如果认为这是巧合，那就大错特错了。Apple Pencil是一个更明显的有意设计成可玩味的候选产品。铅笔的笔尖是可拆卸的，这意味着它可以最终被替换。奇怪的是，扭转笔尖和旋转铅笔身体提供了令人满意的摩擦力，可以在思考时随意把玩。现在有一个非常疯狂的例子，我不敢打赌这是有意的。尽管如此，它确实很酷。滚动地标在 MacOS 上，您可以通过晃动鼠标来找到指针。这种交互感觉非常棒，因为它抓住了人们在失去指针时的挫败感和自然反应。在移动设备上，当浏览长篇内容时，我经常遇到类似的情况。我已经滚动到一半，而在阅读过程中，我想快速回顾上面的内容。但是，我觉得如果向上滚动，我会失去宝贵的滚动位置和阅读进度，感觉很尴尬。我做了一个小原型，双击滚动条将为当前滚动位置设置一个地标。现在，我可以在页面上自由浏览，双击地标就可以回到原来的位置。由于滚动条在触摸时已经具有交互性，因此使用起来感觉非常熟悉。如果您不知道的话，长按滚动条可以使其拖动，这样可以更快地快速滚动。这让我想起了我以前做的一个minimap原型。它的灵感来自于游戏，在游戏中你总是可以鸟瞰周围的环境。为什么不使用类似的抬头显示器来导航页面呢？触摸内容的可视性在触摸界面上，手指有时可能会遮挡屏幕上的内容，从而难以以像素级精度执行手势操作。通常情况下，界面会呈现手指下方内容的临时表示。例如，在iOS系统上当按下并移动文本光标时，触摸点上方会出现一个放大镜。但是，只要手指向下移动，不再覆盖刻度线，放大镜就会消失。键盘也使用了类似的细节。按下一个按键时会显示一个放大的键，让您确信界面理解了您的意图。镜像混淆区域并不总是有意义的。例如，滑块可能很小，在拇指触摸下就会消失。这有助于确保在远离滑块但仍按下时，拖动手势不会取消：虽然寻找视频主要是一种视觉交互，但当与无法看到的元素进行交互时，会出现一种难以理解的不适感。下面是一个更明显的例子，理解菜单内容至关重要：隐式输入长期以来，我们一直在剥开人类与计算机之间的层层关系。触摸输入通过引入手势和触觉提升了这种关系。很快，应用程序将不再受固定屏幕的限制。键盘、鼠标、触摸、语音都是明确的输入方式。当它们被完美调试时，感觉就像我们自己的自然延伸。但是，所有输入方式中最伟大的不就是没有输入吗？当一个界面利用上下文作为输入，并且无需询问就能推断出您想要做什么时，它真的会给人一种神奇的感觉。例如，通过观察屏幕，Apple Maps会在未解锁的情况下显示活动的路线导航。Apple Wallet在展示通行证进行扫描时会增加亮度。Spotify会在驾车时调整界面，使其更易于访问。一些自定义的iOS应用程序在打开应用切换器时会模糊应用的内容。起初，我以为这只是性能优化。但事实证明，这是故意隐藏可能的敏感数据，例如医疗记录或银行对账单。菲茨定律菲茨定律指出，点击某物的时间取决于距离和大小。目标越大，离指针越近，效果越好。操作系统利用屏幕边缘的"魔术角"，因为目标区域是无限大的。例如，在macOS上，您可以配置指针移动到角落时的操作。您可以在左上角显示启动台：目标大小是无限大的，因为指针无法越过角落，这种交互方式所需的精度非常低，只需轻点鼠标就可以触及任何角落。这也是操作系统将常用菜单（如苹果菜单）放在角落的原因。径向菜单是菲茨定律的典型案例。它们围绕指针生成，使得所有操作的大小和目标距离都相同。随着时间的推移，肌肉记忆会逐渐发挥作用，甚至可以纯粹根据距离和方向来选择一个操作。滚动在大多数操作系统中，您可以滚动任何可滚动区域，即使窗口本身没有处于活动状态。这非常好，除非另一个窗口意外滚动。使用魔术鼠标，我可以在一个窗口上滚动，然后将指针移动到第二个窗口上单击或查找内容，滚动事件不会在第二个窗口上注册。这让我感觉很棒。然而，对于任何传统的鼠标，比如罗技MX Master 3，第一个窗口上的滚动会被第二个窗口取消和接管。当这种情况每天都发生时，真的很令人沮丧：使用魔术鼠标，滚动可以通过将焦点转移到另一个窗口上来明确取消：像魔术触控板和魔术鼠标这样的指向设备也为桌面计算提供了直接操作功能。除了常见的应用程序切换之外，还可以通过滚动直接操作滑块，只需一次交互即可完成：结束语对我来说，理解和表达为什么某种感觉正确并不像设计某种感觉正确那样直观。但它们是同一枚硬币的两面。一定有原因存在。它可以是特定的弹簧曲线，也可以是更内在的东西，比如隐喻。分析和理解设计细节，超越简单的"感觉好"，有助于培养品味，提升执行水平，并对追求卓越的艰辛有更深的欣赏。致谢感谢Paco、Alasdair、Emil和Thomas阅读初稿，并提供见解和反馈。参考资料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 Lovin-END-关于奇舞团奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。