前言：平面 ≠ 網頁，思維轉型是關鍵

平面設計師轉行網頁，不僅是工具切換，更是思維重構：像素級精準 → 流動佈局、靜態輸出 → 交互實現、單向輸出 → 多端適配。以下 5 項核心技能，是入門門檻也是進階基石。

技能清單

1. Photoshop — 仍是 UI 視覺稿主力工具，像素級控制、圖層管理、切圖輸出必精通。
2. Illustrator — 向量圖標、Logo、插畫繪製首選，AI 做向量再貼入 PS 再調樣式是高效流程。
3. HTML（推薦 HTML5） — 不會手寫代碼、不懂語義化標籤，別稱網頁設計師。Dreamweaver 視覺模式產出的代碼如「蒸飯盒便當」，難以維護。
4. CSS（推薦 CSS3 當前規範） — 盒模型、浮動、定位、Flex/Grid 佈局、動畫過渡，細節決定成敗。善用生成器偷懶（圓角、陰影、按鈕），但需懂原理。
5. Responsive（響應式設計） — Mobile First 寫代碼，Desktop First 畫線框。Bootstrap 入門，進階 Sass/Compass/Susy 掌控複雜佈局。

進階加分項

Bootstrap、Sass、Compass、Susy、jQuery 插件封裝應用。再深入屬前端工程師（F2E）領域。

避坑指南與工具推薦

切圖原則

會寫 HTML/CSS 才知道怎麼切圖。不懂代碼的視覺設計師切出的圖，前端常退貨——「給寫代碼的人鹽胡椒，還指望做出甜點？」

學習資源

• W3C 標準文檔（當字典查）
• W3Schools 教程 + W3Fools 避坑指南
• CSS 生成器：Border Radius、Box Shadow、Buttons (Sass/Compass)
• Can I Use — 瀏覽器兼容性查詢神器

響應式實戰建議

• 線框階段先設計 Desktop（功能最全），代碼階段 Mobile First 寫。
• 拒絕「所見即所得」軟件產出響應式代碼（髒亂難維護），除非純靜態無後端合作。
• 代碼整潔度 = 專業度。見到亂碼如打開髒廁所，嚴重影響團隊協作。

職位邊界釐清

網頁設計師 = UI/UX 一腳 + F2E 邊緣一腳：畫流程圖、線框、高保真、切圖、標註、懂 JS 特效最好不會也不失。
F2E = JS 精通、工程化、性能優化。
鐵律： 代碼上別跟 F2E 硬剛，謙虛求教。設計師強項是視覺與體驗，贏在專業分工上。

結語

以上 5 項練熟，靜態網站獨立接單無壓力。動態後台對接找 RD 配合。最佳捷徑：找資深 F2E 拜師，邊哭邊學一年，從「邪魔歪道」進化為「勉強及格」，再到獨當一面。