單一接口語言

1）什麼是單一接口語言,為什麼需要它

單一接口語言（EYAI）是由設計師，工程師，分析師和內容作者共享的概念，視覺規則和交互的一般系統。

• 一致性：不同產品和團隊中的相同組件和術語。
• 速度：快速組裝，更少的holivar，更快的onbording。
• 質量：一致的UX模式，「默認」可用性。
• 可擴展性：安全進化而不分解為「UI動物園」。

2）單一語言層

1.令牌（顏色，打字機，尺寸，陰影，縮進，半徑，動畫）。
2.組件（按鈕、輸入字段、表格、圖形、調制解調器、烤面包、選項卡）。
3.模式（表格、驗證、分步向導、清單/表格、通知）。
4.內容（微操作、術語、錯誤消息）。
5.肖像和插圖（家庭，風格，尺寸和線條）。
6.可用性和i18n/RTL（A11y規則，可翻譯性，位置）。
7.過程（版本，gaidrails，review，linters，店面和示例）。

3）設計令牌（表現力的基礎）

令牌是所有產品中重新使用的命名值。

3.1令牌結構（示例）

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3.2 Neiming令牌

從普通到私人： '顏色。accent.primary`, не `primaryBlue`.

與neiming中的品牌無關（品牌是主題，不是令牌名稱）。
分級：'fg。muted`, `fg.primary`, `fg.inverse`.不要在沒有系統的情況下以標題（「blue 500」）編碼亮度。

3.3個令牌主題

明亮，黑暗，對比：改變含義，不是名字。
主題-覆蓋層,UI保持一致。

4）組件： 合同、狀態、可用性

組件=視覺+行為+合約+A11y。

4.1按鈕合同示例

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

狀態：「default/hover/active/focus/disabled/loading」。
可用性：焦環，目標尺寸≥ 40-48 px，toggle的「aria-pressed」。

4.2組件保修

穩定尺寸（線路，paddings）。
開箱即用（角色扮演/aria，鍵盤，對比）。
不變性：字段內的誤差始終在底部並帶有「aria-describedby」。

5）UX模式（可重復邏輯）

表格：左/頂部的標簽，placeholder ≠標簽，摘要+旁邊的錯誤，輸入掩碼和提示。
調制解調器：一個主要CTA，「Esc」關閉，聚焦陷阱，聚焦回歸。
表/列表：排序、粘性標題、排頁、導出。
過濾器：顯式的「應用」按鈕,重置,保存的預設。
通知：tost ≤ 3-5 c，焦點暫停，'role='status/alert'。
Dashbords：頂級洞察力→ CTA → →圖形的上下文。

6）單一術語和微寫作

6.1詞匯表

維護統一的業務和UX術語詞匯表。每個接口文章都引用它。
對於雙打，選擇一個單詞（「錢包」與「平衡」），第二個單詞作為搜索的同義詞。

6.2文本規則

簡而言之，在案件中；避免行話。

錯誤-解釋該怎麼做： 「請以GGG-MM-DD格式指定日期。」

標題是名詞；按鈕是動詞（「保留」,「取消」）。
一致性單位：UTC或本地貨幣的日期/時間（EUR，USD）。

7）圖像和插圖

該家族是同構的：單個角度，線厚度，24 × 24網格。
狀態和語義：顏色-次要；形式/圖標+文本-主要。
縮放：象形圖不以不同的密度「漂浮」（1 ×/2 ×/3 ×）。

8）可用性（A11y）和本地化（i18n/RTL）

組件通過WCAG AA：對比度，鍵盤導航，焦點，「預制運動」。
可翻譯的字符串是資源，不是代碼。播放器和數字/日期格式是本地化的。
RTL：圖標鏡像，正確的Tab順序，鍵盤上的DnD邏輯。

9）數字、日期、貨幣和格式

日期/時間：ISO-8601，真實時間點-UTC；用戶是本地。
貨幣：小單位/十進制行；始終指定代碼（例如,12.34或12。34 EUR"-在本地）。
利息：「12.3%」和「+1.2個百分點」明確區分。
四舍五入：達到有意義的放電；大數字的「k/m」。

10）Howernans： 角色，文物，頻道

設計語言委員會（DLC）：代幣/組件的所有者，RFC批準。

• 組件庫（Figma/代碼）+帶示例的實時目錄。
• 文件：gaidrails，模式，A11y，內容海德。
• 具有日期，級別（added/changed/deprecated/removed/fixed）的cheinjlog。
• 頻道：每周設計合成器，Slack頻道，showkeys實施。

11）轉化與進化

用於組件包的SemVer： 'MAJOR。MINOR.PATCH`.

MINOR-加法：新令牌，帶默認值的props，新組件。
MAJOR-破裂：刪除散文，更改語義→遷移海德。
清除：警告，窗口≥ 90天，兼容性標誌。

12）Linters和自動檢查

UI-linter：令牌外禁止的顏色，反模式（按鈕撥號，禁用外線）。
A11 y檢查：對比，角色/aria，焦點，鍵盤。
i18n-linter：代碼中的「硬」行，不正確的播放器。
截圖測試：成分視覺回歸。
可視化API合同（如果有）：數據類型、範圍、簽名。

13）組件展示（故事書/沙箱）

帶有Props控制，代碼，狀態，A11 y檢查器的實時示例。
「食譜」：註冊表格，第3步向導，表+過濾器，調制解調器+敬酒。
「區域沙盒」：語言/格式切換/RTL。

14）神經模式和結構

14.1個組件（VEM/語義，CSS示例）

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

在代碼中，是單調的props名稱：「size」，「kind」，「disabled」，「onClick」。

14.2庫文件結構

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

15）反模式

令牌外的「自由」顏色/縮進。
組件雙：「ButtonV2」，「PrimaryButtonNew」。
播放器是唯一的字段標簽。
禁用outline和「dive-butch」。
不可預測的hover/active/disabled。
音譯術語代替正常翻譯。
更新時沒有遷移蓋德。

16）單一語言質量指標

覆蓋：使用組件庫的屏幕比例。
一致性索引：重復使用令牌vs「手動」樣式。
A11y通行率：通過WCAG AA的組件百分比。
Defect Escape：在1k commits上銷售UI/內容缺陷。
時間到船：在DLS之前/之後實現類型屏幕的時間。
Adoption：DAU店面，公關數字與組件/模式。

17）屏幕支票清單

• 使用令牌（顏色/縮進/半徑）而不使用「硬」值。
• 圖書館中的組件；種姓-僅在RFC下。
• 可用性：鍵盤/焦點/對比/角色扮演/aria。
• 單位：日期/貨幣/利息-按海德格式。
• Microcopies：按鈕=動詞，錯誤=糾正動作。
• Locali/RTL不會破壞布局。
• 狀態：提供loading/empty/error。
• 視覺回歸測試已更新。

18）實施計劃（3次叠代）

叠代1-基礎（2-3周）

令牌（顏色/打字機/spacing/motion），基本組件（Button，Input，Select，Tooltip，Modal），內容海德（音調，標簽，錯誤）。
展示櫃（storybook）和A11y-checker，令牌linter。

叠代2-模式和本地化（3-4周）

表格/表/過濾器模式，圖標24 × 24，RTL/i18n沙箱，數字/日期/貨幣規則。
SemVer，cheinjlog，RFC/遷移過程，自動測試（視覺+A11 y）。

叠代3-規模和演化（連續）

復合組件（向導，DataGrid，Chart primitives），temization（淺色/深色/對比度），質量指標報告，定期的UX審核。

19）迷你常見問題

是否需要「一勞永逸」？
沒有。從令牌和基本組件開始,然後添加模式和過程。

如何說服團隊使用EIAI?

顯示勝利：速度，少缺陷，現成的屏幕配方和「開箱即用」A11y。

如何處理傳統屏幕?

遷移計劃，通過令牌的橋梁樣式，優先屏幕是第一個。

底線

單一接口語言不僅僅是組件庫。這是一個規則和過程系統，其中令牌指定了表現力，分量是行為和可用性，模式是決策的可重復性，而howernance和度量標準是持續的演變。使語言清晰，可驗證和可擴展-您的產品看起來和操作一致，快速且可靠。