设计师应该关注的用户体验设计模式

我们在周围的世界中看到了许多熟悉的设计模式。例如，大多数道路用实线或条纹线分隔车道。还有交通灯和道路标志可以帮助您在道路上行驶。如果每个国家/地区使用不同的系统，司机将不得不为他们想要驾车经过的每个国家/地区学习新的驾驶模式——但这不切实际！

UX 设计模式的工作原理类似。它们使用户无需学习新系统即可熟悉浏览数字产品或网页。

什么是用户体验设计模式？

UX 设计模式是用于构建用户界面的常见构建块。设计师使用 UX 设计模式作为可重用组件来解决常见的可用性问题。

例如，我们经常看到的一种设计模式是面包屑。面包屑向用户显示他们所在的页面以及返回主页的路径。

UX 设计模式如何改善用户体验

设计模式为设计人员提供了构建块以更快地创建用户界面，但它们也增强了用户体验。

UX 设计模式通常遵循用户熟悉的通用设计标准，从而减少学习和浏览新产品或网站所需的时间和认知负担。

在《我们如何决定》一书中，作者乔纳·莱勒 (Jonah Lehrer) 写道，识别熟悉的模式会释放出多巴胺——一种与动机、奖励、记忆和注意力有关的化学物质。当用户体验模式按预期工作时，多巴胺命中会增加。

使用有效的UX 设计心理学技术的设计师，例如熟悉的 UI 设计模式，可以增强用户体验并使产品交互更加愉快。

UX 和 UI 模式之间的差异

大多数设计师交替使用UX 模式和UI 模式这两个术语，因为区别很小，有很多重叠，并且可能会引起混淆！

UX 模式：用户流和导航的可重用模式——在社交媒体平台或网站上无限或连续滚动。用户认识到他们可以向下滚动以刷新页面。

UI 模式：用于视觉和交互设计的可重用模式——一个汉堡图标。用户知道汉堡包图标将打开导航。

何时以及如何应用设计模式

知道何时使用设计模式对于产品设计和用户体验至关重要。设计人员必须仅在有明确的可用性原因时才使用设计模式。

以下是识别用户需求和应用设计模式的四步、以问题为中心的方法：

查明问题——您可以通过分析和可用性测试的组合来识别问题。例如，您注意到在获取客户详细信息时，您的产品注册流程有很高的流失率。通过可用性测试，您了解到一个常见的痛点是注册过程耗时太长——您的注册表单要求填写全名、电子邮件、年龄、性别、城市和手机号码（其中许多细节与使用产品无关） 。

通过市场和竞争对手研究找到解决方案——寻找竞争对手和流行的设计库，以找到常见的 UI 模式来解决您的问题。回到我们上面的例子，您会发现竞争对手通常只在注册时询问用户的全名和电子邮件地址。它们还允许用户使用社交媒体帐户进行注册和登录，从而简化注册流程。

自定义设计模式——您必须自定义新的设计模式以匹配您的品牌和现有设计系统。对于我们的用户注册示例，此自定义可能包括调整输入、社交媒体按钮和提交按钮的圆角半径。占位符文本、输入标签和错误/成功消息将使用您的样式指南中的颜色。

测试您的设计模式——最后，您必须始终测试新的设计模式实现，以确保它们满足可用性和品牌要求。

上面的例子展示了可用性测试的重要性——识别和应用用户界面设计模式以测试开始和结束。

不要因为竞争对手有一个设计模式或者你认为这是正确的做法就添加一个设计模式。例如，您的网页设计是否需要面包屑导航？对于电子商务，可能有必要让用户返回到产品类别或知道他们在结账序列中的位置。但是，对于大多数其他网站，它只是添加了额外的数据点供用户处理。

UX 设计模式的常见示例

设计模式分为六大类：

A. 数据输入输出

B. 内容结构

C. 导航

D. 社交媒体和分享

E. 激励

F. 等级制度

数据输入和输出

数据输入和输出是最常见的用户/产品交互之一。用户输入信息，系统返回数据或完成一个动作。

一个很好的例子是许多网站和应用程序使用的日期选择器。尽管它们看起来略有不同，但大多数日期选择器显示类似的布局和功能——标题中的月/年、星期几和日期。

当用户单击一个日期时，它会突出显示以选择。最后，有一个 CTA（有时是一个取消按钮），用户可以在完成并准备继续时单击。

数据输入和输出的其他示例包括：

a) 表单提交

b) 成功/失败消息

c) 应用通知

d) 进度条/步骤

内容结构

你有没有注意到大多数界面使用类似的块布局和图像缩略图？或者，管理界面的左侧导航面板和右侧的内容如何？

使用这些熟悉的内容结构和 UI 模式可以帮助用户快速浏览新的数字产品或网站。目标是最大限度地减少摩擦（例如学习新界面），以获得无缝和愉快的用户体验。

导航

熟悉的 UI 模式可以帮助用户轻松浏览网站或数字产品。桌面和移动界面有不同的导航模式。

例如，主导航位于桌面网站或应用程序的标题中或左侧。在移动应用程序中，主导航栏位于页脚中，只需用拇指触碰即可。

无限或连续滚动是 Instagram 和 Pinterest 使用的典型导航设计模式。当用户滚动时，系统会刷新以显示更多内容。这种设计模式很熟悉并增强了用户体验，因为用户不需要单击下一步按钮或分页来查看更多内容。

社交媒体与分享

设计师可以使用多种社交媒体和共享设计模式，包括：

a) 链接的品牌社交媒体图标

b) 共享图标 - 向右弯曲的箭头或三个点的共享图标

c) 引言——用引号引用此人的姓名和形象

这些熟悉的设计模式可帮助用户找到社会认同，以建立对您的产品和品牌的信任。

这些设计模式利用心理学，鼓励用户执行所需的操作。这里的目标是在用户和产品之间建立联系。

激励

激励 UX 模式利用设计心理学来鼓励用户执行任务和操作，从而创建用户/产品关系。

设计师鼓励使用设计模式通过积极的反馈、认知、游戏化等来吸引用户。

例如，游戏化模式鼓励用户邀请朋友来获得奖励。UI 模式将通过 CTA 向用户显示他们当前的积分，以邀请更多朋友赚取更多。

等级制度

层次结构模式类似于内容结构，因为它们为用户创造了即时的视觉熟悉度，以便快速浏览界面并知道如何完成所需的操作。

博客的两种常见层次结构模式包括标题和目录。用户可以滚动页面以快速找到他们想要的内容或使用目录跳转到特定部分。

面包屑是电子商务网站用来帮助用户浏览产品页面和结账流程的另一种层次结构模式。

总结

UX设计模式是用户体验的重要组成部分，因为它们最大限度地减少了产品的学习曲线和人类认知负担。设计师必须知道何时使用这些 UX 设计模式，而不仅仅是出于习惯或模仿竞争对手而实施它们。

分析和可用性研究可帮助设计人员确定界面中缺少哪些 UX 模式，然后测试他们是否实施了正确的模式。