為什麼你的網站每一頁風格都不一樣？五樣東西定下來就解決八成

網站做完之後，很多人有一種說不上來的感覺：每一頁單看都還可以，但整個逛下來就是不像同一個網站。

首頁很有質感，服務頁字忽然變小，關於我們的按鈕又換了顏色，部落格看起來像另一家公司。這不是錯覺，也不是你太挑，這是沒有設計系統的典型症狀。

好消息是：這件事不需要重做整個網站，只要把五樣東西定下來就好。

為什麼會變成這樣？

三個最常見的原因：

• 頁面是不同時間做的：首頁三年前做的、活動頁去年加的、部落格是套現成的。每次都當成獨立的事在處理。
• 不同人做的：換過廠商、換過負責的員工，每個人對「好看」的定義不同。
• 用 AI 做但沒定規範：這是新出現的原因。每頁分開請 AI 生，它每次都會給你一套新的合理解答，單看都對，湊起來就散了。

‼️ 共同點是：沒有一份「這個網站長什麼樣」的共同標準，每一頁都在重新發明一次。

要定下來的五樣東西

這就是所謂的「設計系統」，但不用想得太複雜。對大多數中小企業網站來說，把這五樣寫下來就夠了：

1. 字級：三到四種，不要更多

大標、小標、內文、附註。就這樣。

常見的錯誤是每一頁的標題都憑感覺調大小，結果整站出現十一種字級。定下來之後，任何地方要放標題，就是用那個尺寸，不要再想。

2. 間距：用一組固定的數值

區塊之間、段落之間、元素之間的距離，全部從同一組數值裡挑（例如 8、16、24、32、48、64），不要出現 13、27、41 這種隨手調出來的數字。

這一項的效果最被低估。間距一致的網站，即使配色平凡也會看起來很專業；間距亂的網站，配色再美也會覺得鬆散。

3. 顏色：主色一個、輔色一到兩個、其餘是灰階

常見的錯誤是每一區都用不同顏色來「豐富畫面」，結果整站沒有重點。

更好的做法是顏色有分工：主色只用在最重要的行動按鈕上，輔色用在次要的地方，其餘用灰階。這樣客人一眼就知道該點哪裡。配色的判斷依據可以看 網站配色與轉換率的配色工程實戰。

4. 元件：同一種東西只有一種長相

按鈕、卡片、表單欄位、標籤，每一種只能有一套樣式。

檢查方法很簡單：把網站上所有按鈕截圖排在一起看。如果出現三種圓角、四種顏色、兩種高度，那就是這一項出問題了。

5. 圖片風格：整站一致

全部真實照片、或全部插畫、或全部去背產品圖，挑一種。最糟的是混用：首頁用插畫、服務頁用實拍、案例頁用去背，三種風格打架。

照片的色調也要統一，不要有的偏藍有的偏黃。

一個把整站串起來的技巧

五樣東西定完之後，還有一招可以讓整站看起來明顯更「像一套」：找出主視覺裡最有記憶點的那個造型，在下面每一區重複使用它。

例如首頁最上面那張大圖如果有一條斜切線，那就讓下面的卡片底緣也做同方向的斜切、區塊背景也帶一條斜切色帶。這種重複會讓整頁被讀成「同一套設計」，而不是拼裝品。

‼️ 注意這跟「每一段排法都一樣」不同。排版結構要有變化（不然很無聊），造型語彙要一致（不然很散）。這是很多人搞混的地方，他們把兩者都做成一樣，結果得到一個整齊但無聊的網站。

不用重做，可以分段修

看到這裡如果你在想「那不就要整個重做」，不用。實務上的順序是：

1. 先寫下規範：五樣東西各自的值，寫在一份文件裡。半天就能做完。
2. 從流量最高的頁面開始套：先修最多人看的那三頁，效益最大。
3. 之後新增的頁面一律照規範做：這樣至少不會繼續惡化。
4. 舊頁面慢慢補：有空再處理，不急。

如果你是用 AI 在做網站，這份規範還有一個額外好處：每次請它做新頁面時，把規範一起貼給它，它就不會每頁都重新發明一套。這是解決「AI 做出來每頁都不一樣」最有效的一招。

怎麼檢查你的網站有沒有這個問題

三個一分鐘就能做的自我檢查：

• 按鈕測試：把全站按鈕截圖排在一起，超過一種樣式就有問題。
• 手機測試：用手機從首頁一路滑到最底，看有沒有哪一段忽然「換了一家公司」。順便檢查有沒有文字被切掉，做法看 進階響應式設計實戰。
• 截圖並排測試：把三個不同頁面的截圖縮小放在一起看，一眼就知道是不是同一個網站。

結論

「每一頁都不一樣」不是美感問題，是沒有共同標準的問題。而標準不需要很複雜：字級、間距、顏色、元件、圖片風格，五樣定下來就解決八成。

定完之後你會發現一個附加好處：以後做新頁面變快很多，因為不用再每次重新決定。

不同產業做出來的樣子差很多，我們的形象網站案例裡有幾個可以對照：東訊、健康生技、風澤中醫、潤澤明亮設計事務所，從企業官網到診所與設計工作室都有，先看調性比先看報價實際。

如果你的網站正好有這個症狀，想找人幫你把規範定出來、再分階段套上去，這正是我們 網頁設計與改版在做的事。跟我們聊聊你的網站。