設計系統及其文檔

1）設計系統是什麼，為什麼需要

設計系統是接口的單一真理來源：一組令牌，組件，實踐和文檔，可提供UX可預測性，開發速度和可擴展性。

• 所有產品中視覺和行為層的一致性。
• 速度：重新使用組件，減少咆哮成本。
• 質量：通用A11y模式，本地化，測試，內容標準。
• 可管理性：明確責任、發布、路線圖。

2）設計系統架構（圖層）

1.設計令牌（基金會）： 顏色，打字機，尺寸，半徑，陰影，縮進，狀態以及語義令牌（'color。surface.warning`, `space.xs`).

2.UI組件：按鈕,輸入字段,模態窗口,dropdowns,表格,敬酒,橫幅,alerts,空狀態,骨架。
3.模式和構圖：KYC表格，支付漏洞，零結果，分步向導，內容卡。
4.內容海德（microcopy）：音調，術語詞典，錯誤/成功模式，推桿/橫幅。
5.基礎架構：A11y、測試、本地化、版本、貢獻者（貢獻）方面的海德。

3）設計令牌： 原理

語義>「原始」樣式。使用「顏色」。text.muted'而不是'#6B7280'。
主題化和平臺。源令牌→平臺映射（Web，iOS，Android，電子郵件）。
在令牌級別上對WCAG進行淺色/深色主題和對比。

全球和上下文量表： '空間。2`, `radius.md`, `elevation.1`, `opacity.disabled`.

代幣轉化：更改-通過降級策略和遷移註釋。

4）組件： 文件中的要求和頁面組成

• 描述和目的。何時使用/不使用。
• 變體/狀態。尺寸，視圖（初級/次級/ghost），失明，加載，破壞。
• 可用性。角色，鍵盤導航，「aria-」，對比度，焦點環。
• Microcopy的文本和示例。有效標簽/播放器，錯誤，幫助。
• 代碼示例。最小API, controlled/uncontrolled。
• 與表單和i18n集成。長行，數字/貨幣/日期的案例。
• 反例子。錯誤的使用模式。
• 測試矩陣。視覺快照，單位/交互式，屏幕閱讀器。

5）構圖模式（回收）

註冊表/CUS：分步向導、進度、inline+summary驗證、錯誤模式。
支付漏洞：方法選擇，傭金，時限，符號方法規則，確認和狀態。
空狀態：上下文值+CTA,零搜索結果。
成功/錯誤消息：狀態層次結構，視覺令牌，吐司/橫幅/調制解調器。

導航和過濾器： 全局搜索,快速預設,標簽.

模式頁面必須顯示可復制組件的構圖，並帶有microcopy和A11 y註釋。

6）內容海德（voice&tone, microcopy）

聲音：專業，清晰；語氣取決於上下文（討價還價、付款、安全）。
單一術語詞典：付款，獎金，限額，KYC-一個產品值。
模板：CTA、錯誤、警告、成功、空狀態、通知。
本地化第一：按地區劃分的字符串長度、數字/貨幣/日期的股票。
A11 y詞匯：清晰的標簽，aria描述，沒有歧義。

7）可用性（A11y）作為系統標準

基本標準：WCAG 2。1 AA用於對比，焦點始終可見，從鍵盤導航。
角色和屬性：組件描述了「role」，「aria-label」，「aria-describedby」 和敬酒/Alert的輕度區域。
屏幕閱讀器：短語的示例，閱讀順序，正確狀態（「assertive/polite」）。
測試過程：自動檢查+手動腳本。

8）本地化與國際化

組件代碼+上下文描述旁邊的i18n鍵。
通過格式化實用程序的數字/貨幣/日期；不要在模板中硬編碼文本。
長度測試：「長德語」，「窄移動」，RTL變體。
語言語氣：關鍵步驟（付款/安全）的音調映射。

9）文檔： 結構和導航

1.導言：任務,原則,責任區.

2.令牌：顏色，打字機，網格，尺寸，陰影，狀態，主題。

3.組件：帶過濾器的目錄（按角色、按平臺、A11 y）。

4.模式：情景（表格，付款，空狀態，成功/錯誤）。

5.內容海德：聲音和語氣，字典，微觀流行模式。

6.可用性：標準，支票單，測試案例。

7.本地化：原則，示例，市場術語表。

8.集成和代碼：安裝、版本、示例、「如何遷移」。

9.貢獻：貢獻過程,設計評論,代碼評論,定義完成。

10.Changelog和Roadmap：發行版，發行版，開發計劃，已知問題。

10）管理和流程（政府）

角色：系統所有者（DesignOps/UX Platform），主流（設計/FE），顧問（BE，A11y，本地化）。
更改委員會：評估請求、優先級、API/令牌匹配。
過程：RFC到新組件，內部問題形式，SLA到錯誤。
Done的定義：設計（Figma）↔代碼（UI包）↔碼頭（示例+海德）↔測試。

11）貢獻： 如何添加/更改

RFC模板：問題→選項→所選解決方案→ A11y → i18n →遷移→風險。
Flow PR：設計評論→代碼評論→ UX撰稿人→ A11y支票→發行說明。
向後兼容性規則：minor/patch用於非破壞性,major-在可能的情況下提供解壓和自動遷移。

12）轉化、發行、遷移

軟件包的SemVer（「@company/ds-core」，「@company/ds-forms」，「@company/ds-charts」）。
發布註釋：更改令牌、組件API、默認行為、斷開更改、遷移粘合劑。
Deprecations：底座上的標記，linter規則，用於大規模替換的時尚代碼。
設計對焦管道：單一源（JSON/YAML）→平臺字條（CSS vars，iOS，Android）。

13）質量測試

單位行為和狀態測試。
視覺快照（主題/狀態回歸）。
A11 y測試：自動+手動屏幕閱讀器腳本。
關鍵流通E2E案例（註冊、付款、KYC）。
Perf預算：樂隊/渲染限制和嚴重依賴禁令。

14）設計系統成熟度量標準

選項：使用DS的屏幕/存儲庫的百分比。
Velocity：從布局到交付的時間。
質量：1個版本UI/A11y缺陷。
一致性：DS以外的「一次性」組件/樣式的數量。
Docs：對內部受眾（設計師/開發人員/分析師）的NPS部件進行底座覆蓋。

15）反模式

令牌作為沒有語義的調色板（「只是顏色」）。
沒有文檔的組件，也沒有極端情況的示例。
忽略A11y（沒有焦點，對比度低，沒有「aria」）。
破裂的轉化，沒有破裂和遷移海德。
組件中的隱藏邏輯（業務規則而不是UI行為）。
將組件復制到狹窄的案例中而不是API擴展。

16）支票單

• 語義名稱和用途。
• 兩個主題中的AA對比。
• 記錄了滑板和使用原理。

• 選項/狀態已覆蓋。
• A11 y描述，「aria-」，重點。
• microcopy示例（標簽、錯誤、提示）。
• 代碼和邊緣案例示例（長線、下載、空白）。
• 單位/visual/A11 y測試為綠色。

• 帶有前/之後示例的發行說明。

[] Migration guide и deprecations.

• 更新了storize/Demo、文檔中的鏈接。

17）「之前/之後」示例"

• 不同的主按鈕：顏色/半徑/縮進不匹配；不同的CTA文本。

• 帶有令牌的單個「Button」：「size=md」，「variant=primary」，「radius=lg」，「spacing=md」，動作+對象樣式的文本。

• 技術信息，沒有線索。

• 組件'不正確的日期格式。使用DD。MM。GGGG。'+自動焦點。

18）組件頁面模板（骨架）

標題： Button

描述：啟動動作；1個主屏幕。
變體：小學，中學，ghost，destructive；sm/md/lg尺寸。
狀態：hover, focus, active, loading, disabled。
A11y：可從鍵盤訪問；「aria-pressed」用於切換。
Microcopy：「保存更改」，「繼續驗證」。避免「確定」。

代碼（示例API）： 「Button {variant, size, icon, loading}」.

反示例：在層次結構的一個級別上雙小學。
測試：視覺狙擊，對比，聚焦環。

19）設計系統實施花花公子（rollout）

1.界面審核：顏色清單/打印/組件/模式。
2.令牌和主要組件的MVP：Button，Input，Select，Modal，Alert，EmptyState，Toast。
3.文檔和故事書：實例,代碼嗅探,gaids。

4.試點產品： 小部件更換,反饋收集.

5.遷移海德：時尚代碼，破壞規則。
6.集擴展：表格,分頁,表格論壇,向導步驟。
7.擴展：產品模式（付款、KYC）、與分析和A/B集成。
8.支持：問題渠道，SLA，內部購物中心。

20）快速文檔模板

• 名稱：'color。border.warning`
• 用途：警告框和警報/警告
• 對比：在色彩背景下的AA。surface.default`
• 不能：用於小字節文本
• 相關：'顏色。surface.warning`, `icon.warning`

模式模板： 空狀態（noResults）

目的： 在沒有錯誤感的情況下調整查詢"

組成： 標題（opz。），文本（1-2句子），CTA，次要CTA，圖標/插圖

Microcopy： "po" {query}"一無所獲。重置過濾器或重新定義查詢"

A11y: `role="status"`, `aria-live="polite"`

最終的spargalka

語義令牌+學科A11y=基數。
組件頁面完整：目的、選項、A11y、微拷貝、代碼、測試。
模式=由具有成品文本和規則的組件組成的成分。
Docs是產品：版本，版本，遷移，貢獻過程。
測量成熟度：成熟度、速度、缺陷、一致性、NPS內部命令。