UX網關和接口標準
1）原則
清晰度先於美麗。含義和動作在1-2秒內顯而易見。
每個屏幕一個目標。其他一切-次要或隱藏。
順序。相同的模式=相同的期望。
默認可用性。對比，焦點，鍵盤，配音。
上下文。線索和文本恰好是需要的地方。
本地化第一。行長，格式，文化-最初在設計中。
可逆性。任何有風險的行為都可以撤銷/確認。
可測量性。每個規則都帶有度量（步驟轉換，時間，錯誤）。
2）網格，縮進和節奏
網格：4/8-pt步驟；列：12（桌面）、6（平板電腦）、4（移動）。
內部組件縮進：倍數4；外部-8/ 12/16/24。
垂直節奏：標題→副標題→內容→動作（CTA）。
邊界和分隔符：經濟的；更喜歡「空氣」和印刷層次結構。
3）印刷廠
Cegley量表：16/20/24/32/40 12月12日（body 16）。
行高度：1。4–1.案文6，1。2–1.3標題。
字符串長度：45-75個字符（桌面）,35-55（移動）。
分配：粗體用於語義重音；caps-僅在標簽中。
大聲朗讀：歌詞聽起來應該自然。
4）顏色和對比
語義：「success/info/warning/error/neutral」。
對比度：最低WCAG 2。1 AA（案文/背景≥ 4。5:1;主要≥ 3：1）。
顏色≠唯一的信號。添加圖標/文本/形狀。
焦點環：始終可見（不要在CSS中斷開連接）。
5）導航和信息架構
用戶路徑："我在哪裏?這裏有什麼？ 接下來是什麼？-很明顯。
菜單層次結構：在主導航中≤ 2個級別。
面包屑：用於深部分。
搜索：在復雜的目錄上全局可用；熱鍵「/」。
導航狀態：活動選項卡/頁面以令牌突出顯示。
6）組件和模式
使用設計系統的組件（沒有「自制」）。
每個屏幕一個主要CTA；其余的是中級/中級。
狀態：default/hover/focus/active/disabled/loading-在每個交互中都是強制性的。
空狀態：上下文值+CTA（+次要鏈接）。
常見的Alerta：每個屏幕一個頁面警報+本地入線提示。
7）形式，驗證和錯誤
該標簽具有約束力。Placeholder是格式而不是替換的示例。
在blur上進行入線驗證，在submit上進行總結錯誤。
錯誤消息：什麼不是+如何修復+限制/格式。
自動滾動並關註第一個錯誤；「aria-invalid」，「aria-describedby」。
掩碼和格式：提示但不中斷輸入（可能有步驟）。
數據保護：在重新啟動/錯誤時,我們不會丟失任何內容。
8）狀態和支線
成功：敬酒2-4，中性積極基調，CTA「接下來會發生什麼」。
信息/通知：軟橫幅/tultip,不會阻止流量。
警告/錯誤/批評：視覺/語義層次結構；關鍵的是調制解調器/帶有明顯動作的橫幅。
下載：skeleton>微調器；估計等待時間>3秒。
9）內容和微型
三個答案的規則：發生了什麼→為什麼→接下來要做什麼。
CTA：動作動詞+賓語（「保存更改」，「通過驗證」）。
數字/日期/貨幣：本地格式。
語氣：友好；在壓力步驟（付款/安全）-中性。
10）可用性（A11y）
從鍵盤完全導航；禁忌的邏輯順序。
角色和「aria-」用於互動，live區域用於敬酒/狀態。
對比度，焦環，交互尺寸≥ 44 × 44 px。
圖標/圖像中的文本替代品；帶有「th」/「scope」的表。
檢查：自動（linter/scanner）+手動屏幕閱讀器腳本。
11）本地化與國際化
所有行均以上下文為i18n鍵。
「長語言」測試（DE/TR），RTL模式。
數字/貨幣/時間是格式化實用程序。
Tone-map：按場景劃分的形式/情感程度（討價還價/付款/安全）。
12）可恢復性和適應性
Breakpoints： 360 / 768 / 1024/1280+。
移動第一：關鍵路徑是單手可用的，CTA在拇指區域。
手勢和鍵盤：手勢用按鈕復制；在桌面上-hotkeys。
密度：在桌面上-空中，在移動上-在不影響可點擊性的情況下節省垂直。
13）黑暗主題
WCAG的對比仍然存在；避免背景的「純黑色」（深灰色）。
發光/陰影-衰減；對比焦環。
插圖和徽標-帶有反向版本。
轉換策略：我們保留用戶選擇（system/light/dark）。
14）動畫和運動
持續時間：120-200 ms（小），200-300 ms（過渡）。
加速功能是自然的（具有輕度減速的cubic-bezier）。
動畫不應阻止線程並降低可讀性。
尊重「prefers-reduced-motion」。
15）表演
LCP ≤ 2.5 c，TTI/TBT在綠區；分解代碼；懶惰的媒體下載。
長列表虛擬化；數據積壓。
Skeleton用於感知速度；最小化布局的「jank」。
16）安全性和隱私在UI
對查詢原因的明確解釋（相機，KYC，地理）。
透明的時限/傭金/限制；如果可能出現延誤，則沒有「即時」。
敏感數據-「顯示/隱藏」顯式掩碼。
對不可逆轉行動的確認；活動/登錄通知日誌。
17） UX質量指標
步驟轉換和完成時間。
字段/步驟和時間到修復的錯誤率。
CTR通過CTA和腳本的可重復性。
錯誤後/加載後>N秒。
按主題提出的支持請求（在修改之前/之後）。
發布的A11 y缺陷（目標為0關鍵）。
18）支票單
發布前的屏幕
- 一個主要目標和一個primary-CTA。
- 導航和「我在哪裏」的狀態是顯而易見的。
- 內容簡短：每組1-2個報價。
- 狀態：loading/empty/error/success覆蓋。
［A11y］：AA對比，焦點可見，「aria-」在互動上。
- 本地化：已驗證行長度/格式/RTL。
- 表演：沒有必要就沒有「沈重」的障礙。
發布前的表格
- 存在標簽和示例格式。
- 內聯驗證+submit上的摘要。
- 滾動到第一個錯誤，焦點在現場。
- 來文：為什麼/為什麼/為什麼；沒有用戶500/400代碼。
- 數據不會在錯誤/重新啟動時丟失。
19）反模式
「OK」作為語義步驟上的CTA。
播放器代替標簽。
顏色是唯一的狀態信號。
旋轉器沒有時間評估，也沒有選擇。
模態窗口沒有焦點敲擊和ESC關閉。
混合樣式/圖標，在設計系統中復制組件。
關鍵場景中的幽默/表情符號（付款/安全）。
20）「之前/之後」示例"
表單錯誤
之前： 「錯誤400」
之後： "日期格式不正確。使用DD。MM。GGGG"
空狀態
之前： 「這裏是空的」
之後： "第一次補給後的操作歷史將在這裏出現。［補充帳戶］"
成功消息
之前： 「完成」
之後： "已接受付款。資產負債表已更新。［查看歷史］"
導航
前： 不清楚用戶在哪裏
後： active選項卡+面包屑+顯式頁面標題
21）設計評論模板
屏幕框架
標題→簡要說明→內容/列表→提要/狀態→操作。
形狀框架
標題→字段→提示（標簽+幫助+錯誤）→ CTA →次要動作→註釋（傭金/時限）。
Microcopy模板
標題（opz.）
1-2句： 背景+下一步
CTA： 動作+對象
輔助鏈接： 幫助/規則
22）流程和標準維護
Done的定義（UX）：布局+文本+狀態++A11y+i18n+度量。
公關中的UX評論：第18-21節的支票清單。
文檔：每個字段都在wiki/Storybook中添加/更新海德。
每季度審核一次：內容，A11y，表演，一致性。
最終的spargalka
一個目標，一個主要CTA。
預先設計了狀態和支腳。
A11y和本地化-從頭開始，而不是「然後」。
顏色更少-語義和節奏更多。
測量：轉換，錯誤，時間，處理。
一切都通過設計系統：相同的規則→相同的期望→可預測的UX。
我可以為您的關鍵場景（註冊/KUS，存款/退出，獎金/錦標賽）添加現成的模板來補充此海德，並根據您的咆哮過程收集支票單。