UI 設計探索
為指定的任務產出可用的設計方向。在產生替代方案之前,檢查現有畫面、元件、代碼、密度、內容和互動慣例。除非要求重新設計,否則保留產品識別。
使用參考證據
當外部參考資訊影響任務時,如果可用,請使用 design-reference-research,或直接檢查相關的預設/提供的來源。掌握其來源涵蓋範圍、擷取 ID、觀察結果和不確定性。不要重做已完成的研究,也不要將未經審查的情緒板當作證據。對於已建立在產品基礎上的小型任務,參考資訊的可用性並不表示必須進行研究。
將有用的原則轉化為使用現有產品識別的原始替代方案。解釋每個重要選擇如何遵循使用者任務和證據。根據平台、任務和限制解決衝突的模式;不要混用不相容的導覽系統或複製其他產品的品牌。將未知的互動狀態作為待驗證的問題記錄下來,而不是憑空發明觀察到的行為。
呈現替代方案
僅說明會顯著改變結果的選擇。識別使用者任務、內容層級、適用狀態、無障礙限制和目標表面。讓替代方案在結構或互動上產生重大差異,而不僅僅是顏色。產生的數量應與請求成比例;不要總是生成三個或要求平行代理。
除非已經要求實作,否則將探索性產出與生產程式碼分開。使用真實資料、長標籤、空狀態/錯誤狀態以及會影響選擇的響應式佈局。展示每個替代方案改進了什麼以及付出了什麼代價。僅憑螢幕截圖無法說明焦點、導覽或持續性。
使用可用的設計能力
使用儲存庫原生的元件以及可用的預覽/設計工具。可用的交付成果可以是本機 HTML、現有的設計畫板或帶註解的視覺稿;它不必依賴託管供應商。如果沒有證據,不要聲稱設計已經渲染或測試過。
對於明確配置了 Superdesign 整合的情況,請閱讀 hosted-design.md。工作流程必須在該服務不可用時仍能運作。請勿下載最新 CLI、建立帳戶或將原始碼上傳作為設計工作的隱含先決條件。
交接設計方向
根據任務和限制比較替代方案。如果使用者要求選擇,則呈現用於該決策的實際替代方案。如果他們授權您選擇,請提出建議並說明理由繼續進行,而不是引入另一個核准關卡。
提供所選的產出物、重複使用的代碼/元件、佈局規則、響應式變更、互動/焦點行為、有意義的狀態、資產和未解決的決策。將驗收標準和故意的偏差與參考證據 ID 關聯起來(如果可用);未被選中的替代方案不是實作需求。將選定的設計與可運作的實作區分開來。如果可用,將已授權的實作路由到 frontend-ui-engineering,將評審路由到 plan-design-review,但無需安裝它們。
閱讀 provenance.md 以了解上游工作流程的來源和注意事項。