與常規的產品設計不同，生成式AI助手的設計要素需要特別處理。這篇文章為設計和評估AI助手提供了全面的視角，強調了用戶體驗的重要性，并提出了一系列實用的設計策略。

自2022年11月ChatGPT橫空出世以來，世界好像被顛覆了。各類生成式AI迅猛發展，其中生成式AI助手以其獨特的創造力和智能性，重新定義了許多產品的使用方式。

它通過先進的自然語言處理技術，不僅能理解用戶的指令和問題，還能生成回答、撰寫文本、甚至創作內容，拓展了人機交互的邊界，帶給人們極大的便利。

全球的技術巨頭和創新型初創公司都紛紛投身于生成式AI這一必爭之地，各大廠商都在積極探索如何將生成式AI助手融入到自己的產品和服務中。

本文將從UX設計的角度，拆解生成式AI助手的關鍵設計要素，思考AI助手產品的設計原則與體驗評估思路，并給出具體業務案例的實踐過程，希望能給身處AI浪潮中的你，一點幫助和啟示。

一、關鍵設計要素

生成式AI助手（以下簡稱AI助手）的界面設計集中于打造一個直觀、友好的交互體驗。

目前主要通過文本和語音這兩種最自然的交流方式與用戶進行互動。它強調友好的提示和引導、清晰的輸入輸出機制，以消除用戶使用的陌生感和不安感，同時擴展了多模態交互、個性化設置和輔助功能，適應不同用戶的需求。另外，在界面上也注重展示AI生成內容的易讀性和美觀性，使用戶在使用時感到輕松愉快。

下文將圍繞AI助手最核心的輸入輸出頁面中的關鍵設計要素進行拆解和分析，主要包括功能/指令/智能體的應用、輸入輸出過程以及語音通話等。

1. 功能

AI助手中的功能，指的是AI助手能夠執行的具體任務或操作。例如，文本理解、語音識別、翻譯、搜索信息等能力。

通過我們的調研，發現很多設計師會把功能的概念與指令和智能體混淆。指令是用戶給AI助手的命令，用來激活或使用特定的功能，而智能體具有一定智能的軟件程序，能夠執行任務、解決問題或與用戶進行交互。在AI助手中，智能體可能是負責特定任務的實體，如搜索智能體、推薦智能體等。

簡單來說，功能是AI助手已經會的本事；指令是告訴AI助手你想要它做什么；智能體是AI助手里面的小幫手，各自負責不同的任務。

1）功能引導

AI助手有豐富的功能，受限于產品形態，在功能的引導上有3個區域的觸點：

1. 歡迎卡片：做新手引導和推薦快捷指令展示。
2. 輸入框上方：推薦快捷功能指令。
3. 輸入框內部：通過引導文字推薦功能。

2）歡迎卡片

絕大多數的產品都會在歡迎卡片里提供快捷功能，點擊后當作快捷指令會被填充至輸入框（或直接向AI提問），通常會加上“可以試著問”、“可以這樣問”、“我有以下技能”等等引導性語句，能清晰的引導用戶使用。

大多數產品都以2*N（3居多）的形式展示，盡可能在有限的空間里放下最多的功能入口。存在較多功能，會提供「換一批」的能力，或提供指令中心的入口?？旖葜噶钤赨I設計上，入口icon較多使用emoji，原因是快捷功能數量多，且很難用圖形展示，因此需要設計成本低且能靈活配置的解決方案。當然如果推薦功能較少，也可以像釘釘文檔一樣，使用個性化的icon處理。

根據不同產品的定位，也可以不展示快捷入口，如Kimi能分析網址和文件，直接用文字輕量化地引導用戶添加內容，但是沒有明確可點擊的入口，引導性較弱。

3）輸入框上方

點擊后快捷指令填充至輸入框，因此放在輸入框上方能讓用戶感知到二者的聯系，并支持橫向滑動展示更多入口，但承載能力有限，且不方便用戶感知全部的功能。

4）輸入框內部

采用文字提示的方式，告知用戶可以使用的快捷鍵觸發相應的功能，但文字提示效果沒btn明顯，導致容易被忽視。

5）功能中心

隨著AI助手的迭代，功能會越來越多。此時就需要功能中心來聚合全部的功能，并將它們清晰的展示給用戶，有三種展示方式。

1. 大模態彈窗：騰訊使用大模態彈窗。讓用戶在不跳脫出當前層級關系的情況下，也能有清晰的展示空間和篩選能力，方便用戶完成功能選擇。
2. 獨立頁面：釘釘使用獨立頁面，展示面積大，功能過多時可以使用，支持使用清晰的Tab分類和快捷幀等功能，對功能進行細致的分類。且支持對功能做較詳細的圖文介紹，方便用戶理解功能并建立預期。
3. 浮層：如云一朵，點擊功能中心后會調起浮層，支持做簡單的Tab切換來分類功能，層級關系簡單更加輕量化，支持承載數量較少的功能。

以上三種展示方式并無絕對好壞之分，需要設計師根據自身產品的情況來選擇合適的方式。

6）快捷指令

指令是用戶給出的命令或請求，AI助手根據指令來執行相應的功能。例如，用戶可能會說“請翻譯這段話”，這里的“翻譯這段話”就是一個指令。

快捷指令能有效提高用戶輸入指令的效率和準確性，它提供了一種直觀、簡潔的方式來與AI工具進行交互，使用戶能夠更輕松地完成任務，并給用戶提供了一種跟AI溝通的范例。

7）推薦功能

上文提到的推薦功能，往往都會以快捷指令的形式填充到輸入框內，在功能推薦的卡片上甚至會外顯快捷指令，讓用戶有心理預期。

8）猜你想問

通過分析用戶的習慣和上下文，AI工具能夠預測用戶可能想要提出的問題或需求，并主動提供相關信息或建議。這種主動服務的方式減少了用戶的搜索時間，從而提升了用戶體驗。同時通過提供主動、智能的服務，增強了用戶對AI工具的依賴和信任。

在設計上猜你想問的觸點有兩處：首次進入和回答結束。

1. 首次進入：為用戶提供一個友好的、有引導性的開始，幫助用戶更快地適應和使用工具。反之，如果推送不準確或不符合用戶的實際需求，可能會讓用戶感到困惑或不滿。
2. 回答結束：AI能夠根據用戶的反饋和上下文進行進一步地推測，這通常能夠提供更準確、更相關的建議或信息。這種推送能夠讓用戶感到AI工具能夠理解他們的需求并提供有價值的信息。

2. 智能體

在AI助手中，智能體是負責處理特定任務的模塊，如語言理解智能體、推薦系統智能體等。

1）智能體中心

和功能中心一樣，在智能體中心里聚合了全部的智能體，通過設計清晰的Tab分類和檢索功能幫助用戶查找自己想要的內容。

2）智能體使用

智能體的操作流程和AI助手本身的操作要保持一致，層級關系也需要兼融進AI助手內。比如豆包，將智能體的聊天記錄放在在AI助手的聊天列表頁內，并根據頭像和名稱幫助用戶完成智能體的身份識別，結構清晰方便用戶找到功能并使用。

而Kimi支持通過輸入框快捷使用智能體的能力，選擇完成后會外顯在輸入框上方，此時向智能體提問，原本AI助手的頭像會變成智能體，給予用戶正在使用的反饋。

3. 輸入框

輸入框承載了用戶與AI溝通中“說”的需求，最重要的功能是輸入。

1）輸入方式

根據AI助手功能的不同，輸入框的輸入方式也不同，常見的輸入方式如下：

• 文本輸入：最基本的方式，提供一個易用的文本框，讓用戶可以方便地輸入文題或指令。
• 語音輸入：語音輸入按鈕允許用戶通過語音指令與 AI 互動，需要注意語音識別的反饋。
• 多模態輸入：結合文本、語音、圖片、附件、槽位等多種輸入方式，提升交互的靈活性。
• 快捷輸入：根據上下文提供常用的快速回復按鈕，方便用戶一鍵選擇常用選項或回復?；蚴褂每旖萱I（如“@”或“/”）調出可用的指令或文件等。

2）功能要素

在輸入框中，最低配就是僅有輸入區，隨著各AI助手功能的完善，也越來越少見了。而高配就各有特色了，有語音輸入、語音通話、文件上傳、快捷功能、發送、開啟新對話這些固定入口，也有根據輸入輸出過程動態出現的停止生成按鈕、槽位框、文案優化按鈕等。

3）輸入和發送btn

輸入區是輸入框最重要的組成部分，支持用戶進行文本輸入。

同時也是用戶引導的最佳區域，起初用“請輸入XXX”這些基礎文案完成了大眾的AI教育。隨后隨著大家的認知增強、功能的豐富以及其他引導區域的不斷開辟，現在Web端的引導文案更加偏重更高級功能的引導，如快捷功能調起和換行等。

發送btn也是重要組成部分?？梢詭陀脩魠^分“可用”和“不可用”狀態（如多數AI助手設定為AI回答完畢前無法發送）。設計時可以通過顏色差異反饋給用戶，如果是不可用狀態，最好是通過反饋告知用戶不可操作的原因。

受限于空間，移動端的發送btn通常默認隱藏、輸入內容后才顯示。

4）語音按鈕

當前語音輸入在移動端使用較多，受限于電腦的辦公場景，語音錄入在Web或桌面端較少。

百度云的云一朵也支持語音錄入，并提供了兩種語音輸入方式：

1. 按住空格鍵錄制、松手發送、esc取消發送。
2. 點擊語音鍵錄制、點擊發送按鈕發送、點擊關閉按鈕取消發送。

而移動端的語音按鈕與IM語音輸入大致一樣，受限于篇幅不再贅述。

5）上傳文件

AI助手的上傳文件功能允許用戶將本地文件上傳到AI系統中，以便進行后續的處理、分析或存儲。

在狀態反饋方面，需要注意的是無論在Web端還是移動端都需要給用戶提供清晰的反饋，包括：

• 進度反饋：提供實時的上傳進度顯示，讓用戶隨時了解文件上傳的進度。
• 狀態反饋：顯示上傳成功或失敗的信息，提供相應的操作引導。尤其是遇到錯誤時，要給用戶提供清晰的提示信息，如文件格式不支持、文件大小超過限制等，并提供重新上傳或取消上傳的操作選項，以便用戶根據提示進行相應的處理。當然，如果存在文件的上傳限制，最好在操作前就給出提示反饋。

在布局方面，已上傳的文件與輸入框的位置關系需要靈活處理，既不可以影響文本輸入，又需要考慮與輸入框的鄰近性與統一性；此外，還要考慮上傳文件數量對于布局的影響。

6）槽位

在用戶給的信息太少，不足以生成可用的答案時，通常需要用戶補充一些結構化的信息。這些信息可以通過兩種方式錄入：答案氣泡中或輸入框。答案氣泡的我們后文討論，這里討論下輸入框。

在輸入框中可以通過槽位來錄入，槽位由一個或一組輸入框組成，區別于字段化的表單，這些輸入框之間往往由一句話或者自然語言來連接。

需要注意的是，槽位可能增加用戶的操作復雜度，尤其是涉及到推薦指令修改時，將槽位誤刪等情況；可能占用過多空間導致頁面局促，讓本就不富裕的輸入框雪上加霜，影響編輯體驗。

考慮槽位適合哪些組件，交互過程不宜太復雜，建議只當「單選選擇器」或「輸入框」使用。

考慮容錯性問題，如誤刪后挽回辦法。

區分槽位與字段的關系，如增強差異化，提升用戶的認知。

7）文本優化

文本優化功能是為了提升用戶的輸入效率、讓AI更加準確地理解用戶意圖。

通常在用戶輸入文本內容后激活，點擊可以對已輸入的文本進行優化，比如糾正錯別字、簡化表達、補全提問的維度（比如背景、范圍、要求、指令等）。

這其實是AI對于用戶問題的一次“預理解”，生成的優化文本可供用戶進行確認、修改，以此生成更準確的回答，提升對話效率和使用體驗。

這里需要注意的是功能入口的可見性以及各狀態和對應操作的設計，將會在后面業務案例部分與大家探討。

8）清除/新對話按鈕

當用戶想開啟新話題、避免歷史信息干擾時，當對話信息過長影響性能時，或僅僅當用戶希望界面更清爽時，都可以選擇清除對話或開啟新對話。

按鈕應放置在用戶容易找到且不會干擾到主要交互流程的地方。在Web AI助手中，這些按鈕可以放在界面的底部或側邊欄中。需要注意的是，清除/新對話按鈕通常與對話管理功能關聯出現，用戶可追溯之前的歷史對話。

4. 回答消息體

在接收到用戶的問題或指令后，AI會生成回答?；卮鹂赡苁切畔?、指導、建議、拒絕、互動等，這需要豐富的消息體類型來支持?？傮w來說，回答消息體包括純文本、鏈接、圖片、視頻、按鈕/選項、輸入框、編輯器等類型。

1）文本消息

包含純文本和富文本兩種。其中純文本以直接的文字回復，簡潔明了，適用于簡單的問答。而富文本則包含鏈接、加粗、顏色等格式的文本，適合提供更詳細的信息或引導用戶進一步操作。

2）多媒體消息

圖片、視頻、音頻、代碼編輯器等，可以豐富用戶體驗，適合展示產品、提供多媒體內容等。

3）卡片式消息

包含標題、圖片、按鈕等元素的卡片，適合展示結構化信息，如新聞、商品、天氣等。

4）交互式表單

類似于槽位，交互式表單也是收集用戶結構化信息的一種方式，可以字段化的表單形式出現在回答區域，來獲取用戶的更詳細的信息。

除了一些需要引導用戶逐步填寫信息的復雜場景（如預約、注冊等），交互式表單通常以更輕量的按鈕/選項、輸入框的形式出現，用戶可以快速選擇或輸入。用戶操作后信息狀態發生變化。

相比于槽位，交互式表單的擴展性、可讀性、狀態顯示與容錯性會更好一些。

5. 對話氣泡功能

在人與AI的對話中，內容通常以氣泡的形式來顯示，邊界清晰，也便于添加功能。功能主要集中在對用戶自己發送的指令和AI回答的內容做出反饋和操作。

1）展示方式

對話氣泡的操作區域分為常駐和Hover兩種：

1. 常駐：在Web端和移動端都有使用。Web端經常在全頁面采用，因為有足夠的空間展示，而且方便讓用戶及時操作；而移動端因為無法做出Hover效果，所以都采用常駐。
2. Hover：Web端中尺寸局促的浮窗或抽屜會使用Hover，但是Hover需要在設計時留出足夠的預設空間，因此會造成氣泡間的距離過大的問題。同時Hover的場景要考慮氣泡間的排版問題，早期很多AI產品將浮層會出現的位置預留了空間，但是會造成未Hover時氣泡的上下間距過大，浪費坪效。

現在很多產品都采用了從側面出現的方式，解決間距問題，但是對氣泡的長度有要求限制，不能滿足空間較小的場景。個人認為最理想的解決方式是讓反饋浮層卡在氣泡邊緣，盡可能的節約空間。

2）反饋操作

用戶指令和AI回答有不同的反饋功能。

用戶指令：包括復制、再次編輯和刪除等能力，尤其是再次編輯，點擊后可以將指令回顯到輸入框內，減少用戶的操作成本。

AI回答：包括復制、重新生成、贊、踩、刪除等常駐功能，不同產品間一定差異性，如文檔類的支持將回答生成文檔，從而促進轉化?！钢匦律伞棺鳛樽罡邇灥墓δ?，往往放在最左側，與其它操作相互區分。

3）中斷操作

用戶有想要終止對話的場景，此時需要「停止生成」按鈕來結束對話氣泡繼續生成文字。

關于「停止生成」按鈕的使用，不同設備的有一定差異：

• Web端：會在對話氣泡下展示停止btn，但由于下滑位移btn會逐漸下移，不易操作，所以最保險的方式是輸入框上方展示停止btn，并設定安全距離，保證視覺上的平滑。
• 移動端：屏幕的尺寸較小，會選擇節省空間的方式，如將原本的發送Btn，變為停止btn。

6. 生成過程交互

AI助手工具的結果生成過程應注重用戶的實時反饋、結果的清晰展示和優化建議的提供，同時確保生成過程的可中斷性和停止后的資源清理等細節問題。這樣可以提升用戶的使用體驗，提高AI助手工具的效率和可用性。

1）生成中

即時反饋：在生成過程中，AI助手工具應該提供即時的反饋，讓用戶了解當前的生成進度。例如：進度條、IP動畫或文字提示。同時會反饋會拆分成兩個階段。首先是AI識別的過程，反饋AI正在識別用戶問題，可以外顯AI查詢知識庫的行為，如“參考了10篇文章”，提升答案的可信度。其次是結果反饋的過程，AI將生成的結果逐步反饋給用戶。

可中斷性：生成過程中應允許用戶隨時中斷，滿足用戶發現不需要繼續生成或想修改的訴求。

避免干擾：生成中的界面應避免過多的干擾元素，如輸入框置灰不再支持輸入新內容，讓用戶能夠專注于生成過程和結果。

2）生成后

結果展示：生成完成后，AI助手應清晰、準確地展示生成結果。如文本類，考慮文字的可讀性，如分段、關鍵文字加粗等要求，設計師要規劃好文字場景下富文本的展示規范?；蚴菆D像類，考慮多圖排版的策略，以及超出極限值的折疊或者分頁展示策略。

操作反饋：對話氣泡會展示操作區域，幫助用戶對回復內容完成操作。

用戶反饋：鼓勵用戶提供對生成結果的反饋，以便AI助手不斷優化和改進生成效果。往往通過贊和踩的方式收集用戶反饋，如果想收集更深入的內容，也可在操作后調起調查問卷。

優化建議：基于用戶反饋和算法評估，AI助手可以給出優化建議，幫助用戶改進輸入條件或調整生成參數，以獲得更好的生成效果，如上文提到的“猜你想問”或“你可以這么問”。

3）停止生成

保存進度：在停止生成時，AI助手應能夠保存當前的生成進度和結果，以便用戶后續繼續生成或編輯。

提示信息：停止生成后，AI助手可以給出相應的提示信息，如“生成已停止”、“結果已保存”等，以便用戶了解當前狀態。

操作引導：停止生成后，應該反饋下一步的操作，如「重新生成」。

7. 語音通話

除了以文本為主的對話界面，很多AI助手都上線了語音通話功能，可以更便捷地滿足一些化的場景。

1）通話流程

這個功能來源于手機語音通話，功能使用流程大同小異，可以拆解大概為：①啟動-②連接-③人輸出-④AI識別-⑤AI輸出-⑥結束。

語音通話功能一般獨立于對話界面，通常以電話icon的形式作為入口，點擊啟動語音通話。

連接是功能初始化的過程，AI識別則用于信息處理和回答生成，識別速度越快越接近真人語音通話體驗。

一個完整通話通常是③④⑤往復循環，至于接聽后是人先說還是AI先說，因產品而異。

2）關鍵要素

相比真人語音通話，對話對象真人變成了AI助手，帶來兩個明顯的特征：

1. AI不會搶話。所以在人輸出的時候，需要告訴AI“我說完了”。這個“我說完了”可以是AI自動識別的（通常根據用戶停頓時間識別），也可以是用戶手動操作的（通常是點按發送）。
2. 人也無法搶話。也就是說人無法在AI輸出的時候同時說話。目前不確定是技術限制還是產品設定，總之即使要和AI吵架也要等對方說完再說，文明了許多（笑）。當然，各產品還是設計了“打斷”功能，可以立即讓AI閉嘴，換用戶自己說。

無論是“我說完了”還是“打斷”（尤其是“打斷”），都造成了與真人通話顯著的體驗差異，使本可以解放雙手的功能變得有些雞肋。期待各AI廠商早日優化。

同樣基于上述兩點，界面狀態與提示就變得更為重要，以下是一些示例：

• 狀態提示：連接初始化時、信號不良時。
• 人說話前：引導用戶說話，如果有IP則作出期待的動作，同時提示“請說，我在聽呢”。
• 人說話時：主要是聲波動效，如果有IP則作出傾聽的動作，或者提示“我正在聽”或“點按可發送”。
• 人說話停頓時：主要是聲波消失，同時提示自動發送或點按發送。
• AI識別時：若識別時間長會帶來體驗的間斷，需要給用戶明確的反饋和提示，降低這種感覺，同時允許用戶退出，提示可中斷此過程。
• AI說話時：AI發出聲音就是最直接的反饋，如有IP則作出說話的狀態，同時給出用戶提示“可點擊打斷”。

對于整個語音通話功能，還有必備的掛斷鍵（點擊結束通話）、暫停/繼續鍵（通話中止/繼續），以及通話結束后的對話文本詳情。不同的產品還有些特色功能，如使用IP形象擬真（豆包）、實時字幕（文心一言）、角色選擇（訊飛星火）等。

總體來說，各家產品設計都大同小異。在交互細節上有些差異，也還有提升空間。比如狀態動效的表意性、狀態動效與提示的對應性、語義的簡潔與易理解性等。

二、設計原則

基于AI助手的特點和概念設計要素，可歸納出生成式AI助手產品的八條設計原則，對于其他AI助手產品也同樣適用。

1. 自然語言處理能力的可視化

原則：確保用戶清楚地知道AI助手對他們的指令有所回應，并展示出理解能力。

實現：當用戶輸入后，AI助手立即給出回應，即使未生成答案，也會顯示運行狀態，例如顯示“意圖分析中…”、“正在聯網查詢…”等信息。

2. 上下文感知和連貫性

原則：AI助手需要保持對話的上下文，確?；貜偷倪B貫性和相關性。

實現：在對話框中，顯示上下文歷史或關鍵對話節點，讓用戶可以隨時回顧并理解AI的連續回應。例如，顯示過去幾輪對話的摘要，或者提供“你剛才提到…”的提示。

3. 多模態交互

原則：支持多種輸入輸出形式，滿足不同用戶需求和使用場景。

實現：在同一個對話框中，允許用戶切換或組合使用語音、文本、圖片等多種輸入方式，AI助手也能以文字、語音、圖片、視頻、地圖等形式回復。例如，在文本對話中插入地圖卡片或視頻播放窗口。

4. 即時反饋與確認

原則：在AI助手執行操作或提供信息前后，及時給予用戶反饋和確認。

實現：用戶發出語音指令時，顯示即時的文本轉換和理解反饋。例如，輸入框中實時顯示語音轉文字的內容，并在理解后用不同顏色或下劃線標注關鍵詞。

5. 個性化與定制化

原則：根據用戶歷史行為和偏好，提供個性化的建議和回復。

實現：在對話中顯示個性化選項或快捷回復，基于用戶的歷史使用情況和偏好進行調整。例如，“根據你過去的選擇，我推薦你這次也選擇這個選項”。

6. 透明性與可解釋性

原則：讓用戶了解AI助手的工作原理，增加信任度。

實現：提供解釋功能，當AI助手給出復雜的建議或決策時，用戶可以點擊查看詳細的解釋或背后的邏輯。例如，在提供健康建議時，AI助手可以解釋數據來源和分析方法。

7. 誤差處理與糾錯機制

原則：有效處理誤解或錯誤，并允許用戶輕松糾正。

實現：在對話中嵌入糾錯按鈕或指令，讓用戶可以快速更正AI的誤解。例如，當AI助手誤解用戶的指令時，提供“重新生成”按鈕，讓AI助手重新理解，或提供問題文本復制按鈕，讓用戶修改問題。

8. 情感理解與反饋

原則：通過情感識別技術，使AI助手更具人性化和情感關懷。

實現：在對話中，AI助手可以識別并響應用戶的情感，例如在用戶表達沮喪時提供安慰或鼓勵。界面上可以顯示情感標識或提示，幫助用戶感知AI的理解。