AI + Design，探索 AI产品界面设计范式

AI时代，人与机器的协作方式正在被重新定义。从简单的数据处理到复杂的决策支持，AI的参与让交互行为发生了深刻变化——不仅是频率和内容的改变，连用户对结果的预期和后续处理方式都截然不同了。工具变得更强大，但随之而来的是用户对智能体验的期待也水涨船高。

过去，用户行为以“执行（Do）”为主，自己动手操作界面；现在，用户更倾向于通过AI表达意图（Chat），让AI代劳执行任务，同时感知AI的处理过程并辅助决策。这种转变要求设计师在传统的GUI和新型的自然语言对话之间找到平衡点，既要照顾对话式体验的流畅，也不能丢下操作式交互的精准。

WHAT｜Hybrid UI 介绍

混合用户界面（Hybrid UI）本质上是在探索AI对话界面与GUI操作界面的融合。通过关键UI元素的巧妙组合，Hybrid UI可以同时满足用户“Chat”和“Do”的意图表达需求。基于实际业务经验，我们归纳出三类界面模式，设计师可以根据产品特性灵活选择：

• Do 为主
  ：以界面操作作为主导，AI仅作为快捷辅助（例如 Quick Bar、固定指令式、内嵌生成式等）。

• Do + Chat 均衡
  ：自然语言与界面操作并重，相互配合（例如双区联动交互、交互式操作气泡等）。

• Chat 为主
  ：几乎完全依赖自然语言交互，界面操作极少（例如侧边式 Copilot、独立 Web Bot 等）。

无论选择哪种模式，用户与AI的交互流程通常都包含四个阶段：

1. 唤醒阶段
   ：让用户了解AI的能力与用法。设计目标是吸引用户，帮助首次接触的用户快速理解AI的功能和预期。相关资产：欢迎&提示。

2. 表达阶段
   ：引导用户向AI准确表达意图。设计目标是让用户快捷、准确表达意图，并清晰查看发送内容。相关资产：用户输入、用户发送。

3. 确认阶段
   ：让用户感知任务的AI执行过程。设计目标是清晰传递任务状态。相关资产：生成过程。

4. 反馈阶段
   ：用户核查并应用AI的结果。设计目标是让用户清晰看到并信任AI的任务结果，并快速应用生成内容。相关资产：结果展示、结果应用。

唤醒｜AI 标识方案

说到AI标识，其实已经形成了一些行业共识。比如Google的Gemini用了☆星星作为Logo，而☆星星和✨魔棒在国外产品中几乎成了AI功能的默认图标。一致的图像设计能有效提高用户对AI功能的可预测性和信任度。随着AI应用场景不断扩展，标识的设计也在持续演变——目前四芒星闪光点是最常见的符号，用于代表AI功能或区分AI生成的内容。

网页端场景示意

悬浮在页面侧边

AI助手可以悬浮在页面侧边，随时待命，像一位随时能搭把手的得力助手。

跟随场景出现入口

某些AI助手会根据特定任务场景适时出现入口，帮助用户高效完成任务，不会一直强刷存在感。

可触发智能工具栏 (Quick Bar)

在编辑场景下，AI助手可以触发智能工具栏，为用户提供便捷的辅助工具，提升工作效率。

手机端应用场景

AI 原生应用

AI应用原生的标识设计，可以提升用户的功能认知和交互效率。

固定在产品底部导航栏

移动端AI入口常固定在产品的底部导航栏，确保用户随时能快速进入AI功能模块。

悬浮在产品侧边

移动端中的AI入口以悬浮形式出现在侧边，不占用过多空间，又能及时提供服务。例如在地图类产品中，用户可随时唤醒AI。

跟随场景出现入口

在特定任务场景中，AI入口贴心适时地出现，助力用户完成任务，比如拍照时自动弹出图像识别入口。

可触发智能工具栏 (Quick Bar)

移动端编辑场景中，AI助手可触发Quick Bar，为编辑任务提供智能化支持。

唤醒｜欢迎提示

当用户首次接触AI产品时，欢迎提示组件能迅速帮他们了解AI的能力和用法，从而降低学习成本，提升初始体验。

设计目标

欢迎 & 提示组件适用于唤醒AI阶段，目标是让用户快速理解AI能实现的功能范围及意图预期：

• 清晰传达AI的功能和能力
  ：帮助用户快速认知并掌握AI的使用方法。

• 降低用户学习成本
  ：精心设计的提示与推荐内容使用户快速上手。

• 提供温馨体验
  ：用视觉吸引力与直观设计提升用户满意度和忠诚度。

欢迎组件

通过生动的文案和直观的介绍，欢迎组件帮助用户了解AI产品，减少学习困惑。其设计注重吸引注意力，为用户打造便捷、温馨的初始体验。
注：欢迎组件通常搭载推荐组件，可适用于不同场景。

提示组件

提示组件通过用户行为、偏好和历史数据，精准推荐内容与服务：

• 个性化推荐
  ：提高用户发现有价值内容的效率。

• 持续优化
  ：随着用户数据的积累动态调整推荐，满足用户的变化需求。

组合场景示例

示意 1：简洁清晰的欢迎介绍与问题推荐

特点：简单直接的文案和设计，帮助用户快速理解。

示意 2：主标题和辅助解释

特点：突出推荐功能，辅助文案可自定义。

示意 3：去除背景，突出推荐功能

特点：推荐功能细化描述，帮助用户更深入理解。

示意 4：加入品牌形象，分组推荐功能

特点：分组信息展示，信息层次清晰。

示意 5：精心设计的视觉效果与文案

特点：通过视觉吸引与引导文案，增强用户兴趣。