上篇：各國數位政府的色彩規範：加拿大紅、阿聯酋金，台灣的品牌色是什麼？
上個章節在討論設計系統的「色彩」，本篇開始研究「版面配置、網格、間距」。
為什麼版面配置很重要？
如果說數位服務是房子，那麼版面配置（Layout）就是房子的隔間，而間距（Spacing）就是家具和物品間的走道。
- 好的版面配置（Layout）：讓使用者一眼找到「要去哪裡申辦服務？」或者「下一步是什麼？」
- 好的網格系統（Grid）：讓使用者產生秩序感，傳達政府「有條理的形象」，幫助開發團隊快速規劃頁面。
- 好的間距（Spacing）：讓使用者有足夠的留白休息，讓讀者可以快速掃瞄（Scannability），閱讀過程變得輕鬆、可持續。
本篇我們將深入研究英國、加拿大、阿聯酋、星加坡、義大利，了解他們如何建立設計系統中的「版面配置、網格、間距」。
研究筆記：接近率（Proximity Law）
相關資訊要靠得夠近；不相關的資訊要離得夠遠。
各國數位政府版面配置
英國
版面配置（Layout）
- 小螢幕優先：強調以「小螢幕、一欄（Single-Column）」作為設計起點
- 響應式設計：大螢幕（>640px）、小螢幕（<640px）
- 最大寬度：1100px。防止在大螢幕上文字行太長
網格系統（Grid）
- 欄位制（Grid Column）：Full（100%）、one-half（1/2）、one-third（1/3）、two-third（2/3）、one-quarter（1/4）
間距（Spacing）
- 基數：5px
- 響應式間距：
- 電腦：0、5px、10px、15px、20px、25px、30px、40px、50px、60px
- 手機：0、5px、10px、15px、15px、15px、20px、25px、30px、40px
- 靜態間距：
- 所有螢幕：0、5px、10px、15px、20px、25px、30px、40px、50px、60px
英國的版面配置特色
- 十進位美學
- 跟大多數選擇 4px 或 8px 作為基數不同，英國獨樹一格的選擇了 5px 作為基數。
- 響應式體驗
- 間距會隨著螢幕變小「自動縮小」。
- 舉例：同樣是 Unit 6（第六個間距單位），大螢幕是 25px，小螢幕是 15px
- 好處：電腦需要大留白產生呼吸感，但手機上空間有限，縮小間距可以讓滑動次數減少，看到更多資訊。
- 留白更有感
- 4px 網格系統中，12px 到 16px 差別不大；5px 雖然只多了一點點，但放大來看級距跳躍也差很多。
- 在 30px 後，一次增加 10 px，強烈拉開層次感，使用者更能分出資訊的群組。
加拿大
版面配置（Layout）
- 小螢幕優先：同樣遵循 Mobile-first 規範
- 響應式設計：xs（>480px）、sm（>640px）、md（>768px）、lg（>1024px）、xl（>1280px）
- 最大寬度：1140px（71.25rem）
網格系統（Grid）
- 不同螢幕下的欄位數量：
- 大螢幕（lg, xl）：column-desktop
- 中螢幕（md）：column-tablet
- 小螢幕（xs, sm）：column
- 開發者可以自行設定：
- columns-desktop=”3″ 就是在大螢幕時分成三欄
間距（Spacing）
- 基數：4px
- 間距：
- spacing-0（0px）、spacing-25（2px）、spacing-50（4px）、……、spacing-1250（100px）
加拿大的版面配置特色
- 彈性大
- 不論是版面配置、網格系統與間距，都比英國有更多選擇
- 多數地方讓開發者自行定義
- 無障礙
- 明確標注間距要滿足 AAA 級標靶尺寸（Tap Target）
延伸思考：4px 還是 5px？
英國選擇了 5px 作為設計基數；加拿大則選擇了世界多數科技公司的 4px/8px。
台灣如果要委外給民間公司，跟隨 4px/8px 的標準可以減少溝通成本。
但因為 5px 是一個「非主流」的單位，會不會因此讓外包公司更頻繁的參考「政府設計規範」呢？
新加坡
版面配置（Layout）
- 響應式設計：xs（<576px）、sm（>576px）、md（>768px）、lg（>992px）、xl（>1200px）、xxl（>1400px）
- 最大寬度：xs（100%）、sm（540px）、md（720px）、lg（960px）、xl（1140px）、xxl（1320px）
網格系統（Grid）
- 完全參考 Bootstrap 的網格系統
- 開發團隊可自行定義每個 Column 佔 12 中的幾個欄位，例如 Col-6 就佔 6/12。
間距（Spacing）
- 基數：8px
- 間距：8px、16px、24px、32px、40px、48px、56px、64px
新加坡的版面配置特色
- Bootstrap 標準
- 新加坡直接使用 Bootstrap 標準，是建立設計系統時成本最低、效率最高的做法。
- 六階斷點（Breakpoint）
- 英國只有 2 階，加拿大有 5 階，新加坡更是給到了 6 階斷點。
延伸思考：幾個斷點？
英國只規範「手機」及「非手機」兩種斷點。
加拿大分出 xs 到 xl 的 5 個斷點；新加坡有 xs 到 xxl 6 種斷點。
台灣的手機普及率高，平板的佔比率也不低。
需要像新加坡將「平板」細分為「直向」與「橫向」呢？
還是減少斷點以兼顧維護成本呢？
UAE
版面配置（Layout）
- 小螢幕優先：同樣遵循 Mobile-first 規範
- 響應式設計：sm（>640px）、md（>768px）、lg（>1024px）、xl（>1280px）、2xl（>1536）
- 最大寬度：sm（100%）、md（740px）、lg（980px）、xl（1240px）、2xl（1480）
- 側邊間距：sm（10px）、md（14px）、lg（22px）、xl（20px）、2xl（28px）
- 槽寬：24px
網格系統（Grid）
- Tailwind 百分比
- 推行 1/6、1/4、1/3 佈局
- 同時支援 CSS Grid （適合複雜排版）和 CSS Flexbox（適合動態排版）
間距（Spacing）
- 基數：混合增量
- 16px 以下：基數為 2px
- 16px – 48px：基數為 4px
- 間距：
- 8px、16px、24px、32px、40px、48px、56px、64px
UAE 的排版配置特色
- 使用 Tailwind 標準
- 直接採用 Tailwind 規範，減少成本與加速推廣。
- 推崇「6 欄」
- 阿聯酋（UAE）非常有勇氣的挑戰傳統的「12 欄」，認為現代網頁不需要分那麼細（1/12），設計師更好做決策。
- 明確的側邊保護區
- 在排版配置（Layout）中明確提及「側邊保護區（Safe Margins），保證內容不會貼著螢幕邊緣。
- 容器的區塊（Container）
- 建議每個 Section（如 Header、Hero、Content）獨立使用 Containter。
延伸思考：自建框架 vs. 民間流行框架
英國（GOV.UK）是完全自建框架；新加坡對齊 Bootstrap；阿聯酋對齊 Tailwind。
自建框架：讓外包廠商更需要仔細閱讀規範，但每次都要重新學習，成本更高。
民間流行框架：讓外包廠商套用現有技術庫，開發更快。
台灣應該採用哪種模式更適合呢？
義大利
版面配置（Layout）
- 小螢幕優先：同樣遵循 Mobile-first 規範
- 響應式設計：xs（<576px）、sm（>576px）、m（>768px）、l（>992px）、xl（>1200px）、xxl（>1400）
- 最大寬度：1320px
- 側邊間距：統一固定為 12px
- 槽寬：隨著螢幕寬度增加，槽寬從 12px → 20px → 24px → 28px
網格系統（Grid）
- 手機版：強制使用 6 欄位（可拆分為 1, 2, 3 組合）
- 平板/電腦板：使用 12 欄位網格（可拆分為 4, 6, 12 組合）
間距（Spacing）
- 基數：4px
- 間距：4px、8px、16px、24px、32px、40px、48px
義大利的排版配置特色
- 使用 Bootstrap 標準
- 動態槽寬（Gutter）
- 不同於新加坡寫死 24px 的槽寬，義大利允許槽寬擴張到 28 px，大螢幕時會留白稍多一些。
- 手機 6 欄
- 大多國家手機端只有「單欄（Single Column）」，義大利卻定義了「6 欄」。
- 可以在手機上進行並排佈局（像是 2 欄卡片)
延伸思考：手機的細膩度
多數國家在手機端只給「一欄（Single-Column）」，但義大利和阿聯酋都有「6 欄」。
單欄的特色：一次看一個資訊塊，不會被其他內容打擾。但底部資訊較難被看見，畫面缺乏層次感。
六欄的特色：縮短頁面長度、網頁看起來更像 App；但可能有斷行問題，若間距控制不當，可能會讓使用者點錯。
台灣
版面配置（Layout）
- 側邊欄（Sidebar）：分為「沒有側邊欄」與「有側邊欄」兩種版面類型。
- 響應式設計：xs（<576px）、sm（>576px）、md（>768px）、lg（>992px）、xl（>1200px）、xxl（>1400px）
- 最大寬度：xs（100%）、sm（540px）、md（720px）、lg（960px）、xl（1140px）、xxl（1320px）
網格系統（Grid）
- 完全參考 Bootstrap 的 Flex 網格
- 開發團隊可自行定義每個 Column 佔 12 中的幾個欄位，例如 Col-6 就佔 6/12。
台灣版面配置的特色
- 使用 Bootstrap 標準
- 選擇減少斷點
- 雖然有 6 種斷點，但台灣是比較的這幾國中，唯一明確建議「只用三種斷點」（手機、平板、電腦）
- 這種做法可以降低成本，避免開發者在邊緣斷點產生歧義
- 定義側邊欄
- 定義 Sidebar 在不同斷點下的比例（例如平板佔 4 欄，電腦佔 3 欄）
間距不見了？
查看台灣的版面配置（Layout）文件，可以注意到台灣並沒有定義間距（Spacing）
- 英國：有明確的 Unit 1-9（5px 級距）。
- 義大利：有明確的 XXS-XXL（8px 級距）。
- 加拿大：有明確的 Spacing 25-1250（4px 級距）。
- 台灣：直接沿用 Bootstrap 的預設值（1rem = 16px）。
這可能導致開發團隊在實作時「隨意」設定數值（例如有人用 10px，有人用 15px），因為規範內沒有一組強制的、建議的數值清單。
研究筆記總結
- 斷點策略
- 極簡派（2 – 3 階）：只抓手機、平板、電腦的大斷點（英國、台灣）
- 精細派（5 – 6 階）：對齊主流框架（Bootstrap/Tailwind），在折疊手機與寬螢幕上表現更佳
- 排版佈局
- 比例制：強調 1/2、1/3、1/4 的分配（左邊 4 欄，右邊 8 欄）
- 容器制：使用 CSS Grid，定義「最小寬度」與「自動換行規則」（每個卡片最少 300px，中間間隔 20px）
- 間距基數
- 5px（十進位制）：英國
- 4px（大多科技公司）：其他國家
資料來源：