跳至內容

設計系統與版型參考

出自江振維的課程知識庫
🎨 設計系統與版型參考
Interaction Lab Wiki 的通用設計系統：適用於全站任何頁面（課程、工具、個人、專案、規範…）的色彩、字級、元件與版型規範。
所有元件與規則皆為通用，例子僅示意；任何頁面都應沿用此系統以維持一致。
色彩系統字級與間距卡片 CarBadge 資料表表單表 + 時間軸條目 版面 Lay文字與標題規通用頁面版型流程圖

一、色彩系統

7 個語意色，每個語意只用一個色值。顏色依「意義」使用，不隨意挑色。

語意色

主色 Primary
#2C3E50 · 結構·標題
重點 Accent
#E67E22 · 行動·強調
成功 Success
#27AE60 · 正向·完成
資訊 Info
#2980B9 · 說明·連結
注意 Warning
#F39C12 · 提醒
警告 Danger
#C0392B · 錯誤·禁止
特殊 Special
#6C5CE7 · 次要強調

中性

文字 Text
#2D3436 ·
次要 Muted
#636E72 ·
淺灰 Light
#B2BEC3 ·
邊框 Border
#DFE4E9 ·
頁底 BG
#EEF1F4 ·

淡底色（配語意，用於 callout/狀態/區塊底）

橘淡
#FDF2E9 · accent
綠淡
#EAFAF1 · success
藍淡
#EBF5FB · info
黃淡
#FEF9E7 · warning
紅淡
#FDEDEC · danger
紫淡
#F4ECF7 · special

二、字級與間距

6 級字，全站只用這 6 級，不另創字級。
2.4em　頁面主標
1.8em　區段標題 (h2)
1.4em　子標 (h3)
1.15em　強調內文
1em　一般內文
0.85em　小字/註記/副標

間距：元件間 14–16px、區段間 24–30px、卡片內距 20–28px。

三、Hero（頁首）

每頁頂部的標題區：深藍漸層 #2C3E50→#34495E、白字、圓角、陰影；可選右側狀態 badge。
頁面主標題
副標／一句定位
選用 Badge

四、卡片 Card

內容容器：白底、圓角、淡陰影；可選彩色標頭（標頭色＝語意色，依內容性質選）。
純白卡
一般內容容器
主色標頭
分區/主題卡
success 標頭
正向/通過類內容
danger 標頭
警示/禁止類內容

五、Callout（4 語意提示框）

ℹ️ 資訊　一般說明、原則
💡 提示　建議、技巧
⚠️ 注意　提醒、需小心
🚫 警告　錯誤、禁止

六、Badge 徽章

小標籤，多變體：分類/狀態/等級/浮動。顏色用語意色。

顏色變體
主色accentsuccessinfospecial



狀態膠囊（表格/列表內）：✅ 完成 ⏳ 進行中 ✗ 未完成



分級/等級（如優先序、層級）：用語意色或灰階做高低 —— 高中低



浮動標籤（掛卡片左上角標分類）：

分類標籤
卡片內容…

七、資料表

通用資料表：深藍表頭 + 斑馬列。三個修飾可疊加：狀態色格（單格上語意色）、rowspan 分組、虛線列。
分類 項目 數值 狀態
群組 A
(rowspan 分組) 		項目一 30% ✅
項目二 20% ⏳

八、表單表 + 導航條

表單表（勾選/填寫）

項目 勾選 備註
項目 A ☐ ____
項目 B ☐ ____

導航條 Nav（麵包屑/頁間導航）：左色條 + 淡底 + 連結（灰 | 分隔，可一個 accent 突顯）

🔙 首頁  |  上層分類  |  本頁  |  相關連結

九、時間軸條目 + 箭頭流程

時間軸條目（年表/紀錄/歷程通用）：去點清單 + 左色條 + monospace 日期欄(固定寬對齊) + 內容(粗體標題/灰說明/狀態膠囊)

  • 2024.06
    條目標題
    說明/來源/地點 狀態

箭頭流程（輕量步驟，不畫圖）：步驟一 → 步驟二 → 步驟三 → 完成

十、版面 Layout

  • flex：多欄並排自動換行（display:flex;flex-wrap:wrap;gap）—— 大多數多欄用這個。
  • grid：要等寬整齊的卡片牆用 grid-template-columns:repeat(auto-fit,minmax(300px,1fr))。
  • 寬表格用 overflow-x:auto 包起來（手機可橫滑）。

十一、文字與標題規範

  • emoji 標題：區段標題前可加一個 emoji 增辨識（適度）。
  • 段落編號：一般用「一、二、三」或「1. 2. 3.」；正式長文件可用「壹、貳、參」。
  • 粗體小標：段內用 粗體 當輕量小標，不另開章節。
  • 行內高亮：關鍵詞用淡底+圓角（螢光筆效果）：關鍵詞。
  • 程式碼：行內 <code>、整段 <pre>/<syntaxhighlight>。
  • 文字陰影：僅 hero 標題用 text-shadow:0 2px 4px rgba(0,0,0,.2)；副標 opacity:.9。

十二、通用頁面版型

常見頁面的版型範本（用上面的元件組成），適用任何主題。
頁型 組成
🏠 總覽/門戶頁 Hero + 卡片網格(grid) + 索引資料表 + 導航條
📄 內容/教材頁 Hero + 章節標題 + 內文 + Callout + 圖表
📝 表單/申請頁 導航條 + 表單表(勾選/填寫)
📜 規範/政策頁 段落編號 + 資料表 + Callout(警告/注意)
📊 資料/列表頁 資料表 + Badge(狀態/分級)
👤 個人/檔案頁 Hero + 時間軸條目 + Badge
📖 流程/教學頁 Hero + 卡片 + 箭頭流程/步驟 + Callout

十三、流程圖 Flowchart

流程圖一律用 graphviz（Diagrams 擴充，伺服器端算成向量 SVG，SEO／PDF／放大都清晰）。顏色沿用語意色、箭頭用 accent 橘，預設採橫向（左→右），與全站視覺一致。
🚫 不要用 mermaid　本站 Diagrams 擴充沒有 mermaid 後端，<mermaid> 會渲染成空白。一律用 <graphviz>。

節點形狀對應（用途 → 形狀 → 語意色）

用途 形狀 淡底 / 邊框（語意色）
起點・終點（Terminator） 圓角矩形／膠囊 box+rounded #EAFAF1 / #27AE60　success 綠
處理・步驟（Process） 矩形 box（直角） #EBF5FB / #2980B9　info 藍
判斷・分歧（Decision） 菱形 diamond #FEF9E7 / #F39C12　warning 黃
重點・關鍵行動 矩形 box #FDF2E9 / #E67E22　accent 橘
輸入・輸出（I/O） 平行四邊形 parallelogram #F4ECF7 / #6C5CE7　special 紫

範例（本頁即時渲染）

撰寫規則

  • 節點屬性與邊分開寫：先 A [label=...] 定義節點，再 A -> B 連邊；不可 A[..]->B（DOT 語法錯誤、整圖不出來）。
  • 方向（預設橫向）：畫 flow 預設用左→右 rankdir=LR，較符合閱讀動線、頁面也不會被拉得太高；只有步驟極多、橫向會太寬時，才改用上→下 rankdir=TB。
  • 連線（標準直角）：加 splines=ortho 讓連線走直角折線（標準流程圖畫法，非曲線）；箭頭預設實心、單向，由前一步指向後一步；判斷的分支務必標 [label="是"]／[label="否"]。
  • 圖說（必加）：每張圖／流程圖下方都要有一行圖說——置中、小字、灰色，格式 圖N：說明（讓讀者與 SEO/AI 都看得懂圖在講什麼）。
  • 中文字型：node 與 edge 都加 fontname="Noto Sans CJK TC"，中文才不會變空格／豆腐。
  • 背景透明：bgcolor="transparent"，融入頁面白底。
  • 配色三件套：fillcolor＝淡語意底、color（邊框）＝同語意主色、fontcolor＝該色再深一階；箭頭 edge [color="#E67E22"]（與第九節「箭頭流程」同色）。
  • 圓角：方框用 style="filled,rounded"，呼應全站卡片圓角語言。
ℹ️ 流程圖 vs 箭頭流程怎麼選　單純線性步驟（無分歧）用第九節的輕量箭頭流程（不畫圖、載入快）；有判斷分歧、迴圈、多路徑時才用 graphviz 流程圖。
本頁為 Interaction Lab Wiki 的通用設計系統（7 語意色 · 6 級字 · 統一元件 · 通用版型）。建立或維護任何頁面時請沿用，維持全站一致。
取自「https://wiki.interaction.tw/index.php?title=設計系統與版型參考&oldid=1495」