判定方式
我們把缺少產品判斷的重複模式稱為 AI slop
這裡不判斷作者,也不猜使用了哪一種工具。只有當熟悉的預設模式取代產品目標與依據,進而削弱資訊層級與信任時,我們才會標記為 AI slop。
01 — 單一視覺特徵不足以下結論
圓角卡片、紫色、置中的主視覺和短標題,都可能是合理選擇。我們檢查的是:缺少理由的預設模式是否在同一個頁面反覆堆疊,讓產品原有的資訊結構與品牌特色消失。
無法只看頁面就知道製作工具。我們能檢查的是設計決定是否有跡可循:為什麼這個結構與這句文案適合目前的產品?
每一項發現都遵守四個原則
- 01
先讀產品
目標使用者、主要任務、既有行為與 DESIGN.md,優先於通用的反模式清單。
- 02
綜合多個模式判斷
一個圓角或一種顏色不會直接構成問題。必須綜合出現頻率、相鄰模式與實際影響後再判斷。
- 03
品質問題另外標示
對比、焦點、內容溢出與異常狀態屬於品質問題,不用「看起來像 AI」一語帶過。
- 04
只修改必要範圍
保留產品行為與內容。先拆掉影響最大的重複模式,不再蓋上一套新風格。
檢視生成式 UI 的十個角度
把它們當作設計審查問題,而不是禁用清單。每一項都列出容易趨同的預設做法、設計師通常會保留的判斷,以及該模式仍然合理的條件。
由優先順序決定構圖
讀完所有標籤以前,能否先看出什麼最重要?
- 趨同的預設做法
- 每個區塊使用相同的標題、卡片數量、對齊與視覺重量。
- 設計師會保留的判斷
- 把主要任務放在最有力的位置,輔助資訊依實際重要性降低存在感。
- 仍然適用的條件
- 重複確實代表步驟、比較項目或同類型物件時。
LAYOUT-01LAYOUT-05TYPE-01容器用來說明邊界
每個方框是否代表物件、操作、選擇或圖層?
- 趨同的預設做法
- 區塊外套卡片,裡面的面板與說明又再套一層卡片。
- 設計師會保留的判斷
- 先使用留白、對齊、字級與分隔線;只有邊界本身有意義時才加容器。
- 仍然適用的條件
- 這個表面能單獨移動、選取、關閉或重複使用時。
LAYOUT-02LAYOUT-03VISUAL-03文字層級說明閱讀方式
這個頁面用來瀏覽、閱讀、比較,還是操作?
- 趨同的預設做法
- 流行字型、相近字級、重複的小標與滿版展示字讓層級變平。
- 設計師會保留的判斷
- 依任務調整行寬、字重、行距與對比,並讓同一區域的文字角色保持穩定。
- 仍然適用的條件
- 單一字型仍有清楚層級,且符合產品語氣時。
TYPE-01TYPE-02TYPE-03色彩與深度各有工作
每個強調色、表面、陰影與圓角都能說明用途嗎?
- 趨同的預設做法
- 漸層文字、發光、玻璃、大圓角與擴散陰影同時爭奪注意力。
- 設計師會保留的判斷
- 把色彩對應到品牌、操作、狀態或選取;同一層級只採用一種邊界或 elevation 方式。
- 仍然適用的條件
- 材質與配色有品牌依據,同時保有對比與狀態辨識時。
COLOR-01VISUAL-04VISUAL-05用實際內容取代裝飾
頁面上的什麼能證明產品主張?
- 趨同的預設做法
- 通用圖示、虛構指標、模糊光球與佔位儀表板取代產品內容。
- 設計師會保留的判斷
- 盡可能展示真實流程、素材、資料形態、狀態變化或已確認的限制。
- 仍然適用的條件
- 插圖承載品牌敘事,或補充產品介面難以直接說明的內容時。
EVIDENCE-01VISUAL-02VISUAL-06密度配合任務
相關內容是否靠近,不同群組是否清楚分開?
- 趨同的預設做法
- 設定、表格、行銷文案與行動裝置控制項都使用同樣寬鬆的留白。
- 設計師會保留的判斷
- 群組內緊密、群組間清楚;操作型畫面優先比較效率,不追求展示型留白。
- 仍然適用的條件
- 寬鬆留白能降低專注流程或編輯閱讀的認知負擔時。
LAYOUT-05DENSITY-01DENSITY-02把不完美的狀態也納入產品
成功以前、之後和失敗時會看到什麼?
- 趨同的預設做法
- 只有精緻的成功狀態,沒有空白、載入、錯誤、權限與長內容狀態。
- 設計師會保留的判斷
- 把狀態變化納入資訊架構,並為每個狀態提供可執行的下一步。
- 仍然適用的條件
- 明確說明它只是靜態視覺研究,且不宣稱已可上線時。
STATE-01STATE-02COPY-04響應式需要重新安排優先順序
空間縮小時,哪些內容應移動、堆疊、收合或減少?
- 趨同的預設做法
- 只把桌面欄位縮小,直到文字截斷、控制項亂換行、在地化內容撐破版面。
- 設計師會保留的判斷
- 保留閱讀順序與主要任務;原本關係放不下時,直接改變構圖。
- 仍然適用的條件
- 橫向捲動是有明確提示的資料或媒體瀏覽方式時。
LAYOUT-06RESPONSIVE-01LOCALE-02動效用來解釋變化
移動是在說明回饋、起點、連續性,還是空間關係?
- 趨同的預設做法
- 為了讓靜態頁面顯得高級,所有元素都淡入、漂浮、彈跳或依序出現。
- 設計師會保留的判斷
- 只選一個編排重點;回饋快速、可中斷,並尊重減少動態效果設定。
- 仍然適用的條件
- 環境動效屬於產品體驗,且不干擾閱讀與操作時。
MOTION-01MOTION-02MOTION-03控制項遵守一致的互動約定
控制項的外觀、名稱與結果是否符合實際動作?
- 趨同的預設做法
- 沒有行為差異,卻不斷增加 pill、badge、button、tab 與 modal 變體。
- 設計師會保留的判斷
- 用具體動詞命名操作,必要時讓 URL 保存狀態,只把短而封閉的任務放進彈窗。
- 仍然適用的條件
- 變體區分已驗證的狀態、權限、風險或專業工作流程時。
COMP-01COMP-02COMP-03Anti-slop 不等於極簡主義
設計師並沒有暗中偏愛某一種外觀。他們更在意方向是否符合任務、內部邏輯是否一致,以及執行是否超越模板。
表現型編輯頁面
以探索和敘事為目標時,大字、獨特構圖、影像與有節奏的留白都可以合理。
視覺特色來自主題本身,而不是當下流行的著陸頁套件。
高密度產品工具
需要反覆比較與操作時,表格、緊密控制項、持續導覽與節制字級更適合。
密度中仍有清楚群組與穩定瀏覽路徑,也能容納真實資料與狀態。
聚焦式服務流程
信任與完成更重要時,安靜的單欄、熟悉控制項與直接文案更適合。
簡潔用來降低使用者的不確定,不是掩蓋缺少的產品判斷。
保留原本意圖,讓產品判斷更清楚
切換三個例子,查看修改前後的差異。每個修改後版本都保留原本要完成的工作,只把慣用裝飾換成更明確的產品決定。
預設模式
由裝飾決定版面的頁面
漸層主視覺、圖示方塊、卡片層層包覆、左側強調線和重複三欄,比內容本身的用途更搶眼。
OmD 方向
由使用者任務決定版面的頁面
品牌表現只留一個重點。步驟按順序呈現,比較內容放在兩側,只有獨立項目才使用卡片。
LAYOUT-02LAYOUT-03VISUAL-01VISUAL-02修改原因這不是換上另一種流行風格,而是移除無法說明項目或操作的容器。
三種標籤不能混在一起
把模式趨同、產品品質與個人偏好分開,檢查結果會更精準,也不會把審美偏好包裝成共同標準。
缺少脈絡的模式群組
沒有產品依據的預設模式反覆疊加,削弱資訊層級、信任與品牌辨識度。
可量測或可重現的缺陷
無障礙、內容溢出、異常狀態、效能或互動沒有通過檢查,或不符合產品約定。
合理的設計選擇
這項選擇符合設計需求與 DESIGN.md。即使有其他做法,也不表示目前的設計有缺陷。
不用推翻整套風格,也能找出、修正並複查
檢查從產品依據開始,以最小修改結束。不會先挑一種更流行的視覺風格。
- 01
閱讀產品頁面
先記下目標使用者、主要操作、必須保留的行為與設計依據。
- 02
收集可量測的依據
記錄 DOM、CSS、重複次數、程式碼位置與瀏覽器結果,再結合產品脈絡判斷。
- 03
確認模式群組
對照頻率、相鄰模式、DESIGN.md 例外與頁面影響,刪掉缺少依據的結論。
- 04
聚焦修正
只修改恢復產品層級所需的容器、文案與視覺處理。
- 05
回到同一個頁面複查
使用修改前相同的桌面、行動裝置、互動、無障礙與語言條件完成驗證。
判定方式參考了哪些研究
分類架構由 OmD 定義。保留語意、判斷模式群組與依據優先的原則,參考了以下公開專案。

