拿著紅旗的人: 生成式前端
目錄
Google I/O 2026 #
第一篇文章從執筆開始寫這個系列時正在上映的 2026 Google I/O 說起。在這場冗長的 keynote 裡，對我來說最重要的關鍵是新的AI搜尋前導廣告中出現了 15 秒的畫面。
第一的畫面是使用者在搜尋框裡試圖理解植物生長中的黃金比例，傳統的藍色連結內文被語言模型閱讀轉化成了一段及時生成的程式碼，用以逞線前端介面上的一個互動式元件。細節被融合成了元件上方的摘要，同時資料來源呈現在畫面的右側。 這個畫面最重要的地方是需要被閱聽者消化的資訊已經轉換成了適合閱聽者吸收的體驗。只不過這個體驗不是預先透過設計師精心設計好的，而是模型根據使用者的問題、資料和意圖即時生成的。這個概念 Google 在 2025 年 11 月就簡單地公諸於世並稱之為生成式前端 (Generative UI)。
我們要先岔題一下解釋一下「介面」(Interface) 是什麼
大眾常將「使用者介面」 (User Interface, UI) 局限於軟體的視覺外觀，例如顏色、按鈕和文字的長相、動畫。實際上，「介面」是任何將使用者意圖轉譯為系統指令的控制層。例如，語音介面 (Audio Interface) 就是把「Hey Google，把電燈關掉」的語音指令轉換成實際的「將電燈斷電」的指令。或是觸覺介面 (Haptic Interface) 就是把使用者用力按下 IPhone app 會震動一下的觸摸動作轉換成系統的開啟新選單的指令。
回過頭來看生成式UI，如果今天模型可以從過去這個人的資訊更了解一個個人，那每個人搜尋的結果不只是結果本身可能不一樣，就連呈獻資訊的體驗也應該不一樣。如果對視覺優先的學習者來說，知識可能是以互動式的方式出現；對於喜歡文字的學習者來說，知識可能是透過一個文字助理的對話框呈現。傳統上設計師和工程是會依找一個用戶需求 (User Request) 去創造一個工作流程和互動方式，例如「使用者想要搜尋一個概念」，設計師會創造一個搜尋頁面，工程師會把資料和功能放進這個頁面裡。而現在客製化可以更貼近一個個人，針對每一個「動作」(Action)去生成一個適合的體驗。透過 AI 語言模型即時的生成屬於你當下獨一無二的體驗已非無稽之談，客製化的維度以經可以從一個「需求」(Request) 做到一個「動作」(Action)。
回到更深層的互動設計 #
Anthropic 在 2026 年 4 月推出 Claude Design，讓使用者和 Claude 協作，產生設計、投影片、設計藍圖等視覺作品。 Figma，一間專注於 UI/UX 的軟體公司當日股價跌落 7%。緊接而來的是社群媒體開始吵到底設計師的工作會不會被 AI 取代。設計師紛紛在 Youtube 上發表嘗試用AI生成的介面到底長什麼樣子，有什麼問題，好像試圖要去證明自己真正存在的價值，又或者是鼓吹要怎麼更有效率地用AI來完成設計。這樣的做法只有作對一半。
在我剛踏入 HCI 的時候，Don Norman 的《The Design of Everyday Things》是必讀的經典。書裡面探討了分解設計的不同概念，像是 affordance、signifier、mapping、feedback、constraint、conceptual model 等等。
舉例來說，affordance 是指一個東西放在你面前，你看到他就知道他可以怎麼被使用。例如說水龍頭的長型手把就暗示你可轉動它；圓形的把手就暗示你可以抓著它轉動；按鈕的樣子就暗示你可以按下去。這些都是物件本身的特徵，讓人知道他可以怎麼被使用。裝置開始做動之後，水會流出來，這是 feedback，如果轉動的是熱水，可能會有紅色的燈亮起來，這也是 feedback。
如果 UI/UX 被理解成「產出固定畫面」，那 AI 確實會替代一部分舊的 UI 生產工作。設計師、工程師、企業主都可以透過AI更快速的產出藍圖、草稿、和不同的視覺設計，並且加速既有設計流程中的每個環節。但如果 UI/UX 被理解成「設計AI生成每個體驗的準則」呢? 我認為下一個世代的UI/UX設計師工作變複雜了，設計師不再被現有的網頁框架所侷限，因為他並不需要找到一個通用的框架去滿足多數用戶的需求。但同樣的，正是這個自由度讓設計師需要新的指標去知道一個設計是不是恰當的。舉例來說，我怎麼知道AI在什麼情境下應該要生成圖卡、互動介面、複雜的互動介面、還是小遊戲。
設計師的工作從使用這些設計觀念來建構一個體驗流程或畫面升級成了如何定義一個 AI 系統生成出適合使用者當下，卻同時尊循這些設計原則的準則。從需求降維到動作的改變使得設計師必須要開發更細緻的方法知道使用者的來龍去脈、更細緻的去知道他卡住的地方，藉此創造新的框架去引導AI生成出適合的體驗。**使用者介面將從設計一個「服務需求」的「畫面」升級成設計一套「規則」讓AI生成動作來完成用戶「目標」。**同樣的設計師就必須更注重每個設計選擇背後的價值和品味、更明確的告訴AI系統怎麼做出取捨、並且設計全新的評量方式來確保生成的體驗確實是符合使用者需求。
拿著紅旗的使用者和設計師 #
如果我試著跳脫市場的吵鬧，不要把 AI 放進設計師既有設計流程裡，那就不會有 AI 究竟能不能畫 wireframe 的問題了。因為生成式前端的概念是每個體驗都是根據使用者當下的行為和情境即時生成的，所以真正改變的不是某個職位會不會被取代，而是整個人與機器互動的方式即將改變，而這個改變需要新的態度去面對。
Lucy Suchman 在 Plans and Situated Actions 強調，大部分的人在完成任務的時候不一定會有一個明確計畫。人的行為隨著情境的變化而變化，他將其稱之為 situated action (情境行動)。對於設計師而言，新的時代有很多很有趣的挑戰和機會。
我們試想一個情境:一個使用者一直跳過教學。傳統的UI/UX設計師可能會把這個行為當成一個訊號，依照大部分的使用者來調整教學的內容、長度、位置，甚至是設計出一些阻力讓使用者完成教學。資料導向的資料科學家可能會把這個行為當成一個特徵，去訓練模型預測使用者不喜歡教學。但如果今天這個系統教學的每個步驟都是根據使用者的行為和情境即時生成的，那麼使用者跳過一個教學的步驟到底是: (1) 他真的不需要這個教學？(2) 教學逞現的方式不適合他？(3) 教學的步驟切分的不對? 又或許是其實根本不需要教學，而是在使用者使用介面的過程當中在最適合的時候再隨著生成的介面元件給予他適合的回饋和引導更符合situated action 的精神呢?
生成式前端最大的機會就在於怎麼設計出適應 Suchman 所指不同情境行動又符合 Norman 設計原則的生成規則。
對於非設計師的人而言，我們的體驗也將被轉換。有一段時間有些人因為看到的臉書、Youtube、和搜尋內容和別人的不一樣而感到困惑甚至生氣，接下來我們可能從搜尋結果的呈現方式、廣告出現的樣態、社群軟體的互動都會是更加個人化的。對於有目標的使用者來說，這或許會是一個更好的體驗，但 如果今天使用者沒有明確的目標，前者將更容易被牽著鼻子走。