哈嘍，這里是設(shè)計(jì)夾，今天分享的是「AI 產(chǎn)品界面布局分析」。

當(dāng)下，AI 已經(jīng)融入到我們生活的方方面面。每個(gè)人都在使用 AI 服務(wù)，所有的公司都在嘗試將自家產(chǎn)品與 AI 相結(jié)合。

本次通過整理分析各家 AI 產(chǎn)品的交互方式和展現(xiàn)形式，將 AI 助手界面總結(jié)為五類 UI 布局，并總結(jié)每種類型的特點(diǎn)、適用領(lǐng)域。

生成式 AI 界面通常圍繞兩個(gè)核心要素運(yùn)行： “輸入內(nèi)容”和“微交互（視覺反饋）”。雖然每個(gè) AI 產(chǎn)品的服務(wù)定位稍有差異，但大多都按照「輸入提示→深度思考（加載）→生成答案」的流程，因此，第一步的“輸入”和提示AI正在思考加載的“視覺反饋”是讓生成式AI體驗(yàn)更友好的核心要素。

輸入框：傳達(dá)用戶意圖的接觸點(diǎn)。

由于生成式 AI 的本質(zhì)是“根據(jù)請(qǐng)求生成個(gè)性化結(jié)果”，因此輸入內(nèi)容是用戶與 AI 交互的關(guān)鍵觸發(fā)點(diǎn)，也是整個(gè)溝通的起點(diǎn)。

微交互（視覺反饋）：將不可見的過程轉(zhuǎn)化為可感知的體驗(yàn)。

由于 AI 的實(shí)時(shí)運(yùn)行狀態(tài)和流程對(duì)用戶不可見，因此需要通過微交互來傳達(dá)“加載”的感覺。加載動(dòng)畫和輸入動(dòng)效并非簡(jiǎn)單的視覺裝飾，而是提升 AI 服務(wù)沉浸感、維系信任的關(guān)鍵手段。

類型一：對(duì)話型 UI 布局

強(qiáng)調(diào)輸入內(nèi)容、聊天氣泡和對(duì)話流程。最典型的對(duì)話式 AI 應(yīng)用 ChatGPT，就是一種專門為了能與 AI 對(duì)話而設(shè)計(jì)的產(chǎn)品，可在單個(gè)聊天窗口中提供連續(xù)對(duì)話。

1. 輸入框
2. 發(fā)送按鈕
3. 聊天氣泡（內(nèi)容輸入氣泡、結(jié)果生成氣泡）

主要特點(diǎn)：對(duì)話型 AI 助手的語言風(fēng)格會(huì)影響用戶的使用感受，將語言風(fēng)格調(diào)整得溫暖、關(guān)懷，用戶在交流時(shí)會(huì)感受到被理解和尊重，從而建立起深厚的情感連接。

適用領(lǐng)域：客服中心、教育/學(xué)習(xí)、心理咨詢、AI 秘書等提升對(duì)話體驗(yàn)的服務(wù)。

類型二：面板分隔型 UI 布局

這是將內(nèi)容區(qū)域和 AI 對(duì)話區(qū)域分隔成兩塊面板的界面類型，這種結(jié)構(gòu)能夠?qū)崟r(shí)確認(rèn)用戶需求的反應(yīng)過程。由于對(duì)話區(qū)域和操作區(qū)域在視覺上被很好地區(qū)分，AI 很容易被當(dāng)作“輔助工具”。

當(dāng)前很多桌面端產(chǎn)品和網(wǎng)頁產(chǎn)品都會(huì)內(nèi)嵌類似的 AI 助手，用來輔助用戶操作。嵌入 AI 助手面板后，頁面會(huì)變得更擁擠，因此在小尺寸屏幕上使用會(huì)有局限性。

1. AI對(duì)話區(qū)（輸入框/操作按鈕/聊天氣泡等）
2. 內(nèi)容區(qū)
3. 實(shí)時(shí)生成反映用戶需求的結(jié)果

主要特點(diǎn)：AI 功能作為單獨(dú)區(qū)域在屏幕右側(cè)或底部展示。當(dāng)用戶在內(nèi)容區(qū)域同時(shí)進(jìn)行多個(gè)操作時(shí)，AI 面板區(qū)域的交互反饋需要格外重視，需要將 AI 的逐步回復(fù)設(shè)計(jì)做好。

適用領(lǐng)域：文檔編寫、內(nèi)容策劃、圖像及視頻創(chuàng)作、電子郵件撰寫等。

這種界面類型主要用在內(nèi)容創(chuàng)作（主要任務(wù)）和 AI 功能（次要任務(wù)）并行工作的場(chǎng)景中，比如在文庫中使用 AI 助手來輔助解釋文檔，在百度網(wǎng)盤中使用 AI 助手對(duì)視頻進(jìn)行智能總結(jié)。

類型三：插件型 UI 布局

插件型 UI 是指將 AI 作為插件或內(nèi)置功能提供給用戶，大致可分為由特定操作觸發(fā)而展示的隱藏型和始終展示的浮動(dòng)按鈕型。

A-隱藏式

隱藏式是指在用戶觸發(fā)時(shí)才會(huì)顯示，如果用戶沒有直接調(diào)用 AI 或執(zhí)行相關(guān)操作，AI 就是隱藏的。當(dāng)需要 AI 來協(xié)助完成某些特定任務(wù)時(shí)，通常會(huì)采用這種設(shè)計(jì)方法，這種的特點(diǎn)是頁面比較干凈，不會(huì)干擾用戶的操作。

1. 拖動(dòng)、快捷鍵等觸發(fā)。
2. AI提供功能。

主要特點(diǎn)：隱藏型的核心優(yōu)勢(shì)在于“自然的體驗(yàn)和量身定制的幫助”。但如果觸發(fā)條件不明確或者沒有提前了解，可能存在不會(huì)使用或者忽略 AI 的問題。因此當(dāng) AI 出現(xiàn)時(shí)，提供清晰的反饋非常重要。

適用領(lǐng)域：本身具備基礎(chǔ)功能的生產(chǎn)力工具、創(chuàng)意工具等，有了 AI 輔助能夠滿足特定的需求。

隱藏式 AI 助手不會(huì)過多地干擾用戶的瀏覽或操作，只在“必要的情況下”出現(xiàn)。例如在 PS 中只有選中圖形后才會(huì)出現(xiàn) AI 填充功能，在 Notion 中選中內(nèi)容后才會(huì)出現(xiàn)“Ask AI”功能，如果沒有這些激活操作，這些 AI 功能在頁面中是不可見的。

B-懸浮按鈕式

懸浮按鈕式是指將 AI 助手設(shè)計(jì)成功能按鈕的形式，始終在頁面中保持可見，方便用戶隨意調(diào)用 AI 功能。

主要特點(diǎn)：操作簡(jiǎn)單可以立刻執(zhí)行任務(wù)，能在使用產(chǎn)品期間提供快速的協(xié)助。但太過明顯的 AI 助手按鈕可能分散用戶的注意力，從而忽略了頁面上的其他功能，因此 AI 助手的顏色、樣式、位置等都需要仔細(xì)考慮。

適用領(lǐng)域：生產(chǎn)力工具、創(chuàng)意工具、瀏覽器等希望鼓勵(lì)用戶使用 AI 的場(chǎng)景中。

現(xiàn)在很多 APP 都在主推 AI 功能，一方面能讓產(chǎn)品更加智能化，同時(shí)也能給用戶帶來更便捷的體驗(yàn)。例如貝殼 APP 在底部 tab 欄突出“AI 找房”功能，百度文庫也將“AI 助手”做成了懸浮按鈕的形式，都起到了鼓勵(lì)用戶參與使用的效果。

類型四：內(nèi)容插入型 UI 布局

內(nèi)容插入型是指將 AI 助手自然融入到界面內(nèi)容里，通常用于內(nèi)容總結(jié)或信息補(bǔ)充?，F(xiàn)在很多搜索引擎都會(huì)在搜索結(jié)果中插入 AI 總結(jié)的結(jié)果，并將其放在搜索頁面的第一條展示，AI 總結(jié)的 UI 設(shè)計(jì)一般都會(huì)符合當(dāng)前頁面的設(shè)計(jì)風(fēng)格，不會(huì)過于跳脫。

主要特點(diǎn)：通過“無痕式”的內(nèi)容呈現(xiàn)，能夠最大限度地減少對(duì)使用體驗(yàn)感的干擾。

由于是實(shí)時(shí)展示的插入式內(nèi)容，在 UI/UX 設(shè)計(jì)時(shí)不要過于復(fù)雜，并且要明確標(biāo)注是 AI 生成，避免讓用戶產(chǎn)生混淆。

適用領(lǐng)域：搜索門戶、備忘錄應(yīng)用、評(píng)論總結(jié)等場(chǎng)景。

內(nèi)容插入型的 UI 設(shè)計(jì)能在信息過載的情況下有效減少用戶的認(rèn)知負(fù)擔(dān)，因?yàn)樗谔峁┖诵男畔⒌耐瑫r(shí)降低了內(nèi)容密度。例如在百度或者微信中搜索“UI 設(shè)計(jì)”，第一條內(nèi)容都是由 AI 總結(jié)了全網(wǎng)幾十篇相關(guān)文章后得到的精煉回答，一定程度上幫我們節(jié)省了大量時(shí)間。

類型五：隱藏型 UI 布局

這類 AI 助手是指不在前端頁面中顯示而是集成在后端系統(tǒng)中，用戶能在沒有意識(shí)到 AI 正在運(yùn)行的情況下自然而然地使用相關(guān)功能。

主要特點(diǎn)：由于是一種完全隱藏的干預(yù)，因此看起來好像界面本身并不存在，很難知道結(jié)果如何，因此必須提供反饋調(diào)整/更正功能。

適用領(lǐng)域：推薦系統(tǒng)、自動(dòng)化設(shè)置、分類排序功能。

與自動(dòng)推薦一樣，這類 AI 助手在服務(wù)后臺(tái)自動(dòng)運(yùn)行，不需要用戶進(jìn)行激活 AI 就能實(shí)現(xiàn)。

例如在網(wǎng)易云音樂中，系統(tǒng)會(huì)根據(jù)你的聽歌偏好，自動(dòng)為你“私人定制”一些你可能喜歡的歌曲；在天貓等電商 App 中，會(huì)在商品詳情和商品列表頁智能化推薦一些“相似商品”；在 Keep 的搜索發(fā)現(xiàn)模塊，會(huì)學(xué)習(xí)用戶日常搜索的記錄，推薦一些與搜索記錄有關(guān)聯(lián)且熱門的選項(xiàng)。

最后

雖然上面介紹了多種類型的 AI 界面布局設(shè)計(jì)，但在用戶流程的交互設(shè)計(jì)上有著共同的原則。

總的來說，AI 是一種豐富用戶生活的工具。因此，重要的并非技術(shù)本身，而是 AI 如何準(zhǔn)確理解用戶的需求，并提供相應(yīng)的幫助。

在 AI 新功能層出不窮的環(huán)境下，UI/UX 設(shè)計(jì)師更需扮演“精準(zhǔn)調(diào)校者”的角色，讓技術(shù)有效融入到用戶體驗(yàn)中，而不單純是“反映和展示”技術(shù)。

慢慢來比較快，如覺得有幫助，請(qǐng)點(diǎn)個(gè)贊，分享給更多的朋友，謝謝！

作者：Clip設(shè)計(jì)夾