tomevault-io 🎨 UI 設計技能
概覽
此技能涵蓋所有 UI/UX 設計相關知識，幫助建立美觀、易用、一致的使用者介面。
⚠️ 必讀：去 AI 感設計
在開始任何設計前，必須先閱讀 去 AI 感設計指南
確保你的設計：
- ❌ 不像 AI 自動生成的模板
- ❌ 不像充滿庫存照片的商業網站
- ✅ 有個性、有溫度、有記憶點
- ✅ 適度的不對稱和變化
📚 內容索引
基礎設計系統
| 主題 | 說明 |
|---|---|
| 色彩系統 | 調色板、對比度、色彩心理學 |
| 排版規範 | 字型選擇、階層、行高 |
| 間距系統 | 留白、網格、間距比例 |
| 無障礙設計 | WCAG 標準、色彩對比、鍵盤導航 |
設計風格
| 類別 | 數量 |
|---|---|
| 風格索引 | 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. 驗證測試
├── 無障礙檢測
├── 跨裝置測試
└── 使用者測試
相關資源
Converted and distributed by TomeVault — claim your Tome and manage your conversions.