網頁設計教學：4 大核心流程，打造專業品牌網站（完整指南）

最後更新時間：2026-01-25，由 Dean 更新

在《如何架設網站》中，我將架網站拆解成四大區塊：架站平台、自架網站、網站設計、網站維護。

很多人，會覺得「網站設計」是純粹的美感，只是額外加分的，但這就少看到了很多背後的隱性價值。它包含了風格定義、網站架構、網頁設計、使用者體驗等範疇，大多數人看見的只有網站的「外觀」而已。

這一篇，我會根據「如何開始設計一個網站」，把流程拆解成 4 大步驟：

1. 目標釐清 & 架構規劃：釐清網站目標，確認網站功能、結構、頁面等。
2. 決定風格 & 版型工具：確立品牌視覺風格，挑選佈景主題與頁面編輯器。
3. 頁面編排 & 元件設定：實際製作每一個頁面，排版、設定元件功能與外觀。
4. 使用者體驗優化：優化在不同裝置上的動線設計、行動引導，並透過數據追蹤。

針對想要自己設計網站的人，這篇「網站+網頁設計教學指南」能夠幫助你建立完整概念，設計時會更有方向。

PS. 本篇會以 WordPress 網頁設計的實務流程做教學，與傳統原生 HTML、CSS、JavaScript 網頁設計稍微有點不同。

網站設計的核心是什麼？

網站設計是用來帶出你品牌價值的一種方式。你需要先有明確的價值主張，才有辦法透過設計呈現出來。

很多人會覺得網站設計就是把網站變好看，但如果不符合你的價值主張，沒辦法讓人一看到就感受到你想要傳遞的價值觀，那這個設計也不會是一個好的設計。

在開始網站設計之前，我會建議你先釐清並確立品牌定位，接著我們才能展開真正的「設計」：

• 網站結構：就像房屋的格局，要有哪些房間？牆面如何區隔？
• 風格感受：就像房屋的內裝，要用什麼配色？選擇哪些材質？
• 內容文案：就像房屋的擺設，要放什麼家具？裝飾有哪些？
• 用戶動線：就像空間的動線，從房間到房間怎麼走？會經過哪些區域？

這些任務，都是為了凸顯你的「品牌核心」。只要有了明確的依據，設計過程就能更聚焦，不會陷入「好像哪裡怪怪的」而反覆修改的情況。

網站設計 & 網頁設計一樣嗎？

在大多語境下，可以將「網站設計」與「網頁設計」視為相同的。

不過，如果真的要去細分，網站設計探討的範圍會更宏觀，包含：

• 風格定位：定義品牌整體風格，並將它落實到網站的各設計之中，也才能讓網站有品牌一致性。
• 網站結構：包含「頁面有哪些？頁跟面之間怎麼走？層級關係為何？」這部份無法直接看得見。
• 頁面設計：單一頁面的視覺排版與設計，會包含大家能看見的外觀，像是配色、字體、圖片等。
• 用戶體驗：針對用戶使用網站的狀況進行觀測，並做出分析與優化，進而提升網站整體轉換率。

甚至，有些人在講網站設計時，還會把「主機架設」與「功能開發」一同算進去，溝通時一定要確認清楚。

相對來說，「網頁設計」會是指針對單一頁面的排版與外觀做設定，不涉及全站規劃，任務就比較單純。

網站設計教學步驟 1：目標釐清 & 網站架構

在設計網站的最初，我們必須先將「任務目標」釐清，才能夠確認以什麼樣的架構，去完成任務。

聚焦網站的核心目的

「網站」本質是一個工具，任何工具都會有需要使用它達到的目的。

但通常討論到網站要達成的目的，絕大多數人都會講得很不清楚。我建議，先聚焦在以下四大層面：

規劃層面	核心問句	舉例
品牌層	我想透過網站傳遞什麼品牌價值？	價值主張：每個人的想法都該被聽見
任務層	我想透過這個網站達成什麼任務？	吸引到潛在客戶找我做品牌顧問服務
內容層	我要用什麼樣的內容傳遞價值？	分享知識觀點、客戶服務案例
行動層	我希望用戶能在網站做些什麼？	填寫諮詢預約表單

每個品牌想透過網站達到的目的都不一樣，這沒有標準答案。即便你是自己架設網站，也建議先從這四大層面去思考。

而當你發現思考這些問題時感到不清晰，就代表此刻設計網站可能還太早。先回頭重新釐清你的品牌，會更合適。

規劃網站功能：挑選合適的外掛

聚焦「網站核心任務」後，要再切出具體所需的功能，並確認是否有合適的外掛能做到。

舉例來說：

• 核心任務：吸引潛在客戶諮詢服務。
• 所需功能：表單聯絡、時段預約、名單蒐集、追蹤分析。
• 外掛類型：表單工具、預約系統、電郵管理系統、數據追蹤工具。

根據我們設計網站的實務經驗，最常見的功能如下表：

常見功能	外掛舉例
安全防護	WordFence Security、Akismet Anti-Spam
備份還原	UpdraftPlus、WPvivid、All-in-One WP Migration
效能優化	WP Rocket、WP Fastest Cache、LiteSpeed Cache
表單聯絡	Contact Form 7、WPForms
SEO 功能	Rank Math、Yoast、AIOSEO
預約 & 排程	Amelia、Booked、SimplyBook
多語系翻譯	WPML、Polylang、TranslatePress
會員 & 權限管理	MemberPress、Restrict Content Pro
課程系統 (LMS)	Tutor LMS、LearnDash、LifterLMS
電商 & 產品販售	WooCommerce、Easy Digital Downloads
數據分析 & 追蹤	Site Kit、MonsterInsights、PixelYourSite

尋找合適外掛往往是網站設計規劃中相對耗時的工作，推薦你可以用 AI 來加速，以下提供給你 Prompt：

我需要你根據我下面的「具體功能需求」推薦並比較 3~6 個最合適的 WordPress 外掛（免費或付費皆可）。請以 Markdown 表格輸出，並且在表格下方給出首選與備選。

【功能需求】
（必填，請用一句話清楚描述：例如「在頁面上嵌入可以讓訪客預約 30 分鐘諮詢，需支援 Google 日曆雙向同步、時區自動偵測、可上傳檔案」）

【偏好 / 技術限制】
（選填，例如：支援繁中、輕量化、能嵌入 Elementor、WordPress 6.x、PHP 8.0）

【輸出欄位要求】：
每個外掛請提供：
- 外掛名稱（附官方頁面或說明連結）  
- 符合「功能需求」的理由（1~2 行）  
- 是否有免費版 / 付費版（與價格區間）  
- 相容性註記（WP / PHP / Elementor 等）  
- 優點 / 缺點（各 1 行）  
- 適合的使用情境（1 行）

最後請列出推薦的項目：
- 首選（含簡短原因）
- 備選 1~2 個

當然，有時候 AI 給出來的資訊不見得是最新的，還是要到官網查核，或實際安裝做測試。

繪製網站架構圖：釐清各頁面關係

「任務層」完成，下一步我們要針對「內容層」與「行動層」來做規劃。

在這個階段，我們會使用心智圖工具，繪製「網站架構圖」，有幾個步驟：

1. 列出你網站所有想呈現的內容。
2. 將內容分群，確認需要的頁面。
3. 整理各頁面的關係與層級。
4. 規劃頁首、頁尾選單內容。
5. 連結選單、頁面間的瀏覽動線。

完成的網站架構圖，就會如下：

各步驟的完整操作，請閱讀《如何製作網站架構圖？簡單 5 步驟，新手也能做（含多個範例）》。

補充：網站常見頁面 & 內容配置範例

這段是補充。剛開始規劃時，可能會不知道要有哪些頁面，或內容應該要被歸類在哪頁。

以下是比較常會出現的網站頁面，以及每個頁面常見的內容配置，讓你當作參考。

頁面名稱	常見內容配置
首頁（Home）	首屏、品牌主張、服務/產品、特色亮點、實際案例、客戶見證、最新文章、行動呼籲
關於我們（About）	品牌故事、創辦人介紹、使命願景、團隊成員、發展歷程、媒體報導
服務項目（Services）	服務列表、流程介紹、方案與定價、客戶評價、常見問題、行動呼籲
產品與方案（Products / Plans）	產品/方案、功能比較、特色亮點、使用流程、口碑資料、行動呼籲
作品展示（Portfolio / Cases）	作品/案例列表、分類篩選、案例詳情、成果展示、客戶回饋、行動呼籲
文章列表頁（Blog / News）	文章列表、分類導覽、熱門文章、訂閱電子報、行動呼籲
單篇文章頁（Post）	文章標題、內文、作者資訊、延伸閱讀、留言/分享、行動呼籲
資源下載（Resources）	資源列表、訂閱/下載表單、站內文章推薦、社群連結
聯絡我們（Contact）	聯絡表單、Email/電話/地址、地圖、社群連結、行動呼籲
感謝頁（Thank You Page）	感謝訊息、行動呼籲、推薦內容、聯絡資訊
404 頁面（Page Not Found）	錯誤提示、搜尋框或首頁按鈕、站內文章推薦
隱私政策 / 服務條款（Privacy / Terms）	最後更新時間、條款內容、公司資訊

當然，以上僅供參考，實際的頁面內容，還是要依照你的本身的品牌與業務為準。

如果想看不同頁面更詳細的分析，以及範例參考來源，請閱讀《網頁設計範例：3 個必看細節 + 9 大設計靈感網站》。

網站設計教學步驟 2：決定風格 & 版型工具

一個網站要凸顯「品牌個性」，依靠的是「風格 + 語氣」，風格來自視覺，語氣來自文字。

在這一步驟，我們會先處理「風格」，也就是要探討「視覺」。

建立網站風格：配色、元件、字體、圖片

網站風格，主要是由四大部分構成：

• 配色：配色技巧會大大影響你的網站風格，至少要包含「主色、輔色、強調色」。可以使用《配色網站》找靈感。
• 元件：頁首/尾、按鈕、選單、表單、卡片等，細節是圓角、陰影、框線、圖示。
• 字體：指文字「外觀」，可透過《免費可商用字體推薦》找合適字體。字型、襯線、大小、粗細、間距也是關鍵。
• 圖片：最容易破壞風格一致性的細節，光線、濾鏡、構圖、色調需統一。若使用《免費圖庫》，也請找相似風格。

目前我們遇到比較多的網站風格，分別是以下：

	配色	元件	字體	圖片
極簡風	黑白灰 + 單一強調色	直角、細線、無陰影	無襯線、細體	留白多、簡潔構圖
科技風	深藍、灰、亮青、紫	銳角、漸層、光影感	幾何無襯線	深色背景、霓虹線條
專業風	藍灰白 + 品牌輔色	方正、對齊嚴謹	穩重無襯線	實拍人像、商務場景
活潑風	高彩、亮色對比	圓角、動態、卡片式	粗體、圓潤	插圖、趣味姿勢
時尚風	黑白 + 低彩中性色	大留白、細線條	高對比襯線	模特照、極簡構圖
插畫風	柔和或手繪色調	曲線、圓角、柔陰影	手寫感、圓體	手繪插畫、簡筆線稿
人文風	暖灰、米白、棕綠	寬邊距、自然紋理	襯線、書寫體	柔光人物、生活場景

風格沒有標準答案，根據時間也會持續變化，平時要多觀察不同的網站風格，或收藏自己的設計範例網站獲取靈感。

挑選佈景主題：決定全站樣式的設定

要將風格落實到網站上，我們需要使用「佈景主題」，它包含了版面配置、配色系統、字體樣式、元件風格等設定。

挑選佈景主題時，有幾個要關注的面向：

1. 樣式自由度：能夠設定的排版、樣式有哪些？是否支援全站樣式的統一設定？
2. 元件多元性：能自由調整的元件有哪些？是否有更多版型模組？樣式能自訂？
3. 操作直覺性：操作介面好不好懂？翻譯夠不夠完整？調整時是否能即時預覽？

我們比較常用的幾款佈景主題如下：

佈景主題	元件多元性	樣式自由度	操作直覺性
Blocksy	頁首/頁尾、容器、卡片、分類列表、側邊欄	全站顏色、字體、間距皆可統一設定	現代化介面、即時預覽
Astra	頁首/頁尾、部落格版型、容器、麵包屑、側邊欄	可設定全站樣式，進階細節略少	操作簡單、邏輯清楚
OceanWP	頁首/頁尾、側欄、彈出選單、浮動按鈕、頂端欄位	可獨立控制排版、邊距、背景、標題	設定選項分散於多處
Kadence	頁首/頁尾、卡片樣式、表單、彈出視窗	完整全站設計系統（色票、字體、間距、按鈕樣式）	結構清楚、分類明確

除了以上，如果想比較更多款，包含免費與付費，歡迎閱讀《WordPress 佈景主題推薦》。

選擇頁面編輯工具：決定製作頁面的工具

多數佈景主題處理的會是整體的外觀，但要能設計每個獨立的頁面，就需要再使用「頁面編輯器」。

挑選頁面編輯器，需考量的層面就比較多：

1. 功能多元性：可不可以製作出多種版面？能不能做到不同的互動效果？
2. 使用直覺性：介面是否清楚？拖拉是否順暢？是不是所見即所得？
3. 使用者人數：使用人數多不多？會影響學習與支援資源的多寡。
4. 擴充彈性度：自身有沒有提供能夠擴充的功能、附加元件？
5. 外掛相容性：與其他外掛同時使用是否不會出現過多 BUG？

實務上，比較多人在使用的頁面編輯器是以下幾款：

編輯器	功能多元性	使用直覺性	使用者人數	擴充彈性度	外掛相容性
Elementor	功能最全面、互動多	拖拉順暢、介面清楚	用戶最多、資源多	外掛最多、生態完整	相容性高、穩定
Divi Builder	功能豐富、模板多	操作稍複雜、反應慢	社群大、資源多	可擴充模組	穩定但略重
Bricks Builder	動態內容強、控制細	結構清楚、偏技術取向	用戶成長中	擴充功能多	相容佳、效能好
Brizy Builder	功能中等、偏簡化	最直覺、學習快	用戶中等	擴充功能少	穩定、輕量
Slider Revolution	動畫最強、特效多	設定繁、學習曲線高	動畫設計族群為主	可嵌入多平台	通用但較吃效能

現在有許多工具是「佈景主題 + 頁面編輯器」，但我不太推薦，容易被綁太死、彈性較低，更換系統成本也很高。

網站設計教學步驟 3：頁面編排 & 元件設定

當全站的樣式設定完畢、風格統一後，下一步就要針對先前規劃的「頁面」進行設計。這是真正意義上的「網頁設計」。

網站頁面是由哪些部分構成的？

如果我們把「網站頁面」拆解，會是這樣的：

• 頁面框架（橫向拆解）：頁面框架 = 頁首（Header）+ 頁面主體（Content）+ 頁尾（Footer）。
• 層級結構（縱向拆解）：由大到小：頁面（Page）> 容器（Container）> 元件（Components）。

整體來看，一個完整的網頁包含了頁首、頁尾、頁面，頁面中又包含了多個容器，容器中會放置不同的元件。我們看似簡單的畫面，其實是由這些元素所構成的。

先有以上的基本概念，在實際製作頁面時，比較不會混亂。以下我也會以這個邏輯逐步來做說明。

WordPress 頁面製作：頁首/頁尾

設計網頁時，通常會從頁首（Header）與頁尾（Footer）開始製作，製作的重點是：

• 引導使用者：頁首頁尾的核心本質是要引導使用者，確保他們不會迷路，設計應該以「簡潔、清楚」為主。
• 維持一致性：頁首頁尾通常會是全站共用的，製作時盡量保持風格的一致，才能帶出品牌的「整體感」。

實際製作的方式，主要有兩種：

• 直接在佈景主題進行全站的設定。例如：透過 Astra 自訂全站頁首與頁尾。
• 頁面編輯器製作，套用於全站頁面。例如：透過 Elementor Pro 的主題建構器將客製化的頁首頁尾套用於全站。

至於頁首與頁尾常會放的元素，可參考以下表格：

	常見元素
頁首	Logo、品牌名稱、主選單、搜尋功能、多語言切換、社群圖示、行動呼籲按鈕
頁尾	聯絡方式、公司資訊、次導覽選單、社群連結、訂閱表單、版權聲明、行動呼籲按鈕

WordPress 頁面製作：頁面編排

頁面排版是不能夠「憑感覺」排的，它是有一定編排邏輯的。

通常一個頁面的寬度是 1920px，而中間的 1200px 會是「容器」，也就是你可以想像有 12 條隱形的線：

容器內中的這 12 條線，你可以用「子容器」任意組合，子容器中也可以再放入不同元件，如下圖：

等於說只要子容器有不同的組合，頁面排版就會不同。

在開始製作網頁時，都會先在頁面編輯器中，將整個頁面的每個子容器位置先排好，接著才會把元件放入子容器中進行設定。（簡單來說，就是先排版，再把文字、圖片、按鈕等等放上去）

如果你想知道更多不同的網頁排版方式，請閱讀《讓網頁更直覺、更有信任感的排版技巧》。

WordPress 頁面製作：元件設定

排版完畢後，接下來就要把「元件」擺上去，並進行設定。

元件要設定兩大部分，絕大多數頁面編輯器都可直接設定：

• 功能：決定元件「做什麼」。例如：按鈕要連到哪裡、表單要傳送到哪裡、圖片要不要開燈箱等。
• 外觀：決定元件「長什麼樣」。包含：顏色、大小、邊距、陰影、圓角、對齊方式等。

元件有非常多種類，但設計大多數的網站，用以下幾個就很足夠了：

元件類型	常會設定的功能	常會調整的外觀
按鈕（Button）	連結到其他頁面、觸發動作（表單送出、下載檔案等）	顏色、字體、圓角、陰影、間距、滑鼠懸停效果
標題文字（Heading）	標籤層級（H1~H6）、設定錨點 ID	字體、字重、大小、間距、顏色
段落文字（Text）	文字連結、斷行方式、插入動態變數	行距、字距、顏色、對齊方式
圖片（Image）	設定連結、懸停互動、設定替代文字	尺寸、邊距、圓角、陰影、對齊
卡片（Card）	設定點擊跳轉、插入連結、動態效果	邊框、陰影、間距、背景色、對齊
表單（Form）	欄位類型（文字、選單、上傳等）、提交後動作（寄信、跳轉頁面、顯示訊息等）	欄位樣式、按鈕樣式、間距、對齊
圖示（Icon）	連結設定、旋轉/動態效果	大小、顏色、間距、風格
導覽選單（Menu）	選單層級、展開方式、行動裝置切換	字體、間距、對齊、滑鼠懸停效果
社群按鈕（Social Icons）	連結網址、開啟方式、分享方式	圓角、顏色、大小、風格

等待網站頁面都設計完畢，你的網站大致就完成了，下一步則是針對用戶的使用狀況做觀測與調整。

網站設計教學步驟 4：優化網站使用者體驗

使用者體驗就是 User Experience（UX），有再好的畫面、內容，如果使用體驗不好，也會影響使用者對於品牌的感受。

以下提供幾個實務上會做的任務（當然使用者體驗是一個更進階的領域，以下先著重在入門概念）。

檢查行動裝置的操作體驗（RWD）

現代使用者在瀏覽網站時，主要使用「電腦、平板、手機」。為確保網站能在不同裝置上都能有好的瀏覽體驗，通常都會使用「響應式網站設計（RWD）」。

響應式網站設計（RWD）是讓網站能自動調整版面，適合各種不同尺寸螢幕的設計方式。

若使用響應式網站設計，會建議設計完畢，到行動裝置上實際瀏覽做確認，著重以下幾個部分：

• 字體太小：桌機看剛好，手機上變太小、看不清楚。
• 段落太擠：桌機留白夠，手機上變成段跟段擠在一起，整頁密密麻麻。
• 按鈕太近或太小：手指會比鼠標精準度更低，太小的按鈕在手機上容易誤觸。
• 圖片沒自動縮放：圖片被裁切或超出畫面邊界，直接破版，並且無法縮放。
• 頁面能橫向滑動：通常是某個區塊寬度沒設好，導致頁面能橫向移動。
• 選單卡住或展開異常：收合式選單在手機上被遮擋、點不到。
• CTA 被擠下去：桌機第一眼能看到的 CTA，在手機版被擠到下方。
• 表單太長：欄位太多，在手機版上整個會被擠下去，填寫體驗不好。
• 頁首選單列太厚：手機螢幕一半都被頁首選單列給佔據。
• 彈窗或浮動條遮住內容：在桌機位置正常，手機卻擋住文字或按鈕。
• 文字溢出容器：長單字或英文網址撐壞版面，超出原本的範圍。
• 懸停效果失效：桌機滑鼠懸停有效果，手機上卻完全沒反應。

另外，如果你網站使用「電腦版」與「行動版」的主要族群不同的話，也建議針對性去做調整。

舉例來說，之前我們有做過長照機構的網站，整個網站的電腦版比較多是年輕人（兒女）使用，但行動版大多都是長輩使用。於是，我們將電腦版上正常尺寸的按鈕，在行動版中放非常大、顯眼，順利解決長輩操作問題。

檢測載入速度提升網站效能

「網站速度」是影響使用者體驗的重點之一。通常在網站設計後，會再做一次整體性的速度檢測，並提升效能。

主要分為兩大方向：設計面（讓元素少一點、畫面快一點）、技術面（讓檔案少一點、網站輕一點）。

優化層級	優化方向	舉例
設計面	避免動態	頁面避免放太多動畫、特效、輪播、影片
	減少字體	全站 1~2 種字體就好，減少外部字型載入
	替換圖片	使用純色或漸層背景，取代高解析的圖片
	精簡畫面	排版簡單一點，不要堆疊太多容器或元件
	刪除檔案	刪除用不到的圖片、模板、設計檔案
技術面	圖片壓縮	上傳前壓縮圖片，並轉為 WebP 格式
	快取設定	使用快取與延遲載入（Lazy Load）設定
	移除資源	移除不必要或重複功能的外掛、佈景主題
	代碼優化	僅保留必要的 JS / CSS，延後其他資源載入
	主機升級	使用效能穩定的主機，並設定 CDN 分流

當然，網站速度能調整的部分還很多，詳細請看《網站維護在做什麼？費用怎麼算？11 大關鍵項目（安全又穩定）》。

透過工具觀測使用者行為

好的網站設計不是憑感覺，需要去觀測使用者的實際瀏覽狀況，並做出調整。

一個網站完整的觀測方向，分為幾大類：

1. 曝光：網站能不能被人們看見？會在哪裡看到？
2. 點擊：人們會不會點連結進入網站？多少人會點？
3. 瀏覽：進站後，觀看網站的狀況怎麼樣？
4. 互動：用戶有沒有實際採取行動？

不過，針對「網站設計」，觀測的重點會在使用者的「瀏覽」與「互動」，具體項目如下：

觀測項目	想知道什麼	優化方向
熱門頁面	哪些內容最常被瀏覽	在熱門頁增加連結或 CTA，提升導流能力
停留時間	使用者是否被內容吸引、願意繼續看	改善頁面易讀性、增加內容深度、增加內部連結
使用者路徑	使用者從哪個頁面進入、接下來去哪	調整頁面層級、讓用戶動線更清晰
使用裝置比例	使用者主要使用哪種裝置	針對主流裝置優化版面與按鈕位置
轉換事件	有多少人完成行動（填表、購買、下載）	優化 CTA 文案、增加行動誘因

觀測工具則較常用以下幾款，都是完全免費的：

工具	核心功能	可觀測項目
Google Analytics（GA4）	分析整體流量、使用行為	流量來源、熱門頁面、停留時間、使用者路徑等
Google Tag Manager（GTM）	管理並設定「事件」追蹤	按鈕點擊、表單送出、檔案下載、影片播放等
Microsoft Clarity	視覺化觀察使用者的行為	熱點圖、滑動軌跡、錄影回放、點擊集中區域等

網站設計到這邊差不多完成，恭喜你獲得一個使用者使用起來感受很好，同時又能傳遞你品牌理念的網站。

關於網頁設計的常見問題