最後更新時間：2026-08-31，由 Dean 編輯 在《 如何架設網站 》中，我將架網站拆解成四大區塊：架站平台、自架網站、網站設計、網站維護。 很多人，會覺得「網站設計」是純粹的美感，只是額外加分的，但這就少看到了很多背後的隱性價值。它包含了風格定義、網站架構、網頁設計、使用者體驗等範疇，大多數人看見的只有網站的「外觀」而已。 這一篇，我會根據「如何開始設計一個網站」，把流程拆解成 4 大步驟： 目標釐清 & 架構規劃 ：釐清網站目標，確認網站功能、結構、頁面等。 決定風格 & 版型工具 ：確立品牌視覺風格，挑選佈景主題與頁面編輯器。 頁面編排 & 元件設定 ：實際製作每一個頁面，排版、設定元件功能與外觀。 使用者體驗優化 ：優化在不同裝置上的動線設計、行動引導，並透過數據追蹤。 針對想要自己設計網站的人，這篇「網站+網頁設計教學指南」能夠幫助你建立完整概念，設計時會更有方向。 PS. 本篇會以 WordPress 網頁設計的實務流程做教學，與傳統原生 HTML、CSS、JavaScript 網頁設計稍微有點不同。 網站設計是用來帶出你品牌價值的一種方式。 你需要先有明確的價值主張，才有辦法透過設計呈現出來 。 很多人會覺得網站設計就是把網站變好看，但如果不符合你的價值主張，沒辦法讓人一看到就感受到你想要傳遞的價值觀，那這個設計也不會是一個好的設計。 在開始網站設計之前，我會建議你先釐清並確立 品牌定位 ，接著我們才能展開真正的「設計」： 網站結構 ：就像房屋的格局，要有哪些房間？牆面如何區隔？ 風格感受 ：就像房屋的內裝，要用什麼配色？選擇哪些材質？ 內容文案 ：就像房屋的擺設，要放什麼家具？裝飾有哪些？ 用戶動線 ：就像空間的動線，從房間到房間怎麼走？會經過哪些區域？ 這些任務，都是為了凸顯你的「品牌核心」。只要有了明確的依據，設計過程就能更聚焦，不會陷入「好像哪裡怪怪的」而反覆修改的情況。 網站設計 & 網頁設計一樣嗎？ 在大多語境下，可以將「網站設計」與「網頁設計」視為相同的。 不過，如果真的要去細分， 網站設計探討的範圍會更宏觀 ，包含： 風格定位：定義品牌整體風格，並將它落實到網站的各設計之中，也才能讓網站有品牌一致性。 網站結構：包含「頁面有哪些？頁跟面之間怎麼走？層級關係為何？」這部份無法直接看得見。 頁面設計：單一頁面的視覺排版與設計，會包含大家能看見的外觀，像是配色、字體、圖片等。 用戶體驗：針對用戶使用網站的狀況進行觀測，並做出分析與優化，進而提升網站整體轉換率。 甚至，有些人在講網站設計時，還會把「主機架設」與「功能開發」一同算進去，溝通時一定要確認清楚。 相對來說， 「網頁設計」會是指針對單一頁面的排版與外觀做設定 ，不涉及全站規劃，任務就比較單純。 網站設計教學步驟 1：目標釐清 & 網站架構 在設計網站的最初，我們必須先將「任務目標」釐清，才能夠確認以什麼樣的架構，去完成任務。 「網站」本質是一個工具，任何工具都會有需要使用它達到的目的。 但通常討論到網站要達成的目的，絕大多數人都會講得很不清楚。我建議，先聚焦在以下四大層面： 每個品牌想透過網站達到的目的都不一樣，這沒有標準答案。即便你是 自己架設網站 ，也建議先從這四大層面去思考。 而 當你發現思考這些問題時感到不清晰，就代表此刻設計網站可能還太早 。先回頭重新釐清你的品牌，會更合適。 聚焦「網站核心任務」後，要再切出具體所需的功能，並確認是否有合適的外掛能做到。 核心任務 ：吸引潛在客戶諮詢服務。 所需功能 ：表單聯絡、時段預約、名單蒐集、追蹤分析。 外掛類型 ：表單工具、預約系統、電郵管理系統、數據追蹤工具。 根據我們設計網站的實務經驗，最常見的功能如下表： 尋找合適外掛往往是網站設計規劃中相對耗時的工作，推薦你可以用 AI 來加速，以下提供給你 Prompt： 當然，有時候 AI 給出來的資訊不見得是最新的，還是要到官網查核，或實際安裝做測試。 繪製網站架構圖：釐清各頁面關係 「任務層」完成，下一步我們要針對「內容層」與「行動層」來做規劃。 在這個階段，我們會使用心智圖工具，繪製「網站架構圖」，有幾個步驟： 各步驟的完整操作，請閱讀《 如何製作網站架構圖？簡單 5 步驟，新手也能做（含多個範例） 》。 補充：網站常見頁面 & 內容配置範例 這段是補充。剛開始規劃時，可能會不知道要有哪些頁面，或內容應該要被歸類在哪頁。 以下是比較常會出現的網站頁面，以及每個頁面常見的內容配置，讓你當作參考。 當然，以上僅供參考，實際的頁面內容，還是要依照你的本身的品牌與業務為準。 如果想看不同頁面更詳細的分析，以及範例參考來源，請閱讀《 網頁設計範例：3 個必看細節 + 9 大設計靈感網站 》。 網站設計教學步驟 2：決定風格 & 版型工具 一個網站要凸顯「品牌個性」，依靠的是「風格 + 語氣」，風格來自視覺，語氣來自文字。 在這一步驟，我們會先處理「風格」，也就是要探討「視覺」。 建立網站風格：配色、元件、字體、圖片 網站風格，主要是由四大部分構成： 配色 ： 配色技巧 會大大影響你的網站風格，至少要包含「主色、輔色、強調色」。可以使用《 配色網站 》找靈感。 元件 ：頁首/尾、按鈕、選單、表單、卡片等，細節是圓角、陰影、框線、圖示。 字體 ：指文字「外觀」，可透過《 免費可商用字體推薦 》找合適字體。字型、襯線、大小、粗細、間距也是關鍵。 圖片 ：最容易破壞風格一致性的細節，光線、濾鏡、構圖、色調需統一。若使用《 免費圖庫 》，也請找相似風格。 目前我們遇到比較多的網站風格，分別是以下： 風格沒有標準答案，根據時間也會持續變化 ，平時要多觀察不同的網站風格，或收藏自己的設計範例網站獲取靈感。 挑選佈景主題：決定全站樣式的設定 要將風格落實到網站上，我們需要使用「佈景主題」，它包含了版面配置、配色系統、 字體樣式 、元件風格等設定。 挑選佈景主題時，有幾個要關注的面向： 樣式自由度 ：能夠設定的排版、樣式有哪些？是否支援全站樣式的統一設定？ 元件多元性 ：能自由調整的元件有哪些？是否有更多版型模組？樣式能自訂？ 操作直覺性 ：操作介面好不好懂？翻譯夠不夠完整？調整時是否能即時預覽？ 我們比較常用的幾款佈景主題如下： 除了以上，如果想比較更多款，包含免費與付費，歡迎閱讀《 WordPress 佈景主題推薦 》。 選擇頁面編輯工具：決定製作頁面的工具 多數佈景主題處理的會是整體的外觀，但要能設計每個獨立的頁面，就需要再使用「頁面編輯器」。 挑選頁面編輯器，需考量的層面就比較多： 功能多元性 ：可不可以製作出多種版面？能不能做到不同的互動效果？ 使用直覺性 ：介面是否清楚？拖拉是否順暢？是不是所見即所得？ 使用者人數 ：使用人數多不多？會影響學習與支援資源的多寡。 擴充彈性度 ：自身有沒有提供能夠擴充的功能、附加元件？

外掛相容性 ：與其他外掛同時使用是否不會出現過多 BUG？ 實務上，比較多人在使用的頁面編輯器是以下幾款： 現在有許多工具是「佈景主題 + 頁面編輯器」，但我不太推薦 ，容易被綁太死、彈性較低，更換系統成本也很高。 網站設計教學步驟 3：頁面編排 & 元件設定 當全站的樣式設定完畢、風格統一後，下一步就要針對先前規劃的「頁面」進行設計。這是真正意義上的「網頁設計」。 如果我們把「網站頁面」拆解，會是這樣的： 頁面框架（橫向拆解） ：頁面框架 = 頁首（Header）+ 頁面主體（Content）+ 頁尾（Footer）。 層級結構（縱向拆解） ：由大到小：頁面（Page）> 容器（Container）> 元件（Components）。 整體來看， 一個完整的網頁包含了頁首、頁尾、頁面，頁面中又包含了多個容器，容器中會放置不同的元件 。我們看似簡單的畫面，其實是由這些元素所構成的。 先有以上的基本概念，在實際製作頁面時，比較不會混亂。以下我也會以這個邏輯逐步來做說明。 WordPress 頁面製作：頁首/頁尾 設計網頁時，通常會從頁首（Header）與頁尾（Footer）開始製作，製作的重點是： 引導使用者 ：頁首頁尾的核心本質是要引導使用者，確保他們不會迷路，設計應該以「簡潔、清楚」為主。 維持一致性 ：頁首頁尾通常會是全站共用的，製作時盡量保持風格的一致，才能帶出品牌的「整體感」。 直接在佈景主題進行全站的設定。例如： 透過 Astra 自訂全站頁首與頁尾 。 頁面編輯器製作，套用於全站頁面。例如： 透過 Elementor Pro 的主題建構器將客製化的頁首頁尾套用於全站 。 至於頁首與頁尾常會放的元素，可參考以下表格： WordPress 頁面製作：頁面編排 頁面排版是不能夠「憑感覺」排的，它是有一定編排邏輯的。 通常一個頁面的寬度是 1920px，而中間的 1200px 會是「容器」，也就是你可以想像有 12 條隱形的線： 容器內中的這 12 條線，你可以用「子容器」任意組合，子容器中也可以再放入不同元件，如下圖： 等於說只要子容器有不同的組合， 頁面排版 就會不同 。 在開始製作網頁時，都會先在頁面編輯器中，將整個頁面的每個子容器位置先排好，接著才會把元件放入子容器中進行設定。（簡單來說，就是先排版，再把文字、圖片、按鈕等等放上去） 如果你想知道更多不同的網頁排版方式，請閱讀《 讓網頁更直覺、更有信任感的排版技巧 》。 WordPress 頁面製作：元件設定 排版完畢後，接下來就要把「元件」擺上去，並進行設定。 元件要設定兩大部分，絕大多數頁面編輯器都可直接設定： 功能 ：決定元件「做什麼」。例如：按鈕要連到哪裡、表單要傳送到哪裡、圖片要不要開燈箱等。 外觀 ：決定元件「長什麼樣」。包含：顏色、大小、邊距、陰影、圓角、對齊方式等。 元件有非常多種類，但設計大多數的網站，用以下幾個就很足夠了： 等待網站頁面都設計完畢，你的網站大致就完成了，下一步則是針對用戶的使用狀況做觀測與調整。 網站設計教學步驟 4：優化網站使用者體驗 使用者體驗就是 User Experience（UX），有再好的畫面、內容，如果使用體驗不好，也會影響使用者對於品牌的感受。 以下提供幾個實務上會做的任務（當然使用者體驗是一個更進階的領域，以下先著重在入門概念）。 檢查行動裝置的操作體驗（RWD） 現代使用者在瀏覽網站時，主要使用「電腦、平板、手機」。為確保網站能在不同裝置上都能有好的瀏覽體驗，通常都會使用「響應式網站設計（RWD）」。 響應式網站設計（RWD）是讓網站能自動調整版面，適合各種不同尺寸螢幕的設計方式。 若使用響應式網站設計，會建議設計完畢，到行動裝置上實際瀏覽做確認，著重以下幾個部分： 字體太小 ：桌機看剛好，手機上變太小、看不清楚。 段落太擠 ：桌機留白夠，手機上變成段跟段擠在一起，整頁密密麻麻。 按鈕太近或太小 ：手指會比鼠標精準度更低，太小的按鈕在手機上容易誤觸。 圖片沒自動縮放 ：圖片被裁切或超出畫面邊界，直接破版，並且無法縮放。 頁面能橫向滑動 ：通常是某個區塊寬度沒設好，導致頁面能橫向移動。 選單卡住或展開異常 ：收合式選單在手機上被遮擋、點不到。 CTA 被擠下去 ：桌機第一眼能看到的 CTA，在手機版被擠到下方。 表單太長 ：欄位太多，在手機版上整個會被擠下去，填寫體驗不好。 頁首選單列太厚 ：手機螢幕一半都被頁首選單列給佔據。 彈窗或浮動條遮住內容 ：在桌機位置正常，手機卻擋住文字或按鈕。 文字溢出容器 ：長單字或英文網址撐壞版面，超出原本的範圍。 懸停效果失效 ：桌機滑鼠懸停有效果，手機上卻完全沒反應。 另外，如果你網站使用「電腦版」與「行動版」的主要族群不同的話，也建議針對性去做調整。 舉例來說，之前我們有做過長照機構的網站，整個網站的電腦版比較多是年輕人（兒女）使用，但行動版大多都是長輩使用。於是，我們將電腦版上正常尺寸的按鈕，在行動版中放非常大、顯眼，順利解決長輩操作問題。 「 網站速度 」是影響使用者體驗的重點之一。通常在網站設計後，會再做一次整體性的速度檢測，並提升效能。 主要分為兩大方向： 設計面（讓元素少一點、畫面快一點）、技術面（讓檔案少一點、網站輕一點） 。 當然，網站速度能調整的部分還很多，詳細請看《 網站維護在做什麼？費用怎麼算？11 大關鍵項目（安全又穩定） 》。 好的網站設計不是憑感覺，需要去觀測使用者的實際瀏覽狀況，並做出調整。 一個網站完整的觀測方向，分為幾大類： 曝光：網站能不能被人們看見？會在哪裡看到？ 點擊：人們會不會點連結進入網站？多少人會點？ 瀏覽：進站後，觀看網站的狀況怎麼樣？ 互動：用戶有沒有實際採取行動？ 不過， 針對「網站設計」，觀測的重點會在使用者的「瀏覽」與「互動」 ，具體項目如下： 觀測工具則較常用以下幾款，都是完全免費的： 網站設計到這邊差不多完成，恭喜你獲得一個使用者使用起來感受很好，同時又能傳遞你品牌理念的網站。 網頁設計由三大技術組成： 1. HTML 負責結構 2. CSS 控制視覺外觀 3. JavaScript 實現互動動作 設計元素還包含版面配置、色彩、字體、圖片及按鈕等，共同構建一個網頁。 如果想要學習完整的網頁設計，你需要學會使用以下工具： 1. 繪圖與 UI 設計軟體（如 Figma、Adobe XD） 2. 前端程式編輯器（如 VS Code） 3. 版型框架（如 Bootstrap） 當然，如果你是使用 網頁製作平台 來設計，那你還需要另外學習該平台如何操作。 即便現在有許多 CMS 工具 ，還是會建議要會寫一點程式，才能讓設計更彈性、自由。 基礎網頁設計通常需學習 HTML、CSS 和 JavaScript，以建立網頁結構、設計外觀與動態互動。 兩者主要差在「彈性程度」： 1. 客製化設計會依照品牌需求，打造獨特的版面和功能，能把風格與個性帶出來。 2. 套版設計使用預設模板，快速且省時（也便宜），但通常會跟其他網站長得很相似。 如何整合 SEO 元素在網頁設計中？ 在網頁設計中，要注意的 SEO 重點有： 1. 合理使用 HTML 標籤（<h1>~<h6>） 2. 網站架構清晰 3. 圖片加 ALT 標籤 4. 內容關鍵字優化 5. 確保頁面載入速度 6. 行動裝置友善 不過基本上，使用像 WordPress 這類型的 CMS 建站，原先結構大多都已符合 SEO 要求。 請輸入搜尋關鍵字並按下 Enter 以搜尋