編者按：Luke Wroblewski 是前谷歌產(chǎn)品總監(jiān)，曾參與到 Google 的全公司指標(biāo)分析、Blogger、Social Good、Location Sharing 等關(guān)鍵產(chǎn)品的設(shè)計(jì)，如今他是 IxDA 的創(chuàng)始人，有自己的設(shè)計(jì)公司，并且在伊利諾伊州大學(xué)為研究生教授 UX 設(shè)計(jì)。隨著 AI 技術(shù)大規(guī)模普及，他也在自己的網(wǎng)站上用上了類 GPT 的對(duì)話式 AI，而在創(chuàng)建 AI 對(duì)話式 UI 的過程中，他注意到現(xiàn)在常見 AI 交互界面中的問題，并且在自己的 Ask LukeW 中探索了這種界面模式的優(yōu)化方案。下面是他的探索和摸索過程：

人工智能技術(shù)的發(fā)展，對(duì)人機(jī)交互提出了新的需求，新的交互邏輯之下，我們需要有對(duì)應(yīng)的 UI 界面來支持它們。目前許多大型的語言模型（LLM）在交互上都是采用的「對(duì)話式UI」，而我們也可以在聊天對(duì)話式的交互基礎(chǔ)上，來擴(kuò)展它們的實(shí)用性。

首先，什么是對(duì)話式 UI？我們每天都會(huì)在即時(shí)通訊類的工具當(dāng)中沉浸幾個(gè)小時(shí)，所以絕大多數(shù)的人都熟悉這種模式。對(duì)話的參與者所發(fā)送的內(nèi)容通常會(huì)包裹在一個(gè)視覺元素當(dāng)中（一個(gè)氣泡對(duì)話框）中，而這些內(nèi)容會(huì)按照特定的順序排列（通常是按照時(shí)間排序，自上而下），每個(gè)內(nèi)容大小則決定了它在屏幕上所占據(jù)的空間。

為了說明這一點(diǎn)， 我這里有一個(gè)非常簡單的聊天界面，有2個(gè)參與者，最新發(fā)送的內(nèi)容會(huì)在最底部呈現(xiàn)，回復(fù)內(nèi)容的輸入框在最下方。很熟悉對(duì)吧？這種交互方式有一個(gè)顯而易見的優(yōu)勢(shì)：作為用戶我們對(duì)于這種交互模式極度熟悉，上手非常簡單。

折疊和展開

在對(duì)話界面當(dāng)中，如果雙方（或者多方）所發(fā)送的內(nèi)容較短的時(shí)候，簡單的堆疊式的對(duì)話框還是很好用的。但是，如果我提出的問題文本較短，但是所獲得的回復(fù)是長篇大論的文本的時(shí)候，會(huì)發(fā)生什么？在和 Ask LukeW 這樣的大型語言模型（LLM）AI工具交互的時(shí)候，這種情況就非常常見。

這種情況下，我們可能會(huì)在視覺上對(duì)問題和答案進(jìn)行分組（將對(duì)應(yīng)的問題和答案分為一組），甚至?xí)噲D折疊更早的問答組，以方便視覺聚焦于當(dāng)下的答案，這樣更易于快速掃讀。這會(huì)讓當(dāng)前的問題和答案擁有更高的優(yōu)先級(jí)，你可以看看下方的問答界面，來對(duì)比雙方的優(yōu)劣：

以下是 Ask LukeW 上的問答界面的設(shè)計(jì)。之前的問題和答案會(huì)折疊起來，折疊后的控件尺寸接近，在視覺上干擾更少，而且具有辨識(shí)度，視覺也更加聚焦于當(dāng)前的問答。

如果你想查看更早的問答，只需要點(diǎn)擊對(duì)應(yīng)的條目，它就會(huì)展開，而其他的條目會(huì)自動(dòng)折疊。不過可能有用戶會(huì)需要同時(shí)展開多個(gè)問答，這個(gè)需要根據(jù)實(shí)際情況來討論。

融合交互

當(dāng)我們?cè)谑謾C(jī)和電腦上使用即時(shí)通訊軟件交互的時(shí)候，我們不僅會(huì)發(fā)送文本，還會(huì)發(fā)送圖片，視頻，甚至?xí)D(zhuǎn)賬，發(fā)送游戲鏈接等等。它們大都會(huì)以一個(gè)對(duì)話框的形式呈現(xiàn)，嵌入到整個(gè)信息流當(dāng)中。

隨著大型語言模型（LLM）的支持范圍逐漸擴(kuò)展，AI 的對(duì)話式 UI 所承載的媒體形態(tài)和交互類型也應(yīng)該增加，不僅僅停留在文本的呈現(xiàn)，還會(huì)包含圖片、視頻、表單、代碼甚至 APP。為了在 Ask LukeW 上解決這些問題，我們添加了一種一致的方式來呈現(xiàn)這些對(duì)象，用戶可以選擇每個(gè)不同的對(duì)象，來單獨(dú)交互。

下面的案例展示了 AI 以文章或者音頻的格式來回復(fù)用戶需求時(shí)候的視覺效果，用戶點(diǎn)擊特定的問答組，對(duì)應(yīng)的文章控件、播放器控件會(huì)呈現(xiàn)出對(duì)應(yīng)的展開視圖，用戶看到的是重新格式化呈現(xiàn)的富文本，或者是可供播放音頻內(nèi)容的播放器界面，而用戶可以在這些回復(fù)的內(nèi)容的基礎(chǔ)上提出新的需求。

在你閱讀完文章、聽完音頻內(nèi)容之后，再提出后續(xù)問題的時(shí)候，這些內(nèi)容就會(huì)自動(dòng)折疊收納起來，不過這種情況也有例外。通常的圖片、圖文、文本類的內(nèi)容在被折疊之后，會(huì)在折疊后的控件右側(cè)有一個(gè)縮略圖。而包含功能性控件（比如播放器、閱讀器、第三方 APP 等）的時(shí)候，折疊后的控件左側(cè)會(huì)有個(gè)明顯的縮略圖標(biāo)識(shí)，通過空間和縮略圖標(biāo)識(shí)，用戶可以快速定位到之前的問答。

折疊，擴(kuò)展，控件對(duì)象細(xì)節(jié)處理，這當(dāng)中所有的事情，都是圍繞著對(duì)話式 UI 的優(yōu)化來進(jìn)行的，從根本上來說，它是基于我們熟悉的對(duì)話界面，針對(duì) AI 生成內(nèi)容進(jìn)行針對(duì)性的優(yōu)化。在 Ask LukeW 當(dāng)中，這些調(diào)整都算不得大范圍的重設(shè)計(jì)。

結(jié)語

那么這些設(shè)計(jì)是否適用于所有的 LLM 類的大模型呢？我相信我們很快能夠看到結(jié)果，據(jù)我所知，現(xiàn)在每家科技公司都在試圖將 AI 添加到他們的產(chǎn)品當(dāng)中，在這個(gè)過程中，他們會(huì)遭遇到和我們同樣的用戶體驗(yàn)和界面模式的問題，很大概率大家都會(huì)面對(duì)相同的限制，選擇類似的解決方案。