7创建优雅UI互动的简单规则

精妙的UI交互设计：以优雅取胜，而非炫技

关键要点

• UI交互设计的优雅之处在于确保流畅、用户友好的过渡，以支持用户的操作，而不是花哨、分散注意力的元素。
• 微交互，例如下拉菜单或显示产品详细信息，应该精心设计，以增强可用性并引发用户的积极情绪反应。
• 创建优雅UI交互的关键规则包括：避免使用瞬间跳转，而应使用过渡；使用切换开关代替按钮；将触发器放置在附近；使用自然的过渡时间；确保过渡回滚不会破坏用户的控制感；自动聚焦于一系列操作中的下一个操作；始终向用户发出交互完成的信号。
• UI交互越符合现实世界的物理规律，感觉就越自然、越优雅。至关重要的是要测试和调整这些交互，以确保它们直观、一致、高效，并向用户提供充分的反馈。

“交互设计”这个新词已经与UX设计过程紧密联系在一起。2015年以后，界面元素在两种静态状态之间即时切换已不再足够。如今，“滑动”、“弹跳”和“回弹”等词语已成为良好用户界面工作方式讨论的一部分。

然而，在交互领域——就像昂贵的手表一样——“花哨”并不一定意味着“优雅”。虽然我们可能对下面这款花哨手表（图片）的复杂性感到好奇，但我怀疑我们中很少有人会真正想戴它。在我们的界面设计中，自然的优雅几乎总是胜过装饰。

如果你像我一样富有创造力，很容易被创建花哨的交互所吸引，只是为了让你的网站感觉更现代、更引人入胜。当然，我们心里知道，这种方法可能是破坏整个用户体验的最可靠方法之一。

因此，我发现关注那些流畅、赏心悦目的动画非常重要，以至于我们的用户几乎注意不到它们。那时，我们的动画就会从聚光灯下移开，转而支持用户正在尝试执行的操作。

为什么这很重要？

苹果为什么会在包装上花费如此多时间和金钱，而这些包装通常很快就被扔进回收箱？为什么豪华汽车公司会调整车门关闭的声音？

这是因为我们发现，细微的、看似不重要的细节会对优秀的设计产生不成比例的影响，并将UX从“良好”提升到“极佳”。

用精美设计的“微交互”来丰富你的网站，不仅使其更易于使用，还可以引发用户积极的情绪（就像打开苹果包装盒一样）。体验这种情绪意味着消耗更多多巴胺，这实际上有助于他们对你的网站/应用程序上瘾。

那么，什么是“微交互”？

当用户进行输入（例如，点击、拖动、键入内容）时，你的网站会做出反应——这就是交互。这是用户与你的网站沟通的一种方式，所以它是对话的一部分。在设计用户在你的网站上的行为流程时，你总是可以使用几种不同类型的交互：

1. 导航交互：当用户最终进入一个全新的页面/状态时。
2. 模态交互：当网站的当前状态被冻结，并在其顶部显示一些临时状态时（例如，“灯箱”画廊或确认对话框）。
3. 微交互：当您只想让页面内的单个元素对用户输入做出反应时——例如，显示下拉菜单或显示产品的更多详细信息。

我们如何使这些微交互更优雅？

一个网站应该感觉像是一场互动界面元素的音乐会，共同努力给你留下深刻印象。优雅是留下这种印象的关键标准。虽然很难用纯粹的技术术语来定义优雅，但我们可以使用一些逻辑技巧来帮助我们创建优雅的交互。

关键规则 #1 – 没有瞬间跳转

这个想法很简单——在更改页面上的元素时，始终使用过渡。这意味着你的GUI上不应该有任何瞬间的快切。每个出现、消失或转换的元素都应该使用缓动或/和动画来实现。

这有助于用户将注意力集中在你希望他们关注的区域。当然，这也创造了一种优雅和一致流程的感觉。

### 规则 #2：切换开关优于按钮

在家中，你通常会使用同一个开关来打开和关闭灯。同样的概念也适用于你网站上的切换控件。如果一个切换控件触发给定元素的新状态，则相同的控件应该回滚该状态。

此外，根据菲茨定律，此类控件应该几乎不需要任何努力即可快速在开启和关闭状态之间切换。

### 规则 #3：触发器应该在附近

过渡总是需要某种触发器。在交互时，我们的用户通常会关注该触发器元素。这意味着过渡必须在或非常靠近触发器处开始。如果你在距离触发器元素太远的地方开始过渡，用户很容易错过它，并且流程将中断。

此外，过渡通常应该从触发器传播到你想要集中用户注意力的位置。技巧很简单——你引导用户的眼睛从触发器移动到他们应该进行下一步操作的地方。这样，用户就不会失去注意力，并且会直接到达你想要他们去的地方。

### 规则 #4：使用自然的过渡时间

过渡时间定义了动画播放的时长。时间的主要问题是没有魔杖可以做到这一点。如果你让你的过渡时间过长，它会为经常或快速重复相同交互的用户创造一个痛点。

另一方面，如果它太短，它会感觉不自然——或者用户可能会完全错过它。不幸的是，你所能做的就是用你的火眼金睛和直觉来评估过渡。我发现的最好的建议是不要让所有过渡都具有相同的时间。只需随意尝试，找到合适的平衡点即可。还要注意，即使是0.05秒的差异也很重要。

### 规则 #5：过渡回滚不应该破坏用户的控制感

有时会发生用户在过渡过程中快速改变主意的情况。在这些情况下，过渡响应能力至关重要。如果用户取消了最后一次交互（例如，两次点击触发按钮），则过渡动画应立即反转。如果不是，我们的用户会立即失去控制感。此外，你还会让你的用户认为他们做错了什么。

### 规则 #6：始终自动聚焦于一系列操作中的下一个操作

此技巧针对用户执行一系列操作的交互。在设计此类序列时，你应该始终避免任何不必要的交互，并始终将焦点设置在序列中的下一个控件上。这种交互的最基本示例是[编辑]按钮，它会打开一个表单并神奇地将焦点放在第一个字段上，以便用户无需手动单击它。

### 规则 #7：始终告诉用户何时完成

用户应该始终能够识别交互何时完成。如果你的交互在完成时没有以某种明显的方式发生变化，你应该始终考虑实现某种视觉反馈，告诉用户“嘿，你，完成了！”。如果你跳过这一点，用户往往会多次重复相同的操作，从而犯错，甚至可能破坏某些宝贵的东西。

应用这些技巧

简而言之，你可以使用这些技巧作为在你的网站上实现微交互的备忘单。它应该帮助你在实现微交互之前设计交互的细节。

但是，你很有可能无法第一次就做到完美。在这种情况下，你需要根据你自己的情况进行调整——所以准备好稍微尝试一下。

还有……最后还有一条建议给你。一般来说，你的交互越服从现实世界物理定律，它们就越自然、越优雅。

祝你动画制作愉快！

关于创建优雅UI交互的常见问题

在设计UI交互时，需要考虑哪些关键原则？

在设计UI交互时，务必牢记用户。交互应该直观易懂。一致性也是关键——用户不应该猜测如何与你的界面交互。交互还应该向用户提供反馈，让他们知道他们的操作已被识别并正在处理。最后，交互应该高效，最大限度地减少用户为实现目标所需采取的步骤。

如何使我的UI交互更具吸引力？

为了使你的UI交互更具吸引力，可以考虑加入动画。动画可以使交互感觉更具活力，还可以向用户提供宝贵的反馈。但是，务必谨慎使用动画，不要让它们分散对主要任务的注意力。此外，可以考虑使用声音或触觉反馈来增强交互。

在设计UI交互时，应避免哪些常见错误？

在设计UI交互时，应避免的一些常见错误包括：使交互过于复杂、没有向用户提供足够的反馈以及不一致。过于复杂的交互可能会让用户感到困惑，并使你的界面难以使用。缺乏反馈可能会让用户不确定他们的操作是否已被识别。不一致会使你的界面不可预测，并令人沮丧。

如何测试我的UI交互的有效性？

你可以通过用户测试来测试UI交互的有效性。这包括观察用户与界面的交互并收集反馈。你还可以使用分析工具来跟踪用户与界面的交互方式，并识别任何困难或困惑的领域。

如何提高UI交互的可访问性？

为了提高UI交互的可访问性，请考虑具有不同能力的用户将如何与你的界面交互。例如，确保你的交互可以使用键盘，以便无法使用鼠标的用户也能使用。此外，确保你的交互与屏幕阅读器和其他辅助技术兼容。

如何在我的UI交互中融入故事讲述？

可以通过围绕用户旅程创建叙述来将故事讲述融入你的UI交互中。这可以通过使用动画、声音和视觉提示来引导用户完成交互来实现。

有哪些学习更多关于UI交互的资源？

有很多资源可用于学习更多关于UI交互的知识。一些流行的资源包括在线课程、博客和关于该主题的书籍。你还可以通过研究流行应用程序和网站的UI交互来学习很多东西。

UI交互中的速度有多重要？

速度在UI交互中非常重要。用户期望交互具有响应性和速度。任何延迟都可能导致沮丧，并可能导致用户放弃任务。

如何使用颜色来增强我的UI交互？

颜色可用于增强UI交互，方法是将注意力吸引到重要元素上，指示状态并提供反馈。但是，务必谨慎且一致地使用颜色，并在设计中考虑色盲问题。

如何跟上UI交互的趋势？

为了跟上UI交互的趋势，最好关注行业博客、参加设计会议并加入UI设计师的在线社区。你还可以通过研究新的和流行的应用程序和网站的UI交互来学习很多东西。

以上是7创建优雅UI互动的简单规则的详细内容。更多信息请关注PHP中文网其他相关文章！