AI Chat产品设计中的思考③容器/Ctn

北京/产品设计师/2天前/268浏览

版权

在这之前，聊一个关于UI的话题。之前我和几个大厂资深的UI设计师朋友聊天，讨论什么是最顶级的UI设计，或者说，UI设计的最高境界是什么。一开始大家都推荐自己欣赏的设计师或者APP，后来逐渐讨论到用户视角而非设计师视角，最后得到的答案是：无感，也就是“透明的设计”——最好的设计就像空气，你赖以生存却感觉不到它的存在。打个比方：你想购买一款适合自己的口红，你从进入app到付完款，所有操作一气呵成没有阻碍，等回忆起整个过程时，你没有留意到UI有多漂亮，动效有多炫酷，你只是觉得一切都自然而然，顺畅无比。传统的移动互联网产品设计逻辑是“构建路径”

，也就是大家常说的用户地图，核心是流量和曝光。AI Agent App 的设计逻辑是

“响应意图”，核心是效率和转化。

在 AI 时代，这种“无感”有了更深层的含义：无感，是让用户忘记“操作”，只关注“结果”。

不仅是视觉上的干扰极小，更是决策成本的降维。

AI时代，可以把Chatfeed 看做一个新的操作系统界面，而容器，就是这个系统上运行的“微型应用”。

AI 负责“思考”，而容器负责“行动”。

没有容器，AI 的智能输出只能停留在文本层面，无法转化为

高效率、高转化、高信任度

的“无感”体验。

Collect

认识容器

1.1 什么是容器

在Chatfeed中，容器（Container，简写Ctn）是承载信息输出的标准化UI外壳。它不仅仅是个对话气泡，而是根据内容属性（文本、多媒体（图文/视频）、交互控件、商品SKU）自适应的交互单元。

当前市面上的容器大概分为五大类：

文本容器、多媒体容器、基础交互容器、专业输出容器、商业交易容器。

1.1.1 文本容器：

用于承载和结构化文字信息的容器。它负责将 AI 输出的诊断报告、分析总结、长篇建议等信息进行

结构化、分层级

展示，以提高专业度和可读性。

Collect

1.1.2 多媒体容器：

用于承载图片、视频、音频等多媒体内容的容器。负责提供视觉证据（如美妆对比图）、情感信息（如心理安抚语音）和教学演示（如推拿视频），增强感知和表现力。

Collect

1.1.3 基础交互容器：

用于在对话流中直接收集用户输入或引导用户行动的容器。追求

通用性

和

易用性

，目的是让用户快速输入信息。

Collect

1.1.4 专业输出容器：

用于在对话流中展示复杂计算和功能结果，如代码块、HTML 预览、3D 模型、数据分析图表，展示 AI 复杂工作的成果（秀肌肉）。

Collect

1.1.5 商业交易容器：

用于展示商品或服务的核心信息，以达成商业转化的容器。负责提供图片、价格、卖点和明确的 CTA（call to action），是实现对话内转化的关键载体。

Collect

容器的设计原则

2.2.1一致性：

建立统一的“骨架”，允许差异化的“皮肤”。

所有容器应遵循统一的圆角、间距、阴影（如有）和品牌色体系，但允许根据智能体人设进行微调（如：医疗类智能体偏理性、克制的蓝白体系，美妆专家偏高对比、时尚感更强的配色），但

交互逻辑和底层规范必须要统一

。

Collect

2.2.2高信噪比：降噪处理，让核心信息秒捕捉。

Chatfeed 的屏幕空间寸土寸金，且 AI 生成的内容往往容易冗长。设计的目标是让用户在 0.5 秒内捕捉到重点，为此，设计层面至少要做到两件事：

① 清晰的视觉分层：

分割线可以用，但必须克制、弱化；
优先通过字号、字重、留白建立层级；
让“重点自己跳出来”，而不是靠用户仔细找

② 强制内容结构化（而不是长文）

严禁出现大段密集的文本。以医疗场景为例，智能体的回复应被拆解为清晰的视觉区块，例如：

Collect

（通常需要 PE 工程层+ 前端渲染层双向协作），而不是一段数百字的长文。

这样就有几个好处：

①用户瞬间知道我在哪/下面是啥/接下来干啥，极大降低大脑的定位成本，直接把阅读体验提升好几个档次；

②把AI最容易犯的“过度解释”直接框死，让文本量大幅缩短，清晰度大幅提升。

③结构化的内容不容易被带智能体的人设带跑偏。

Collect

But，数字人场景需要反着来。

我们曾经遇到一个典型问题：

有个智能体版本过于追求智能体的回复效果像专家，模仿专家的说话语气与口头禅，忽略了内容必须为解决问题服务，导致体验特别差，看半天找不到重点。比如大段铺垫没有重点，口头禅被放大，输出的内容像是在cos专家而不是解决问题。在后续迭代中通过PE工程把内容在一定程度上结构化后，体验就拔高了好几个档次。

但是在数字人场景需要“反着来”，当然这不是说就得丢掉结构化，而是把结构化隐藏。因为在数字人场景，更需要的反而是“表演”。

数字人天生有两个东西：

Collect

如果直接把结构化文本原样呈现，很容易产生强烈的机械感和违和感，反而不利于信任建立。

例如，当用户说“我最近失眠”：数字人医生不应直接输出

“症状：睡眠不足；原因：压力过大；建议：冥想”

而应使用人类更自然的表达方式去覆盖结构：

“听起来你最近确实挺累的，尤其是睡眠这块有点吃不消。很可能还是压力堆得有点多了。不如我先给你几条能立刻缓一缓的小方法，我们一步一步来。”

Collect

2.2.3行动导向：

提升交互的可供性，让“内容”本身成为触发器。

ChatFeed 的容器最终一定会走向行动，尤其是在商业化场景中。但行动不等于一定要一个 Button。

更合理的方法是采用全区域触发方式，比如整个商品卡片或多媒体封面，将整个容器或整行块状信息设定为点击热区，这样做也符合菲茨定律，即目标越大，点击越容易，体验越流畅。

一般在全交互流程的设计中，会采取分级触发策略，比如导航或者查看类行为，就使用全区域触发，比如点击整个SKU卡片后进入详情页。到了交易类或者承诺类行为，就要保留显性的button，例如涉及支付或不可撤销的删除，这种场景为了增加用户的确认感与掌控感，依然需要显性的button来增加摩擦力。

Collect

2.2.4流式体验：将等待转化为“正在发生”

由于大模型生成内容需要时间，容器不能像传统 App 那样瞬间加载，也不能让用户看着空白屏幕干等。打印机式的流式输出+骨架屏的方式，是主流前沿的AI软件常用的方式。

一般说起加载，大家都会想到传统的加载动效或骨架屏，但是在Chatfeed 中这种方式又显得有点呆不够智能。单纯的骨架屏需要确定性的页面，比如电商详情页，它需要预先知道内容的布局和尺寸。

但在 Chatfeed 中，AI 生成的内容（如文本长度、图片数量、卡片类型）在生成前是

不确定

的。因此，在 AI Chatfeed 中，我们的“流式体验”设计需要分层处理，并引入“基于模板的骨架”概念。

简单来说就是区分

内容类型

和

容器类型，并依此采用两种不同的设计策略。

策略1：内容类型尚未确定（纯文本 / 思考中）

对于纯文本、或 AI 正在“思考”尚未确定容器类型时，我们不使用骨架屏，而是依赖于动态流畅的过渡

打字机效果：
将用户的等待转化为阅读，让文本内容逐字出现，给用户一种正在实时生成而非卡顿的感知。文本气泡的高度尺寸应支持动态平滑高度，避免文本内容增加时，整个气泡边缘生硬地跳动。
动态高度的平滑过渡：
当容器内容逐渐生成时，容器的高度和 Chatfeed 的滚动位置必须平滑过渡，防止用户感到画面抖动或者遮挡。