Status
Tags
URL
分享者
简介
之前曾经介绍过 Rauno 的毕业设计 MercuryOS，而之前引发新一轮浏览器风潮的 Arc 背后，他也贡献了不少令人惊艳的交互设计。 这篇文章如他所言，不是指南，也不是教程，而是一个观察集锦。其中有许多功能都是我们每天在用，但是却从未思考过这些「自然」的细节背后意味着什么，为何会让人没有觉察。 只有分析并理解足够的细节，我们才能学习并设计出更好的实践。 原文较长且含有大量视频动画，在这里先展示第一部分，有兴趣的朋友可以点击文末链接查看全部内容。
设计看起来没有科学可言，只有感觉和直觉。即使是研究员也很难将其科学化，而是将其视为神秘的黑盒子。
网上关于交互的内容，会有大量纠结于用户角色、故事版和各种思维导图。但除了一些特殊的讲座，真正实质内容和洞察力，只有那些愿意狂热挖掘的人才能发现。要么是通过晦涩的论文，要么是通过重放数百个慢动作的屏幕录像。
坐下来冥思苦想不会产生神奇的价值。互动一词的本质是人与环境之间的关系，所以根据经验，伟大的启示源自于制造一些东西，然后让头脑充满问题，然后做一个白日梦，它们可能就会冒出来。
这篇文章不是教程，也不是指南，只是一个观察集锦。
隐喻
什么是交互？从技术角度来看，交互设计是一种艺术形式，能使产品流畅地响应人类意图。比如什么时候轻扫能出发动作？手势不松开会怎样？手指覆盖内容会如何？如何根据上下文猜测意图？做好这些细节，才能让产品感觉是自身的自然延伸。
但交互并不像是音乐或绘画，因为交互本身需要帮助人们完成任务。仅有形式美和构图是不够的，在形式和功能之间取得平衡，才能带来内部满足。
优秀的交互通过隐喻来奖励。大多数触控界面只有两种手势就可使用，点击和轻扫。例如，在 iOS 上，唯一明确教你如何操作的手势就是向上轻扫打开。
现在你已经学会了滑动，从而可以控制界面的许多其他部分。滑动动作还告诉你，界面是由层层叠加组成的，就像一副扑克牌。了解了这一点，你可能会尝试向下滑动屏幕，以发现更多的控制功能。从概念上讲，界面进一步暗示你，向下滑动会显示系统功能的层级。随着你对苹果生态系统的深入了解，这种认知会不断加深。
我们可以将交互设计的隐喻延伸得更远。为什么水平滑动可以在页面之间导航？因为这是几千年来我们与书籍进行交互的直观方式。
伟大的交互是以现实世界的属性为模型的，比如可中断性。这听起来有点傻，因为翻书显然是可以中断的。但想象一下，如果这是一个你必须等待的动画，你会怎么做呢？
「捏」是我们直觉上与缩放联系在一起的另一种手势。简而言之，缩放是一种精确的行为 —— 调整可见细节的数量。
我们可以认为，捏手指类似于需要复杂运动技能的动作，比如拿起细小的物品或处理香料。当然，我们捏手指的目的是为了获得更高的精确度。
在触摸屏上，界面需要首先建立一个锚点，从这个锚点开始缩放，而用手指捏住锚点会更容易、更精确：
从技术上讲，当手指开始分开时，也需要计算锚点。但这通常意味着放大，原点的精确度并不那么重要。刻意精确需要两个手指从靠近的地方开始，有点像抓取物体。
无论从科学角度还是直觉角度来看，都有数以百计的设计决策是由某个人执着于最细微的边边角角而做出的，这样当它们发挥作用时，就没有人需要去思考了。其中很多都是利用了我们的本能行为。
Kinetic Physics 运动物理学
从本质上讲，锁屏向上滑动时，它只是一个可以通过向上滑动来解锁的叠加层，而在这个框架内的应用程序也是如此。这意味着你现在也知道如何解锁应用程序了。
让我们来看看关闭应用程序是如何演变成「灵动岛」的。请注意该手势是如何保持投掷时的势头和角度的。它在时间上永远不会完全居中或保持一致。
这种运动建立在我们对现实世界的自然物理感知之上，就像刷扑克牌的感觉一样。尽管扑克牌的运动会表现出较小的反弹力，但它在概念上更轻。
Swipe Gestures 轻扫手势
轻扫何时触发操作？这似乎微不足道：按下去，移动一下，最后在松开手指后触发一个动作。在使用 SwiftUI 构建了一些触摸交互后，我意识到情况并非总是如此。有时，我们希望在轻扫的同时触发操作。
轻量级操作，例如显示叠加界面，在任意距离后的轻扫过程中触发会感觉更自然。举例来说，只需一个手势，我就能立即理解叠加表面，明白它为我提供了一个搜索输入，然后如果它不是我想要的，我就会将其取消。在这里，等待手势结束会让人感觉很拖沓。
下面是我正在开发的 MercuryOS SwiftUI 原型中的一个示例。当手势过程中移动的元素到达其合理的最终位置时，就会触发一个动作。请注意，屏幕是如何在两个标题都到达各自位置后解锁的，然后又是如何在不松开手指的情况下通过单个手势锁定的。同样，如果在解锁之前等待手势结束，会让人感觉界面不完整，而且提供的功能也会减少。
现在，让我们来看看需要明确意图才能触发操作的示例。在手势结束之前，iOS 应用程序切换器永远不会解散应用程序。无论距离多远，也无论应用程序是否部分离开屏幕：
这对我来说是有道理的，因为关闭应用程序具有破坏性，如果在轻扫过程中关闭应用程序，感觉就不好了。如果我中途改变了主意，不小心触碰到了解锁阈值怎么办？我可能会失去应用中的一些重要进展！为了确保界面响应用户的意图，在手势结束时触发，无论距离多远，感觉都是正确的。
这里还有一个例子，尽管轻扫的距离足以让视图完全可见并抓取，但直到手势结束时才会抓取。这就使得在扫描应用程序时，可以轻量级地短暂偷看另一个屏幕，而无需投入其中，并通过改变方向快速中断手势。
Responsive Gestures 响应式手势
真正流畅的手势会立即做出反应。如上所述，手势可以有一个明确的触发阈值，但这并不意味着简单地执行一个 0 → 1 的动画就会感觉很好。
例如，捏卡片的原始实现会在达到一定阈值后以指数方式放大：
在这里，捏出足够的力度来制作动画并不会让人感觉完全不适。但界面没有提供任何响应能力，也没有让人相信可以用较低的速度搓开卡片，这样的操作也不会让人感到满意。
如果能立即感受到缩放的应用，然后在超过给定阈值时执行动画，感觉会好很多：
出于某种原因，浏览 iOS 「设置」时感觉不如「应用程序切换」反应灵敏。一个图层从右侧滑过，告诉我可以通过向左滑动来取消它。但如果你不小心滑动错了，那么立即向后滑动也不会中断动画。你必须等待动画结束。
Spatial Consistency 空间一致性
「灵动岛」有一种很好的交互方式，只要轻点一下，应用程序就会从「灵动岛」下方滑出，覆盖屏幕：
但是，如果「岛」被展开，也就是在概念上告诉界面我的意图是接收更多细节，那么应用程序就不会从「岛」上滑出。相反，如果图标可见，它会从图标启动。或者，应用程序从右侧滑入：
我只能认为，通过图标启动 Spotify，音频的播放位置会更加清晰。假设在同一行中有三个音乐应用程序。通过运动，这有助于建立音频播放器与正在播放声音之间的关系。
同样，如果应用程序从右侧滑入，则表示它在空间上的位置 —— 在应用程序切换器中。通过从右侧而非左侧滑入，还表明该应用现在是切换器中应用列表的第一位。
但是，本机时钟应用程序永远无法从其图标中打开。它总是从「岛」中跳出，即使已展开也是如此：
这似乎支持了上述理论。因为「灵动岛」定时器模块只针对一个应用程序，不可能有另一个应用程序使用相同的「灵动岛」，所以没有必要明确说明它来自哪里。
Fluid Morphing 流体变形
我们都熟悉 iOS 精美流畅、可中断的手势，用于快速浏览应用程序。向上轻扫可将全屏应用程序变形为其图标：
一个奇怪的细节是，当图标的形状从垂直矩形轻而易举地变形为统一的正方形时，它被有意从底部拉伸以填满框架。看一下非标准的 GitHub 图标，就会明白发生了什么：
这种技术的前提是应用程序图标遵守苹果公司的指导原则。Bluesky 图标忽略了推荐的安全区域，因此图标底部约 10pt 的部分被裁剪、复制和拉伸，产生了这种奇怪的重复图像效果：
在实践中，这种感觉并没有完全消失：
Fidgetability 灵活性
奇妙的互动不一定完全实用。我们都上过数学课，不是咬嘴唇就是在计算数字时重复点击铅笔。这样的行为被认为是坐立不安。换句话说，重复动作显然有助于释放情境压力，甚至提高注意力。虽然没有任何科学研究支持这种说法，但坐立不安确实让人感觉是有意交互设计的一部分。
可摆弄性也可能是一种事后的想法，或者是一种令人高兴的副作用。不过，AirPods 的外壳玩起来非常令人满意。如果认为这是巧合，那就太不厚道了。
Apple Pencil 是有意设计成可摆弄的更明显的候选产品。铅笔的笔尖是可以拧开的，这意味着它最终是可以更换的。奇怪的是，扭动笔尖和旋转笔身能提供令人满意的摩擦力，让你在思考时随意把玩。
现在有一个疯狂的故事，我可不敢打赌它是故意的。尽管它很炫。
Scroll Landmarks 滚动地标
在 macOS 上，你可以通过晃动鼠标找到指针。这种交互感觉非常棒，因为它抓住了人们在失去指针时的挫败感和自然反应。
我在手机上浏览长篇内容时经常会遇到类似的情况。我已经向下滚动了一半，在阅读过程中，我想快速回想上面的内容。但如果再向上滚动，我又会觉得很尴尬，因为我会失去宝贵的滚动位置和阅读进度。
我做了一个小原型，双击滚动条会在当前滚动位置放置一个地标。现在，我可以在页面上自由浏览，双击地标就能回到原来的位置。
使用起来感觉很熟悉，因为滚动条在触摸时已经可以交互。如果你不知道，长按滚动条会使其可拖动，这对快速滚动来说要快得多。
这让我想起了我以前制作的一个小地图原型。它的灵感来自游戏，在游戏中，你总是可以鸟瞰周围的环境。为什么不在浏览页面时使用类似的导航器呢？
Touch Content Visiblity 触摸内容的可见性
在触摸界面上，手指有时可能会遮挡屏幕上的内容，从而难以以像素级的精度执行手势。通常情况下，界面会暂时呈现手指下方的内容。
例如，在 iOS 系统上，当按下并拖动以移动文本槽时，触摸点上方会出现一个放大镜。但是，只要手指向下移动，不再覆盖刻度线，放大镜就会消失。
键盘也有类似的细节。按下一个键后，会显示一个放大的键，让你确信界面理解了你的意思。
这里有一个更明显的例子，了解菜单内容至关重要：
Implicit Input 隐式输入
长期以来，我们一直在剥开人类与计算机之间的层层关系。触摸输入通过引入手势和触觉提升了这种关系。很快，应用程序将不再受固定屏幕的限制。
键盘、鼠标、触摸、语音都是明确的输入。当它们被调试到完美状态时，感觉就像是我们自身的自然延伸。但输入之母不就是无输入吗？当一个界面利用上下文作为输入，并且无需询问就能推断出你想要做什么时，你就会真正感受到它的神奇之处。
例如，只要看着屏幕，Apple 地图就会显示正在运行的路线导航，而无需解锁。当出示通行证进行扫描时，苹果钱包会增加亮度。Spotify 会调整界面，以便在驾车时更方便使用。
某些自定义 iOS 应用程序在打开 "应用程序切换器 "时会模糊应用程序的内容。起初，我以为这只是一种性能优化。但事实证明，这是在故意隐藏可能的敏感数据，比如医疗记录或银行对账单。
Closing Thoughts 结束语
对我来说，理解和阐述为什么某件事情感觉是正确的，不如设计某件事情感觉是正确的来得直观。但它们是同一枚硬币的两面。一定是有原因的。它可以简单到像一个特定的弹簧曲线，也可以像隐喻一样是与生俱来的。分析和理解设计细节，而不仅仅是「感觉不错」，有助于培养品位，提高执行水平，并让人体会到追求卓越的艰辛。
推荐阅读：