朝菌学园ZhaoDesign
朝菌学园是一家专注前沿、未来、智能设计领域的品牌。包含人机交互设计、服务设计、用户体验设计、互动媒体装置、智能产品设计等学习方向，已经帮助数百名学员取得考研、保研与留学申请的名校录取offer
930篇原创内容
Official Account
，
01
写在前面
**“在有效的交互和不可用的交互之间有一条细线。交互设计原则有助于弥合鸿沟。”**执行良好的交互设计毫无疑问是用户体验设计原则的基础之一，在实现出色的用户体验中发挥着巨大的作用。无论视觉设计多么好看，动画多么精美， 如果把交互设计搞砸了，你的用户体验就完蛋了。 如果做对了交互设计，即使美感不足，你也正在朝着更好的用户体验迈进。该产品将有更大的成功机会，反过来讲这也有助于提高利润。交互设计协会（IxDA）对交互设计（IxD）的定义如下：“ 交互设计（Interaction Design，简称IxD） 定义了交互系统的结构和行为。交互设计师致力于在人们和他们使用的产品和服务之间建立有意义的关系，从计算机到移动设备再到应用等，交互设计的实践范围与世界的发展同步。”唐纳德·诺曼也在《日常的设计》中写道：“经验至关重要，因为它决定了人们对他们互动的记忆有多深。”遵循交互设计原则极大地促进了出色的交互设计，而这反过来又有助于体验。今天的所有设备和技术可能会在一夜之间被完全不同的东西所取代，但因为 原则是不朽的，所以我们仍然可以实现出色的交互设计。这些不变的原则是关于什么激励了人们和他们的行为与想法。想象一下，如果每扇门上的每个门把手都以不同的方式工作。一个门把手需要你先向里再向下推才能打开，而另一个必须向上拉才能打开，而另一个则必须向上拉两次然后再向下——这完全是一场灾难。事实上我们的做法是“转动门把手”这个短语指的是 只有唯一一种确定的方法 可以做到这一点。没有人喜欢被“遵守规则”的叫喊打败，但 真正优秀的交互设计依赖于一套标准、最佳实践、惯例和经验法则。 这不是一门糊涂的科学，它们构成了交互设计的基石，并以最少的摩擦使交互成为可能。 界面标准不会扼杀创造力——它们不是硬性规定，而是帮助设计师建立“可用且熟悉的设计”基础的基本准则，并以此为基础进行创新。
02
交互设计原则与最佳实践
优秀的 UI 设计通过将基本的 UI 设计原则与目标驱动的交互设计相结合，实现纯粹的用户愉悦。
- 成功的交互设计采用简单、强烈、明确定义的目标和直观的用户界面。
- 为了使交互保持简单和容易，目标驱动的交互设计只在用户面前提出了让他们完成任务所需的绝对最低限度。
让我们深入探讨一些最重要的原则（但这些并不是所有）：2.1可发现性 Discoverability
基本上在用户眼里，找不到的东西就意味着不存在。我们必须在不到一微秒的时间内明确在 UI 中可以执行哪些操作。比如说使用图标标记就是一个很好的实践。未标记图标无异于在用户的路径中设置障碍，因为用户必须停下来阅读其含义。你打断了“流动”，并且用户对学习你的 UI 一点兴趣都没有。
为了消除猜测，LinkedIn、NPR和Facebook都使用了图标标记。2.2意符 Signifiers
意符与可发现性密切相关，有效使用意符可确保在UI中可以清楚地指示可供性（对对象执行操作的可能性）。 意符可以提供强有力的线索，如信号或路标。意符指示可用交互就像是它们在向用户大喊“我在这里，你可以点击我”（点击我、滑动我等）或者“闪烁绿灯”。UI 中可能存在可供性，但也有可能会保持隐藏，因为如果它缺少意符它就是不可见的。比如说“隐藏的手势交互”，除非用户不小心向左或向右滑动（例如删除某些内容），否则它是不会显示自己的。_“可供性定义了哪些行动是可能的。意符指定人们如何发现这些可能性：意符是符号，是可以做什么的可感知信号。对设计师来说，意符远比可供性重要得多。”——唐纳德·诺曼（2013）_
具有隐藏功能的 AirBnB UI：人们不知道链接是否可以查看列表本身，除非他们将鼠标悬停在该位置下方的标题上。交互保持隐藏，因为没有意符。2.3反馈 Feedback在意符之后，与用户的下一个最重要的沟通是反馈。 反馈意味着行动影响到的明确信息。 这也意味着系统状态的持续可见性，即系统应确保：
- 用户可以随时了解正在发生的事情。
- 有关于他们行动的结果和产品（系统）的当前状态的连续信息。
- 对于产品的状态，即处理、加载、搜索、上传等或一些其他状态变化，使得用户的头脑中没有混淆。
- 执行完一个动作后，很容易确定新的状态。
2.4概念模型和心智模型 Conceptual Models and Mental Models
出色的交互设计提供了用户创建系统良好概念模型所需的所有信息，从而导致他们的理解和控制感。使用该系统时，概念模型增强了结果的可发现性和评估。
心智模型（或认知地图）是用户脑海中的图像，可以告知他们对某种交互的期望以及某些事物在现实世界中的运作方式。认知地图是我们物理环境的内部表示，特别是与空间关系相关联。通过有效地使用用户的心智模型，交互设计师可以创建“感觉”直观的系统。
梅赛德斯的汽车座椅设置是使用心智模型的交互设计的一个很好的例子。用于控制的汽车座椅形状使其直观易于理解和操作。
设计师发明了一个概念模型——设计模型，这就是设计师希望设备或软件工作的方式。将此模型传达给用户的唯一方法是通过 UI 实现它。然后用户与概念模型进行交互，并创建他们自己的关于事物如何工作的心理模型。
设计师无法告诉用户他们希望应用程序如何工作——他们需要适当地设计 UI 以便清楚地传达其目的。换句话说就是使界面易于理解和使用。糟糕的交互设计会需要承担为用户创建错误心理模型的风险。这会导致混乱和用户错误，因为他们会以设计者不希望的方式操作应用程序。
2.5映射 Mappings映射是控件及其在世界中的效果之间的关系。反馈原则是映射的近亲，因为这两个原则共同创造了无缝的体验。几乎所有工件都需要控件和效果之间的某种映射——在界面设计的情况下，它是控件与其结果函数之间的关系。
汽车交互设计：方向盘上的音量控制按钮使用自然映射：点击向右增加，向左减少音量，仪表板上即时反馈。
利用物理类比和文化标准的自然映射可以导致立即理解。例如，设计师可以在 UI 中使用空间类比：
- 要使用滑块组件增加一些值，请向右滑动滑块，
- 减少它向左滑动。
一些自然映射是生物学的，如在普遍标准中，上升的水平代表更多，下降的水平代表更少。
映射到熟悉的物理类比：旋钮和滑块控件（作者Anton Kudin）2.6约束 Constraints
约束是指一种确定如何限制在给定时刻可能发生的用户交互类型的方法。交互设计约束通过为用户提供“导轨”来帮助高效交互——几乎就像指导可能发生的交互的导览一样。
设计中的约束确保只有特定的东西可以被看见或使用，以引导用户进行某些交互。它考虑了大小、规模、比例、重点和状态，以及它们如何和谐地协同工作，帮助创建层次结构并最终影响用户。正确设置约束，也有助于减少用户出错的机会。
约束的反面是当每个选项都提供给用户时，使他们难以决定下一步该做什么。这是选择的原则。选项越多，选择其中任何一个就越困难——我们被所有的可能性压得喘不过气来。
出色的交互设计不会将所有可用选项都放在界面上，而是将其限制在任何特定时刻最重要的部分。
Foursquare使用设计约束来限制可用的交互并专注于用户的任务2.7一致性、标准和启发式 Consistency, Standards and Heuristics
这些都是与模式相关的兄弟（如下）。为了防止用户错误并使应用程序易于学习，交互模型必须保持一致。一致性提高了用户体验、一般可用性和用户使用数字产品的效率。
一致性意味着使用相似的元素来完成相似的任务，并且始终具有相似的功能和行为——一致的界面是遵循规则的界面，例如使用相同的操作来做某事。
所有 iPad 应用程序中的“共享”菜单都是一种一致性模型。它总是以同样的方式工作。
力求高度可用的产品遵循完善的约定、标准、最佳实践和可用性启发式（广泛的经验法则，而不是特定的可用性指南）。
例如，符合约定可能是页面布局的方式。网络用户将 69% 的时间用于查看页面的左半部分，30% 的时间用于查看右半部分。因此，如果网站遵循传统布局，则更有可能获利。
标准可以是面包屑路径，也可以是像密件抄送网站一样在页面顶部的全局导航菜单。
2.8模式和可学习性 Patterns and Learnability
新用户学习导航界面的难易程度如何？没有人愿意学习一种新的做事方式，除非它比之前的方式有显着的好处——但我们经常被未经测试的非传统交互所淹没。
通用组件或模式提供即时可学习性。一旦你学会了如何使用勺子，你就会永远知道如何使用勺子。与骑自行车、滑冰一样……同样的结构适用于我们每天使用的 UI 组件：按钮、文本字段、下拉菜单、复选框、单选按钮、微调器、滑块、图标、搜索框等。
UI 套件使用众所周知的标准模式，例如表单组件
最好的交互设计不会试图重新发明轮子，而是以一种新的有效的方式利用已有的模式。模式不仅鼓励可学习性，而且提供一致性（另一个原则，上面讨论过）并使其符合用户对事物应该如何工作的期望。2.9视觉层次和重点 Visual Hierarchy and Emphasis
在与网站或应用程序交互期间，人们正在寻找与他们的搜索最相关的信息。视觉层次以暗示重要性的方式关注元素的排列。设计中的视觉层次会影响人眼感知所见事物的顺序。并非所有事物都被赋予相同的“权重”——秩序是由感知领域中对象之间的视觉对比创建的。视觉对比（强调）可以通过元素之间的大小、接近度、颜色、不透明度和实际色调对比来实现。
这些移动屏幕使用视觉层次将用户集中在屏幕的特定区域并建立内容重力级别（Vonn的移动 UI 套件）
不要低估视觉层次的力量。它已被非常有效地用于亿万年来的各种设计——建筑、工业设计以及印刷设计。看看一些很棒的海报设计。在交互设计中很好地使用这种技术，正确的事情似乎会在正确的时间以正确的方式出现。
伟大的交互设计师利用强调的力量成功地实现了看起来像魔术一样工作的“精益和粗略”的界面设计。
2.10菲茨定律 Fitts’ Law
这条定律来自于早期对人体肌肉运动和瞄准电报操作员和生产线任务性能的研究，后来用于人机交互。它是指获取目标的时间是目标距离和大小的函数关系。
简单来说，它是关于一个目标的距离和大小，以及它与其他目标的距离。更短的鼠标移动或点击效果更好，即如果目标更接近你的起始位置，则单击或滑动目标总是更快。相关任务也应该彼此靠近，这样用户得鼠标就不必在与 UI 交互的屏幕上飞来飞去。
菲茨定律可以准确预测移动到并选择目标所需的时间。目标可以是按钮、下拉菜单或屏幕上的其他交互元素。如果太远、太小或可点击的元素靠得太近，UI 的效率和可用性都会大大降低。
大按钮很容易定位。利用菲茨定律，还可以引入约束以防止错误：注意“取消”按钮的最左侧位置。2.11古腾堡图、Z和F模式布局 Gutenberg Diagram, Z- and F-Pattern Layouts
这些模式根据内容适用于不同的情况，并且主要由西方观众使用。古腾堡图描述了在查看均匀分布的同质信息时眼睛移动的一般模式——主要是文本重的网站，如博客或新闻网站。古腾堡图表明，强和弱的休闲区域位于阅读重力路径之外，除非以某种方式在视觉上强调，否则很少受到关注。
古腾堡图表明了称为阅读重力的常见用户行为。Z 图案遵循字母 Z 的形状。在某些情况下，这种图案也称为之字形图案。与古腾堡图的主要区别在于 Z 模式表明观众将穿过两个休耕区域。否则它们仍然在同一个地方开始和结束，并且仍然通过中间。与古腾堡一样，设计师会将最重要的信息放在 Z 模式的路径上。
iZettle 的网站使用 Z 图案设计优化视觉扫描F 代表快速，指的是用户如何阅读内容。F 模式由NNGroup眼动追踪研究推广，该研究记录了 200 多名用户在网络上阅读内容。它发现人们的扫描模式在许多不同类型的网站上都非常一致。
眼动追踪研究显示扫描页面时的 F 模式热图（来自NNGroup）为什么这很重要？例如，在电子商务网站上，为了最大限度地进行扫描，你可能希望以遵循 F 模式的方式排列最重要的内容。2.12识别而不是回忆 Recognition Rather than Recall
识别是指我们将事件或信息“识别”为熟悉的能力，而回忆更像是一种“认知负担”，涉及从记忆中提取相关细节。向用户展示他们可以识别的东西比需要从头开始召回项目提高了可用性。
标准图标可立即识别
例如，在 UI 中使用图标非常强大，因为它允许即时识别符号。我们的大脑处理（识别）符号的速度比阅读文本快 1000 倍。如果设计师在对话框中显示一个标准的警告标志图标，它会立即让用户集中注意力，因为下一个动作可能是破坏性的。但是，如果一个图标的设计方式迫使用户回忆和解读含义——例如举起一只手而不是警告图标——它会降低 UI 的效率和可用性。
2.13美学和极简主义设计 Aesthetic and Minimalist Design
**“你必须深入了解一个产品的本质，才能去掉那些不重要的部分。”**
**——乔纳森·艾夫**
这是最具挑战性的原则之一，因为它很难。趋势是设计师和产品经理在阳光下添加每个可用的选项，并让用户决定他们想要采取的路径。这确实是一种懒惰的方法，但是它导致产品充满了不必要的混乱。
Apple 一直是伟大美学和极简、简约设计的长期倡导者
界面需要清除不支持用户目标和任务的不必要元素和内容。设计师不仅要设计美观的 UI，还要在用户流中优先考虑屏幕到屏幕的信息。使用视觉层次结构和强调的魔力，只应呈现用户完成任务所需的基本和绝对最少的信息。
米开朗基罗谈到他的作品时说：“我在大理石中看到了天使，我一直在雕刻，直到我让他自由。”
从杂乱到简单：由Kelsey Raymond重新设计的登机牌
设计一个极简、美观和简单的交互要求设计师准确了解人们使用产品的那一刻发生了什么，并摆脱所有不必要的东西。进行深入的用户研究和测试以了解用户将如何使用产品通常是最好的方法。
2.13错误预防 Error Prevention
用户在执行任务时经常会分心，因此通过视觉强调、提供建议和使用精心设计的约束来防止无意识的错误是关键。一种防错形式（也称为Poka-Yoke）是指实施故障安全机制以防止流程产生错误。
防止错误的最好方法之一是设计一个更好的心智模型。当设计者的模型和对系统应该如何工作的解释与用户的心智模型不匹配时，就会发生许多用户错误。
标准设计约定会有所帮助（上面提到的原则之一），因为它们可以帮助用户了解他们可以采取的行动。与你的网站或应用程序交互的用户已经使用了数以千计的其他网站和应用程序，并期望常见的交互元素以某种方式呈现和工作。当你的产品偏离这些约定时，可能会出现容易出错的情况。
在发生错误之前发出警告并在破坏性行动之前确认。比实施良好的错误消息更好的是精心设计，可以从一开始就防止问题发生。尝试消除容易出错的情况并继续检查它们。
03
交互设计的未来
新的设备、环境和界面将随着新的交互可能性不断发展。视频游戏控制器不断发展，并提供各种输入控制以及触觉反馈。手势界面将从支持 2D 和 3D 手势的触摸屏（例如，iOS 和 Android 设备上的手势）到在 3D 空间中使用手势与虚拟现实空间、游戏机和物联网设备进行交互，从而使我们能够控制我们的环境。
就像 Google 的Project Soli一样，我们可以对鼠标、触控板和操纵杆说拜拜，并使用我们的手和手指来控制设备切换到更自然的手势交互。在某些情况下，例如在会话 UI 中输入法可能会从键盘变为语音。尽管如此，仍然需要以某种形式（语音、触觉和视觉）即时和持续反馈的原则。
Google 的 Project Soli 手势界面控制使用手指（滑块说明效果）基本的交互设计原则将始终在未来系统的设计中发挥核心作用，对于UX/UI 设计师来说，牢记它们很重要。它们不是硬性规定，但会带来更好、更具吸引力的产品和服务。就像成功的电影使用古老的讲故事技术，遵循久经考验的、历史悠久的结构一样，交互设计原则的存在也是有充分理由的。遵循它们将通过提高可用性和推动其产品的更广泛采用而使任何产品设计师受益。
ABOUT US
参考文章：
作者：
Miklos Philips
译者：糖醋排菇
为尊重版权和译者
转载请联系我们