搜「網頁設計」跳出來的教學，多數停在「怎麼把頁面弄好看」：配色、字體、輪播圖。外貿企業做網頁設計不是做美術作業。你的網站要讓海外採購在 Google 搜得到、手機打得開、看完願意寄一封詢價信過來，這三件事任何一件出錯，頁面再漂亮都是純成本。這篇把網頁設計從需求到上線的完整流程走一遍，每個階段附上最常見的錯和檢查方法。
先分清：你要的是展示型網站，還是接單型網站
兩種都叫網頁設計，做法完全不同。展示型網站給老闆和自己人看，照片大、動畫多、公司介紹佔一半版面。接單型網站給海外採購看，採購只關心三件事：你做不做他要的產品、能不能證明你做得出來、怎麼聯絡你最快。
外貿 B2B 網站應該按接單型做。判斷標準很簡單：頁面上最大的版面給了誰。產品和解決方案佔首屏一半以上，是接單型；公司沿革和榮譽牆佔首屏，是展示型。
完整流程總覽：五個階段，各有產出物
網頁製作不是畫完圖再說，每個階段都要有能檢查的產出物。下面的表可以直接當專案進度表用，任何一個階段拿不出產出物，專案就是停在口頭上。
| 階段 | 做什麼 | 產出物 | 最常見的錯 |
|---|---|---|---|
| 需求定位 | 定買家、定詞、定詢價動線 | 關鍵字清單、頁面清單 | 跳過這步直接畫首頁 |
| 結構規劃 | 定頁面層級與站內連結 | 網站架構圖 | 頁面做成孤島，互相連不到 |
| 視覺設計 | 版面、配色、元件樣式 | 設計稿（桌面＋手機） | 只給桌面稿，手機版靠運氣 |
| 開發填充 | 架站、切版、放內容 | 可開啟的測試站 | 圖片不壓縮直接上傳 |
| 驗收上線 | 逐項實測再切換正式網域 | 驗收紀錄 | 用「看起來正常」代替實測 |
第一步：需求定位，先回答三個問題
這一步不做，後面全部白做。三個問題：你的買家在哪個國家、他們用什麼詞搜你的產品、你希望他們看完哪一頁之後寄詢價信。
買家搜什麼詞，不要靠感覺猜。把產品的核心詞、規格詞、應用場景詞各列一群，去 Google 搜一遍，看排名前面的競品頁面標題怎麼寫，詞就有了。2026 年 9 月我們實測 500 個中文 B2B 查詢，80.9% 的結果頁出現 AI Overview，這代表買家還沒點進網站就先看到 AI 整理的答案——你的頁面標題和開頭段落寫得具體，才有機會被引用。
詢價動線是指：買家從產品頁到送出表單，中間經過幾步。每多一步就掉一層人。產品頁旁邊直接放詢價按鈕和 WhatsApp 連結，比叫他回到首頁再找「聯絡我們」有效得多。
第二步：結構規劃，頁面清單先於設計稿
網站製作的順序是先有頁面清單，再有架構圖，最後才有設計稿。頁面清單從買家的問題出發：首頁回答「你是誰、做什麼」，產品頁回答「規格和交期」，案例頁回答「別人買過嗎」，FAQ 頁回答「我還想問什麼」。
站內連結在這一步就要畫進架構圖。每個產品頁至少能連到同類產品和對應的產業方案頁，首頁能兩步之內到任何一個主要產品頁。上架後再補連結，等於裝修完才打牆。
第三步：視覺設計，網頁美編服務資訊優先級
網頁美編不是把畫面填滿，是決定買家先看到什麼。外貿站的視覺設計有三條底線：產品圖先於裝飾圖、文字規格用表格不要用長段落、每屏都要看得到詢價出口。採購在螢幕上找的是證據——認證標章、實拍圖、參數表——不是氛圍。
首頁的版面怎麼排，取決於你的主力產品是標準品還是客製品。這個主題我們另外寫了一篇B2B 外貿獨立站首頁怎麼佈局，把先放產品、產業方案還是公司實力的判斷講清楚了，這裡不重複。
設計稿一定要求桌面和手機兩套。台灣與歐美採購有很高比例直接用手機開信裡的連結，手機稿缺席的設計案等於只做了一半。
第四步：開發與內容填充，圖片是最大變數
開發階段用什麼架站系統，影響的是之後兩三年的維護成本，這部分在站上既有的外貿獨立站架站指南有展開。這裡只講填充內容時最容易翻車的一件事：圖片。
我們接手過一個站，產品頁模板放了一張 15MB 的首圖，幾百個產品頁的 Core Web Vitals 全部不及格，伺服器本身一點問題都沒有。圖片上傳前壓成 WebP、單張控制在幾百 KB 以內，這件事在填充階段做只要一次工，上線後回頭補要改幾百個頁面。
文字內容同一時間寫。設計稿漂亮、上線時產品描述複製貼上 PDF 檔案裡的規格表，是外貿站最常見的「最後一公里」掉鏈子。規格表要重排成網頁表格，採購才會看。
第五步：驗收上線，用數據不用感覺
驗收的口徑要寫進合約。Google 官方給的 Core Web Vitals 門檻是明確數字：LCP 不超過 2.5 秒、INP 不超過 200 毫秒、CLS 不超過 0.1（web.dev/articles/vitals）。拿 PageSpeed Insights 跑產品頁和首頁，分數截圖存檔，這是雙方都能接受的驗收語言。
表單一定要實測寄送，不是填一次看看有沒有轉圈。我們看過一個案例：某站表單靜默壞了 12 天，207 次付費點擊落在一張寄不出去的表單上，根因是 reCAPTCHA 的站點密鑰註冊在另一個網域。上線前從外部網路寄一封測試詢價、確認信箱收到，這個動作值幾萬塊廣告費。
上線前的完整檢查項——網域解析、表單、跳轉、基礎 SEO——我們整理成外貿獨立站上線前檢查清單，逐項打勾再切換正式網域。
上線後第一個月：三件事
第一件，提交 Sitemap 到 Google Search Console，七天後回來看收錄比例。新頁收錄速度慢是正常的，收錄數是零才有問題。第二件，每週從手機實際寄一封詢價測試，確認表單活著。第三件，把設計階段沒填滿的頁面補完——多數專案上線時內容只完成了八成，最後兩成決定採購覺得你是工廠還是空殼。
後續要不要開始投 Google 廣告、SEO 從哪個詞開始做，節奏取決於收錄和頁面完成度。想先聊你們的產品和時程，可以直接到聯絡我們頁面，微信和電話都在上面。
這套流程為什麼值得照著走
這不是理論流程。河南天問網路 2017 年成立到現在，長期維護 30–40 個外貿獨立站，每個新專案都按同樣的階段表推進，每個接手回來的老站回頭看，問題幾乎都出在被跳過的那一步。你想省哪一步？我們看到的多數人省的是需求定位，因為它不產出畫面，然後在驗收階段花三倍時間返工。流程的價值不在文件好看，在於每個階段都有能攤開檢查的產出物，出錯時知道回到哪一格重做。
常見問題
網頁設計和網頁製作有什麼差別？
設計偏規劃：定頁面結構、詢價動線和版面優先級；製作偏執行：切版、上架、填內容。小案子一個人包辦，正規專案分開做，順序是先設計後製作，跳過設計直接製作，返工都在後面等。
網頁設計做完，網站就會有詢價嗎？
不會自動有。上線只是把店面開起來，之後還有收錄、內容補完、流量經營三件事。任何環節做不到的承諾都不該寫進合約。
找網頁設計公司之前，我要先準備什麼？
產品清單和規格表、可用的產品圖、公司基本資料與認證、還有你想讓買家看到的前三個訊息。素材整理得越完整，專案時程越可控。
驗收的時候最該盯哪一項？
表單實測。從手機的行動網路寄一封詢價，確認信箱真的收到。頁面好看不好看是主觀的，表單通不通是二進位的。
這篇文章是誰寫的、怎麼核
作者劉宇，河南天問網路技術有限公司創辦人（公司 2017 年 5 月完成工商登記）。公司做外貿 WordPress 獨立站的架設與維護、Google SEO 與 Google 廣告代營運，長期維護 30–40 個外貿獨立站。文中每個數字要嘛來自我們自己網站與接手站點的實測，要嘛附上來源連結；不承諾排名、不承諾詢價數。報價依專案範圍客製，開工前書面確認；中文聯絡方式：微信 g0365489、電話 13526816415。