# UI Design > 色彩、排版、間距、Accessibility 與 55+ 設計風格指南 Use when this capability is needed. - Skill: `tomevault-io/ui-design-3` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/ui-design-3` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-design-3/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/ui-design-3 --- # 🎨 UI 設計技能 ## 概覽 此技能涵蓋所有 UI/UX 設計相關知識，幫助建立美觀、易用、一致的使用者介面。 --- ## ⚠️ 必讀：去 AI 感設計 **在開始任何設計前，必須先閱讀 [去 AI 感設計指南](no-ai-feel.md)** 確保你的設計： - ❌ 不像 AI 自動生成的模板 - ❌ 不像充滿庫存照片的商業網站 - ✅ 有個性、有溫度、有記憶點 - ✅ 適度的不對稱和變化 --- ## 📚 內容索引 ### 基礎設計系統 | 主題 | 說明 | |-----|------| | [色彩系統](color.md) | 調色板、對比度、色彩心理學 | | [排版規範](typo.md) | 字型選擇、階層、行高 | | [間距系統](space.md) | 留白、網格、間距比例 | | [無障礙設計](a11y.md) | WCAG 標準、色彩對比、鍵盤導航 | ### 設計風格 | 類別 | 數量 | |-----|------| | [風格索引](styles/index.md) | 55 種風格總覽 | | 基礎風格 | 10 種 | | 產業風格 | 15 種 | | 藝術風格 | 10 種 | | 文化風格 | 7 種 | | 科技風格 | 8 種 | | 特殊風格 | 5 種 | --- ## 快速選擇 ### 依專案類型 | 專案 | 推薦風格 | |-----|---------| | 企業官網 | 企業風、極簡、瑞士風 | | 電商網站 | 電商風、質感設計、扁平化 | | SaaS 產品 | SaaS 風、科技極簡、玻璃擬態 | | 個人作品集 | 編輯風、極簡、創意風格 | | 部落格 | 部落格風、編輯風、極簡 | | 遊戲娛樂 | 遊戲風、賽博龐克、霓虹 | | 醫療健康 | 醫療風、極簡、乾淨 | | 環保公益 | 環保風、有機、自然 | ### 依品牌調性 | 調性 | 推薦風格 | |-----|---------| | 專業穩重 | 企業風、瑞士風、法律風 | | 年輕活潑 | 孟菲斯、波普、童趣 | | 高端奢華 | 奢華、裝飾藝術、編輯風 | | 科技創新 | 科技極簡、AI 風格、玻璃擬態 | | 溫暖親切 | 北歐風、有機、插畫風 | | 藝術個性 | 野獸派、抽象、線條藝術 | --- ## 設計原則 ### 1. 一致性 (Consistency) - 使用統一的設計語言 - 維持元件風格一致 - 建立並遵循設計系統 ### 2. 階層性 (Hierarchy) - 明確的視覺層次 - 重要資訊突出顯示 - 使用大小、顏色、位置區分層級 ### 3. 平衡性 (Balance) - 視覺重量分配均勻 - 對稱或非對稱平衡 - 留白與內容的平衡 ### 4. 對比性 (Contrast) - 足夠的色彩對比 - 字體粗細對比 - 大小比例對比 ### 5. 親和性 (Affordance) - 元素看起來可互動 - 按鈕像按鈕 - 連結有明確識別 ### 6. 回饋性 (Feedback) - 互動有回饋 - 載入狀態明確 - 錯誤訊息清楚 --- ## 設計系統建立流程 ``` 1. 定義品牌 └── 品牌價值、人格、調性 2. 選擇風格 └── 使用風格精靈或直接選擇 3. 建立基礎 ├── 色彩系統 ├── 字型系統 └── 間距系統 4. 設計元件 ├── 基礎元件（按鈕、輸入框） ├── 複合元件（卡片、表單） └── 區塊元件（頁首、頁尾） 5. 組裝頁面 ├── 頁面佈局 ├── 響應式調整 └── 動態效果 6. 驗證測試 ├── 無障礙檢測 ├── 跨裝置測試 └── 使用者測試 ``` --- ## 相關資源 - [響應式設計](../rwd/SKILL.md) - [元件模板](../tpl/comp/SKILL.md) - [設計風格精靈](../wizard/style.md) --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/bryantchi) — claim your Tome and manage your conversions.