UX for AI Static learning edition
Lesson 9

Lesson 9 - LLM Design Patterns

整理 7 個常見 LLM UI 模式：重述、自動完成、對講、建議、後續步驟、再生微調、護欄。

例子（先看見模式的必要性）

ChatGPT infers the meaning of a short request from context.
Figure 9.1 ChatGPT 在脈絡中理解請求

同一句話在不同情境會有不同意圖。這也是後面每個 UI 模式存在的理由：讓系統更貼近使用者真正想做的事。

Source in book: Chapter 9
Siri does not understand the request context and returns a generic result.
Figure 9.2 Siri 沒有理解脈絡

當系統抓不到意圖時，回覆常會變得像關鍵字搜尋。這章的模式是用來降低這種落差。

Source in book: Chapter 9

你可以先用下面這張教學圖把 7 個模式放到同一條流程軸上，讀到後面每一節時會更容易對位它的角色。

A learning map that places seven LLM UI patterns along a single interaction flow.
教學圖：7 個 LLM UI 模式的導覽地圖

把模式當成可拼裝的元件：先降低誤解、再維持探索節奏、最後把內容接到行動並吸收風險。

方法（7 個常見 LLM UI 模式）

A restating UI that shows what the system interpreted from the user’s input.
Figure 9.3 重述（Restating）的例子

重述把「系統以為你要什麼」講清楚，讓使用者能在錯誤擴大前修正。

Source in book: Chapter 9
Auto-complete overlay suggestions shown while typing.
Figure 9.4 Auto-complete 的例子（輸入中提供建議）

自動完成把輸入拆成可選片段，讓使用者更快走上成功路徑。

Source in book: Chapter 9
After using auto-complete, the system can show results directly.
Figure 9.5 Auto-complete 讓結果更快出現

當系統已經抓到可執行的查詢，輸出可以直接到結果頁，互動會更順。

Source in book: Chapter 9
Advanced auto-complete with unmatched fields and changeable parameters.
Figure 9.6 更進階的 Auto-complete（可變欄位與 unmatched 提示）

把可變參數與不匹配條件做成視覺提示，能讓錯誤更早被發現。

Source in book: Chapter 9
A talk-back interaction where the model asks clarifying questions and guides the user.
Figure 9.7 Talk-back 的例子（追問與澄清）

對講把探索方向講出來：哪裡不確定、缺什麼、下一步怎麼問更有效。

Source in book: Chapter 9
Generic initial suggestions shown before the user starts.
Figure 9.8 初始建議（通用起手式）

初始建議讓使用者不必從空白開始，也讓產品能主動引導常見路徑。

Source in book: Chapter 9
Initial suggestions tuned to the selected data source.
Figure 9.9 依資料源調整的初始建議

建議如果能對齊資料型態與情境，點下去的成功率會更高。

Source in book: Chapter 9
Suggestions that continue where the user left off in prior conversations.
Figure 9.10 從中斷處接續的初始建議

建議也能用來接續脈絡，把使用者帶回正在做的事。

Source in book: Chapter 9
A product shows multiple suggestion types depending on query and data context.
Figure 9.11 多種類型的建議（同屏並存）

把建議分層（依資料源、依查詢、依任務）能讓探索更像一段流程。

Source in book: Chapter 9
A wireframe shows suggestions improved with time-of-day context and richer UI.
Figure 9.15 更進階的建議（情境化與更好點選）

把建議做得更像可選項目（例如用圖卡與輪播）能加速常見輸入，互動也更有節奏。

Source in book: Chapter 9
A combined flow showing history, suggestions, restating, and next steps in one experience.
Figure 9.16 把多個模式串在同一段流程

把歷史、建議、重述與後續步驟放在一起，使用者才有機會一路走到可執行的下一步。

Source in book: Chapter 9
A creative generation UI with one-click regen tweaks for controlled variation.
Figure 9.12 Regen tweaks 的例子（一鍵微調）

重跑不只是一個按鈕。把常見微調做成可點選控制，使用者會更願意迭代。

Source in book: Chapter 9
The model refuses a disallowed request as part of guardrails.
Figure 9.13 護欄的例子（拒絕不當請求）

護欄常先從拒絕開始：讓系統在高風險輸入下仍維持安全。

Source in book: Chapter 9
A slightly reframed query can bypass weaker guardrails, showing design risk.
Figure 9.14 護欄的風險（繞過與對抗）

護欄設計也要考慮對抗情境，避免因問法變化而失效。

Source in book: Chapter 9
An example of content guardrails in an AI assistant.
Figure 9.17 內容型護欄（可預期的限制）

把限制與替代路徑講清楚，使用者才知道接下來怎麼做。

Source in book: Chapter 9

如果你在做產品設計時想快速判斷該先做哪個模式，可以用下面這張教學圖當檢核表。

A decision guide that helps choose which LLM UI patterns to apply first based on task risk and frequency.
教學圖：什麼情境先用哪個模式

用任務頻率與錯誤代價當主軸，決定先補重述、建議、後續步驟或護欄。

練習（把 7 個模式套在你的產品上）

  1. 選一個高頻任務：使用者每天都會問的那種。
  2. 為它設計：重述 + 自動完成 + 3 條建議追問 + 1 個後續步驟行動。
  3. 為一個高風險動作加上護欄：確認、回退、替代流程。
Next Lesson

Lesson 10 - Search UX Revolution

從 Google vs Amazon 兩種搜尋 UI 出發，理解 LLM 搜尋如何處理模糊與負面查詢，並改寫結果呈現。