網頁設計入門必懂 10 件事：平面設計師轉職 Web 一定要知道的事

如果我們把網頁當成海報在設計， 專案從第一天就已經走歪。平面設計強調構圖與比例，但 Web 設計本質除了排版與每感外，更是必須符合 —— 在不同裝置、不同解析度、不同情境下， 仍然成立的體驗系統。

這篇文章與其說是「成為網頁設計師」之路，或可當作網頁設計基礎概念的簡介，真希望在成為網頁設計師之前就知道的事，並分享一些網頁設計實作與實務經驗分享。

不瞞說，此篇內容撰寫的動機是因為我曾被至少十個以上的平面設計師出的「網頁設計圖」荼毒了好幾遍，每當我要跟對方講解設計圖的修改方式時，有的願意聽、有的不耐煩、有的嚇到花容失色、直接消失。其實很多設計師在轉職 Web 時， 不是不夠會設計， 而是不知道網頁真正運作的邏輯。這篇不是教你寫程式， 是幫你建立一個基礎中的基礎「Web 設計師該有的關鍵思考」。

除了平面設計師想學習網頁設計之外，也滿適合從其他領域想要踏入網頁設計領域的人閱讀，當作入門知識，也可作為一窺究竟網頁設計師都在做些什麼工作內容。因為細節頗多，我會持續更新內容，一想到什麼就陸續新增，歡迎蒐藏隨時回來閱讀！

這裡的網頁設計分享的是「網頁視覺設計與排版的實作基本概念」，並非市面上教授一堆寫 HTML / CSS / JavaScript 程式語法的書！網頁視覺設計主要還是歸類於「設計領域」，而當我們能了解一些「基本的網頁程式與網站運作邏輯」，可以幫助執行網頁設計時更加精準到位，更有助於與團隊溝通、與 AI 溝通。

網頁設計，真的不是把平面設計圖丟到網頁瀏覽器上而已。平面設計師轉職 Web 後，最大的轉變是從「視覺創作者」變為「體驗策略師」。設計的成功不再僅僅取決於「好看」，而是取決於它是否能在 SEO 吸引、UX 留存與 CRO 說服的交集點上，創造出實質的商業價值

＊之後內容中會錄製影片講解，記得不定時回來看一下 ^^

⭐️ 本文重點

• 一、Web 網頁瀏覽體驗的核心觀念
• 二、平面設計師常碰到的挑戰
• 三、色彩模式
• 四、頁面範本 Template 與版型概念
• 五、常見的設計系統中的模組化
• 六、滿版設計的觀念
• 七、RWD 響應式設計
• 八、圖片設計與優化注意事項
• 九、網頁設計頁面尺寸設定
• 十、網頁設計製作建議工具
• 網站開發的工時概念
• 網站設計資源資源與不同文化生活美感培養

一、Web 網頁瀏覽體驗的核心觀念

1. 網頁不是一張海報

平面設計是固定尺寸的構圖；網頁則是動態尺寸、可互動、可縮放的介面。

實際使用情境可能包含：

• 13 吋筆電
• 27 吋桌上型螢幕
• iPhone
• Android 手機
• 手機直式 / 橫式切換
• 使用者自行放大或縮小頁面

因此設計不能只針對「一個畫面比例」思考，而是要考慮不同裝置與解析度下的閱讀與操作體驗。

真正重要的是：在各種尺寸下是否都好讀、好看、好操作。

2. 設計網頁時務必 1:1 真實尺寸檢視

許多設計師習慣將設計稿縮放至 67%、75% 來作業，這雖然方便排版，但會導致文字尺寸與實際顯示比例失準。

完成細節設計後，務必：

• 將設計稿切換至 100% 比例檢視
• 重新確認字級、行距、段落間距
• 檢查標題與內文層級是否合理

若螢幕解析度較高，可透過瀏覽器外掛（如 Window Resizer）模擬：

• 1920px
• 1440px
• 平板尺寸
• 手機尺寸

實務上，開發過程中可用瀏覽器縮放快速檢視排版概況；但最後調整時，仍應以實際手機瀏覽體驗為優先。

3. 使用實體裝置測試

如果可若條件允許，請實際使用不同裝置測試：

• 不同螢幕尺寸
• 不同解析度
• iPhone
• Android
• 平板

同時也要注意：

• macOS 與 Windows 顯示差異
• Chrome、Safari 等瀏覽器渲染差異
• iOS 與 Android 系統差異

實際觀看時，排版比例、字體呈現、留白感受都可能出現細微差異，而這些差異會直接影響專業度與閱讀舒適度。

4. 內容頁與部落格的最佳閱讀寬度

優化閱讀體驗時，可以參考「書籍排版與寬度設定」的概念。

如果文章寬度過寬，常見問題包括：

• 閱讀困難
• 視線移動距離過長
• 眼睛容易疲勞
• 失去閱讀節奏

我通常會將文章寬度可以設定在在 650 – 960px 之間。

但這並非僵化規則，仍需依據實際需求與狀況彈性調整，例如：

• 字級大小
• 行距設定
• 網站整體風格
• 是否包含側欄
• 品牌視覺需求

✏️ 重點總結

網頁設計的本質不是做「靜態畫面」，而是設計一個在不同裝置、不同環境下都能保持良好體驗的系統。

只要掌握核心原則，就能大幅提升網站的專業度與使用體驗：

• 響應式思維
• 1:1 真實比例檢視
• 實體裝置測試
• 合理閱讀寬度控制

二、平面設計師常碰到的挑戰

當從平面設計轉向網頁設計時，最大的差異在於：網頁是動態、可滾動、可互動的媒介，而不是固定尺寸的畫面。

以下是常見的兩個挑戰：

⚠️ 1. 排版「靠感覺」

在平面設計中，設計師習慣以固定尺寸（A4、海報尺寸等）進行排版，視覺構圖多半依靠比例感與經驗判斷。

但網頁不同：

• 使用者透過瀏覽器觀看
• 畫面會滾動
• 裝置尺寸會改變（桌機、平板、手機）
• 文字大小會受解析度與裝置影響

如果沒有在實際瀏覽器中測試，很難真正感受：

• 閱讀節奏是否順暢
• 區段間距是否舒服
• 首屏資訊是否過多或過少
• 使用者是否需要「滑很久」才看到重點

👉 網頁排版必須從「瀏覽體驗」思考，而不是只看設計稿。

⚠️ 2. 文字或圖片尺寸「過大」

由於設計稿通常在高解析度螢幕或設計軟體中觀看，實際尺寸與使用者看到的比例可能完全不同。

常見狀況包括：

• 標題字級過大，造成閱讀壓力
• 內文字級過大，畫面顯得擁擠
• 圖片比例過大，導致首屏被塞滿
• 區塊留白不足，畫面顯得厚重

這些問題在設計稿中可能看不出來，但一放到真實網頁環境，就會影響閱讀節奏與專業感。

✏️ 核心差異總結

平面設計是「固定構圖」思維。網頁設計是「動態體驗」思維。

從平面轉向網頁時，必須加入：

• 實際瀏覽器測試
• 響應式尺寸考量
• 閱讀節奏規劃
• 真實裝置檢視

唯有把「使用者實際看到什麼」納入設計過程，版面才會真正好看、好讀、好用。

三、色彩模式

在網頁設計中，只使用 RGB 色彩模式，不使用 CMYK。

原因： 網頁是透過螢幕顯示，而螢幕發光的原理是 RGB（Red, Green, Blue）加色模式； CMYK 則是印刷用的減色模式，兩者顯色原理完全不同。

RGB（網頁與螢幕用）

• 適用於：網站、APP、數位廣告、螢幕顯示
• 顯色原理：光的加色混合
• 特性：顏色較鮮豔、飽和度高
• 常見格式：JPG、PNG、WebP、SVG（皆應為 RGB）

CMYK（印刷用）

• 適用於：名片、海報、書籍、型錄印刷
• 顯色原理：油墨的減色混合
• 特性：顏色範圍較小，螢幕顯示時容易偏暗、偏灰

✅ 設計與輸出注意事項

輸出網頁圖片時一定要確認：

• 色彩模式為 RGB
• 不可直接使用 CMYK 圖檔上傳網站

若將 CMYK 圖片放到網頁中，常見問題包括：

• 顏色變暗
• 顏色偏灰
• 品牌色失準
• 飽和度下降

這是因為瀏覽器會強制轉換色彩模式，造成色偏。

網頁設計屬於數位媒體設計， 所有圖片、視覺稿、匯出素材，都應從一開始就設定為 RGB 模式。 避免後期轉換，才能確保品牌色彩準確、畫面一致。

四、頁面範本 Template 與版型概念

網頁設計從來不是「做一頁漂亮畫面」而已，而是建立一套可以延伸與重複運作的架構。

在規劃頁面時，應該同步思考以下幾個問題：

• 未來若新增頁面，是否能直接套用既有架構？
• 這個頁面是否屬於可共用的 Template（頁面範本）？
• 這個區段（Section）是否會在多個頁面出現？
• 這個區塊（Block）是否應該設計成可重複使用的 Web Component（元件）？

每當設計網頁時，都要思考：

• 這是不是共用的 Template（頁面範本）？
• 這區段（Section）或區塊（Block）是不是整個網站會重複使用的 Web Component（元件）？

🟡 頁面範本（Template）的意義

Template 指的是一種「結構固定、內容可替換」的頁面模型，例如：

• 產品列表頁範本
• 文章內頁範本
• 服務介紹頁範本

透過建立範本，可以確保同類型頁面具有一致的版面邏輯與視覺風格，同時大幅提升製作效率。

🟡 元件化（Component-based）思維

當 Section 與 Block 被設計成可重複使用的元件時，就形成了網站的設計積木系統。

這種思維帶來幾個關鍵優勢：

• 品牌視覺一致性：所有頁面遵循同一套設計語言
• 維護最佳化：修改一次元件，全站同步更新
• 開發效率提升：可快速組裝新頁面
• 擴充彈性高：網站規模擴大時仍可控管品質

尤其當網站頁數龐大、內容持續成長時，若缺乏 Template 與元件化概念，後期維護成本會急速上升。

設計的重點不在於「單頁是否好看」， 而在於是否建立一套能被反覆使用、持續擴充的設計系統（Design System）。 唯有以系統化角度思考，才能真正掌握整體網站架構，讓品牌、效率與品質同時到位。

五、常見的設計系統中的模組化

在網頁排版設計中，整體結構通常由「區段（Section）」與「區塊（Block）」組合而成。區段屬於較大的版面單位，用來劃分頁面的主要內容範圍；而每個區段之下，則由多個區塊組成，用來承載實際的內容元素，如文字、圖片、按鈕或表單等。透過區段與區塊的層級安排，可以讓版面結構清晰、易於管理與維護。

🟡 Section（區段）

屬於頁面中的大型結構單位，用來劃分主要內容區域。常見範例包括：

• 首頁橫幅（Hero 區塊）
• 產品介紹區
• 客戶見證區

區段通常負責整體排版邏輯，例如背景顏色、區域間距、版面排列方式等。

🟡 Block（區塊）

屬於區段內的較小內容單位，用來承載實際資訊與互動元素。常見範例包括：

• 卡片（Card）
• 按鈕（Button）
• 標題群組（標題＋副標＋說明文字）

區塊通常可重複使用，並依不同區段需求進行排列組合。

✏️ 網站設計與維護重點

⚠️ 在元件化設計架構中，區塊通常是共用元件。 只要修改其中一個元件樣式或結構，所有引用該元件的頁面都會同步變動。因此在調整前，必須評估影響範圍，避免「牽一髮動全身」的狀況發生。

若想入門了解網頁的基本組成，例如區段、區塊及重複性元件的概念，可以從實作 Shopify 網站架設開始學習。Shopify 的介面設計將網頁結構具象化，對於沒有程式背景的人來說，是理解現代網頁佈局（Layout）邏輯的絕佳工具。📖 延伸閱讀：用兩個月打造 Shopify 電商網站

六、滿版設計的觀念

常見問題

許多設計只針對 1440px 做視覺稿，卻忽略 1920px 甚至更大的螢幕。當畫面被拉到 1920px 以上時，若沒有事先規劃：

• 內容可能被過度拉寬
• 留白比例失衡
• 版面顯得鬆散
• 圖片解析度不足而模糊

因此，滿版設計不只是「拉滿寬度」，而是要思考在各種大尺寸螢幕下仍然好看。

滿版背景的兩種類型

1. 底圖（Background）

• 通常使用 CSS background 設定
• 常見搭配：background-size: cover
• 會隨區塊撐滿整個寬度與縮放，會有四邊局部被裁切的可能
• 適合 Hero 區塊、大型橫幅背景

特色是：圖片屬於「視覺背景」，不是內容本身。

2. 內容圖片（Image）

• 使用 <img> 標籤
• 屬於實際內容的一部分
• 通常會放在容器（container）內限制最大寬度
• 需考慮比例、解析度與裁切方式

以上兩者 CSS 設定邏輯完全不同，不能把內容圖片當背景圖處理，也不能把背景圖當內容圖片使用。

✏️ 滿版排版的注意事項

• 背景可以滿版
• 內容通常需要限制最大寬度（例如 1200–1440px）
• 大螢幕下要維持視覺平衡與閱讀舒適度

滿版 ≠ 內容無限制拉寬。

七、RWD 響應式設計

響應式設計（Responsive Web Design）不是事後調整，而是在設計桌機版時就必須同步思考手機版。

設計時應該問自己：

• 手機上要怎麼排列？
• 元素會如何由橫排改為直向堆疊？
• 圖片比例是否會被裁切？
• 文字尺寸是否需要縮小？
• 按鈕是否足夠好點擊？

網頁排版設計重點在於「視覺延伸的控制」與「不同尺寸下的體驗一致性」，以維持良好的視覺品質與使用體驗。

八、圖片設計與優化注意事項

1. 圖片尺寸和座標定位都不要有小數點

在製作圖片時，確保都使用整數（Integer）：

• W（寬度）
• H（高度）
• X / Y（定位座標）

若出現小數點，放到網頁上後，可能導致：

• 白邊
• 圖片模糊
• 出現 1px 灰線
• 邊界對齊錯位

原因在於瀏覽器會進行像素取整與抗鋸齒運算，導致顯示誤差。網頁是以像素為基礎的顯示環境，避免半像素。

2. 優先使用橫式圖片

橫式圖片在網頁中更具彈性，常見應用包括：

• Hero 橫幅
• 內容區段背景
• 卡片縮圖
• Banner 圖片

相較之下，直式圖片較難在電腦版網頁運用。

📷 拍攝建議：

• 同一畫面同時拍「遠景」與「特寫」
• 保留裁切空間
• 預留文字疊加區域

這樣設計時才有彈性。

3. 若圖片來源都不相同，需要修圖以確保視覺一致性

攝影原圖 ≠ 設計成品。網站圖片有時候來源都不同，導致彼此差異明顯不同，應經過基礎後製，例如：

• 微調曝光與對比
• 統一色溫
• 套用品牌色調
• 加入濾鏡統一視覺風格

圖片風格一致，品牌專業感會大幅提升。

4. 圖片命名與 SEO

圖片命名方便整理，一旦數量越多，要在後台找圖時也比較容易聯想。

命名規範的好處：

• 檔案管理清楚
• 團隊協作順暢

✅ 建議命名方式：

product-name-01.jpg
brand-service-banner.jpg

❌ 避免：

IMG_948593.jpg
DSC000123.jpg

盡量以英文命名（可以包含數字），沒事的話不要用中文命名。有些架站平台會自動過濾掉圖片檔名裡中文的部分例如 Shopify，而要讓社群預覽圖正常顯示，也要用英文命名。

圖片命名原則：使用有意義的英文關鍵字命名。

5. 圖片格式選擇

常見格式：

• SVG：向量圖，適合用在 Icon 圖示、Logo（縮放不失真）
• PNG：支援透明背景
• JPG：適合照片與漸層豐富圖片

選擇正確格式，可在畫質與檔案大小間取得平衡。

6. 圖片優化與網站效能

圖片過大會直接拖慢網站載入速度，或多或少會影響：

• 使用者體驗
• SEO 排名
• 轉換率

注意事項

• 不要直接上傳超過 1MB 原圖
• 上傳前先壓縮與調整尺寸，基本上有經過 TinyPNG 壓縮優化的圖片一定小於 1MB
• 高解析度不等於高品質

建議流程

1. 依實際顯示尺寸輸出圖片
2. 再進行壓縮優化
3. 上傳測試載入速度

📖 延伸閱讀：如何製作與優化網頁圖片 SEO 替代文字 Alt Text？

✏️ 小結

圖片在網頁中同時影響：

• 視覺品質
• 品牌形象
• 網站效能
• SEO 表現

從尺寸設定、拍攝方式、後製處理、命名規範到效能優化，都必須納入設計流程中，才能真正做到專業的網站視覺設計。

九、網頁設計頁面尺寸設定

在規劃桌機版設計時，不應只針對單一尺寸，而是要理解常見螢幕寬度的分布，並思考在不同寬度下的版面表現。

✅ 常見桌機解析度寬度

1920px

• 大型桌機螢幕常見解析度
• 若無限制內容寬度，畫面容易過於分散
• 適合滿版背景設計，但內容建議設定最大寬度

1440px

• 目前常見設計稿基準尺寸
• 視覺比例相對舒適
• 多數品牌網站以此為主要設計參考

1366px

• 傳統筆電常見寬度
• 需特別注意左右留白是否足夠
• 元素若排太滿，可能會顯得擁擠

✅ 實務設計建議

• 設計稿可先以 1440px 為基準
• 同時模擬 1920px 顯示效果
• 測試 1366px 是否出現擠壓或換行問題
• 內容區塊建議設定最大寬度（例如 1200–1440px）

✏️ 核心觀念

螢幕尺寸只會越來越多元。設計時應思考「範圍區間」而不是「單一尺寸」。

只要掌握以下原則，版面在不同解析度下就能維持一致的專業感與閱讀體驗：

• 大螢幕不鬆散
• 小桌機不擁擠
• 內容寬度適中

十、設計製作建議工具

在網頁設計與前端開發協作上，工具的選擇會直接影響效率、溝通成本與錯誤率。以下依「設計與工程協作效率」排序說明：

🥇 Figma（最佳）

優點：

• 雲端協作，即時同步
• 可直接查看 CSS、尺寸、間距
• 支援元件（Component）與設計系統
• 易於建立 RWD 版型
• 多種外掛支援

對前端工程師而言，可以直接檢視：

• 字級
• 顏色代碼
• 間距
• 圓角
• 陰影數值

幾乎就是為 UI / Web 設計而生的工具。

📖 延伸閱讀：資深網頁設計師常用的 Figma Plugin 推薦

基本上不推薦使用 Photoshop、Illustrator 製作「網頁設計圖」，它們比較適合拿來「平面設計做圖」，例如 Photoshop 用來修圖、影像處理的視覺設計，Illustrator 適合製作 LOGO、小圖示、向量插圖之類的圖形製作。

網站開發的工時概念

在評估網站開發成本時，不能只看「做一頁多少錢」，而是要理解背後實際投入的工時結構。

網站前端開發不是單純縮放比例，而是兩套不同排版邏輯。至少包含：

• Desktop（桌機版）
• Mobile（手機版）

手機版不是縮小版，而是重排版

常見誤解是：「桌機做好，手機只是縮小。」

實際情況是：

• 原本橫排的元素改為直向堆疊
• 三欄排版變成單欄
• 圖片比例可能重新裁切
• 文字尺寸需要重新調整
• 按鈕尺寸需符合手指點擊範圍
• 導覽列結構改變（例如變成漢堡選單）

這代表工程師需要：

• 重寫 CSS
• 調整排版邏輯
• 測試不同裝置
• 修正跨裝置差異

為什麼會影響工時？

因為實際開發流程通常是：

1. 切桌機版版型
2. 再撰寫 RWD 規則
3. 重排手機版
4. 測試不同裝置
5. 修正跨瀏覽器問題

若設計階段沒有清楚規劃手機排版，工程師就必須「自行推測」，這會大幅增加溝通與修改時間。

✏️ 核心觀念

手機版是重新設計邏輯，不是縮小比例。一個頁面 ≠ 一套畫面，一個頁面 = 至少兩種裝置排版思考

理解這件事，才能合理評估：

• 開發時間
• 製作成本
• 設計完整度

網頁設計不是把平面設計圖改成 1440px 而已。

它是：

• 結構設計
• 系統設計
• 體驗設計
• 技術理解
• 效能優化
• SEO 思維
• 商業轉換思維

如果你願意跨出平面設計的舒適圈，你會發現——

網頁設計不只是把畫面做得漂亮，更是設計一個能在現實環境中運作的系統。它關於結構、體驗、效能、SEO、轉換，甚至關於商業邏輯。當你不再只問「好不好看」，而開始問「在各種情境下會發生什麼事」，你才真正跨進 Web 設計的世界。那個世界，比平面複雜，但也更自由。

網站設計資源資源與不同文化生活美感培養

• 瀏覽實用設計資源 Design resources、網頁模板 Websites：Figma Community
• 瀏覽設計與生活風格｜不同文化的美感與廣告幽默：Behance、Fonts In Use
• 體驗不同文化的日常人們的街景 Street Walk：除了實際旅遊外，還可以線上體驗例如 London, England、Taipei City, Taiwan
• 了解基本的 SEO 概念相當重要且實用：全方位 SEO 自學免費指南 – 從新手到專家的學習資源與課程