Dooping Design Book
一本可以被實作的設計語言。 給的是「這類介面該怎麼運作」的答案,不是一堆好看的色塊。
這本書萃取自一套真實運作、被人每天使用的內部後台系統。收進來的每一條規則、每一個元件、 每一個模式,都在真實使用者手上被驗證過、被抱怨過、然後被修正過。
這本書包含什麼
| 層 | 內容 | 建議取用方式 |
|---|---|---|
| 基礎 | 色彩語意、字級、間距、圓角、陰影、動態、深淺主題 | 安裝 @dooping/tokens(唯一建議硬相依的一層) |
| 元件 | 通用元件的用途、界線、狀態、無障礙(清單見元件總覽) | 用 registry 把原始碼複製進你的專案 |
| 模式 | 跨系統可複用的操作邏輯 | 讀懂、然後用你自己的技術棧實作 |
| 頁面 | 五種常見頁型的組成規範與組合範例 | 讀懂、對照組合 story 用你的技術棧組 |
| 無障礙 | 觸控目標、鍵盤、對比、不只靠顏色 | 當成驗收清單 |
| 治理 | 版本策略、回饋流程、漂移防護 | 導入前先看一次 |
| ADR | 爭議性決策的來龍去脈 | 想推翻某條規則前,先讀為什麼當初這樣決定 |
三條收錄原則
這本書刻意很薄。任何東西要收進來,必須同時通過三關:
- 去領域化 —— 拿掉原始產業脈絡還成立嗎?資料表、變異顯示、空狀態成立; 任何綁定特定業務規則的表單版型或計算邏輯,一律不收。
- 通用性 —— 換一個後台系統會用到嗎?「唯讀逐欄編輯」「硬鎖定」「稽核回復」會; 只服務單一產業流程的畫面不會。
- 三次法則 —— 只收實際用過三次以上且穩定的東西。 投機性抽象(「以後說不定會用到」)一律不收,那是設計系統腐爛的第一步。
這本書不做什麼
- 不做品牌視覺。 色票是可換的,語意才是規範。想換成你的品牌色?改 token 的值即可, 不必動任何一行使用它的程式碼。
- 不強迫你用 React。 基礎章與模式章跟框架無關; React 只是其中一份參考實作。
- 不當你的元件維護商。 元件是給你複製走、然後改成你要的樣子的。 唯一希望你別亂改的是 token 名稱——那是契約。詳見 ADR-0004。