UI 設計師零基礎進階全棧課程大綱（155 課高清版）
本課程從平面設計工具、色彩理論、交互設計、前端基礎到多平台實戰專案，系統構建 UI 設計師全棧知識體系，適合零基礎轉行、在職進階與團隊內訓。
課程架構總覽
| 章節 | 主題 | 課時數 | 核心產出 |
|---|
| 1 | Adobe Photoshop CS6 精通 | 26 | 圖層/蒙版/通道/濾鏡/自動化/設計輸出規範 |
| 2 | 色彩與平面構成 | 5 | 色彩心理/視覺平衡/符號設計/構成原理 |
| 3 | Adobe Illustrator 綜合應用 | 26 | 矢量繪圖/品牌識別/圖標系統/印刷排版 |
| 4 | 交互設計基礎 | 4 | 用戶體驗原則/交互細節/技能模型 |
| 5 | Dreamweaver/HTML5/CSS3 網頁製作 | 27 | 響應式布局/CSS 架構/表單驗證/站點管理 |
| 6 | UI 設計風格趨勢 | 4 | WP/Android/iOS/扁平化風格解析 |
| 7 | UI 設計規範體系 | 5 | 小屏適配/視覺層級/卡片設計/色彩系統/行動召喚 |
| 8 | 電商 Web 界面實戰 | 10 | 原型→視覺→切圖→標註全流程 |
| 9 | 車載導航界面實戰 | 10 | 觸控按鈕/導航欄/主界面/查詢設置/車機適配 |
| 10 | Web 遊戲界面設計 | 7 | HUD 設計/前中後景/情感化交互/控件系統 |
| 11 | Android/iOS 客戶端規範 | 12 | Material Design/HIG 色彩/字體/圖標/布局/動效 |
| 12 | 微信 App 界面全流程實戰 | 10 | 導航/圖標/首頁/對話/登錄/設計系統沉澱 |
| 13 | 客戶端遊戲界面進階 | 7 | 會說話的 ICON/複雜 HUD/文字系統/交互決策 |
第一章：Photoshop CS6 核心技能樹（26 課）
- 入門界面與基礎操作（52'）
- 選區創建與編輯：矩形/橢圓/套索/魔棒/快速選區/色彩範圍/通道抠圖（上/下 95'）
- 圖層與圖層組深度掌握：混合模式/填充不透明度/智能對象/圖層樣式/剪貼蒙版（上/下 105'）
- 位圖繪製：筆刷動態/圖案/混合器筆刷/歷史記錄筆刷（上/下 94'）
- 矢量繪圖：形狀/路徑/鋼筆工具/布爾運算/向量蒙版（上/下 93'）
- 變換與修飾：自由變換/內容感知縮放/修補/修復/內容感知移動/濾鏡庫（上/中/下 146'）
- 特效合成：圖層混合/通道計算/應用圖像/置換/透視變形/3D 合成（上/中/下 146'）
- 3D 模型基礎：網格/材質/燈光/渲染/3D 文字/3D 明信片（47'）
- 字體排印：字符/段落面板/字體配對/變形文字/路徑文字/段落樣式/字符樣式（上/下 97'）
- 濾鏡系統：智能濾鏡/濾鏡庫/濾鏡組合/油畫/模糊/鋐化/雜色/風格化（50'）
- 通道與蒙版：Alpha 通道/顏色通道/通道抠圖/通道混合/快速蒙版/向量蒙版（46'）
- 自動化：動作/批處理/液滴/腳本/圖像處理器/條件動作（51'）
- 綜合設計實戰：海報/橫幅/名片/圖標/界面/規範輸出（四期 190'）
第三章：Illustrator 矢量設計體系（26 課）
- 界面與文件操作、輔助工具（46'）
- 路徑基礎：錨點/控制柄/路徑查找器/形狀生成器/寬度工具（45'）
- 筆刷系統：書法/散佈/藝術/圖案/毛筆/圖像筆刷（上/下 87'）
- 對象編輯：選擇/直接選擇/群組/隔離模式/整形/變換/圖層/外觀面板（上/中/下 142'）
- 色彩管理：色板/色彩組/全域色彩/專色/漸變/網格/自由漸變/色彩指南（上/下 98'）
- 高級編輯：液化/漸變網格/混合/路徑查找器/剪切蒙版/不透明度蒙版（上/中/下 146'）
- 透明度與混合模式：隔離組/敲除組/透明度蒙版/混合模式分類應用（48'）
- 字體排印：區域文字/路徑文字/字符/段落樣式/OpenType 特性/字形面板/變量字體（上/下 99'）
- 圖表工具：柱狀/堆疊/折線/面積/散點/雷達/餅圖/圖表樣式/數據導入（上/下 94'）
- 效果菜單：3D/扭曲變形/風格化/圖形樣式/外觀屬性/光暈/陰影/光栅化（四期 195'）
- Web 輸出：切片/存儲為 Web/圖標字體/SVG/響應式圖標/多倍圖導出（49'）
- 綜合案例：品牌 VI/插畫風格/資訊圖表/包裝設計/動態圖標（46'）
- 海報廣告實戰：字體設計/版面佈局/視覺流程/印刷工藝/出血裁切（上/下 112'）
第五章：前端基礎與網頁實作（27 課）
- DW 界面/站點管理/代碼視圖/實時預覽/Emmet/代碼片段（40'）
- HTML5 語義化標籤/表單新屬性/多媒體/Canvas/SVG/Web Storage（39'）
- CSS3 盒模型/Flexbox/Grid/媒體查詢/動畫/變換/變量/模組化架構（上/中/下 150'）
- 響應式實戰：移動優先/斷點策略/流式布局/圖片響應/導航模式/性能優化（三期 160'）
- 表單驗證：HTML5 原生/JS 正則/第三方庫/無障礙/錯誤狀態設計（31'）
- 模板與站點：DWT 模板/庫項目/站點同步/版本控制/發布部署（31'）
實戰專案亮點
電商專案（第 8 章）
從思維導圖、紙面原型、軟件原型到導航/首頁/產品/聯系頁視覺稿，完整走一遍「發現-定義-開發-交付」雙鑽石流程。
車載導航（第 9 章）
聚焦車機場景：手繪草圖→原型框架→觸控按鈕（盲操作優化）→導航欄（單手操作區）→主/查詢/設置界面→車機適配測試。
微信 App 重設計（第 12 章）
以國民級產品為藍本：導航按鈕系統/圖標語義化/首頁信息架構/對話列表/聊天詳情/登錄流程/設計系統文檔化輸出。
學習路徑建議
- 工具先行：Ps/Ai 熟練度決定設計產出速度，建議前 52 課全勤練習
- 理論穿插：色彩/構成/交互原理穿插在工具實戰中，避免枯燥理論孤島
- 前端必修：HTML/CSS 不求精通切圖，但必須理解盒模型、Flex/Grid、響應式斷點，與開發無縫對接
- 專案導向：每個實戰章節產出可落地的設計規範文檔、切圖標註、組件庫，構建作品集
- 規範沉澱：第 6-7 章風格趨勢與規範體系，是從「畫圖」進化為「設計系統建設者」的關鍵
資源獲取
完整 155 課高清視頻 + 素材源文件 + 設計規範模板 + 面試作品集指導：
下載地址：https://fu83.cn/thread-44-1-1.html
