从「引导」与「反馈」，谈谈交互体验

前言

大家好，我是老人，一名业余设计师。我喜欢把玩各种移动设备，尝试它们的交互体验。随着Windows11的发布，我萌发了写这篇文章的想法，将我日常中对移动设备交互的观察与思考，以闲谈的方式展示出来。

「引导」与「反馈」是我对交互设计的总结，前者告诉用户该怎么做，后者告诉用户做了什么。以此为前提，开始我们的闲谈。

在现实生活中，每件物体的运作都遵循一定的「逻辑」，既不会凭空消失，也不会凭空出现。这些逻辑在交互设计中同样适用。以IOS为例：

• 当你划到任何页面底部时，继续滑动，页面会产生「弹力」拉伸的效果。这几乎成为了iOS的标志特点之一。

• 在iOS10及以前，下拉通知中心，会有「触底反弹」的效果，就像是一块玻璃砸在了桌面上，如下图：

当然，物理特性在UI中并不是越多越复杂越好。恰到好处的运用，能够引导用户理解软件的逻辑，从而更快的熟悉软件。这便是借现实生活中的经验，来降低用户的学习成本。

在降低学习成本上，「拟物风」设计是一个具象的例子，我们来看看一个抽象的例子：

当用户快速的浏览一下这些动效，首先对左边的动效建立「逻辑感」：选中的选项，经过触碰转变成为新页面的标题栏，一气呵成，标题栏「从哪来到哪去」一目了然。

而右边的动效十分僵硬：旧页面左滑消失，新页面左滑出现，其间没有任何连接的纽带，也就没有「逻辑」可言。

同样的例子在iOS上也有所体现，只不过更抽象些：

上方所写的「逻辑感」体现在动效上。那么，如何在静态的页面中体现「逻辑感」呢？你可以试试用阴影，渐变色来建立层次感，下方是一个直观的例子（以某宝为例）：

右边的页面能够让用户对层次，也就是主次关系一目了然，它告诉用户：嘿，下方的导航栏是最大的管理者！也就是最大的分类栏！如果你要切换不同的主界面，就请到这儿来吧！

而上方的导航栏，由于使用了颜色更淡，更不突出的阴影，成为了「次级」的导航栏。

这样用户一眼便知自己该怎么做。就像我正在写的文章需要条理分明，交互设计也不例外。

一个简单的问题：当你按一个按钮时，是否希望按钮被「按下去」？

答：这是什么弱智问题？肯定是啊。

是的，正是这样一个「按下去」的体验，成为了交互设计中反馈系统的核心。但你可别大意了，就是这么基础的东西，还会有设计师给忘了呢！看看下面的例子：

• Windows2000 的按钮十分经典，「按下去」的机械感完美体现了那个年代的风格。

• iOS 的按钮依然是「按下去」，只是相较而言抽象不少。

• Material Design 便成为了格格不入的那一个！按钮看上去不想被按下去，不安分的跳上来了！幸好，在最新的Material You 中，谷歌已经意识到问题并把这个设计改掉了。

即便是一个简单的按钮，也要遵循现实生活中的「基本逻辑」。

前面说过，「逻辑」于交互设计中十分重要，那是否要死扣这一点呢？不一定。在不同的场合中，我们可以对交互的逻辑进行微调，使其达到既悦眼，又实用的效果。

这次拿iOS开刷，看看下面的例子：

试想：但你需要调节音量时，你希望音量条马上出现；但你不需要调节音量时，你希望音量条安静的消失，而不是在你眼皮子底下跳一下再走开。就像你要送走一个讨厌的人，你肯定不希望他在收拾行李时发出很大响声。

而近代iOS引入的音量条，不仅会在你眼皮子底下跳来跳去，还会「自动放大缩小」，成功将你的注意力从「工作内容」引到一个「音量条」。

在这个场合中，交互设计应该让用户注意力集中在屏幕内容，尽可能少地打扰用户。所有边缘提醒型服务，都应安静的进行。

不要被条条框框所束缚，作为创意工作者，尽所有可能去打造「令人愉悦的体验」。

好的设计之所以用起来赏心悦目，正因为设计师们在这些细节上下了功夫；而那些我们称之为“反人类”的设计，正是由那些不符合「逻辑」的设计一点一滴累积出来的。

我相信图片相比文字更能加深读者的理解，所以在撰写这篇文章时，尽可能使用GIF直观，形象的表达，并辅以文字。它们是我用After Effects制作的，附上工作截图：