一篇讲清楚！设计师必看的交互基础术语扫盲大全

一、全文速览图

最近课程进入交互阶段，着重围绕交互的具体实操和应用做解释，但没有太多涉及基础知识的扫盲和解释，所以今天重新做一遍整理，分享和交互有关的基础信息。

二、交互设计的基本认识

学习交互就先认识一遍交互设计是什么，它和 UI 界面设计，以及 UX 体验设计有什么区别。

UI 界面设计最容易理解，就是把 UI 界面最终视觉效果设计出来的过程，包括排版布局、色彩填充、图标设计等具体操作。UX 体验设计则是以提升用户体验为目标的设计过程，囊括了和设计相关的一切分析与实操步骤，既包含了界面设计也包含了交互设计。

而交互设计，则是制定界面使用方法和功能操作流程的过程，比如制定外卖下单的操作流程、任务提醒的设置步骤、AI 对话的使用方法等等。

如果只看介绍不够直观，想要更深刻地认识什么是交互的话，就可以使用不同应用去实现同一个目标，比如预订车票、下单外卖、美化照片，感受它们之间操作上的差异，而这种差异就是交互上的差异，也是交互设计的结果。

想要区分界面设计、体验设计、交互设计最简单的方法，就是认识设计的出发点。如果仅仅是基于产品需求把界面视觉做出来，那就是 UI 设计。如果目标是为了追求更好的用户体验，且把界面视觉作为提升体验的手段之一去完成，那就是体验设计。如果是为了制定产品界面或功能的操作方法，那就是交互设计。

虽然设计方式有区分，但它们并不是完全孤立的，而是相互之间都有很大的重叠与影响。首先体验设计同时包含视觉设计与交互设计，在正常的设计流程中，会先完成交互设计再做界面设计，交互是视觉的前置条件。

交互设计的结果必然会影响用户体验也会影响界面设计，而界面设计必然也要考虑交互操作与用户体验。总结起来就是做交互的时候不会只为了操作顺手就让界面布局变得特别违和，只做界面视觉时也不应该只顾着好看就完全不管操作的逻辑和可用性。

用一张图来概括它们之间的关系：

交互设计不是界面设计，所以设计的具体对象和交付内容也不同。交互设计主要设计的对象是线框图/原型图，并通过添加连线和备注文案来表达更具体的交互信息与逻辑。

很多新人和外行会把交互设计等同于制作可交互原型，比如使用 Axure 制作线框图并添加交互，或是使用 Figma 创建交互连线和添加动画效果等等。这些大多属于无用功，因为交互设计要交付的是具体方案和明细内容，怎么做看起来直观且高效就怎么做，而可交互原型很难满足这些核心要求。

在真实的项目中不一定会添加一个独立的流程节点给交互设计，就是因为在交互比较简单的需求中，完成界面视觉设计的同时就能“顺便”把交互方式也定了，这样效率更高。

只有在产品功能、逻辑非常复杂，且交互方式影响重大时，才会独立展开交互设计，并在确定交互方案以后再推进界面的视觉设计。这么做才能更好的减少改稿次数，提高设计的整体推进效率。

交互设计在不同的团队和不同的项目中会有不同的要求，可能是显性也可能是隐性的，但它必然是每个 UI 设计师工作中都会涉及且做出决策的内容之一。

三、交互的相关名词扫盲

简单理解完交互以后，下一步我们就围绕交互中最常见的一些名词来做解析，帮助大家更好的扫盲交互的基础认知。

人机交互 Human–Computer Interaction

是人类和机器或软件进行互动的过程总称，比如开关机、输入文本、控制鼠标、打开应用等等都是人机交互。软件界面的交互是人机交互的一部分，是它的子分类之一。

交互设计 Interaction Design

如果没带“人机”前缀，则通常指的是对软件界面交互方式的制定过程，也就是上文解释的内容。

交互界面 User Interface

本质上就是 UI 界面，是可以被交互并实现相关反馈的可视界面。而一张静态的图片或是正在播放的视频图像就不是交互界面。

交互原型 Interactive Prototype

分为静态交互原型和动态交互原型，静态交互原型指的就是用于表达交互方式的普通线框/原型图，而动态交互原型就是为前者添加交互并可以上手进行操作。

交互文档 Interaction Specification

记录项目相关交互信息和逻辑明细的文档，方便团队内部进行传递和留档记录。

交互流程 User Flow

用户在软件内完成某个目标或使用某个功能所经历的步骤，比如从首页完成外卖的点单或是预定酒店/机票等。

交互事件 Interaction

交互事件是用户进行单次交互操作并获得对应反馈的整个过程。包含了交互方式、交互行为、交互反馈、交互动效等下级内容。

在 Figma 中，就是以事件  Interaction 为单位添加交互效果。

交互方式 Interaction Trigger

界面中元素被触发的方式类型，在不同客户端和系统会有不同的触发方式，比如手机上以手指交互为主包括点击、长按、重压、拖拽等，PC 网页端则以鼠标交互为主包括点击、双击、拖拽、快捷键等等。

在 Figma 中交互面板的  Trigger 就用于设置交互方式。

交互操作 User Action

用户在使用界面过程中应用的具体操作，同样也包含点击、长按、双击等操作类型。它和交互方式的差异，在于交互方式是软件内置好的规则，而交互操作是用户的行为，比如界面中的停止按钮要长按但用户单点没有触发，就是交互方式和交互操作错配，两者不能等同起来。

交互反馈 System Feedback

是用户执行某个操作后呈现的结果，比如打开页面、关闭弹窗、完成支付、发送消息等等。

在 Figma 中交互面板的 Action 就用于设置交互反馈的类型。

交互动效 UI Motion

是系统对交互反馈进行呈现的动画效果，比如新页面从下方推入、弹窗从上方滑入，气泡从点击位置弹出等等动画效果。

交互动效即 Figma 中交互面板的 Animation 选项设置。

交互体验 Interaction Experience

交互体验是用户体验中的一部分，是用户在使用产品功能过程中形成的体验，只针对产品使用和操作的部分，不包含如定价、客服、售后等其它因素。

交互可用性 Usability

指的是设计出来的交互流程或事件能否被用户正常使用，且使用起来的难易度如何，是用于评价交互设计方案好坏的主要标准之一。

结尾

交互是 UI 设计师最重要的产出内容之一，也是无法被 AI 取代的部分。尤其在 B 端领域，交互的权重远大于视觉和动效等基础能力。

我们下篇再贱~