AI + Design,探索 AI产品界面设计范式
发布日期:2024-12-14 13:13:32
浏览次数: 1766
来源: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 的任务结果,并快速应用生成内容。相关资产:结果展示、结果应用。
回到 Google 的 Gemini 采用☆星星作为 Logo,其实把☆星星和? 魔棒当做 AI 功能的图标,已经在国外产品中是一种共识了。一致的图像设计可提高用户对 AI 的可预测性和信任度。随着 AI 应用场景的发展,标识的设计和使用也在演变。目前,四芒星闪光点是常见符号,代表 AI 功能,或用于区分 AI 生成的信息。
网页端场景示意
悬浮在页面侧边
AI 助手可悬浮在页面侧边,随时待命,为用户提供高效协助,是工作中的得力伙伴。? 跟随场景出现入口
某些 AI 助手会根据特定任务场景适时出现入口,帮助用户高效完成任务。可触发智能工具栏 (Quick Bar)
编辑场景下,AI 助手可触发智能工具栏,为用户提供便捷的辅助工具,提升工作效率。
手机端应用场景
? AI 原生应用
AI 应用原生的标识设计,可以提升用户的功能认知和交互效率。? 固定在产品底部导航栏
移动端 AI 入口常固定在产品的底部导航栏,确保用户随时能快速进入 AI 功能模块。![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWp1TG0wT0FoUTIxNENnVjMycUVmVDhYVDRpYU94Z0c1eDc5UmRBWmlhcUtTM2NwQnZiWXU1MnJVUS82NDA/d3hfZm10PWpwZWc=)
? 悬浮在产品侧边
移动端中的 AI 入口以悬浮形式出现在侧边,不占用过多空间,又能及时提供服务。例如在地图类产品中,用户可随时唤醒 AI。![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWpXenJibGhuMFNUTjBvdVBGaWM4Z3dNSk5hYzBwM05PRlJTQ2lhVmtwUnhHbG1yRWdjTTl2Qzk3dy82NDA/d3hfZm10PWpwZWc=)
? 跟随场景出现入口
在特定任务场景中,AI 入口贴心适时地出现,助力用户完成任务。![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWpidWt1ZEZUZnc2V09DTEVrZWp6MVRyUjYxS2REOUFJZWtxN0p5aWJDRzE3aWJqMXkwYXR4UXVpYkEvNjQwP3d4X2ZtdD1qcGVn)
? 可触发智能工具栏 (Quick Bar)
移动端编辑场景中,AI 助手可触发 Quick Bar,为编辑任务提供智能化支持。![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWo3WWY2ZHNTcFBtaWFaaWM0TkU3Rkd0YU4zZ1M0S3RnV2F4MGMzVnB3RFlmQk9vaWJKUzVpYlVqTVpBLzY0MD93eF9mbXQ9anBlZw==)
当用户首次接触 AI 产品时,欢迎提示组件可迅速帮助他们了解 AI 的能力和用法,从而降低学习成本,提升初始体验。设计目标
欢迎 & 提示组件适用于唤醒 AI 阶段,目标是让用户快速理解 AI 能实现的功能范围及意图预期:- 清晰传达 AI 的功能和能力: 帮助用户快速认知并掌握 AI 的使用方法。
- 降低用户学习成本: 精心设计的提示与推荐内容使用户快速上手。
- 提供温馨体验: 用视觉吸引力与直观设计提升用户满意度和忠诚度。
? 欢迎组件
通过生动的文案和直观的介绍,欢迎组件帮助用户了解 AI 产品,减少学习困惑。其设计注重吸引注意力,为用户打造便捷、温馨的初始体验。注: 欢迎组件通常搭载推荐组件,可适用于不同场景。
![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWpBTWJ2NDB3a2Q3cnhOMDhoSGdyc0k3aWJDaWFTbFBBTDJhc3RZOEZzS2ZHWWljTlVXRENaaWJTczVRLzY0MD93eF9mbXQ9anBlZw==)
? 提示组件
提示组件通过用户行为、偏好和历史数据,精准推荐内容与服务:- 持续优化: 随着用户数据的积累动态调整推荐,满足用户的变化需求。
组合场景示例
示意 1:简洁清晰的欢迎介绍与问题推荐
![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWpKSFF2S29FRmlhQ2dXNnBqWGZueVRoMEJmWTlaTW1aeVlzNWpzQlRpY2ZoV2JVYmhjVDdreUo5dy82NDA/d3hfZm10PWpwZWc=)
示意 2:主标题和辅助解释
![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWpjaDV3Y0lzeU80UkZvbHc0aGRJY1lVR2xoU1pHNWlidFZCVno2YlBWZnc1N2liSjVERFhDSHlvUS82NDA/d3hfZm10PWpwZWc=)
示意 3:去除背景,突出推荐功能
![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWpXelpSQWNwckR4ZmNJOUR4UFpxY0xweEN5Mkk0Y1NxdUdqYXBIQk1pYnVGekU0WkVNaFNCbFR3LzY0MD93eF9mbXQ9anBlZw==)
示意 4:加入品牌形象,分组推荐功能
![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWpRV1B0clhwYnZCOVRGSVZKMTA0VnZXOXRER1FrZk0zaWJYNTdyWWJuV2JFTm9ZWGV4cnNXbW9BLzY0MD93eF9mbXQ9anBlZw==)
示意 5:精心设计的视觉效果与文案
![](https://api.ibos.cn/v4/weapparticle/accesswximg?aid=96558&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vTlh5NnZvaWJuclRrZVN3S0tEME9TU0NEVkdWdGpzRWppYjB0U283dnJZcHFlZ0JFeHZQSlJ2bUhXNUg2Z0JDaWJoelJvVzdPb2lidVAwZzA5TGdBdGppYW9nLzY0MD93eF9mbXQ9anBlZw==)
产品:场景落地咨询+大模型应用平台+行业解决方案
承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业