UI/UX 設計框架
目標
將 UI 設計、實施與審查限制在使用者證據支持的目標、視覺層級與完成度、任務可用性、互動語意、後果意識以及可復原狀態。這是一個執行輔助工具,並非生命週期替代品,也非視覺設計系統。
僅使用最小適用的子集。請勿發明任務未提供證據的人物誌、業務優先級、裝置假設、復原保證或互動行為。
使用時機
僅在選定通用交付工作流程後,且任務變更或審查具有以下一個或多個信號的使用者可見介面時,使用此技能:
- 螢幕、表單、導航流程、選項或主要動作;
- 焦點、選取、禁用、載入、成功、錯誤、完成或其他互動狀態;
- 重大或可逆的使用者動作;
- 部分資料/渲染失敗、過期或遺失資料、重試或復原行為;
- 用語影響任務完成或錯誤復原的 UI 語言。
請勿將其用於非 UI 工作、純機器消費的輸出,或作為載入所有 UX 問題的理由。專案特定的品牌、使用者、術語、關鍵流程與業務規則仍屬專案上下文。
流程
- 錨定於證據。識別已知的使用者目標、使用情境、首要注意的資訊、動作優先級、完成/下一步動作以及限制條件。為此目的選擇密度與組成:比較工作空間與產品介紹需要不同的處理方式。現有合約是輸入,而非品質上限;在範圍內重新審視觀察到的弱點。僅暫停依賴於重大遺失事實的決策,而不發明人物誌或工作流程。
- 選擇適用的原則與模式。僅閱讀
references/principles.md、references/decision-patterns.md和references/anti-patterns.md的相關章節。記錄它們適用的原因。將範例視為證據提示,而非全域禁令。 - 使組成具體化。將分組、順序、文字層級與換行、對齊錨點、間距、圖像和控制項關係連接到任務。在添加說明之前,優先採用清晰的結構/狀態;保留所需的意義與可存取的標籤。對於日文,根據其顯示位置和狀態來判斷標籤、目標/結果用語與回饋,而非僅憑文法;在下列發現規則下使用可用的
japanese-expression能力。 - 指定行為。定義適用的預設用途/指示符、狀態語意、即時回饋、過渡、焦點/當前狀態、連續性以及等效的互動路徑。明確標記不相關的問題;請勿憑空製造懸停、拖曳、手勢或動態行為。
- 區分後果類別。區分承諾前的取消、可逆變更完成後的復原,以及承諾變更後的補償動作。對於不可逆或重大後果的動作,在承諾前顯示目標、範圍、後果與復原限制。請勿對低風險的可逆動作添加籠統確認。
- 界定失敗邊界。當獨立區域失敗時,保持健康、授權、語意有效的區域和使用者輸入的可用性。保持未解決的失敗在受影響區域中可見,使重試範圍化,並驗證重試結果。區分載入、合理為空、遺失、過期、部分和完成狀態。請勿零填充遺失資料,或暴露其前提條件為假的衍生動作。僅在授權、安全性、一致性或依賴語意要求時擴大封鎖範圍。
- 優化與驗證實際渲染。在實施期間,在優化控制項之前檢查代表性的全螢幕,然後優化相關元件細節,在獨立審查之前縮小佈局和狀態。分別判斷視覺完成度、任務可用性和功能行為;可運作的點擊、相等的 CSS 值和無溢出並不代表完成度。演練適用的過渡、鍵盤/焦點、實際復原、承諾前取消、保留的輸入和範圍化重試。螢幕截圖支持靜態外觀,但不支持復原或狀態恢復。使用
references/ui-capability-contract.md中的觀察與交接規則。 - 連接可用的 UI 能力。遵循
references/ui-capability-contract.md以進行僅合約、基於現有合約建置或直接 UI 請求。在此保持原則所有權,從活動環境中解析外部能力擁有者,並保留合約到實施到證據的連結。能力或執行階段缺口僅會停止受影響的相依工作,且絕不視為已完成的審查。 - 將限制交回所選工作流程。
requirement-grill、grill-design、controlled-implementation、test-first-verification、審查關卡和最終合併關卡保留其責任。此補充僅限縮 UI 決策;它本身不授權實施或審批。
輸出
在當前任務的決策記錄中發出一個有界補充。對於局部調整,僅記錄變更的決策和受影響的證據;無需新的 JSON 合約或填寫範本。省略不相關的欄位或使用 not_applicable: <原因>;切勿投機地填寫它們。
UX 補充:
user_context:
user_goal:
usage_context:
known_constraints:
capability_or_environment_considerations:
task_model:
page_or_flow_goal:
primary_action:
completion_state:
next_action:
information_model:
required_information:
secondary_information:
omit:
language_required_for_clarity:
interaction_model:
affordances_and_signifiers:
state_semantics:
action_feedback:
transition_behavior:
consistency_expectations:
direct_manipulation:
equivalent_interaction_paths:
inclusion_constraints:
single_cue_dependencies_to_avoid:
error_prevention:
recovery_paths:
input_and_effort_constraints:
resilience_and_consequences:
action_reversibility_and_limits:
pre_commit_consequences:
failure_boundaries_and_dependencies:
safe_remaining_content_and_actions:
partial_failure_and_freshness_feedback:
scoped_retry_and_recovery_refs:
blocking_conditions:
applicable_patterns:
anti_patterns:
implementation_constraints:
verification_scenarios:
stop_conditions:
每個驗證情境命名所檢查的狀態和可觀察的關係。對於互動,添加動作/輸入、預期的可見和底層狀態,以及適用的復原/連續結果。將設計決策保留在現有的資訊模型和實施限制中,而不是建立另一個架構。
退出條件
- 此補充僅因當前證據包含 UI 信號而連接。
- 使用者、產品、品牌和業務假設已被溯源或標記為未知。
- 主要任務和下一步動作在不移除必要語意的情況下更加清晰。
- 對於已渲染的 UI 判斷,組合和元件完成度具有與功能檢查不同的渲染證據;僅合約的工作指定觀察標準,而不聲稱實際螢幕核准。通過合約並不能排除觀察到的粗糙點。
- 動態聲明具有互動/狀態證據要求,而非僅螢幕截圖證明。
- 在適用時區分可逆、不可逆、部分失敗和基礎封鎖行為。
- 在獨立失敗和重試過程中,保持健康狀態和使用者輸入。
- 通用工作流程和最終審查權限保持不變。