串流式 UI(Streaming UI)是 2026 年 AI 產品介面最關鍵的設計轉變:內容不再等模型全部算完才一次顯示,而是隨著語言模型逐字(token)生成即時逐段浮現。傳統做法是丟一個轉圈圈的 spinner,讓使用者盯著空白等 5 到 15 秒;串流式做法則讓文字像打字一樣出現,使用者可以馬上開始閱讀。這個看似微小的差異,把「感知等待時間」壓到近乎為零,也直接決定了使用者對 AI 系統的信任程度。
📖 學
為什麼串流能讓等待「感覺」歸零
關鍵在於「感知效能(perceived performance)」而非實際運算時間。實際延遲沒有變短——模型該算多久還是算多久——但使用者的體感完全不同。當第一個 token 在 300 到 500 毫秒內出現,大腦就收到「系統在動、我沒被卡住」的訊號,焦慮感立刻下降。Nielsen Norman Group 的研究指出,帶有回饋的等待,體感比同樣長度、卻沒有任何回饋的等待「快上 11% 到 15%」。
串流的第二個價值是「可掃描、可提早中止」。使用者讀到前兩句就知道方向不對時,可以立刻按停止,不必枯等整段跑完再重來。這把單向的「請求—等待—結果」變成雙向、可介入的對話節奏,這也是 AI 原生介面與傳統表單提交最根本的差異。
生成中狀態:別再寫「Loading」與「Working」
2026 年的設計共識是:淘汰「Loading」「Working」這類泛用占位字。這些字是靜態軟體時代的遺物,對一個正在自主推理的系統而言毫無資訊量,反而讓人懷疑它是不是壞了。取而代之的是「具體、會變化的狀態微文案(microcopy)」。
Smashing Magazine 提出的「living breadcrumb(會呼吸的麵包屑)」是很好的範式:在介面邊緣或選單區放一個細小、會脈動的狀態指示,並讓文字平順地在不同階段間切換——例如「正在讀取郵件」→「正在草擬回覆」→「正在檢查語氣」。保險理賠的 AI 則會顯示「評估損傷照片」「檢視警方報告」「核對保單範圍」。這些字把模型「腦中在做什麼」攤開來,讓等待從焦慮變成「知情的安心」。
讓串流不「跳動」:渲染節奏的工程細節
串流體驗做壞,常見原因是版面亂跳(layout shift)。逐 token 更新如果每收到一個 token 就重繪一次 Markdown,標題、清單、程式碼區塊會在半成型狀態反覆重排,畫面像抽搐。正確做法是「緩衝渲染」:只在收到空白邊界或句子結束時才重新渲染 Markdown,而不是每個 token 都重繪。
高度變化也要用平順的展開動畫,讓串流內容「長出來」而非瞬間撐開容器。搭配的動態訊號包括:回應面板在生成時做微小的脈動(傳達「進行中」)、信心分數更新時顏色從琥珀色過渡到綠色(傳達「確定性在提升」)、被捨棄的建議溫和淡出。這些都是把抽象的系統狀態翻譯成使用者看得懂的視覺語言。
停止鍵、可逆與透明:信任的三根支柱
串流介面必須永遠顯眼地擺一顆「停止」按鈕,它應該是螢幕上最醒目的元素之一——因為使用者要能隨時奪回控制權。這延伸出 2026 年 AI UX 的核心命題:信任,而非更聰明,才是新的評判基準。經過幾年證明「AI 能動」之後,焦點轉向「使用者能不能安心依賴自主系統」。
建立信任最強的機制是「可逆性」:一份持續、易讀的行動稽核紀錄(Action Audit log),搭配每個動作都有明顯的「復原(Undo)」按鈕,並用清楚的狀態標示成功、進行中或已復原。每一個 AI 產出都應該帶著讓使用者能編輯、拒絕或標記的機制。研究顯示,知道自己可以修正 AI 的使用者,參與意願明顯更高——控制感本身就是採用率的推手。
串流不是萬用解:什麼時候別用
串流適合「內容會逐步展開、且可提早閱讀」的長文本回應;但對「必須完整才有意義」的結果(例如一張要一次到位的結構化表格、或一段可執行的程式碼),逐字浮現反而讓人分心。此時搭配骨架佔位或明確進度階段更合適。NN/G 的研究也提醒:骨架屏只有在實際載入時間落在 400 毫秒到 3 秒之間才有幫助,太快沒必要、太慢反而放大焦躁。設計時要先問「這段等待的性質是什麼」,再決定要串流、要階段化透明、還是要純粹的進度回饋。
🧠 記
- 串流式 UI = 內容隨 token 逐段即時浮現,把「感知等待」壓到近乎零,實際延遲不變但體感大不同。
- 帶回饋的等待體感快 11%
15%(NN/G);第一個 token 最好在 300500 毫秒內出現。 - 淘汰「Loading/Working」,改用具體會變化的狀態微文案(living breadcrumb)。
- 緩衝渲染:只在句子邊界重繪 Markdown,避免版面亂跳。
- 脈動、信心色彩過渡(琥珀→綠)、溫和淡出,是把系統狀態視覺化的常用手法。
- 「停止」鍵要最醒目;可逆性(Undo + 稽核紀錄)是建立信任最強的機制。
- 骨架屏只在 400ms~3s 的等待區間才有效;串流不適合「必須完整才有意義」的輸出。
- 2026 年評判 AI 的新基準是「信任」而非「更聰明」,而 UX 是掌控自主行為的控制面。
✍️ 實踐
- 為你的 AI 功能列出每一段「等待」,標注其實際延遲區間(<400ms / 400ms~3s / >3s),決定用即時回應、骨架、還是串流。
- 把「Loading」全部換成具體的階段微文案,並設計 living breadcrumb:列出 3~5 個真實處理階段的文字,讓它們平順切換。
- 在串流輸出實作緩衝渲染——只在遇到空白或句尾標點時才重繪 Markdown,並用高度展開動畫消除版面跳動。
- 加上一顆全程可見、夠醒目的「停止生成」按鈕,並確保按下後能即時中斷串流。
- 為每個 AI 產出附上「編輯／拒絕／復原」機制與行動稽核紀錄,用顏色與狀態標示成功、進行中、已復原。
- 用真實網速與慢速模型情境測試,量測「首個 token 時間」與使用者提早中止率,反覆調整回饋節奏。
🔗 延伸學習
- Practical Interface Patterns For AI Transparency — Smashing Magazine
- Identifying Necessary Transparency Moments In Agentic AI — Smashing Magazine
- Skeleton Screens vs. Progress Bars vs. Spinners — Nielsen Norman Group
- Streaming · AI UX Pattern — AI UX Playground
💬 問 AI
我正在設計一個 {產品／功能名稱} 的 AI 生成介面,主要輸出是 {輸出類型,例如長文回覆／結構化表格／程式碼},典型延遲約 {秒數} 秒。
請幫我:
1. 判斷這段等待該用即時回應、骨架佔位、還是串流式 UI,並說明理由。
2. 為生成中狀態設計 3~5 段具體的 living breadcrumb 微文案,對應真實處理階段。
3. 列出建立使用者信任的介面元件清單(停止鍵、可逆/Undo、稽核紀錄、信心指示),並給我一個渲染節奏與防版面跳動的實作檢查表。