使用这些成功的交互设计原则提升您的用户体验

在有效的交互和不可用的交互之间有一条细线。 交互设计原则有助于弥合鸿沟。

执行良好的交互设计在实现出色的用户体验中发挥着巨大的作用，并且毫无疑问是用户体验设计原则的基础之一。

“不可用”的意思是“我要继续前进”，无论视觉设计多么“好看”——动画多么花哨——都会把交互设计搞得一团糟，你的用户体验就是失败的。 做对了，即使美感不足，您也将朝着更好的用户体验迈进。 该产品将有更大的成功机会，这反过来又有助于提高利润。

交互设计（IxD）被交互设计协会（IxDA）定义为“交互系统的结构和行为。 交互设计师努力在人与他们使用的产品和服务之间建立有意义的关系，从计算机到移动设备再到电器等等。”

经验很重要，因为它决定了人们对他们互动的记忆有多深。 ——唐·诺曼在《日常事物的设计》中。

遵循交互设计原则极大地促进了出色的交互设计，而这反过来又有助于体验。

今天的所有设备和技术可能会在一夜之间被完全不同的东西所取代，但由于其持久的原则，仍然可以实现出色的交互设计。 这些不变的原则是关于人们的动机、他们的行为以及他们的思维方式。

想象一下，如果每扇门上的每个门把手都以不同的方式工作。 对于一个，您必须先推入门，然后再向下推； 另一个你必须向上拉而不是向下压，还有一个你必须向上拉两次然后向下——这完全是一场灾难。 事实上，“转动门把手”这个短语假设只有一种方法可以做到这一点。

没有人喜欢被“遵守规则”的呼喊打败，但真正优秀的交互设计依赖于一套标准、最佳实践、约定和经验法则（启发式）。 这不是一门糊涂的科学，但它们构成了 IxD 的基石，并以最少的摩擦力使交互成为可能。 界面标准不会扼杀创造力——它们不是硬性规定，而是帮助设计师建立“可用和熟悉的设计”基础的基本准则，并以此为基础进行创新。

交互设计原则和最佳实践

交互设计属于人机交互 (HCI) 学科，“一个多学科研究领域，专注于计算机技术的设计，特别是人（用户）与计算机之间的交互。”——由交互定义设计基金会。

出色的 UI 设计通过将基本的 UI 设计原则与目标驱动的交互设计相结合，实现纯粹的用户愉悦。

• 成功的交互设计采用简单、明确定义的目标、强烈的目的和直观的用户界面。
• 为了使交互保持简单和容易，目标驱动的交互设计只在用户面前放置了让他们完成任务所需的绝对最低限度。

让我们深入探讨一些最重要的原则（无论如何都不是详尽的清单）：

可发现性

基本上，如果用户找不到它，它就不存在。 必须在不到一微秒的时间内明确在 UI 中可以执行哪些操作，例如，将图标标记为最佳实践。 未标记的图标无异于在用户的路径中设置障碍，因为它们必须停下来解读含义。 你打断了“流动”。 令人震惊的是……他们对学习你的 UI 不感兴趣。

能指

与可发现性密切相关的是，有效使用指示符可确保在 UI 中清楚地指示可供性（对对象进行操作的可能性）。 能指提供强有力的线索，如信号或路标。 指示可用的交互，他们向用户闪烁绿灯，大喊：“我在这里，你可以点击（点击、滑动等）我！” UI 中可能存在可供性，但可能会保持隐藏，因为如果它缺少能指，它仍然是不可见的。 一个示例可能是“隐藏的手势交互”，除非用户不小心向左或向右滑动（例如，删除某些内容），否则它不会显示自己。

可供性定义了哪些行动是可能的。 能指指定人们如何发现这些可能性：能指是符号，是可以做什么的可感知信号。 对设计师来说，能指远比可供性重要得多。 ——唐·诺曼（诺曼，2013）

回馈

在能指之后，与用户的下一个最重要的沟通是反馈。 反馈意味着：关于行动影响的明确信息。 这也意味着系统状态的持续可见性，即系统应确保：

• 用户随时了解正在发生的事情。
• 有关于他们行动的结果和产品（系统）的当前状态的连续信息。
• 对于产品的状态，即处理、加载、搜索、上传等，或一些其他状态变化，用户的头脑中没有混淆。
• 执行完一个动作后，很容易确定新的状态。

概念模型和心智模型

出色的交互设计提供了用户创建系统良好概念模型所需的所有信息，从而导致他们的理解和控制感。 使用该系统时，概念模型增强了结果的可发现性和评估。

心智模型（或认知地图）是用户脑海中的图像，可以告知他们对某种交互的期望以及某些事物在现实世界中的运作方式。 认知地图是我们物理环境的内部表示，特别是与空间关系相关联。 通过有效地使用用户的心智模型，交互设计师可以创建“感觉”直观的系统。

设计师发明了一个概念模型——设计模型，这就是设计师希望设备或软件工作的方式。 将此模型传达给用户的唯一方法是通过 UI 实现它。 然后，用户与概念模型进行交互，并创建他们自己的关于事物如何工作的心理模型。

设计师无法告诉用户他们希望应用程序如何工作——他们需要适当地设计 UI 以便清楚地传达其目的。 换句话说，使界面易于理解和使用。 糟糕的交互设计冒着为用户创建错误心理模型的风险。 这会导致混乱和用户错误，因为他们试图以设计者不希望的方式操作应用程序。

映射

映射是控件及其在世界中的效果之间的关系。 反馈原则是映射的近亲，因为这两个原则共同创造了无缝的体验。 几乎所有工件都需要在控件和效果之间进行某种映射——在界面设计的情况下，它是控件与其结果函数之间的关系。

自然映射——利用物理类比和文化标准——导致立即理解。 例如，设计师可以在 UI 中使用空间类比：

• 要使用滑块组件增加一些值，请向右滑动滑块，
• 要减少它，请向左滑动。

一些自然映射是生物的，如在普遍标准中，上升的水平代表更多，下降的水平代表更少。

约束

约束的设计概念是一种确定如何限制在给定时刻可能发生的用户交互类型的方法。 交互设计约束通过为用户提供“导轨”来帮助高效交互——几乎就像指导可能发生的交互的引导手。

设计中的约束确保只有特定的东西被启用，甚至是可见的，以引导用户进行某些交互。 它考虑了大小、规模、比例、重点和状态，以及这些如何和谐地协同工作，帮助创建层次结构并最终影响用户。 正确设置约束也有助于减少用户出错的机会。

约束的反面是当每个选项都提供给用户时，使他们难以决定下一步该做什么。 这是选择的原则。 选项越多，选择其中任何一个就越困难——我们被所有的可能性压得喘不过气来。

出色的交互设计不会将所有可用选项都放在界面上，而是将其限制在任何特定时刻最重要的部分。

一致性、标准和启发式

如果你愿意的话，这些都是相关的——模式的兄弟（下）。 为了防止用户错误并使应用程序易于学习，交互模型必须保持一致。 一致性提高了用户体验、一般可用性以及用户使用数字产品的效率。

一致性意味着使用相似的元素来完成相似的任务，并且始终具有相似的功能和行为——一致的界面是遵循规则的界面，例如使用相同的操作来做某事。

力求高度可用的产品遵循公认的约定、标准、最佳实践和可用性启发式（广泛的经验法则，而不是特定的可用性指南）。

例如，符合约定可能是页面布局的方式。 网络用户将 69% 的时间用于查看页面的左半部分，30% 的时间用于查看右半部分。 因此，如果网站遵循传统布局，则更有可能获利。

标准可以是面包屑路径（可立即识别的方向和导航设备），也可以是在密件抄送网站上的页面顶部的全局导航菜单。

模式和可学习性

新用户学习导航界面的难易程度如何？ 没有人愿意学习一种新的做事方式，除非它比以前的方式有显着的好处——然而，我们经常被未经测试的非传统互动所淹没。

通用组件或模式提供即时可学习性。 一旦你学会了如何使用勺子，你就会永远知道如何使用勺子。 骑自行车、滑冰也是如此……同样的结构也适用于我们每天使用的 UI 组件：按钮、文本字段、下拉菜单、复选框、单选按钮、微调器、滑块、图标、手风琴、搜索框等。

最好的交互设计不会试图重新发明轮子，而是以一种新的方式有效地利用模式。

模式不仅鼓励可学习性，而且还提供一致性（另一个原则，上面讨论过）并使其符合用户对事物应该如何工作的期望。

视觉层次和重点

在与网站或应用程序交互期间，人们正在寻找与他们的搜索最相关的信息。 视觉层次结构以暗示重要性的方式关注元素的排列。 设计中的视觉层次会影响人眼感知所见事物的顺序。 并非所有事物都被赋予相同的“权重”； 秩序是由感知领域中对象之间的视觉对比创建的。 视觉对比（强调）可以通过元素之间的大小、接近度、颜色、不透明度和实际色调对比来实现。

不要低估视觉层次的力量。 它已被非常有效地用于各种设计，包括建筑和工业设计以及印刷设计。 看看一些很棒的海报设计。 在交互设计中很好地使用这种技术，正确的事情似乎会在正确的时间以正确的方式出现。

伟大的交互设计师利用强调的力量成功地实现了“精益求精”的界面设计，看起来就像魔术一样。

菲茨定律

信不信由你，这条定律来自早期研究观察人体肌肉运动和瞄准电报操作员和生产线任务性能，后来适应了 HCI（人机交互）。 它基本上说：“获取目标的时间是目标距离和大小的函数。”

简单来说，它是关于一个目标的距离和大小，以及它与其他目标的距离。 更短的鼠标移动或点击效果更好——如果目标更接近您的起始位置，则单击或滑动目标总是更快。 相关任务也应该彼此靠近，这样用户就不必在与 UI 交互的屏幕上飞来飞去。

菲茨定律可以准确预测移动到和选择目标所需的时间。 目标可以是按钮、下拉菜单或屏幕上的其他交互元素。 如果太远、太小，或者可点击元素靠得太近，都会大大降低 UI 的效率和可用性。

古腾堡图、Z 和 F 模式布局

这些模式根据内容适用于不同的情况，并且主要由西方观众使用。 古腾堡图描述了在查看均匀分布的同质信息时眼睛移动的一般模式——主要是文本密集的网站，如博客或新闻网站。 古腾堡图表明，强和弱的休闲区域位于阅读重力路径之外，除非以某种方式在视觉上强调，否则很少受到关注。

Z 图案遵循字母 Z 的形状。在某些情况下，这种图案也称为之字形图案。 与古腾堡图的主要区别在于 Z 模式表明观众将穿过两个休耕区域。 否则它们仍然在同一个地方开始和结束，并且仍然通过中间。 与古腾堡一样，设计师会将最重要的信息放在 Z 模式的路径上。

F 代表快速，指的是用户如何阅读内容。 F 模式由 NNGroup 眼动追踪研究推广，该研究记录了 200 多名用户在网络上阅读内容。 它发现人们的扫描模式在许多不同类型的网站上都非常一致。

为什么这很重要？ 例如，在电子商务网站上，为了最大限度地扫描，您可能希望以遵循 F 模式的方式排列最重要的内容。

识别而不是回忆

识别是指我们将事件或信息“识别”为熟悉的能力，而回忆更像是一种“认知负担”，涉及从记忆中提取相关细节。 向用户展示他们可以识别的东西比需要从头开始召回项目提高了可用性。

例如，在 UI 中使用图标非常强大，因为它允许即时识别符号。 我们的大脑处理（识别）符号的速度比阅读文本快 1000 倍。 如果设计师在对话框中显示一个标准的警告标志图标，它会立即让用户集中注意力，因为下一个动作可能是破坏性的。 但是，如果一个图标的设计方式迫使用户回忆和解读含义——例如举起一只手而不是警告图标——它会降低效率和 UI 的可用性。

美学和极简主义设计

你必须深入了解一个产品的本质，才能去掉那些不重要的部分。 ——乔纳森·艾夫。

这是最具挑战性的原则之一，因为它很难。 趋势是设计师和产品经理在阳光下添加每个可用的选项，并让用户决定他们想要采取的路径。 这确实是一种懒惰的方法，并导致产品充满了不必要的混乱。

界面需要清除不支持用户目标和任务的不必要元素和内容。 设计师不仅要设计美观的 UI，还要在用户流程中优先考虑屏幕到屏幕的信息。 使用视觉层次和强调的魔力，只应呈现用户完成任务所需的基本和绝对最少的信息。

米开朗基罗谈到他的作品时说：“我在大理石中看到了天使，并一直在雕刻，直到我让他自由。”

设计一个极简、美观和简单的交互要求设计师准确了解人们使用产品的那一刻发生了什么，并摆脱所有不必要的东西。 进行深入的用户研究和测试以了解用户将如何使用产品通常是最好的方法。

错误预防

用户在执行任务时经常会分心，因此通过视觉强调、提供建议和使用精心设计的约束来防止无意识错误是关键。 一种防错形式（也称为 Poka-Yoke）是指实施故障保护机制以防止过程产生错误。

防止错误的最好方法之一是设计一个更好的心智模型。 当设计者的模型和对系统应该如何工作的解释与用户的心智模型不匹配时，就会发生许多用户错误。

标准设计约定会有所帮助（上面提到的原则之一），因为它们可以帮助用户了解他们可以采取的行动。 与您的网站或应用程序交互的用户已经使用了数以千计的其他网站和应用程序，并期望常见的交互元素以某种方式呈现和工作。 当您的产品偏离这些约定时，可能会出现容易出错的情况。

在发生错误之前发出警告并在破坏性行动之前确认。 比实施良好的错误消息更好的是精心设计，可以从一开始就防止问题发生。 尝试消除容易出错的情况并继续检查它们。

交互设计的未来

新的设备、环境和界面将随着新的交互可能性不断发展。 视频游戏控制器不断发展，并提供各种输入控制以及触觉反馈。 手势界面将从支持 2D 和 3D 手势的触摸屏（例如 iOS 和 Android 设备上的手势）到在 3D 空间中使用手势与虚拟现实空间、游戏机和物联网设备进行交互，从而使我们能够控制我们的环境.

就像 Google 的 Project Soli 一样，我们可以对鼠标、触控板和操纵杆说sayon​​ara，并使用我们的手和手指来控制设备切换到更自然的手势交互。 在某些情况下——例如在会话 UI 中——输入法可能会从键盘变为语音。 尽管如此，仍然需要以某种形式（语音、触觉和视觉）即时和持续反馈的原则。

基本的交互设计原则将始终在未来系统的设计中发挥核心作用，对于 UX/UI 设计师来说，牢记它们很重要。 它们不是硬性规定，但会带来更好、更具吸引力的产品和服务。 就像成功的电影使用古老的讲故事技术，遵循久经考验的、历史悠久的结构一样，交互设计原则的存在也是有充分理由的。 遵循它们将通过提高可用性和推动其产品的更广泛采用而使任何产品设计师受益。

进一步阅读 Toptal 设计博客：

• 设计原则：层次结构介绍
• UI 设计最佳实践和常见错误
• 探索完形设计原则
• 信息架构综合指南