QQ Browser|新搜索 AI 设计迭代

D2CTOCUX Design

当 AI 介入用户的搜索时,往往作为“生产者”为用户提供解决问题的内容。但在不同场景下,AI 应该生产哪些内容,以及是否所有场景都应该让 AI 承担“生产者”的角色。从该问题出发,我们探索了 AI 扮演多种角色下的搜索体验设计。

QQ Browser 新搜索体验总览
Role / 角色
Product Design Intern
Skills / 技能
Prototyping
AI Engineering
UX Design
Duration / 时间
May 2026 -
Sept 2026
Tools / 工具
Figma
Codex
Codebuddy

重构搜索:让 AI 依照场景饰演不同角色

  • 原有搜索结果页以网页链接为主要承载形式,以出行场景为例,无论用户搜索实体名词、具体问答还是规划任务,结果表达都较为相似,无法精准满足用户诉求。
  • 同时,PC 与移动端采用两套不同的设计框架与开发体系,新增功能需要两套设计重复开发,成本较高。
传统搜索结果与新搜索框架对比

本次改版通过统一多端搜索框架,并根据 Query 的意图与任务复杂度选择不同结果形态,使搜索能够从网页检索进一步延伸至实体认知、信息解答与任务规划。

旧系统面临的两类体验问题

一、平台双端重复建设

PC 与移动端采用不同的页面结构和组件体系,同一能力需要重复设计、开发和验收,增加维护成本,也导致不同终端的体验难以保持同步。

PC 与移动端双端重复建设问题

二、搜索结果同质化 保有优化空间

以出行场景为例,过去的搜索结果虽针对特定场景使用 AI 进行了优化,但整体呈现仍较同质,难以匹配不同用户意图与任务深度

旧搜索结果同质化问题 新搜索结果形态优化方向

让结果形态匹配用户意图

简单问题快速回答,模糊问题保留探索空间,复杂任务提供更深度的工具。

提升结果信息的组织效率

涉及多维度信息的结果,需要考虑信息优先级与多模态组合的方式,提升用户认知效率。

统一跨端基础能力

建立一致的设计语义和组件体系,使同一能力能够适配不同屏幕。

实体探索型|AI 帮助用户快速建立整体认知

用户搜索一个实体词:如云南大理/故宫博物院,通常希望快速建立对对象的整体认知,如包含照片图片、百科简介或是空间位置、相关动态等。传统通搜往往将这些内容分散在不同结果与模态中,需要用户自行检索、判断并整合,增加了获取完整认知的成本。

实体探索型搜索结果的 Bento 方案

从 Bento 形式上获得灵感,用模块化重组搜索结果,将传统的线性信息流按优先级转化为具有明确层级的结构化信息视图,帮助用户快速建立实体认知,同时保留传统结果作为进一步探索与来源验证的入口。

实体探索型搜索结果的信息组织

制定 Bento 模块划分规则 使得信息展示合理 & AI 理解友好

在达到最终方案之前,我们探索了多形式的网格系统,以确保各模块在不同尺寸屏幕下的展示体验,输出明确的排列规则。过程中使用了 AI 搭建试验工具,提升调试效率。

Bento 网格模块划分方案

AI 依据用户的个性点击数据,Bento 网格会完成自动化的内容模块重排,做到千人千面的信息供给。

AI 从内容生产者到内容规划者的角色转变 Bento 内容模块个性化重排

统一多端设计 平衡使用体验

在统一信息结构与组件体系的基础上,根据不同屏幕尺寸动态调整栅格、模块状态与信息密度,保证跨端一致性的同时兼顾各端的浏览效率与使用体验。

PC 端特点

支持并行阅读,具有最大阅读宽度;横向滚动操作不便;存在 Hover 操作状态。

移动端特点

采用线性阅读;信息可以横向滑动;需严格控制垂直空间坪效与信息密度。

中等尺寸特点

横向空间的可用性更强,按用户具体操作设备决定交互方式。

沉淀Bento组件资产 多场景复用

将 Bento 中的图片、地图、知识信息、评价等高频模块沉淀为可复用组件,并根据不同垂类的信息特征灵活组合,在保持体验一致性的同时提升组件复用与扩展效率。

Bento 高频模块组件资产

复杂任务型|按需生成轻量应用承接复杂诉求

当用户诉求涉及景点比较、空间关系、筛选等多步骤任务时,单一文本答案难以有效承载。通过按需生成轻量 MiniApp,将 AI 整合的信息转化为地图、卡片与交互操作,提升用户任务体验。

复杂任务型搜索的轻量应用方案

关于 A2UI

模型不是直接写页面,而是生成标准 A2UI JSON;前端再把 JSON 按照 A2UI 组件协议渲染成真实界面;在过程中,由于 AI 组件库暂未搭建完全,我们采取了一个过渡模式,先定制好标准的结构化模板,再让 AI 按照规则填充内容。

A2UI 的页面生成与渲染流程 轻量应用的 A2UI 组件方案

在轻量应用中完成深度浏览 避免反复重搜&跳转

以地图承载景点的空间关系,并与列表、筛选和详情形成联动,让用户在同一界面内完成景点发现、定位与信息比较;详情层复用既有 Bento 资产,保持体验多样一致并降低建设成本。

地图、列表和详情联动的轻量应用

阶段性成果

沉淀业务组件
完成组件与组合规则 为垂类复用提供基础
双端适配设计
统一Bento双端适配 提升后续维护效率
持续迭代中
已开发 上线数据待验证与迭代

复盘与思考

结果形态不是越丰富越好

Bento、AI Overview 或 MiniApp 不是更“高级”的结果形态,而是回到用户任务本身,不同 Query 需要不同的信息深度与交互方式,设计的关键不是增加更多内容,而是遵循意图的判断。

AI 是设计材料也是设计工具

AI 不仅为用户场景带来了新的问题解决方式,也正在重塑产品的设计与生产流程。它既可以参与内容生成、界面构建与产品生产,也能够介入研究、方案探索与设计表达等环节,进一步提升设计表达的效率,并赋予设计自闭环的能力。