跳至主要内容
💬 回報這一頁

Dooping Design Book

一本可以被實作的設計語言。 給的是「這類介面該怎麼運作」的答案,不是一堆好看的色塊。

這本書萃取自一套真實運作、被人每天使用的內部後台系統。收進來的每一條規則、每一個元件、 每一個模式,都在真實使用者手上被驗證過、被抱怨過、然後被修正過。

這本書包含什麼

內容建議取用方式
基礎色彩語意、字級、間距、圓角、陰影、動態、深淺主題安裝 @dooping/tokens唯一建議硬相依的一層
元件通用元件的用途、界線、狀態、無障礙(清單見元件總覽用 registry 把原始碼複製進你的專案
模式跨系統可複用的操作邏輯讀懂、然後用你自己的技術棧實作
頁面五種常見頁型的組成規範與組合範例讀懂、對照組合 story 用你的技術棧組
無障礙觸控目標、鍵盤、對比、不只靠顏色當成驗收清單
治理版本策略、回饋流程、漂移防護導入前先看一次
ADR爭議性決策的來龍去脈想推翻某條規則前,先讀為什麼當初這樣決定

三條收錄原則

這本書刻意很薄。任何東西要收進來,必須同時通過三關:

  1. 去領域化 —— 拿掉原始產業脈絡還成立嗎?資料表、變異顯示、空狀態成立; 任何綁定特定業務規則的表單版型或計算邏輯,一律不收。
  2. 通用性 —— 換一個後台系統會用到嗎?「唯讀逐欄編輯」「硬鎖定」「稽核回復」會; 只服務單一產業流程的畫面不會。
  3. 三次法則 —— 只收實際用過三次以上且穩定的東西。 投機性抽象(「以後說不定會用到」)一律不收,那是設計系統腐爛的第一步。

這本書不做什麼

  • 不做品牌視覺。 色票是可換的,語意才是規範。想換成你的品牌色?改 token 的值即可, 不必動任何一行使用它的程式碼。
  • 不強迫你用 React。 基礎章與模式章跟框架無關; React 只是其中一份參考實作。
  • 不當你的元件維護商。 元件是給你複製走、然後改成你要的樣子的。 唯一希望你別亂改的是 token 名稱——那是契約。詳見 ADR-0004

從哪裡開始