深化設計
創造一個更可擁有的設計,而非僅僅是更裝飾的設計。
開始工作前,請先閱讀 references/recursive-tree.md。 如果使用者在回應不滿意的先前結果,也請閱讀 references/failure-patterns.md。
核心區別
顆粒度具有層次:
- 產品真理與期望信念;
- 品牌定理與敘事隱喻;
- 頁面架構與節奏;
- 區塊構成與互動;
- 元件語言;
- 字體、顏色、間距、邊框、陰影與動畫細節。
始終按此順序深入。更大的標記集、更多的陰影或更多的 微互動,並不代表設計更深——當第 1-4 層保持不變時。
從渲染證據開始
對於現有介面:
- 保留目前的實作和使用者的變更。
- 捕捉目前桌面版和行動版的第一個視口。
- 檢查至少兩個後續區塊和一個有意義的互動。
- 說明哪些是客觀有效的。
- 說明為什麼這個頁面在五秒內就會被遺忘。
- 區分功能閘門與品味判斷。
將「仍然平庸」視為失敗的設計測試。不要為較早的分數辯護, 也不要預設繼續使用相同的方向。
建構一個有界的二元樹
在每個方向改變的節點,建立兩個在材料上不同的分支。 一個有效的分支會改變視覺論點、資訊結構或 簽名式互動。調色板互換不是一個分支。
使用束搜尋:
- 展開兩個分支;
- 以最便宜的有效保真度使兩者都可見;
- 成對比較它們;
- 保留最強的分支和一個可信的挑戰者;
- 深入一層;
- 當兩個子代繼承相同的弱點時回溯。
不要建構每一個可能的葉節點。將深度投入於關鍵決策, 而不是組合數量。
必需的深度閘門
深度 0:產品不變量
寫下:
- 訪問者;
- 張力時刻;
- 他們應該理解、感受和做什麼;
- 競爭對手無法以同樣方式誠實宣稱的產品真理。
在具體化之前不要實現。
深度 1:兩個品牌定理
創建兩個具有不同含義的一句話定位。每個必須產生:
- 一個敘事隱喻;
- 一個空間語法;
- 一個內容優先級;
- 一個簽名機制;
- 一個明確的反向參考:這個方向不得像什麼。
當有外部研究可用時,搜尋三到五個當前相關的參考。 提取機制,而不是風格拼貼。沒有候選可以複製一個參考的完整視覺識別。
深度 2:兩種架構
對於領先的定理,將頁面分支為兩個不同的旅程。 為每個區塊定義任務、佈局家族、節奏、對比事件、證明和退出動作。
當以下情況時拒絕一個架構:
- 大多數區塊重複「大標題 + 段落 + 圖片/卡片」;
- 產品證明可以與一般 SaaS 截圖互換;
- 移除標誌後無法識別類別或品牌;
- 唯一的視覺區別是調色板或字體。
深度 3:視覺原型
在完整實現之前,渲染兩個倖存的方向。偏好:
- 兩個第一视口原型;
- 每個方向一個代表性的中頁區塊;
- 先做桌面版,然後進行行動版折疊檢查。
並排比較截圖。不要僅憑文字選擇。
如果使用者有空且這些方向編碼了真正不同的品味, 可以問一個簡潔的分叉問題。如果使用者要求自主, 就根據證據選擇並保留挑戰者。
深度 4:系統與實現
現在才定義:
- 字體角色與級別;
- 調色板與對比;
- 素材語言;
- 網格、間距與形狀規則;
- 動畫語義;
- 元件基元。
在可用時使用 ui-ux-pro-max 取得相關設計系統數據。
在方向選擇後使用 design-taste-frontend 作為預檢檢查器。
其規則可能拒絕陳腔濫調,但不能選擇概念。
深度 5:微觀細節
只有在方向與架構閘門通過後,才調整邊框、陰影、材質、懸停狀態、光學間距和效能。
每個微觀變更都必須指出它所強化的上層決策。 當它不改變層次結構、意義、回饋或材質一致性時,就移除它。
評估正確的事物
保持兩個獨立的帳本。
功能閘門
- 產品真理;
- 響應式行為;
- 可及性;
- 效能;
- 程式碼與測試健康度。
這些是通過/失敗的約束條件。它們不能證明品味。
設計判斷
- 五秒鐘的理解;
- 關閉標誌後的可擁有性;
- 延遲後的視覺記憶;
- 類別模板距離;
- 產品機制可見性;
- 貫穿整個頁面的對比與節奏;
- 使用者偏好。
使用來自參考工作流程的成對證據。不要從自訂的評分標準中給出絕對的 95/100 或 98/100 分。 如果使用者說結果很普通,則無論 Lighthouse 如何,獨特性聲明都已經失敗。
以證據結束
回傳:
- 已探索的樹及其回溯位置;
- 勝出方向與倖存的挑戰者;
- 之前/A/B 截圖或等效的視覺證據;
- 三個最大的可見變更,按深度排序;
- 功能閘門結果;
- 未解決的品味或產品決策。
不要將微觀細節的數量描述為主要成果。成果是一個 可識別的設計論點,即使沒有標誌也能存在。