8pt grid間距是什麼？先分清楚 8pt、8px、8dp
8pt grid間距是一套用 8 的倍數整理 UI 間距的規範，常見值包含 8、16、24、32、40、48、64。它的重點不是把所有東西都設成 8，而是讓元件內距、元件間距與區塊距離有可重複的判斷依據。
8pt grid 的基本意思
8pt grid 是 spacing system 的一種做法，設計師會用 8 作為主要基準，延伸出 8、16、24、32 這類距離。實務上，它常用來決定按鈕左右 padding、卡片內距、表單欄位間距、區塊上下 padding，而不是用來取代所有版面規則。
如果每個畫面都用 13、19、27 這類零散數值，設計稿看起來未必立刻出錯，但後續做元件庫、RWD、前端維護時，成本會慢慢浮出來。我的判斷是，8pt grid 最有價值的地方，是讓團隊少花時間爭論「這裡到底要差幾 px」。
Web 常說 8px，iOS 常說 pt，Android 常說 dp
同樣在討論 8px 間距系統，不同平台常用不同單位。Web 設計稿多半以 px 表示，iOS 介面規範常看到 pt，Android 則常用 dp。概念上都是在處理視覺距離，但單位語境不同，寫規範時要先講清楚。
| 平台語境 | 常見單位 | 實務理解 | 規範寫法建議 |
|---|---|---|---|
| Web | px | 設計稿、CSS、前端實作最常使用 | spacing-8 = 8px |
| iOS | pt | point 是介面設計常用單位，會對應到不同螢幕倍率 | spacing-8 = 8pt |
| Android | dp | density-independent pixel，用來降低裝置密度差異 | spacing-8 = 8dp |
寫設計規範時應該怎麼命名才不混亂
如果產品主要是網站，可以用 px 作為文件語言，例如 spacing-16 = 16px。如果同一套設計系統要支援 iOS、Android 和 Web，建議 token 名稱不要直接綁死單位，可寫成 space-2、space-3，再在各平台對應到 8px、16px 或 8dp、16dp。
與其在文件中混寫「8pt、8px、8dp」，更穩定的做法是先定義 spacing scale，再列出各平台的轉譯方式。這會讓設計系統文件、Figma Variables 和前端 token 比較不容易各說各話。
為什麼 UI 間距常用 8 的倍數？
UI 間距常用 8 的倍數，是因為 8 能被 2 和 4 整除，容易支援不同螢幕倍率，也能把常見間距收斂成少數可維護的值。實作上，12、16、24、32 會比 13、21、37 更容易形成穩定節奏。
8 可以被 2、4 整除，適合多倍率螢幕
現代裝置有 Retina、HiDPI 和不同 pixel grid，介面數值如果經常落在難以整除的位置，視覺對齊和切圖溝通會變得麻煩。8 的倍數不是神奇公式，但它能讓 4px、8px、16px、24px 這些值在設計與工程端更好轉換。
減少零散間距，讓畫面節奏穩定
零散間距最常造成的問題，不是單一畫面難看，而是整個產品越做越不一致。第一張卡片 padding 20px，第二張 22px，表單欄位間距 14px，彈窗內距 26px，使用者未必說得出問題，但畫面會顯得鬆散。
| 間距值 | 常見用途 | 設計判斷 |
|---|---|---|
| 12px | 小型元件內部、label 與輸入框附近 | 適合介於 8px 與 16px 之間的細節 |
| 16px | 按鈕左右 padding、卡片內距、小區塊間距 | 最常用的基本節奏 |
| 24px | 卡片內分組、表單群組、列表區隔 | 適合讓內容有明顯分段 |
| 32px | 區塊之間、彈窗內距、頁面主要間距 | 用來建立較大的視覺呼吸 |
讓設計與前端溝通更快
當設計師說「這裡用 space-3」，前端可以直接知道它對應 24px，而不是每次都重新量測 Figma。這種共識會影響元件庫品質，也會影響後續修改速度。設計規範越成熟，越需要這種可以落地的間距語言。
8pt spacing scale 怎麼訂？可直接套用的間距表
8pt spacing scale 可以從 4、8、12、16、24、32、40、48、64、80、96 建立。4 和 12 用於微調，16 到 48 用於大多數元件與區塊，64 以上適合頁面層級的 section padding。
基礎 spacing token 建議
| Token | 數值 | 角色 | 常見用途 |
|---|---|---|---|
| space-0 | 0px | 無間距 | 重設 gap、貼齊容器 |
| space-1 | 4px | micro spacing | icon 與文字、helper text 附近 |
| space-2 | 8px | 基本小間距 | 小元件 gap、列表內部 |
| space-3 | 12px | 細節補位 | 緊湊表單、密集 UI |
| space-4 | 16px | 主要元件節奏 | 按鈕、卡片、小區塊 |
| space-6 | 24px | 群組距離 | 表單群組、卡片內容分段 |
| space-8 | 32px | 區塊距離 | 彈窗、section 內部 |
| space-12 | 48px | 大型區隔 | 頁面主區塊 |
| space-16 | 64px | 頁面層級 | 桌機 section padding |
元件內距、元件間距、區塊間距建議表
| 層級 | 建議值 | 適用情境 | 使用提醒 |
|---|---|---|---|
| 元件內部 | 4、8、12、16px | 按鈕、輸入框、標籤、icon gap | 小尺寸元件不要硬塞 24px |
| 元件之間 | 8、12、16、24px | 按鈕群組、表單欄位、列表項目 | 用 gap 比 margin 更好維護 |
| 區塊之間 | 24、32、40、48px | 卡片群組、內容段落、表單區塊 | 視資訊密度調整 |
| 頁面邊界 | 16、24、32、64、80px | mobile container、desktop section | 要和 breakpoint 一起定義 |
什麼情況可以用 4px 或 12px
4px 適合 icon 與文字之間、helper text 與 input 之間、badge 內部這類很小的修正。12px 適合密集介面，或 8px 太近、16px 太開的中間狀態。好的 8px 間距系統通常會保留 4px 與 12px，因為真實產品不會永遠剛好落在 8 的倍數上。
4pt、8pt、10pt 怎麼選？不要把 8pt grid 當宗教
4pt 適合元件內部微調，8pt 適合主要 layout 節奏，10pt 或 10px 不是不能用，但一旦進入多人協作，就要解釋它為什麼存在。間距規範要幫助決策，不該讓設計師為了湊數字犧牲視覺判斷。
4pt 適合 icon 與文字、label 與 input 的微調
icon 和文字之間常用 4px 或 8px，取決於 icon 尺寸與字級。label 與 input 之間也常看到 4px 或 8px，因為它們屬於同一組資訊，不需要像兩個獨立區塊那樣拉開。
8pt 適合卡片、表單、區塊與頁面節奏
當間距開始影響 layout 節奏，例如卡片 padding、表單欄位間距、彈窗內距、section 上下距離，就應該優先回到 8 的倍數。這些距離會在多個畫面重複出現，越早標準化，後面越少補洞。
10pt / 10px 不是不能用，但協作成本較高
| 選項 | 適合情境 | 風險 | 建議 |
|---|---|---|---|
| 4px | 微調、內部細節、視覺補償 | 大量使用會讓系統變碎 | 限制在小元件內 |
| 8px | 主要 spacing scale | 硬套會讓細節太鬆或太緊 | 作為預設基準 |
| 10px | 特定品牌風格、既有系統相容 | token 和元件規範較難統一 | 需要文件註明使用原因 |
如果團隊已經有大量 10px 歷史元件，直接全改成 8px 未必划算。比較務實的作法是先把新元件收斂到 8px 間距系統，再針對高頻元件逐步整理。
常見 UI 元件的 8pt grid 間距範例
常見 UI 元件可以用 8pt grid 建立一組可複製的數值：按鈕多用 8 到 16px padding，卡片多用 16 到 32px padding，表單欄位多用 8 到 24px gap，彈窗內距多落在 24 到 32px。
按鈕與 icon 間距
| 元件 | 建議間距 | 使用方式 |
|---|---|---|
| 小型按鈕 | 上下 8px，左右 12px 或 16px | 適合工具列、次要操作 |
| 一般按鈕 | 上下 12px，左右 16px 或 24px | 適合表單送出、主要操作 |
| icon 與文字 | 4px 或 8px | icon 小於 20px 時可先試 4px |
卡片 padding 與卡片之間 gap
卡片內距最常用 16px、24px、32px。資訊密度高的管理後台可用 16px，內容型卡片可用 24px，彈窗或強調型卡片可用 32px。卡片之間 gap 則常落在 16px、24px、32px。
表單 label、input、helper text 間距
表單要看資訊關係。label 與 input 屬於同一組，常用 4px 或 8px；input 與 helper text 可用 4px；兩個欄位之間常用 16px 或 24px。表單錯誤訊息如果離欄位太遠，使用者會需要重新判斷它對應哪個欄位。
列表、導覽列、彈窗的常用間距
| 元件 | 內距建議 | 項目間距建議 |
|---|---|---|
| 列表 | 8、12、16px | 8 或 16px |
| 導覽列 | 左右 16、24、32px | 16、24px |
| 彈窗 | 24、32px | 16、24px |
| 卡片群組 | 16、24、32px | 16、24、32px |
RWD 響應式設計中，8pt grid 間距要不要跟著變？
RWD 間距可以跟著 breakpoint 調整，但 spacing scale 不必整套重做。手機版通常縮小 page margin、section padding 和 card gap，元件內部 padding 則要維持可點擊、可閱讀，不應為了塞內容而無限制壓縮。
哪些間距可以縮小
最適合跟著縮小的是頁面層級間距，例如 section padding、container 左右邊界、卡片群組 gap。手機螢幕寬度有限，桌機 80px 的上下距離放到手機常會浪費首屏空間。
哪些間距不應該跟著亂縮
按鈕可點擊範圍、表單輸入區、重要文字附近的呼吸空間，不應只因為手機版就全部砍半。UI 間距不是只看畫面能不能塞下，也要看使用者手指操作與閱讀壓力。
手機、平板、桌機建議值
| Breakpoint | Page margin | Card gap | Section padding |
|---|---|---|---|
| 手機 | 16px | 12、16px | 32、40、48px |
| 平板 | 24、32px | 16、24px | 48、64px |
| 桌機 | 32、48px | 24、32px | 64、80、96px |
如果需要更完整的系統脈絡，可把這一段和 UI design system guide、design system guide 一起閱讀，spacing 才會和字級、色彩、元件狀態放在同一套規範裡。
如何在 Figma 設定 8pt grid 與 Auto Layout？
在 Figma 落地 8pt grid，核心做法是用 Auto Layout 控制 padding 與 gap，再用 Variables 或 token 管理 spacing scale。不要只靠手動拖曳對齊，否則畫面一多，間距很快就會漂移。
用 Auto Layout 管理元件內距與 gap
- 先建立基礎元件，例如 button、input、card。
- 替元件加上 Auto Layout，設定水平或垂直方向。
- 把 padding 設為 8、12、16、24 這類 spacing scale 數值。
- 用 gap 控制 icon 與文字、欄位與欄位、卡片內容分組。
- 檢查變體狀態，例如 default、hover、disabled，不要讓每個變體出現不同 spacing。
用 Variables 或 token 管理 spacing scale
Figma Variables 可以把 spacing scale 做成可選變數，例如 space-1 = 4、space-2 = 8、space-4 = 16。當設計師使用變數而不是手打數字，後續更新間距規範時，元件也比較容易一起調整。
如果團隊已經在建立 design token，可以把 spacing 與 color、radius、typography 放在同一份 token 文件。更完整的設計到工程流程，可延伸參考 design token Figma guide 和 Figma tutorial guide。
Layout Grid、Columns、Rows 可以和 spacing scale 並用
Figma 的 Layout Grid 可以用來看欄寬、gutter、container 對齊；Auto Layout 則用來控制元件內部與群組間距。兩者可以並用，但不要把 Layout Grid 當成 spacing system 的替代品。很多設計稿看起來有對到欄，元件內部 spacing 仍然可能一團亂。
前端怎麼實作 8pt 間距？gap、padding 與 design token
前端實作 8pt 間距時，建議用 design token 定義 spacing scale，用 CSS gap 管理元件之間的距離，用 padding 管理元件內部空間，margin 則保留給少數需要外部推開的情境。
優先用 gap 管理元件之間的距離
在 flex 或 grid 容器中，CSS gap 比逐一設定子元素 margin 更乾淨。它讓「這一組元素彼此距離 16px」成為容器規則，不會因為第一個或最後一個項目的 margin 造成額外邊界問題。
padding 管理元件內部空間，margin 謹慎使用
padding 適合按鈕、卡片、輸入框、彈窗這種元件內部空間。margin 適合元件與外部環境的距離，但如果每個元件都自帶 margin，放進不同版面時容易互相疊加。成熟的 component library setup 通常會讓容器決定間距，元件本身保持可組合。
spacing token 命名範例
token 命名可以用數值，也可以用階層。重點是設計稿、文件、CSS 和 Tailwind config 指向同一套值。若要把 spacing 納入元件庫，可搭配 component library setup 一起規劃。
CSS variables 範例
:root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; }.card { padding: var(—space-6); }
.card-list { display: grid; gap: var(—space-6); }
.button { padding: var(—space-3) var(—space-4); gap: var(—space-2); }
Tailwind spacing config 範例
module.exports = {
theme: {
extend: {
spacing: {
1: "4px",
2: "8px",
3: "12px",
4: "16px",
6: "24px",
8: "32px",
12: "48px",
16: "64px",
},
},
},
};8pt spacing 和 12 欄 / 24 欄 layout grid 怎麼搭配？
8pt spacing 管的是元件與區塊之間的距離，12 欄或 24 欄 layout grid 管的是版面寬度、欄位對齊和 container 結構。兩者可以搭配，但解決的是不同層級的問題。
8pt spacing 負責元件與區塊距離
spacing system 處理的是 padding、gap、margin 這類距離決策。例如卡片內部 24px、卡片之間 32px、表單欄位之間 16px。這些數值即使在單欄 mobile 版面中仍然存在。
12 欄 / 24 欄負責版面寬度與對齊
layout grid 處理的是版面結構，例如內容要跨 6 欄、側欄要佔 4 欄、container 最大寬度是多少。欄格系統能幫助多欄版面對齊，但它不會自動告訴你按鈕裡的 icon 跟文字要距離 4px 還是 8px。
gutter 是否也要用 8 的倍數
| 項目 | 負責問題 | 常見值 | 是否建議對齊 8 的倍數 |
|---|---|---|---|
| Spacing system | 元件與區塊距離 | 8、16、24、32px | 是，作為主要規則 |
| Columns | 內容寬度與對齊 | 12 欄、24 欄 | 不一定，取決於版面需求 |
| Gutter | 欄與欄之間距離 | 16、24、32px | 建議，但可依 container 調整 |
| Container | 頁面最大寬度 | 依產品與內容決定 | 不必硬湊 8 的倍數 |
導入 8pt grid 間距時最常見的錯誤
導入 8pt grid 最常見的錯誤，是把它當成所有視覺問題的答案。文字行高、icon 視覺對齊、圖片裁切、token 同步，都需要另外判斷；spacing system 只能管理距離，不能代替設計判斷。
文字行高不一定要硬湊 8 的倍數
行高要先看字級、語言、閱讀密度和段落長度。16px 字級搭配 24px line-height 很常見，但不是每個字級都必須硬湊到 8 的倍數。修正方式是先確保閱讀舒服，再讓常用文字樣式進入 typography token。
icon 視覺對齊不等於幾何置中
有些 icon 幾何上置中，視覺上仍然偏上或偏下。修正方式是允許少量 optical alignment，例如 icon 外框維持 20px，但內部圖形做視覺補償。這類調整要記在元件規範，不要讓每個設計師自行猜。
圖片比例與內容裁切不能只看 grid
圖片容器可以對齊 8pt grid，但人物臉部、產品主體、重要文字不能因為容器好看就被裁掉。修正方式是定義圖片比例、object-fit 策略和安全裁切範圍。這一點在內容型網站和電商介面尤其容易被低估。
設計稿、token、程式碼數值不一致
token drift 是設計系統常見問題：Figma 寫 24px，CSS 寫 20px，文件又寫 16px。修正方式是指定單一來源，例如以 token 檔案或 Figma Variables 為主，並在元件文件中標示對應值。想延伸到整體 UI/UX 規劃，可參考 UI UX design guide。
不要在這裡展開的內容
8pt grid間距的主題邊界要守住，否則很容易偏成其他網格教學。以下內容和 UI spacing 有關聯，但不適合在同一篇展開成主軸。
- CSS Grid 完整語法教學：這屬於前端版面技術，不是 8px 間距系統本身。
- 平面設計網格與 A4 編排：概念可參考，但和 UI 元件 spacing 決策不同。
- 攝影九宮格構圖：與介面間距規範無直接關係。
- Material Design 或 iOS 規範全文導讀：可作為平台參考，但不需要重寫成平台規範總論。
8pt grid 和 8px grid 一樣嗎？
概念接近，但單位語境不同。Web 設計常說 8px grid，iOS 常說 8pt，Android 常說 8dp。它們都在描述以 8 為基準的 UI 間距規則，但寫設計規範時要標明平台單位，避免設計、iOS、Android 和前端誤解。
UI 設計一定要全部用 8 的倍數嗎？
不用。8 的倍數適合主要 layout 節奏，例如卡片、區塊、表單群組和頁面 padding。元件內部細節可以使用 4px 或 12px。真正重要的是讓間距決策可重複、可溝通，而不是追求每個數字都漂亮。
4px 可以用在 8pt grid 裡嗎？
可以。4px 是常見 micro spacing，適合 icon 與文字、helper text 與 input、badge 內部 padding 這類細節。建議把 4px 放進 spacing scale，但限制使用範圍，避免整套系統變得太碎。
為什麼不直接用 10px 當基準？
10px 很好算，也不是錯誤。不過 8px 更容易和 4px、16px、24px、32px 形成設計節奏，也比較符合許多 UI 元件庫與設計系統的慣用 scale。若既有產品已使用 10px，可以保留，但要在 token 文件中說明規則。
文字行高一定要是 8 的倍數嗎？
不一定。文字行高要優先考慮可讀性、字級、語言和內容密度。許多情境會使用 20px、22px、24px line-height，只要 typography token 穩定，並且和元件間距協調即可。
Figma Layout Grid 要設定成 8px 嗎？
可以設定 8px rows 作為輔助檢查，但更重要的是用 Auto Layout 和 Variables 管理 padding、gap 與 spacing token。Layout Grid 適合檢查欄位與對齊，不應取代元件內距規範。
CSS Grid 的 gap 和 8pt grid 有什麼關係？
CSS Grid 的 gap 是前端實作間距的屬性，8pt grid 是設計規範。兩者的關係是：設計系統先定義 spacing token，例如 16px、24px、32px，前端再把這些值套到 CSS gap 中。
手機版和桌機版要用同一套 spacing scale 嗎？
建議使用同一套 spacing scale，但在不同 breakpoint 套用不同層級。手機版可用 16px page margin 和 32px section padding，桌機可提高到 32px page margin、64px 或 80px section padding。
8pt grid 會影響無障礙設計嗎？
會間接影響。穩定 spacing 有助於閱讀分組、觸控目標和表單理解，但它本身不等於無障礙。按鈕尺寸、焦點狀態、文字對比、錯誤訊息位置仍需要另外檢查。
已經有設計系統了，還需要另外定義 8pt spacing 嗎？
需要確認設計系統裡是否已經有 spacing token。如果已經有，就不用另開一套 8pt spacing；如果只有色彩、字體和元件狀態，缺少間距規範，就應補上 spacing scale，讓 Figma、文件和前端程式碼使用同一組數值。