如何打造更完美的UI设计方法

多年来，设计师们一直在尝试通过减少摩擦以及为用户创造更多的价值来提高产品效率。虽然很多产品需要传递众多的流程和功能，但是设计师的角色仍然是简化用户达成目标的路径。

设计师们在每一个新的用户界面上都会寻求形式和内容之间的完美平衡。在用户眼中，一切都需要简单化。设计师如何在避免认知负荷的同时降低复杂性呢？

以认知工效学（Cognitive ergonomics）的概念为出发点，我们可以认为，认知设计旨在让界面决策以促进浏览者理解为存在，减少短期记忆的负载，加速理解所呈现的内容，防止认知负荷。

什么是认知负荷？

说得通俗一点，只要我们的认知负荷大于我们的工作记忆（working memory）所能处理的范围，我们的大脑就会因为处理能力有限而面临承受认知负荷的风险。

要想更好地理解认知负荷，可以看看其鼻祖 John Sweller 的著作认知负荷理论。Sweller探讨了有助于理解信息的心理路径。根据Sweller的观点，理解在很大程度上受到内容呈现给观众的方式的影响。例如，展示一个正方形的图像比用语言描述更容易被人理解。

在另一项名为「减少多媒体学习中认知负荷的九种方法」的研究中，UCSB的研究人员探讨了认知负荷的几种潜在情况，并提出了一些关于如何减少或防止认知负荷的建议。这些建议中的许多都适用于网页设计的实践。

为什么减少认知负荷很重要？

数字体验通常始于意图：我们在Instagram上查看照片、通过Gmail发送电子邮件或在LinkedIn上阅读消息。

目标达成越难、体验越差、认知负荷越大。根据1993年提出的峰终定律（Peak-End Rule），我们都倾向于根据最关键以及最终时刻来判断一段体验。

困惑的感觉会产生焦虑和挫折感，而这些负面的感觉很可能与你的品牌有关。在考虑用户体验时，我们必须考虑使用有效的认知设计。

在试图解决问题之前先了解问题

在尝试解决一个设计问题之前，纵观全局很重要。人们有不同的目标和背景，所以他们可能会对同一个挑战有不同的理解。有些东西可能对你来说很复杂，但对你的用户来说可能就并非如此了。

花时间研究你的用户如何与你产品的界面进行交互。在对你的用户流程进行更改之前，先观察你的用户并与之交谈，确定可能的认知负荷情况。

做好UI的关键点

为了减少认知负荷，我们需要有策略地决定如何以及何时使用以下方式呈现内容：

让路径清晰

即使我们很想通过尝试呈现多种内容选择的方式让用户能够快速获取自己感兴趣的内容，但我们还是应该尽量简化用户达成目标的路径。将过多的信息集中在同一个地方并不是理想的呈现方式。

成为向导

设计界面就像讲故事一样，用户体验中认知负荷高的主要原因之一就是故事讲得不好。尽最大努力引导用户，保持一致的叙事结构，有清晰的开头、中间和结尾。

采用明确的标准

通过使用模式来减少认知负荷。探索良好的实践，比如坚持遵循用户界面设计的10个可用性启发法，以及使用设计系统来设计一个成功的用户界面。

如何防止认知负荷影响用户体验？

认知负荷的发生并非偶然，很多因素都会造成这种情况。请记住以下这些主要的因素：

过度刺激是你的敌人

请记住：现在是2020年，不是1999年。闪烁的动画和GIF不再是典型的好设计之选。并且，动画和微交互的存在应该有明确的目的。任何形式的视觉刺激都应该用于引导体验而非误导体验。

米勒定律（Miller's Law）指出，一般来说，我们的短时记忆中能够容纳七条信息。这并不意味着一个界面只能有七个元素，但它提醒我们要牢记自己的认知局限，以避免认知负荷。

UAT网站页面上的主要链接出现在加速动画中间，左右浮动，给阅读和互动带来困难。图片来源网络

解决方案

回顾每个刺激背后的意义，并使其与界面的主要目的保持一致。每个颜色、动画、插图和微交互都必须有明确的目的。

在这个个人项目中，Joseph Berry用动画引导观众进入奇妙的沉浸式体验。图片来源网络

更少的选择带来更多的转化

在决定同时显示什么内容时，少即是多。过多的内容会使焦点偏离主要目标动作，降低转化率。希克定律（Hick's Law）告诉我们，选择越多，做决定的时间就会越长。

Arngren网页上众多选择和标准化网格的缺失，阻碍了人们对视觉元素层次的正确认知。图片来源网络

解决方案

根据上下文将你的内容分离成逻辑组。你可以通过分类学研究、动态卡片排序、以及将内容分成选项卡、区块、屏幕或不同的视觉组来探索选项。

Fiverr除了使用视觉提示（如引导导航的项目符号图标）外，还使用清晰的文字和图片对内容进行分类。图片来源网络

自始至终的一致性

保持用户熟悉的视觉设计、交互和导航。如果搜索栏位于主页的右上角并带有一个蓝色的图标，那么没人希望它跳到下一页的页脚。如果你的销售渠道中的确认按钮总是绿色的，那就确保它一直保持绿色，即使是在那个被遗忘的联系表单的末尾。

不一致的导航会增加认知负荷。图片来源网络

解决方案

现在是时候让你的设计系统大放异彩了。通过原子系统保持从最小到最大组件的一致性，并将其标准扩展到界面的任何操作，包括导航结构和动画。

当浮动卡片的主CTA因屏幕滚动而被隐藏时会移动到页头，从而保持导航的一致性。图片来源网络

减少必要的动作

你是否曾发现自己在填写注册表单信息时，不知道为什么需要填写某项内容？消除任何对完成主要任务不重要的内容。额外的字段、多余的信息、验证和点击次数越少越好。

百思买强迫用户做出决定。图片来源网络

解决方案

只有在必要时才进行干预。

分析你的内容是否有多余和不必要的步骤。改进默认选项，减少用户的交互需求。

法律要求啤酒网站必须确认每个访问者的年龄。图片来源网络

作为设计师，我们不必总是无谓地重复。经过多年与不同界面进行交互，用户期望看到熟悉的模式。当这种情况没有发生时，工作记忆会发生较大的负荷来处理信息。

即使在今天，MySpace也使用了不同寻常的横向导航。图片来源网络

解决方案

在设计已经被大家熟知的解决方案时，你不必从头开始。

请参考与可用性相关的行业标准，例如人们通常不阅读网页上的每个单词，而是以F-Shaped模式扫描内容。

重复出现的元素，如搜索栏、登录屏幕和导航菜单都有完善的标准。重复使用而不是重新设计。

Mercado Livre遵循现代电子商务的良好实践。图片来源网络

保持简洁

为了简化心理学家Paul Fitts在1954年的研究中提出的建议，按钮需要大而易懂。让用户更容易做出决定是设计师的责任所在。

这里值得一提的是奥卡姆剃刀（Occam’s Razor）。简单的说，当给你几个产生同样结果的选项时，通常最简单的那个是最好的。

简洁性与可访问性必须齐头并进。

缺乏对比度是认知设计的敌人。图片来源网络

解决方案

使用负空间（negative space）等特征简化信息的呈现，以强调关键内容。重新审视和应用格式塔原则 Gestalt，如邻近性、相似性和连续性，以优化用户体验，不产生混淆。

避免歧义，同时保持文字的清晰和客观，保持组件符合可访问性原则，并提供必要的帮助量，作为简洁体验的核心要素。

Mural利用负空间和高对比度来清晰地提示页面上最重要的内容。图片来源网络

总结

通过所有关于认知负荷的理论和讨论，往往很容易通过产品和业务指标看出一个UI的表现是好是坏。如果没有很好的理由，就不要从根本上改变已经成为标准的内容。最重要的是，观察、倾听，并让与你的界面进行交互的用户发声。只有这样，我们才能设计出能够真正解决用户问题的有用产品。