超多案例！前谷歌产品总监是怎样优化 AI 对话式UI的？

编者按：Luke Wroblewski 是前谷歌产品总监，曾参与到 Google 的全公司指标分析、Blogger、Social Good、Location Sharing 等关键产品的设计，如今他是 IxDA 的创始人，有自己的设计公司，并且在伊利诺伊州大学为研究生教授 UX 设计。随着 AI 技术大规模普及，他也在自己的网站上用上了类 GPT 的对话式 AI，而在创建 AI 对话式 UI 的过程中，他注意到现在常见 AI 交互界面中的问题，并且在自己的 Ask LukeW 中探索了这种界面模式的优化方案。下面是他的探索和摸索过程：

人工智能技术的发展，对人机交互提出了新的需求，新的交互逻辑之下，我们需要有对应的 UI 界面来支持它们。目前许多大型的语言模型（LLM）在交互上都是采用的「对话式UI」，而我们也可以在聊天对话式的交互基础上，来扩展它们的实用性。

首先，什么是对话式 UI？我们每天都会在即时通讯类的工具当中沉浸几个小时，所以绝大多数的人都熟悉这种模式。对话的参与者所发送的内容通常会包裹在一个视觉元素当中（一个气泡对话框）中，而这些内容会按照特定的顺序排列（通常是按照时间排序，自上而下），每个内容大小则决定了它在屏幕上所占据的空间。

为了说明这一点， 我这里有一个非常简单的聊天界面，有2个参与者，最新发送的内容会在最底部呈现，回复内容的输入框在最下方。很熟悉对吧？这种交互方式有一个显而易见的优势：作为用户我们对于这种交互模式极度熟悉，上手非常简单。

折叠和展开

在对话界面当中，如果双方（或者多方）所发送的内容较短的时候，简单的堆叠式的对话框还是很好用的。但是，如果我提出的问题文本较短，但是所获得的回复是长篇大论的文本的时候，会发生什么？在和 Ask LukeW 这样的大型语言模型（LLM）AI工具交互的时候，这种情况就非常常见。

这种情况下，我们可能会在视觉上对问题和答案进行分组（将对应的问题和答案分为一组），甚至会试图折叠更早的问答组，以方便视觉聚焦于当下的答案，这样更易于快速扫读。这会让当前的问题和答案拥有更高的优先级，你可以看看下方的问答界面，来对比双方的优劣：

以下是 Ask LukeW 上的问答界面的设计。之前的问题和答案会折叠起来，折叠后的控件尺寸接近，在视觉上干扰更少，而且具有辨识度，视觉也更加聚焦于当前的问答。

如果你想查看更早的问答，只需要点击对应的条目，它就会展开，而其他的条目会自动折叠。不过可能有用户会需要同时展开多个问答，这个需要根据实际情况来讨论。

融合交互

当我们在手机和电脑上使用即时通讯软件交互的时候，我们不仅会发送文本，还会发送图片，视频，甚至会转账，发送游戏链接等等。它们大都会以一个对话框的形式呈现，嵌入到整个信息流当中。

随着大型语言模型（LLM）的支持范围逐渐扩展，AI 的对话式 UI 所承载的媒体形态和交互类型也应该增加，不仅仅停留在文本的呈现，还会包含图片、视频、表单、代码甚至 APP。为了在 Ask LukeW 上解决这些问题，我们添加了一种一致的方式来呈现这些对象，用户可以选择每个不同的对象，来单独交互。

下面的案例展示了 AI 以文章或者音频的格式来回复用户需求时候的视觉效果，用户点击特定的问答组，对应的文章控件、播放器控件会呈现出对应的展开视图，用户看到的是重新格式化呈现的富文本，或者是可供播放音频内容的播放器界面，而用户可以在这些回复的内容的基础上提出新的需求。

在你阅读完文章、听完音频内容之后，再提出后续问题的时候，这些内容就会自动折叠收纳起来，不过这种情况也有例外。通常的图片、图文、文本类的内容在被折叠之后，会在折叠后的控件右侧有一个缩略图。而包含功能性控件（比如播放器、阅读器、第三方 APP 等）的时候，折叠后的控件左侧会有个明显的缩略图标识，通过空间和缩略图标识，用户可以快速定位到之前的问答。

折叠，扩展，控件对象细节处理，这当中所有的事情，都是围绕着对话式 UI 的优化来进行的，从根本上来说，它是基于我们熟悉的对话界面，针对 AI 生成内容进行针对性的优化。在 Ask LukeW 当中，这些调整都算不得大范围的重设计。

结语

那么这些设计是否适用于所有的 LLM 类的大模型呢？我相信我们很快能够看到结果，据我所知，现在每家科技公司都在试图将 AI 添加到他们的产品当中，在这个过程中，他们会遭遇到和我们同样的用户体验和界面模式的问题，很大概率大家都会面对相同的限制，选择类似的解决方案。