設計稿（PSD、Figma）怎麼變成網站？

有些老闆會先請設計師、或公司裡的美編畫好網站的樣子，拿著設計稿問：「這個可以做成網站嗎？」

可以，這個步驟叫「切版」。但設計稿是一張圖，網站是會動、會在各種螢幕上變形的東西，中間有不少細節要補。這篇說明設計稿變成網站的過程，以及交件前要確認哪些事。

設計稿是什麼

設計稿是網站的「長相」，用 Figma、Photoshop 這類軟體畫出來，標出每一頁的版面、顏色、字型、圖片位置。通常會先有比較簡單的「線框圖」，只畫框框決定內容放哪裡，確定了再上色變成設計稿。

整個做網站的流程，從需求、設計稿到上線，在〈做網站的流程〉有完整說明。

切版：把圖變成網頁

切版就是照著設計稿，用 HTML、CSS 把網頁一塊一塊做出來：

• 把設計稿裡的圖片存成適合網頁的格式和大小。
• 把文字做成真的文字，不是圖片，這樣搜尋引擎讀得到，客人也能複製。
• 把版面用 CSS 排出來，讓它在不同寬度的螢幕上都排得好。
• 加上互動：選單展開、按鈕滑過變色、表單送出。

套進 WordPress 的兩種做法

大部分的公司網站要能自己改文字、加文章，所以切好的版會套進 WordPress 這類系統：

一、寫成佈景主題。 依設計稿寫一套專屬的佈景主題，版面最貼近設計稿，速度也快。之後改版型要找懂程式的人。

二、用頁面編輯器重建。 用 WordPress 的區塊編輯器或頁面編輯外掛，照設計稿把每一頁拼出來。之後自己拖拉調整比較方便，但版面能做到的細節會受編輯器限制。

兩種沒有誰比較好，看你之後要不要常常自己改版面。

為什麼做出來和設計稿有一點不同

這是最常見的疑問。原因通常是：

• 字型顯示不一樣：同一個字型，在 Windows、Mac、手機上看起來粗細略有不同。
• 文字長度會變：設計稿上的標題剛好一行，換成真的內容變成兩行。
• 螢幕寬度不固定：設計稿通常只畫電腦版一個寬度和手機版一個寬度，中間的平板、小筆電要由切版的人決定怎麼排。
• 設計稿裡做不到的效果：有些特殊的疊圖、字體效果，在網頁上做會拖慢速度或不好維護，會改用接近的做法。

差異大的地方，切版的人應該先說明，不是做完才讓你發現。

交件前要確認的 6 件事

一、有沒有手機版設計稿。 現在大部分的客人用手機看網站。只有電腦版設計稿，手機版就只能由切版的人自己想。響應式網站的概念在〈響應式網頁設計〉。

二、互動狀態有沒有畫。 選單打開的樣子、按鈕滑過的樣子、表單填錯的提示、沒有資料時的畫面，這些常常被漏掉。

三、字型能不能用在網站上。 設計師電腦裡的字型，授權不一定包含放到網站上。中文字型檔案也很大，會影響速度。授權的問題在〈網站圖片和字型要有授權〉。

四、圖片有沒有授權。 設計稿裡的示意圖、人物照，常常是設計師先找來放的，上線前要換成有授權的圖。

五、內容是不是真的。 設計稿裡「假文字」排得很漂亮，換成真的文案常常太長或太短。最好在設計階段就用真的內容。

六、原始檔和著作權歸誰。 依著作權法第 12 條，花錢請人完成的著作，如果契約沒有約定，著作權歸實際創作的人，出錢的人只能利用。想要拿到設計稿的原始檔、之後可以自己修改或找別人改，合約裡要寫清楚原始檔要交付、權利歸誰。

設計和切版最好一起想

設計和切版如果是同一組人，設計階段就能一起看手機版和實際內容，比較不會出現「畫得出來、做不出來」的情況。

如果你手上已經有設計稿，也可以拿來給我們看。正威網路行銷是 25 年經驗的基隆網頁設計工作室，也服務台北和全台灣的客戶，歡迎免費諮詢。