高手总结！深挖体验设计中的交互组件（上）

前言

组件是体验设计工作中的一个重要概念，很多设计师接触最多的组件类型是 UI 组件，而对交互组件处于一知半解的状态。今天本篇文章将从底层逻辑出发，并结合具体的交互案例帮助大家了解什么是交互组件，分析和研究常见交互组件的运行机制。

推荐阅读：

一、交互组件是什么？

在体验设计中，交互组件是一种可复用的设计元素，用于实现特定的产品功能。相较于 UI 组件，它侧重于产品功能的实现和用户目标的达成。设计师可以对既定交互组件进行优化以提升产品的易用性和可用性。

二、交互组件的特点是什么？

1. 交互组件通常具有以下特点：

可复用性：交互组件具有很强的可复用性，在同一个 app 或同一个设计系统中可以根据业务场景和功能需求复用，在一定程度可以避免重复设计和减少开发工作量。

模块化：交互组件根据业务需求遵循交互逻辑以模块化的方式进行组织，方便设计师进行调用和团队协作，提高设计效率。

可定制性：交互组件不是一成不变的，通常会根据不同的使用场景和需求提供可定制的选项和参数，方便设计师据此进行个性化创作。

易用性：交互组件通常具备易用性特点，例如明确的提示信息和易于操作的界面元素等，以提高用户满意度。

三、常见的交互组件案例与解析

在我们使用交互组件进行项目设计时，需要充分了解不同组件的特点和适用环境。常用的交互组件通常有按钮、弹窗、滑杆、弹出菜单、通知提醒等。以下内容将结合具体案例深挖常见交互组件的底层逻辑，阐述交互组件在体验设计中的作用。

1. 按钮

按钮是一种常见的交互组件，可以用于执行交互动作，展示系统状态。

案例分享：通过使用游戏中心下载文件，研究按钮组件的状态变化和提升按钮组件的可用性。

通过以上我们可以发现，按钮组件的交互特性通常具有以下特点：

1. 按钮的交互层级较高。
2. 按钮文本需要包含表达交互动作的动词，如下载、保存、安装、关注、登录等。也可以增加辅助文本表达系统的运行状态，降低用户等待焦虑。
3. 按钮的交互热区通常为按钮本身。
4. 按钮通常具有默认态、点击态、高亮态等不同状态。

2. 搜索

承载搜索功能的交互组件一般是搜索按钮，搜索框等。

案例分享：使用 qq 音乐搜索框进行模糊搜索/精确搜索操作。

搜索功能需要复杂的系统支撑，上述流程释义仅为典型操作。

搜索框组件通常具有以下特点：

1. 搜索框的位置通常为页面顶部，可以通过滑动等操作隐藏，以便用户沉浸式的使用产品
2. 搜索框的交互层级低于顶部导航栏
3. 搜索框可以用于精准搜索/模糊搜索等任务，通过优化搜索系统可以减低用户输入文本的数量，提高搜索效率
4. 搜索框通常有激活态和未激活态
5. 搜索流程包含的交互手势通常为点击、长按、滑动和键盘输入（语音输入）等

3. 顶部导航栏

顶部导航栏用于单页面中多个平行级模块间的快速切换。

案例分享：体验小米 14 主题商店 app 顶部导航栏的切换操作

通过以上案例我们可以发现顶部导航栏组件的交互操作较为简单，主要为点击和横向滑动。该组件的特点为：

1. 顶部导航栏的位置一般为页面顶部
2. 顶部导航栏的交互手势为点击和横向滑动
3. 可以通过点击模块标签切换，也可以通过滑动不包含横向滑动交互动作的内容区实现切换
4. 顶部导航栏的模块数量可以根据业务定义决定，但最小值为 2

4. 滑杆

滑杆组件用于连续性数值的快速调整，也可以通过优化交互组件兼顾精细操作。

案例分享：体验小米相册编辑功能包含的滑杆组件

通过以上案例我们可以发现滑杆组件一般通过横向拖动完成连续性数值的调整，该组件具有以下特点：

1. 滑杆组件的交互手势为轻触和拖动。
2. 滑杆组件交互效率高，调节速度快。通过优化横向拖动的阻尼，可以同时满足快速调整和精细调整的用户需求。

5. 滑动选择器弹窗

滑动选择器用于连续性数值的调整，交互层级高，会打断用户当前操作，对用户的干扰较大。

案例分享：华为运动健康 app 调整时间的操作

通过以上案例我们可以发现滑动选择器具有以下特点：

1. 通常适用于连续性数值的调整
2. 交互手势为：点击、拖动和滑动
3. 需要通过点击确定按钮完成保存操作

四、总结和建议

本文阐述了交互组件的概念，带大家了解了交互组件的四个特点：可复用性、模块化 、可定制性和易用性。交互组件在体验设计工作中作为一个有力的设计工具，可以用来提升产品的易用性和可用性，可以对设计方案的标准化和可迭代性具有不可替代的作用。同时也会发现交互组件是一个持续优化的设计元素，它服务的对象是产品的设计目标。既定的交互组件具有一定程度的指导意义，我们可以深入挖掘交互组件的功能特性和用法之后，紧密结合用户的真实需求，输出令用户满意的体验设计方案。我们也可以借鉴苹果的人机界面指南（Human Interface Guidelines）、谷歌的 Material Design 等成熟的设计系统，结合项目要求、业务背景等客观因素输出设计方案。

今天主要通过 5 个案例的分享和学习，带大家深入了解了 5 个常见的交互组件。这几个组件可以在一定程度支撑工作中的设计任务，在工作中经常用到的其他组件例如气泡、浮层等，在接下来的时间里再给大家带来分享。