排版定字級、色彩定色票之後,今天談把元素放到哪、彼此距離多遠——間距與網格,介面秩序感的骨架。
字型階層決定了誰大誰小,色彩系統決定了誰亮誰暗,但當一堆元素攤在畫面上,真正讓人覺得「這介面很整齊」或「很亂」的,往往不是字也不是色,而是它們之間的空隙。間距(spacing)與版面網格(layout grid)就是那套看不見的骨架:它規定每一段留白該多寬、每一欄該多齊、每個區塊之間該隔多遠。做得好,使用者根本不會注意到;做不好,整個畫面就像沒對齊的貨架,說不上哪裡怪但就是不舒服。今天把這套骨架拆開來看。
📖 學
為何用 8pt 網格與間距尺標
8pt 網格(8-point grid)的核心規則只有一句:所有間距與尺寸都用 8 的倍數。內距、外距、按鈕高度、圖示大小、區塊間隔,一律取 8、16、24、32、40、48… 這樣一串值。為什麼是 8?因為主流螢幕解析度大多能被 8 整除,在標準螢幕(@1x)與高密度 Retina 螢幕(@2x、@3x)上都能對齊到整數像素,不會產生半像素模糊。Material Design 的版面邊界與欄位也都建立在 8px 的基線網格上。
比起「憑感覺調到看起來對」,間距尺標(spacing scale)真正的價值是收斂選擇。當你只能從 4、8、16、24、32 這幾個值裡挑,你就不會出現 13px、17px、21px 這種看似接近卻永遠對不齊的雜訊。少數幾個離散的值,反而讓整個產品的節奏一致。很多團隊會保留 4px 當半格,專門處理極貼近的情況——例如圖示與旁邊文字標籤之間的縫隙。
實務上有兩種心法。硬網格(hard grid) 是把元素嚴格擺在 8px 方格的背景網格上;軟網格(soft grid) 則是元素之間彼此以 8px 增量相對排列,不必死鎖在背景格線。多數介面用軟網格就夠靈活了。
留白與親密性原則 proximity
留白(white space)不是「還沒填東西的空位」,而是主動的設計材料。它負責兩件事:一是呼吸感,拉開內容讓眼睛不疲勞;二是分組。這裡要引出格式塔的親密性原則(law of proximity):靠得近的東西,會被大腦自動讀成同一組。
這條原則有個極實用的推論,叫「內距 ≤ 外距」或內小外大規則:一個群組內部元素之間的間距,要小於這個群組對外與別組的間距。舉例,表單裡「標籤」和它對應的「輸入框」要靠得近(內距小),而這一組「標籤+輸入框」與下一組欄位之間要隔得開(外距大)。一旦這個關係反過來——標籤離自己的輸入框比離上一個欄位還遠——使用者就會看錯歸屬,表單瞬間變難填。很多「看起來很擠又很亂」的介面,病根不是間距不夠,而是內外間距的比例錯了。
留白也有階層。大留白區隔頁面級的大區塊,中留白區隔卡片與段落,小留白處理元素內部——這三層留白本身就是一種視覺層級,和字級、色彩共同傳達「什麼跟什麼是一夥的」。
欄位網格與斷點
欄位網格(column grid)把版面橫向切成數條等寬欄位,元素跨越若干欄來對齊。桌面最常見的是 12 欄,因為 12 能被 2、3、4、6 整除,無論你要切兩欄、三欄還是四欄都均分得漂亮。欄與欄之間的縫隙叫間溝(gutter),兩側則是邊界(margin)。
版面要響應式,就得配合斷點(breakpoint)。斷點是一組預設的螢幕寬度區間,在不同區間切換不同的網格配置。Material Design 定義了 xs、sm、md、lg、xl 幾個斷點;間溝寬度也會隨斷點變化——例如手機在 360dp 用 16dp 間溝,平板到 600dp 就放寬到 24dp;螢幕越大、邊界越寬,四周的留白就越多。掌握「欄數 × 間溝 × 邊界」這三個變數,就能讓同一份內容在手機、平板、桌面上各自舒展,而不是硬把桌面版縮小塞進手機。
對齊與視覺節奏
對齊(alignment)是秩序感最便宜的來源。人眼對「沒對齊的邊」極度敏感,一條隱形的對齊線,能讓雜亂的元素立刻收束。原則很簡單:建立盡量少的對齊線。多數內容靠左對齊共用一條左邊界,勝過每個元素各自置中、各走各的軸。
節奏(rhythm)則是間距在時間與空間上的重複感。當區塊之間的垂直間距遵循同一套尺標(例如段落間一律 24px、大區塊間一律 64px),視線往下滑時會感受到穩定的脈動,這就是垂直節奏(vertical rhythm)。節奏一致,頁面就有「這是同一個產品」的整體感;節奏忽大忽小,再漂亮的元件也會顯得散。
把間距系統化成 token
當間距尺標只存在設計師的直覺裡,它遲早會走鐘。把它變成設計 token(design token) 才能真正落地:給每個間距值一個具名變數,例如 space-1 = 4px、space-2 = 8px、space-4 = 16px、space-6 = 24px,設計稿與程式碼共用同一組名字。
好處是雙向的。設計端,Figma 的變數與 auto layout 直接吃這組值,拉出來的元件天生就在網格上;工程端,CSS 變數或 Tailwind 的 spacing scale 對應同一組 token,padding: var(--space-4) 取代硬寫 16px。之後要整體調鬆或調緊,只改 token 定義,全站跟著動。間距一旦 token 化,「一致性」就從靠人自律變成靠系統保證。
常見錯誤
- 魔術數字滿天飛:13px、17px、23px 這種隨手調出來的值,是網格失守的第一個症狀。強迫自己回到尺標。
- 內外間距顛倒:群組內比群組外還鬆,親密性原則被破壞,分組讀不出來。
- 只顧元件、不顧間隙:花大把時間打磨按鈕圓角,卻讓區塊間距隨性,整體仍舊鬆散。間隙和元件一樣重要。
- 把留白當浪費:一味塞滿,以為填得越多越划算,結果密不透風、掃視成本暴增。留白是功能,不是奢侈。
- 對齊線太多:每個區塊各自置中或各有軸線,畫面沒有一條可依循的邊,再乾淨的元件也顯亂。
🧠 記
- 8pt 網格:間距與尺寸取 8 的倍數(4 當半格),對齊整數像素、收斂選擇、跨螢幕一致。
- 間距尺標的價值是收斂:少數離散值(4/8/16/24/32)消滅魔術數字,節奏自然一致。
- 親密性原則 + 內距≤外距:靠近即同組;群組內間距要小於群組對外間距,分組才讀得對。
- 12 欄網格 + 斷點:12 好均分;欄數、間溝、邊界隨斷點調整,實現響應式舒展。
- 對齊與節奏:對齊線越少越整齊;垂直間距遵循同一尺標,產生穩定的視覺節奏。
✍️ 實踐
- 打開手邊一個介面,量三處間距:標籤到輸入框、輸入框到下一組、卡片到卡片。檢查是否符合「內小外大」,把不符合尺標的魔術數字改回 8 的倍數。
- 在 Figma 或 CSS 裡定義一組間距 token(
space-1~space-8),把一個既有元件的所有 padding/margin 改成引用 token,體驗「改一處、全站動」。 - 拿一個雜亂區塊,只做一件事:減少對齊線,讓多數元素共用同一條左邊界,前後截圖對比秩序感的變化。
🔗 延伸學習
- Responsive layout grid — Material Design:欄位、間溝、邊界與斷點的權威定義。
- Spacing, grids, and layouts — Design Systems:把間距與網格系統化的實務指南。
- Everything you need to know about spacing & layout grids — UX Prep:8pt 網格與欄位網格的完整入門。
- Spacing best practices — Cieden:8pt 系統與「內距≤外距」規則的細節。
💬 問 AI
想把今天的觀念變成可套用的系統,讓 AI 幫你把間距尺標與網格規則具體化。把你的產品類型與螢幕範圍告訴它,請它輸出一套可直接落地的 token 與檢查清單:
我正在設計一個 [產品類型,例如 SaaS 儀表板 / 電商 App],
主要在 [裝置範圍,例如手機到桌面] 使用。請幫我:
1. 依 8pt 網格,設計一組間距尺標並命名成 design token(space-1 ~ space-8),
標明各值的典型用途(元件內距、群組間距、頁面級區隔)。
2. 建議桌面/平板/手機三個斷點的欄數、間溝、邊界。
3. 給我一份「間距與對齊」自檢清單,讓我能逐項檢查現有畫面,
特別點出「內距≤外距」與「魔術數字」這兩類常見錯誤。
請用表格與條列呈現,並解釋每個決定背後的理由。