我要投稿

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

发布日期：2024-12-14 13:13:32 浏览次数： 2697

作者：AGI设计之路

微信搜一搜，关注“AGI设计之路”

随着人工智能（AI）技术的快速发展，人与 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 的能力与用法。设计目标是吸引用户，帮助首次接触的用户快速理解 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：精心设计的视觉效果与文案

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

53AI，企业落地大模型首选服务商

产品：场景落地咨询+大模型应用平台+行业解决方案

承诺：免费POC验证，效果达标后再合作。零风险落地应用大模型，已交付160+中大型企业

相关资讯

2025-11-01

YouMind: 你的AI创作新范式

2025-10-31

3个颠覆认知的AI学习真相，90%的人都想错了！

2025-10-29

初创公司的增长之道：如何让AI主动推荐你的产品？（下）

2025-10-29

AI将所有生意都卷成了创意产业

2025-10-28

ubuntu 本地部署MinerU完成文档解析

2025-10-27

AI浏览器的正确使用姿势是什么？我从Dia的这90+个Skills里找到了一些好场景

2025-10-27

魔笔 AI Chat Builder：让 AI 对话秒变可交互界面

2025-10-20

天猫行业中后台前端研发Agent设计

了解更多

160+中大型企业正在使用53AI

立即咨询预约演示

把握AI发展的机遇，共同探索、共同进步

2025-01-22

如何打造基于GenAI的员工服务机器人

2025-01-22

热点资讯

一个用 AI 起号的新思路

2025-08-06

豆包 Seedream 4.0：图像创作革新者与精简使用攻略

2025-09-17

AI走进中小学课堂案例研究：四个项目，四种探索

2025-09-04

185个真实AI应用场景案例，涵盖六大版块，全球170多个公司和组织

2025-09-02

公开帮我每天赚钱的 AI 工作流之产品分析

2025-09-15

AI批量抠图！5秒抠30张图，毛发/玻璃/多人物场景一键分离

2025-09-05

AI生成PPT真能直接用吗？我们替你测了11款产品

2025-08-22

用字节Seedream4.0直出4K中文海报的22种懒人方法，我找全了！

2025-09-18

AI 浪潮下，“掉队”=“淘汰”，普通人能否成为AI小专家？

2025-08-20

所有AI的馈赠，早已在暗中标好了价格｜北大最新论文解读

2025-10-10

大家都在问

一周的数据分析现在几秒完成，一位医生如何用AI给工作减负？

2025-09-11

企业、垂类应用都在用 AI 搜索做什么？

2025-09-09

AI 时代，为什么文档处理依然这么难？

2025-09-06

学AI-笔记025：如何利用AI读书助力高效知识吸收？

2025-08-28

我为什么不建议用AI读文献？

2025-08-24

AI 浪潮下，“掉队”=“淘汰”，普通人能否成为AI小专家？

2025-08-20

AI 项目的 “真与假”：为什么聊了很多，却没优质项目？

2025-08-20

用AI写论文发现不像是人写的，自己写文发现又不够深度，咋整？

2025-08-18

热门标签

内容创作大模型技术个人提效 langchain llamaindex 多模态技术 RAG技术智能客服知识图谱模型微调 RAGFlow coze Dify Fastgpt Bisheng Qanything AI+汽车 AI+金融 AI+工业 AI+培训 AI+SaaS 提示词框架提示词技巧 AI+电商 AI面试数字员工 ChatBI 知识管理开源大模型智能营销智能硬件智能化改造 AI+医疗 MaxKB