AI + Design，探索 AI产品界面设计范式
AI + Design，探索 AI产品界面设计范式
随着人工智能（AI）技术的快速发展，人与 AI 配合的工作方式变得更加多样化，从简单的数据处理到复杂的决策制定。伴随这种协作方式的拓展，用户交互行为也发生了深刻变化，包括交互的频率、方式、内容以及对结果的预期和处理等。AI 不仅带来了强大的工具功能，也提高了用户对智能体验的期望。
在 AI 时代，用户行为从以执行行为（DO）为主，转变为用户通过 AI 提供意图信息（Chat），让 AI 执行任务，同时感知 AI 的过程和结果，并辅助决策。这种转变要求设计师在传统 GUI 和新型自然语言对话方式之间找到平衡，兼顾用户的对话式和操作式体验。
Hybrid UI 介绍
混合用户界面（Hybrid UI） 探索 AI 对话式界面和 GUI 操作界面的融合。通过不同的关键 UI 元素，Hybrid UI 解决用户 Chat 和 Do 的意图表达需求。
基于业务实践，设计师可以根据产品需求选择以下三种界面模式：
以操作为主：以界面操作为主，偶尔唤起 AI 快捷指令。例如 Quick Bar、固定指令式、内嵌生成式等。
对话与操作均衡：自然语言与界面操作均衡配合。例如双区联动交互、交互式操作气泡等。
以对话为主：以自然语言为主，几乎没有界面操作。例如侧边式 Copilot、独立 Web Bot 等。
Hybrid UI 设计通常包括四个阶段：
唤醒阶段：让用户了解 AI 的能力与用法。设计目标是吸引用户，帮助首次接触的用户快速理解 AI 的功能和预期。相关资产：欢迎&提示。
表达阶段：引导用户向 AI 准确表达意图。设计目标是让用户快捷、准确表达意图，并清晰查看发送内容。相关资产：用户输入、用户发送。
确认阶段：让用户感知任务的 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：精心设计的视觉效果与文案：通过视觉吸引与引导文案，增强用户兴趣。