編者按：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 添加到他們的產品當中，在這個過程中，他們會遭遇到和我們同樣的用戶體驗和界面模式的問題，很大概率大家都會面對相同的限制，選擇類似的解決方案。