设计有目的的交互

探索有目的的交互设计的关键原则，交互可以解决哪些设计挑战，以及如何将其引入您的流程。

当我们考虑用户体验中的交互设计和动画时，很容易将其误认为是花哨的东西：花里胡哨，或者“给网站带来惊喜”的随机飞行物体。 它可能会带来短期的愉悦，但很快就会让普通用户感到恼火。

为了解决这种无用的问题，我们将看看设计有意义的交互的核心原则，它如何解决常见的设计挑战以及如何将其引入您的设计系统和流程。 交互不应该再是点睛之笔，不再是作为“很高兴拥有”而从范围中删除的，而是整体用户体验的一个组成部分。

有意义的交互设计的四个关键原则

1. 避免制造障碍

想想一个“汉堡菜单”，它需要两到三秒钟才能全屏动画。 每次用户想要浏览网站时，他们都必须等待。 为用户创造更长的任务时间是一种保证让他们一路跳转到竞争对手的网站或应用程序的方式。

然而，在某些情况下，延迟交互进程可能会受益。 当交互很复杂时，放慢速度可以为用户提供更好的上下文和反馈。 以下是您可能会延迟交互和动画的一些示例：

• 引导新用户使用新界面。 确保使用跳过选项减少障碍。
• 显示因果关系的拖放界面。 太快了，用户可能想知道该文件去了哪里。
• 将产品添加到购物车。 这不应该对结账造成长时间的障碍，但它应该给用户足够的反馈，让他们知道他们的任务是成功的。

通常，简单的交互应该是快速的，而复杂的交互应该延迟到足以让用户理解上下文。

2. 将动作与消息匹配

如果 Apple 决定他们在 iOS 上的所有交互都将在您的脸上快速、清晰地进行，并且会做大量棘手的事情，那么您是否会觉得您在使用 Apple 产品？ 如果您正在使用 Alton Towers 应用程序并看到缓慢褪色的动画和大量 Ken Burns 风格的过渡，您会觉得这是一个充满乐趣和刺激的神奇地方，还是 M&S 电视广告？

交互动画的方式应该始终代表您的目标基调，让您的用户感觉合适——它使体验更加身临其境和一致。 如果它是一个儿童娱乐网站，那么它可能有点古怪和花哨。 如果它是一家高端精品店，那就让它缓慢、精致和有品位。

3. 给它目的

交互设计具有提升用户体验的巨大潜力，这就是为什么过度使用和无目的使用如此诱人的原因。 还记得 Flash 网站吗？

再往前滚动一点，看看交互设计可以解决的八个挑战。 如果您的交互不遵循这些模式，则很有可能它除了取悦用户之外没有其他目的。

4. 让它不可见

考虑到设计交互所花费的时间，这听起来令人心碎，但如果没有引起注意，那可能是因为他们做得很棒。 当某项技术或界面出现问题或感觉笨拙时，我们往往会更加注意使用它。 当事情顺利时，用户可以专注于内容。

Facebook、Pinterest、Twitter 和 Google 产品等广泛使用的应用程序和网站上的交互设计考虑量令人费解。 然而，除非有人向您指出，否则您永远不会真正注意到。 它们使设计隐形，因此您可以享受体验并与产品、服务或内容建立更强烈的情感联系。

交互设计可以解决的六个设计挑战

1. 方向和背景

当屏幕空间有限时，这对移动设计来说是一个特殊的挑战。 公开显示所有内容，用户认知超载。 展示重要的东西和隐藏不太重要的东西是我们努力的目标； 然而，它隐藏了一部分经验。 因此，通过使用有意义的交互，我们可以直观地告诉用户事物所处的位置，因此易于记忆和直观。

以下是使用交互创建上下文的几个示例：

• 谷歌字体背景颜色转换器。 颜色感觉就像它们生活在油漆桶图标中。
• 在 Cotton Bureau 上添加到购物车和结帐流程。 它不会将您带到一个新的购物篮页面，它就像一个位于可见页面右侧的旋转木马。

2. 证明因果

一个典型的例子是拖放界面。 当你拿起一个媒体对象并将它移动到“放置区”时，应该有用户反馈告诉他们他们已经拿起它并且他们已经移动到正确的位置来放置项目。 一旦他们把它放进去，就应该有验证告诉用户他们的任务是成功的。 这可以通过颜色变化、积极的验证消息甚至声音效果来完成。

3. 提供反馈

在这个例子中，让我们以一个支​​付按钮为例。 当您点击那个漂亮、闪亮的“立即付款”按钮时，您遇到过多少执行不力的电子商务网关，结果却困惑于您是否因为它正在处理而点击了它？ 它没有说那是它在做什么。 因此，交互可以改变按钮的状态，并通过一些动画告诉用户“正在处理付款”，然后在重新定位到订单确认页面之前告诉用户“已收到付款”。 不用再想十秒钟发生了什么，也不要再怀疑你是否打破了互联网。

4.突出关键信息

当某些内容在同一屏幕视图中具有更高的优先级时，使用颜色和排版来宣传它可能会破坏设计系统的一致性，或者如果过度使用会显得格格不入。 交互有助于在不影响布局的情况下突出重要内容。

想想健身应用程序：当您第一次加载仪表板时，您希望看到今天的主要活动和统计数据。 使用简单的动画可以在不稀释屏幕上显示的内容的情况下显示此内容。

5. 创造绩效感知

速度是一个热门话题，并且有充分的理由，因为它是与跳出率相关的常见因素。 在某些情况下，您已经最大限度地优化了页面速度，但加载页面仍然需要一些时间。 除了向用户显示任何内容或显示加载图标之外，还有其他选择。

骨架加载可用于以线框形式显示可预测的布局，因此在页面加载之前，用户大致知道在哪里查看以及他们如何与界面交互。 从心理上讲，与没有看到任何事情发生相比，感觉页面加载速度更快，但实际上，它是在同一时间加载的。

您还可以利用加载时间作为一个机会，通过友好的消息来分散等待时间，让用户了解正在发生的事情以及即将发生的事情。

6. 添加品牌个性

以角色为主导的品牌可以通过引入互动将个性带入体验中而受益匪浅。 您可以利用吉祥物的人类特征。 当您的品牌中没有任何视觉效果时，您仍然可以通过使用速度和频率来添加个性。 想想谷歌和他们古怪的点预加载器或语音命令激活，它们以简单的方式带来友好和有趣的方法。

与用户建立情感联系是获得定期访问的好方法。 交互设计可以让技术感觉更加以人为中心——这总是很好的目标。

将交互引入您的设计过程

低保真草图和合成

交互设计工具

• Keynote：如果您正在寻找粗略和简单的方式来表达您的想法，Keynote 是快速取胜的选择。
• Adobe Animate：将其全部保留在 Adob​​e 中，并与其他工具无缝交叉。 这是说明性动画的理想选择。
• Tumult 炒作：如果您熟悉 Sketch 界面并了解时间线，那么 Tumult 会让您如鱼得水。
• Framer：这是一个专门构建的交互设计工具，具有非常先进的功能，可以将您的动画与 JavaScript 相匹配。
• Principle：有了一个很好的 Sketch 链接，Principle 正在成为交互的首选。 学习起来相对简单，而且你能在其中取得的成就很棒。
• 原子：添加数据、逻辑和变量，使您的交互与最终构建一样实用。 这适用于具有一些编码知识的高级设计师。
• Invision Studio：现在还为时尚早，但 Invision Studio 有一些很棒的功能，并且与 Principle 有一些相似之处。 时间会证明这是否足够先进以主导原型设计和协作市场。

详细交接注意事项

如果您处于高度协作的环境中，留下开发人员笔记是一个争论的焦点，但如果您在远程工作，针对您的想法和原型的详细笔记以及良好的移交可以确保您的交互被考虑到构建中。

编译演示和灵感库

将其添加到您的设计系统中

如果您已经通过交互成功解决了一个常见问题（经过适当测试），那么将其放入您的设计系统或模式库中，以便在类似场景中重用，而无需投入时间从头开始做其他事情。

如需网页设计和用户体验 (UX) 方面的帮助，请立即与我们联系。

如果您在用户体验方面需要帮助，请随时与我们联系。