順霏供應鏈管理顧問有限公司的業務橫跨跨境物流、越南集運與供應鏈管理顧問。這個案子的內容頁共有 13 頁，但我們只做了 17 種區段版型。
本文說明這是怎麼組出來的，以及為什麼這件事對長期的維護成本有決定性的影響。
本網站已正式上線：順霏供應鏈管理顧問有限公司。作品大綱與技術規格見作品頁。
先講結論：13 頁，17 種版型，116 個區段
多數網站的內容頁是這樣做的——一頁一個版型。
要新增一頁隱私權政策，工程師做一個隱私權政策的版型；要新增退換貨辦法，再做一個退換貨辦法的版型。頁面越多，版型越多，日後要調整樣式時要改的地方也越多。
模組化網站設計的做法不同：把頁面拆成可重複使用的區段，用組合的方式蓋出頁面。
| 一頁一版型 | 模組化區段 | |
|---|---|---|
| 13 個內容頁需要 | 約 13 種版型 | 17 種版型（可重複用） |
| 新增第 14 頁 | 要新做一個版型 | 多數情況用既有的組 |
| 調整標題樣式 | 改 13 個地方 | 改 1 個地方 |
| 誰能新增頁面 | 工程師 | 業主自己 |
這 17 種版型在本案中共產生了 116 個區段實例——平均每一種被用了將近 7 次。
什麼是「區段版型」
把網頁想成一疊積木。每一塊積木負責一種內容呈現：
- 頁面開頭的標題與導言
- 條列式的重點
- 左圖右文的說明區
- 資料表格
- 條文段落（標號＋內文）
- 常見問答的收合區
- 頁尾的行動呼籲
每一塊都可以獨立設定內容，也可以調整順序。 一個頁面就是由這些積木依序堆出來的。
關鍵在於「同一塊積木可以用在很多頁」
「條文段落」這塊積木，在隱私權政策頁用、在服務條款頁用、在退換貨辦法頁也用。三個頁面共用同一份程式與樣式。
這代表日後如果要調整條文的字級或間距，改一次，三個頁面同時生效。
實際怎麼組：三個例子
例一：隱私權政策頁
由五種既有區段組合而成，零新增版型——開頭區、章節標題、條文段落、聯絡資訊、頁尾行動區。
例二：退換貨與賠償辦法頁
同樣使用既有區段，其中「條文段落」這一塊重複使用多次，每一章條文各佔一塊。
這是模組化最直接的效益：一份法律文件有幾章，就放幾塊條文區段，不需要為它訂做版型。
例三：六個跨境服務子頁
六個服務項目的說明頁使用同一組配方——相同的區段、相同的順序，只有內容不同。
好處是這六頁的閱讀節奏一致，使用者看完第一頁之後，第二頁的資訊在哪裡他已經知道。
對業主的實際意義：新增頁面不需要工程師
這是模組化網站設計最務實的價值。
業主要新增一頁法律文件、一個服務說明、一則活動辦法，在後台挑選區段、填入文字、調整順序即可。
本案的後台可調整範圍
全站共有 47 個後台可調整的頁面區塊。業主可以自行處理的包含：
- 各內容頁的區段內容與順序
- 首頁的服務卡片與重點區塊
- 常見問答的分類與題目
- 側欄元件的顯示內容
但不是全部都開放
這一點值得說明。我們沒有把每一個像素都做成可調整。
原因是：全開放的後台看似彈性，實際上有三個代價——介面變複雜難以上手、容易被誤動而破壞版面結構、以及開發成本明顯增加。
合理的分界是：內容可改，結構不可改。
判斷哪些內容該做成可自行管理，見哪些內容需要做成後台可自行管理。
模組化能成立的前提：零核心改動
模組化的價值在於「日後好維護」。但如果客製化的方式本身就會製造維護問題，那前面的努力都會被抵銷。
所以本案採取了一條紀律：系統核心與所有功能模組的原始碼，一行未改。
唯一的例外是一行安全性修補，且經業主同意。
怎麼做到
整個客製化全部發生在外觀層：
- 66 支外觀版型檔
- 3,244 行品牌樣式層
- 樣式一律針對功能元件既有的元素撰寫；真的需要新元素時，才在外觀層加最少量的容器
為什麼這件事重要
| 情境 | 核心被改過 | 零核心改動 |
|---|---|---|
| 功能元件要升級 | 客製化可能被蓋掉 | 直接升級 |
| 想退回原狀 | 要逐一比對還原 | 換佈景即可 |
| 交接下一手 | 分不清哪些被改過 | 一目了然 |
| 發現安全漏洞 | 不敢更新 | 正常更新 |
最後一項是實務上最嚴重的。 核心被大幅改過的網站，往往因為「一更新就會壞」而長期停留在舊版本——而舊版本的已知漏洞是公開的。
購物流程也是同樣的原則
本案的購物車兩個步驟、訂單查詢兩種畫面、三顆側欄元件全部換上新設計，但功能元件送出的每一個位元組都沒有變。
為什麼不能動
購物元件原本的程式是靠欄位位置取值的——第幾列、第幾格。表格結構只要動一格，金額就會算錯。
作法與驗證
表格的欄列一格不動，外觀完全用樣式重塑，只在最外層加三處容器。
每一支版型改完，都把改造前後的輸出逐位元組比對——一個字元一個字元核對。
實測結果：訂單明細表、費用明細表、結帳表單、內嵌程式共四段、6,018 位元組完全相同。
技術細節見作品頁的技術規格說明。
模組化的另一半：設計要先一致
這是很多人忽略的前提。
如果每一頁的設計語言不同，區段就無法共用。 積木要能互相搭配，前提是它們用同一套規格。
本案共產出 31 份頁面設計稿，逐檔核對的結果：
- 三款字型堆疊完全相同：31／31
- 六個核心色票數值完全相同：31／31
- 具備窄螢幕的獨立處理：31／31
正因為設計語彙統一，區段才能自由組合而不會看起來拼湊。
設計系統的完整拆解，見網站設計的一致性怎麼達成？31 份設計稿共用一套設計系統的做法。
版型會過時，內容是資產
模組化還有一個長期的好處：改版時內容可以延續。
因為內容存在資料庫、版型存在檔案中，兩者是分離的。換一套新的區段設計，既有的 116 個區段實例照樣套用新樣式——不需要重打任何一個字。
這個原理見版型與內容的分離：為什麼改版不用重打內容。
交接文件也是交付物
模組化的目的是好維護，而好維護的前提是下一個人看得懂。
本案的交付包含：
- 外觀層交接文件 1,512 行
- 自研元件說明文件 413 行
- 自研元件規格書 2,267 行，含 7 條架構決策紀錄
文件不只寫「這裡有什麼」，而是寫「為什麼這樣做」與「這裡踩過什麼坑」。
下一位工程師接手時，不需要重新推理一遍。
什麼情況適合模組化
適合
- 內容頁會持續增加——服務說明、法律文件、活動辦法
- 多個頁面的結構相似——例如多個服務子頁
- 業主希望自己能新增頁面
- 網站預計經營多年，會經歷改版
效益較低
- 頁面數量很少且不會增加
- 每一頁的版面都要完全不同——例如純視覺展示型網站
- 一次性的活動頁
判斷標準很單純：這個網站的內容頁，一年會不會增加？ 會的話，模組化的投入很快就會回本。
發包時可以問的四個問題
- 內容頁是用共用的區段組出來的，還是一頁一個版型？
- 日後我要自己新增一頁，做得到嗎？
- 系統核心與功能元件有沒有被改過？
- 會提供交接文件嗎？包含什麼？
第三題最能看出對方的工程紀律。 願意具體回答「哪些改了、為什麼改」的廠商，通常在這方面是有把關的。
本案數字彙整
| 項目 | 數量 |
|---|---|
| 內容頁 | 13 個 |
| 區段版型 | 17 種 |
| 區段實例 | 116 個 |
| 後台可調整區塊 | 47 個 |
| 頁面設計稿 | 31 份 |
| 外觀版型檔 | 66 支 |
| 品牌樣式 | 3,244 行 |
| 交接文件 | 1,512 行 |
| 購物流程輸出比對 | 6,018 位元組相同 |
| 系統核心與元件改動 | 1 行（安全性修補） |
延伸閱讀
- 順霏供應鏈管理顧問有限公司官方網站——作品大綱與技術規格
- 網站設計的一致性怎麼達成？31 份設計稿共用一套設計系統的做法