從設計稿到網頁：前端工程師的第一步 —— 切版是什麼？
更新日期： 2025 年 4 月 2 日
本文為 前端是什麼 系列文：
當你剛接觸前端開發，學會了 HTML 和 CSS，可能會開始好奇：「實際工作中，前端工程師到底在做什麼？」
你可能聽過一個常見的詞 —— 切版，它經常被前端工程師掛在嘴邊，也常被視為進入前端開發的入門門檻。
但切版到底是什麼？只是把畫面「畫出來」嗎？需要會 JavaScript 嗎？跟設計師又有什麼關係？
這篇文章將從實務角度解釋什麼是切版、它在開發流程中扮演的角色，以及前端設計師與前端工程師之間的分工合作關係，幫助你全面掌握這個前端開發的基礎工作。
什麼是切版？從設計圖變成網頁的過程
在前端開發的流程中，切版通常是實作網頁的第一步。所謂的切版（slicing / slicing a layout），簡單來說就是：
「根據設計師提供的設計稿，把畫面用 HTML 和 CSS（必要時加上 JavaScript）實作出來，讓網頁能在瀏覽器中正確呈現。」
你可以把這個過程想成「把靜態的設計圖切成一塊一塊的網頁區塊，並讓它們在網路上活起來」。
切版的實際流程
切版其實就像是一場「把設計圖翻譯成程式語言」的工作，以下是典型的步驟：
- 接收設計稿：通常會是 Figma、Sketch 或 Adobe XD 製作的 UI 設計圖。
- 分析畫面結構：判斷有哪些元件、是否可重複使用、頁面如何切分。
- 撰寫 HTML：用語意化標籤建立頁面架構，如
<header>、<section>、<button>等。 - 撰寫 CSS：將設計圖中的字體、顏色、間距等視覺風格實現出來。
- 加入互動效果（如有）：像是按鈕點擊展開選單、圖片輪播、hover 動畫等，就會用 JavaScript 或框架來實現。
舉個例子
假設設計師提供了一張網站首頁設計圖，內容包含：
- 頁首：Logo + 導覽列
- 主要區塊：一張圖片 + 標題 + 按鈕
- 頁尾：聯絡資訊
那麼你實作出來的 HTML 結構可能像這樣：
<header>
<img src="logo.png" alt="Logo" />
<nav>
<a href="#">首頁</a>
<a href="#">關於我們</a>
</nav>
</header>
<main>
<h1>歡迎光臨！</h1>
<img src="banner.jpg" alt="主視覺" />
<button>了解更多</button>
</main>
<footer>
<p>聯絡我們：123-456-789</p>
</footer>
接下來，你會用 CSS 讓這些元素排好位置、加上字體樣式與配色，讓畫面「長得跟設計稿一模一樣」，並且支援不同尺寸裝置（響應式設計）。
切版的目標
- ✅ Pixel Perfect：畫面與設計圖高度還原
- ✅ 語意化結構：使用正確的 HTML 標籤，有利於 SEO 與無障礙設計
- ✅ 結構清晰：便於未來維護與功能擴充
- ✅ 響應式設計：支援電腦、平板、手機等不同裝置
只靠 HTML 和 CSS 就能切版嗎？
在基本情況下，HTML 與 CSS 就能完成大部分的切版需求。
但實際開發中，畫面不只靜態，有時還會涉及「互動」與「資料動態變動」，這時候就需要加入 JavaScript 或使用框架。
常見需要額外技術的場景
- 點選按鈕展開選單（例如手機版的漢堡選單）
- 做出圖片輪播、淡入淡出動畫效果
- 表單驗證（例如檢查 Email 格式是否正確）
- 根據後端 API 資料動態產生畫面內容（例如商品列表）
元件化切版：現代框架的做法
使用 React、Vue 等框架時，開發者不再只是「照設計稿畫網頁」，而是把畫面拆成一個個小元件來切版，例如：
<Navbar />：導覽列元件<HeroBanner />：主視覺橫幅<ProductCard />：商品卡片<Footer />：頁尾元件
每個元件都有自己的 HTML 結構、CSS 樣式、甚至 JavaScript 行為，這樣做的好處是：
- 重用性高：元件可重複使用
- 管理簡單：改一個地方就能同步更新
- 適合多人開發：每人負責一部分元件，清楚分工
前端設計師 vs 前端工程師：分工與合作
在實務開發中，一個網站的誕生往往來自兩個角色的密切合作：
| 角色 | 主要工作 | 常用工具 |
|---|---|---|
| 前端設計師（UI/UX Designer） | 設計網站畫面與使用者體驗（UX）定義顏色、排版、元件風格 | Figma、Sketch、Adobe XD |
| 前端工程師（Front-end Developer） | 將設計實作成網頁（切版 + 功能開發）處理版面、互動、資料串接 | VS Code、React、Vue、Tailwind、Git |
實際協作流程
- 設計師完成畫面設計，產出 Figma 設計稿
- 工程師開始切版，根據設計稿建構 HTML 結構與樣式
- 彼此溝通微調細節，例如：
- 是否支援深色模式？
- 行動版是否要收合某些內容？
- 滾動時需不需要固定導覽列？
- 若有功能需求，工程師再加入 JavaScript 或接 API 完善畫面
跨界人才正在成為趨勢
現在的前端團隊中，「界線」已不像以前那麼分明，越來越多公司喜歡擁有跨界能力的成員：
- 前端工程師如果具備設計審美，能微調 UI 也能提升品質
- 設計師懂一點 HTML/CSS，設計時能考量實作限制，更有效率
這樣的角色常被稱為：
- UI 工程師
- 設計工程師（Design Engineer）
- 全端設計師（Full-stack Designer）
如果你願意學習一點設計，或反過來設計師願意學點前端技術，都是非常加分的技能！
結語：切版是前端開發的入門關卡，也是核心能力
切版看似簡單，其實蘊藏了許多專業與細節。它不只是單純把畫面畫出來，更是「將使用者體驗與設計，真實落實成產品」的重要一環。
- 它是你寫出第一個網頁的重要起點
- 它考驗你對結構、語法、設計與互動的理解
- 它是一切功能開發的基礎
無論你未來要成為資深前端工程師、全端開發者，還是設計師想學點實作技能，切版都是你不能跳過的重要一步。
想開始練習切版嗎？
以下是幾個實用的練習資源，幫助你從設計稿實作開始：
- Frontend Mentor：提供實戰設計稿與任務，可用來練習切版
- Figma 社群資源：搜尋「Web UI」關鍵字，有大量免費設計稿可以練手
- Clone 真實網站版型（如 Airbnb、Netflix 等）也是一種有效練習方式！