WHAT|Hybrid UI 介绍
Do 为主: 以界面操作为主,偶尔唤起 AI 快捷指令。例如 Quick Bar、固定指令式、内嵌生成式等。 Do + Chat 均衡: 自然语言与界面操作均衡配合。例如双区联动交互、交互式操作气泡等。 Chat 为主: 以自然语言为主,几乎没有界面操作。例如侧边式 Copilot、独立 Web Bot 等。
唤醒阶段: 让用户了解 AI 的能力与用法。设计目标是吸引用户,帮助首次接触的用户快速理解 AI 的功能和预期。相关资产:欢迎&提示。 表达阶段: 引导用户向 AI 准确表达意图。设计目标是让用户快捷、准确表达意图,并清晰查看发送内容。相关资产:用户输入、用户发送。 确认阶段: 让用户感知任务的 AI 执行过程。设计目标是清晰传递任务状态。相关资产:生成过程。 反馈阶段: 用户核查并应用 AI 的结果。设计目标是让用户清晰看到并信任 AI 的任务结果,并快速应用生成内容。相关资产:结果展示、结果应用。
网页端场景示意
悬浮在页面侧边
? 跟随场景出现入口
可触发智能工具栏 (Quick Bar)
手机端应用场景
? AI 原生应用
? 固定在产品底部导航栏
? 悬浮在产品侧边
? 跟随场景出现入口
? 可触发智能工具栏 (Quick Bar)
设计目标
清晰传达 AI 的功能和能力: 帮助用户快速认知并掌握 AI 的使用方法。 降低用户学习成本: 精心设计的提示与推荐内容使用户快速上手。 提供温馨体验: 用视觉吸引力与直观设计提升用户满意度和忠诚度。
? 欢迎组件
注: 欢迎组件通常搭载推荐组件,可适用于不同场景。
? 提示组件
个性化推荐: 提高用户发现有价值内容的效率。 持续优化: 随着用户数据的积累动态调整推荐,满足用户的变化需求。
组合场景示例
示意 1:简洁清晰的欢迎介绍与问题推荐
特点: 简单直接的文案和设计,帮助用户快速理解。
示意 2:主标题和辅助解释
特点: 突出推荐功能,辅助文案可自定义。
示意 3:去除背景,突出推荐功能
特点: 推荐功能细化描述,帮助用户更深入理解。
示意 4:加入品牌形象,分组推荐功能
特点: 分组信息展示,信息层次清晰。
示意 5:精心设计的视觉效果与文案
特点: 通过视觉吸引与引导文案,增强用户兴趣。
