網站還沒準備好，但網址已經有人點進來了——這一刻訪客看到的不該是半成品的後台預覽，也不該是一片空白或預設的伺服器錯誤頁。一個經過設計的 coming soon 頁面或維護頁，決定了第一批到訪者對品牌的第一印象。多數教學只教你「裝哪個外掛、按哪個按鈕」，卻很少談這個頁面本身要長成什麼樣子：版面怎麼排、訊息怎麼寫、在手機上會不會跑版、搜尋引擎會怎麼解讀。這篇從視覺設計與實作兩端切入，把 coming soon 頁面設計講清楚，順帶釐清它跟維護頁在用途與技術訊號上的差別。

Coming Soon 頁與維護頁的定位與視覺差異

兩者最大的差別不在外觀，而在「網站處於哪個生命階段」，這會直接影響你該放什麼內容、該對搜尋引擎送出什麼訊號。

Coming Soon（即將上線）用在網站還沒正式營運的階段。網域剛買、品牌剛要曝光，這時頁面的任務是建立期待、累積潛在客戶，所以視覺上偏向行銷導向：清楚的品牌標誌、一句吸引人的主張、倒數計時、一個訂閱或預約的入口。它預設網站「即將存在」，希望搜尋引擎開始認識這個網域。

維護頁（Maintenance Mode）用在網站已經上線、只是暫時下線整修的情況，例如更換佈景主題、升級外掛、調整 WooCommerce 結帳流程。這時訪客多半是老客戶或回訪者，他們要的是一句安心的說明：「我們正在更新，很快回來」。視覺上偏向資訊導向，不需要倒數行銷，重點是不要讓人以為網站收掉了。

設計上的具體分野可以這樣抓：

• Coming Soon：主視覺強、CTA 明確（訂閱、預約、搶先看），可放品牌故事與上線時間。
• 維護頁：語氣安撫、訊息精簡，告知預計恢復時間即可，不必塞行銷元件。

技術訊號的差別留到後面談 503 與搜尋引擎可見度時一次說清楚，這裡先記住一個原則：同一套外掛通常兩種模式都能做，但不能同時啟用，選錯模式會讓搜尋引擎誤判網站狀態。

一個好的 Coming Soon 頁面該有哪些設計元素

先給結論：寧缺勿濫。這個頁面只有一個目標，元素越少、焦點越清楚，轉換與印象都越好。把所有想塞的東西列出來後，砍到剩下真正必要的幾項。

核心元素大致是這幾項，依重要性排序：

• 品牌標誌與名稱：放在視覺焦點上方或正中，讓人一眼知道這是誰的網站。這是維持品牌一致性的最低要求，字體、配色都要延續正式站的視覺語言。
• 一句主張（headline）：用一句話講清楚「這裡將會有什麼」。不要寫成「網站建置中」這種沒有資訊的句子，而是「手沖器具選物，秋季正式開賣」這類具體、帶期待感的訊息。
• 單一主要行動（single CTA）：一個頁面只給一個主要動作。Coming Soon 頁通常是電子郵件訂閱，讓你在上線前就開始累積名單；維護頁則可能完全不需要 CTA。
• 倒數計時器：若你有明確的上線或恢復時間，倒數能製造急迫感。但時間不確定就別放，跑到歸零卻還沒上線會反過來傷信任。
• 社群連結：放一兩個官方社群入口，讓訪客在網站還沒好時也能追蹤最新動態。

至於電子郵件訂閱表單，多數頁面建構外掛（如 SeedProd、Thrive Architect）都內建表單區塊，並可串接 Mailchimp、Constant Contact、Brevo 等行銷工具。要不要串接看你有沒有經營名單的打算；若沒有，放一個社群連結反而更輕量。

下面用一個簡單的層級示意，呈現這些元素在版面上由上而下的優先順序：

版面與視覺層次的設計原則

決定放哪些元素之後，下一步是讓它們在版面上各就各位。coming soon 頁面設計最常見的失誤，是把所有元素都做成一樣大、一樣顯眼，結果訪客的視線無處落腳。

先建立單一視覺焦點。 一個頁面只能有一個最強的視覺重心，通常是主張那句話，或是搭配主張的主視覺圖。其他元素在大小、顏色、位置上都要退一階，襯托這個焦點。判斷方法很簡單：瞇起眼睛看整個頁面，第一個跳出來的東西就是焦點，如果有兩三個東西同時跳出來，代表層次沒做好。

用留白撐開呼吸感。 過渡頁不需要塞滿，大面積留白反而顯得精緻、有設計感。元素之間留足夠間距，把版面切成清楚的幾個區塊，比把東西擠在一起更耐看。

字級與字重拉出對比。 主張用大字級、粗字重；說明文字用小一階、常規字重；次要資訊（如版權、聯絡方式）再小一階、用淺一點的灰。這套階梯一旦建立，訪客不用思考就知道先看哪裡。

配色控制在兩到三色。 延續品牌主色，加上一個輔助色與中性背景就夠。背景若用圖片，務必加一層半透明遮色片（多數外掛叫 Dim Background）讓上方文字維持可讀性，這是最常被忽略卻最影響閱讀的細節。

對齊要一致。 置中對齊適合元素少的過渡頁，視覺最穩；若內容偏多，靠左對齊會更好讀。整頁挑一種對齊方式貫徹到底，不要一段置中一段靠左。

這些原則不靠外掛模板就能落實——很多付費模板看起來華麗，但層次反而混亂；與其套一個複雜模板，不如用簡單版型把上面幾條做對。

行動裝置與載入速度的設計考量

過半的網站流量來自手機，過渡頁更是如此：人們常在通勤、滑社群時點進連結。桌機上排得漂漂亮亮的版面，到手機上很可能字太小、按鈕被擠到螢幕外、背景圖被裁掉重點。

行動裝置的設計要把握幾件事：

• 背景圖開啟自適應。 外掛裡通常有 Responsive Background 與顯示方式設定，建議選 Contain 或讓系統依裝置裁切，避免手機上只看到背景圖的一角。直向手機螢幕與橫向桌機的構圖差很多，主視覺的重點最好擺在畫面中央，怎麼裁都不會被切掉。
• CTA 按鈕要夠大。 手指點擊區建議至少 44 像素高，按鈕與輸入框之間留足間距，避免誤觸。
• 字級設下限。 內文在手機上不要小於 16 像素，否則使用者得縮放才能讀。

載入速度同樣是設計的一部分。過渡頁是訪客對品牌的第一個接觸點，如果轉個圈半天打不開，再美的版面也沒人看到。幾個務實做法：

• 圖片先壓縮再上傳。 背景大圖最容易拖慢速度，上傳前壓到合理檔案大小，或改用較輕的格式。
• 挑輕量的實作方式。 重量級頁面建構器功能多，但也會載入較多腳本；如果只是做一頁過渡頁，用主題內建的維護模式或輕量外掛，往往更快。
• 少塞動態特效。 動畫、影片背景看起來吸睛，但會增加載入負擔，行銷效益要跟速度成本一起權衡。

載入快、手機順，這兩件事做到位，整個設計的完成度才算真的及格。

用外掛還是手動程式碼做頁面

直接給判斷：要視覺自由度與快速上手，用頁面建構器外掛；只是臨時擋一下、不在乎美觀，用手動方式最乾淨。兩條路各有適用情境，不是非此即彼。

頁面建構器外掛（設計自由度最高）。 SeedProd 是目前最常被使用的選擇，操作邏輯接近 Elementor，拖拉式編輯、所見即所得，免費版就能設定即將上線與維護兩種模式並無限設計到達頁；倒數計時、訂閱表單、社群按鈕等區塊多半要付費版才解鎖完整功能。Elementor 本身也內建維護模式，可在設定裡切換 Maintenance 或 Coming Soon。這類外掛的優勢是設計師不用碰程式碼就能做出與正式站一致的視覺，缺點是會載入較多資源。

佈景主題內建的維護模式。 部分主題（如 Astra）允許你新增一個頁面、隱藏頁首頁尾、設為全螢幕寬度，再把它指定為首頁，等於手工做出一個過渡頁。這條路不需要額外外掛，視覺也完全可控，適合已經熟悉主題編輯器的人。

手動程式碼方式（最輕量）。 WordPress 原生支援一個機制：在網站根目錄放一個名為 .maintenance 的檔案（注意開頭有個小數點），內容寫上幾行 PHP 讓系統判定進入維護狀態，網站就會自動顯示維護畫面；要解除只要把檔名改掉或刪除即可。另一種是在佈景主題的 functions.php 掛一段函式輸出自訂維護訊息。這兩種方式不依賴任何外掛、載入最輕，但畫面相對陽春，要做出精緻視覺得自己寫 HTML 與 CSS。

選擇的邏輯是：過渡頁要對外曝光、肩負行銷任務，就用外掛把設計做足；純粹是後台施工五分鐘、不希望訪客看到報錯，手動方式最省事。

503 狀態碼與搜尋引擎可見度的正確設定

這是過渡頁最容易被做錯、卻直接牽動 SEO 的一環。頁面好不好看是給人看的，HTTP 狀態碼是給搜尋引擎看的，兩者都要對。

關鍵概念是 HTTP 503（Service Unavailable，服務暫時無法使用）。當網站處於維護模式，正確做法是讓伺服器對爬蟲回傳 503 狀態碼，等於告訴 Google：「網站只是暫時下線，不是壞掉或關站，請晚點再來。」許多維護模式外掛內建 503 標頭的開關，啟用後搜尋引擎就知道現況是暫時性的，不會因此調降排名或把頁面移出索引。

搭配 503 的還有一個 Retry-After 標頭，用來告訴爬蟲「多久之後再來抓」。短期維護可以用秒數表示，較長的整修則可給具體的恢復時間。設定得當能避免 Googlebot 在維護期間反覆無效抓取。

幾個務實提醒，照著做就不會踩雷：

• 維護頁要送 503，Coming Soon 頁通常不要。 維護期間的網站本來就已被索引，503 是在保護既有排名；而全新的 Coming Soon 網站反而希望被搜尋引擎開始認識，多半搭配一般狀態碼，只在內容未完成時暫時關閉搜尋引擎可見度。
• 別把 503 開太久。 短時間的 503 不太影響 SEO，Google 理解這是暫時狀態；但若長時間持續回傳 503，爬蟲會判定網站不穩定，進而影響排名與索引。維護一結束就要立刻解除。
• WordPress 後台那個「搜尋引擎可見度」勾選只是禮貌性請求。 它在頁面標頭加上 noindex 提示，請爬蟲別收錄，但不保證一定不被收。測試期勾起來、正式上線務必記得取消，否則 SEO 做再好也不會被收錄。
• 登入後台時看不到過渡頁是正常的。 多數外掛預設讓管理員直接看到正式網站、只對未登入訪客顯示過渡頁，所以要驗證效果請改用無痕視窗或登出後再看。

把狀態碼這層做對，你設計的過渡頁才不會在保護訪客體驗的同時，悄悄傷到搜尋排名。

WooCommerce 商店上線或維護時的頁面設計取捨

電商站的過渡頁比一般網站更敏感，因為它直接關係到交易與信任。商店要上線或暫停整修時，設計上有幾個一般網站不會遇到的取捨。

上線前的 Coming Soon 頁，重心放在累積名單與預告。 商店還沒開賣，最值錢的就是潛在客戶的電子郵件。這時 CTA 別只寫「敬請期待」，而是給一個具體誘因，例如「搶先訂閱、開賣首日通知」。SeedProd 這類外掛可串接 WooCommerce，讓你在上線前就為主打商品建立到達頁，把流量先養起來。

整修中的維護頁，要明確區分「整站維護」與「部分功能維護」。 如果只是調整結帳流程或更新金物流設定，讓商品頁、購物車照常運作、僅在結帳段提示「系統升級中，暫停下單」，會比整站關閉友善得多。整站維護則務必送出 503 並標明恢復時間，老客戶看到「很快回來」的明確訊息，才不會因為一次撲空就流失。

維護期間的信任訊號不能斷。 電商訪客最怕「這家是不是收掉了、我的訂單怎麼辦」。維護頁上保留客服聯絡方式（電子郵件或社群），並一句話交代既有訂單照常處理，能大幅降低焦慮。涉及金流的部分只需客觀說明「暫停接受新訂單」即可，把處理細節留給正式的客服管道。

電商的過渡頁不是擺著好看，而是一段交易空窗期的緩衝，設計目標是讓人「願意等」與「願意回來」。

把過渡頁當成正式頁面來設計，而不是隨手擋一下

過渡頁的訪客數可能不多，但他們往往是最早接觸你品牌的人，第一印象的權重特別高。與其臨時丟一張「建置中」的圖了事，不如花一點時間把焦點、層次、手機版與載入速度做對，再依網站階段選對 Coming Soon 或維護模式、送出正確的狀態碼。

如果你正準備上線一個新站，現在就可以動手：先決定這頁只保留哪一個主要行動，照著前面的層級順序排好版面，用無痕視窗在手機與桌機各檢查一次，最後確認搜尋引擎可見度與 503 設定符合你的階段。把這幾步做扎實，這個別人「只是隨手擋一下」的頁面，就會成為你網站專業度的第一個證明。