公版網站不一定等於「套版感很重」。
在版型、功能與程式修改都有限制的情況下，真正能拉開差異的，往往不是把版面改得多複雜，而是圖片怎麼做、內容怎麼排、視覺框架有沒有先建立。
這篇文章最早整理於 2019 年。
當時許多平價電商平台與簡易架站工具快速普及，品牌可以很快把網站做上線
但也很容易遇到另一個問題：網站有了，卻總覺得看起來少了一點自己的樣子。
公版網站的限制，未必都是缺點
拜簡易架站與平價電商平台工具所賜，這幾年參與網路購物的店家越來越多。
真的開始動手製作時，很多人也會發現：網站雖然可以很快完成，但版面能變化的地方其實不多。
我們手上的客戶也常常碰到這樣的困擾。
網站很快架好了，卻總覺得少了點什麼；或者礙於公版網站的限制，很多原本想做的視覺變化很難直接實現。
當時的公版網站大多以圖片與文字上稿為主，如果想進一步改變版型或細節，往往還需要 CSS 或其他前端技術。
但換個角度看：
如果我們知道能改的東西不多，那就把能控制的東西做好。
例如圖片本身，就可以不只是「放一張商品照」，而是直接把它當成一個完整的視覺模組來設計。
商品列表：先把圖片當成一個完整模組
以商品列表來說，可以先觀察平台既有版型的圖片比例、文字位置與按鈕區域，再反過來設計圖片內容。
例如桌機版與手機版各自準備一個版本，用一張情境照搭配去背商品圖、商品名稱與簡短資訊，先在圖片中完成主要的視覺層次，再把整張圖片輸出後上傳。
即使網站本身能調整的地方有限，仍然可以透過圖片設計，讓商品列表看起來更有節奏。
- 先確認平台既有的圖片比例與顯示方式。
- 桌機與手機如果裁切邏輯不同，可以分別準備不同版本。
- 把情境照、商品圖與必要資訊先整理成同一個視覺模組。
- 如果需要額外製作多種尺寸，也要把這些時間納入製作成本。
為什麼平面設計搬到網站上，常常會覺得不對勁？
另一個很常遇到的問題是：
為什麼我的海報設計放在實體店面看起來沒問題，延伸到網站上卻總覺得哪裡怪怪的？
以我自己的工作經驗來看，很多時候不是單張設計不好，而是少了一個共同的「框架」。
平面海報可以獨立存在，但網站是一連串內容同時出現在同一個頁面裡。
如果每張 Banner、每個商品、每一段內容都各自有很強烈的風格，放在一起之後就很容易互相打架，使用者也不知道該從哪裡開始閱讀。
網站需要的不是每一張圖都很精彩，而是這些內容放在一起之後，仍然有一套清楚的閱讀邏輯。
網站主題 Banner：先建立框架，再談變化
以下圖左側的案例來說，如果把每個品項拆開來看，各自的單張設計其實都沒有太大問題。
但當這些風格強烈的圖片同時存在於同一個網站頁面時，就容易互相搶畫面。
這時候，我們可以先建立一套固定框架，讓不同主題的內容都收納在相同的視覺規則裡。
例如人物照片固定放在某一側，商品圖放在另一側；背景色則從商品或主題照片中擷取，再透過固定的文字位置、圖片比例與留白建立一致性。
人物照片也不一定需要完整呈現。
- 如果重點是商品，人物可以只保留局部特寫。
- 人物負責提供情境與氛圍，不一定要成為主角。
- 商品位置、文字區域與版面留白盡量維持一致。
- 每個主題可以換顏色、照片與內容，但不要每次都重新發明一套版面。
套上框架之後，並不代表所有東西都要長得一模一樣。
反而是在規則確定之後，才更容易知道哪些地方可以變、哪些地方應該保持一致。
限制裡也可以建立自己的視覺規則
公版、平價網站都有它方便與不方便的地方。
它可能沒有辦法讓你任意修改每一個版面，也不一定能完全符合所有設計想像。
但只要運用得宜，還是可以在限制裡找到合適的解法。
真正需要先整理的，不一定是「我要改多少 CSS」，而是：
- 圖片比例要不要固定？
- 商品與情境照怎麼搭配？
- 文字應該出現在什麼位置？
- 不同主題之間要保留哪些共同元素？
- 哪些地方可以自由變化，哪些地方應該維持一致？
當這些規則建立起來之後，即使使用的是公版網站，也不一定會有強烈的「套版感」。
2026 再看
工具讓版面變得更自由，但自由不等於更好
2019 年寫這篇文章時，我們需要利用圖片、CSS 與既有版型的限制，想辦法做出更多視覺變化。
到了 2026 年，情況已經很不一樣。
現在可以透過 WordPress、No-code / Low-code 工具、前端元件，甚至 AI 協助修改 HTML、CSS 與版面結構。
以前很多「公版不能改」的地方，現在其實都有更多處理方式。
但工具變得自由之後，我反而更確定：
工具讓版面變得更自由，但自由不等於更好。真正讓網站看起來完整的，仍然是有沒有一套清楚的視覺規則。
AI 可以協助我們改版面、產生圖片、修改程式碼，甚至快速做出不同版本。
但如果沒有先整理品牌的圖片風格、字級層次、留白、內容密度與版面節奏，能變的東西越多，反而越容易失去一致性。
換句話說，2019 年這篇文章當時談的是：
如何在限制裡找到變化。
到了 2026 年，我會再補上另一半：
當限制越來越少，更需要知道哪些東西其實不應該亂變。
這也是為什麼現在談網站視覺，我更在意的不只是單張 Banner 漂不漂亮，而是一整個網站是否建立了可持續使用的視覺系統。
公版不是問題，沒有規則才容易看起來像套版
如果預算有限、還在驗證市場，公版網站依然可以是一個合理的起點。
可以先閱讀「公版網站真的不好嗎？我不這麼認為」，了解為什麼我認為網站不一定需要一開始就投入大量客製成本。
如果你還在更前期的規劃階段，也可以從「網頁設計前的自我評鑑」開始，先把網站目標、內容、使用者、功能與資源整理清楚。
案例說明
本文中的圖片來自當時的 Bacarry 旅行後背包網站設計案例。
原購物網站目前已下架，因此不再提供失效的官網連結。
仍可於 Behance 查看當時的完整設計紀錄：Bacarry 設計案例
想看看更多不同網站限制與需求最後如何被轉換成實際設計，也可以前往超能力設計戰隊查看網站設計案例。
