頁面佈局設計是做什麼的？

概述

多數頁面失敗在節奏，而非創意。字體沒問題、顏色沒問題，但看起來還是像套版，因為垂直間距是逐區塊決定的，導致沒有任何東西對齊。

核心原則：在開始設計任何東西之前，先選定一個間距尺規、一個字級系統和一個區塊系統，之後絕不引入任何不在這套系統上的數值。

區塊系統

內容區塊共用少數幾個數值。固定視角（pinned）場景是例外。

部分	規則
區塊標題	每個內容區塊使用一種尺寸（例如桌機 48，手機 38）
左邊緣	一個邊緣值，與導航標誌的左邊緣相等。如果使用了適應高度的尺規，邊緣會移動，因此需要測量它
標籤	標題上方使用一種藥丸形狀的樣式
卡片	一種圓角、一種邊線、一種色調。絕不要同時使用邊框、陰影和填充
結尾卡片	標題放在網格行上，按鈕放在下一行，不加額外句子

固定視角（pinned）與捲動擦除（scrubbed）場景保留它們自己的舞台尺寸。它們本身是設計成佔滿視口高度的，其空白區域是捲動跑道。在沒有重新錨定每個以百分比定位的元素之前，不要縮小固定舞台。

一個頁面中，如果每個區塊都有自己的標題尺寸、自己的左邊緣和自己風格的卡片，看起來就會像拼湊而成的。這張表格就是用來避免這個問題的。

間距節奏

間距尺規只決定一次。一個 4px 為基礎的幾何級數能涵蓋所有情況：

0.4  0.8  1.6  2.4  3.2  4.8  6.4  8  12  16 rem

所有區塊間距透過兩個變數來驅動：--sec（區塊之間）和 --blk（區塊內部的區塊）。要收緊一個鬆散的頁面，只需更改兩個數字，而不是四十個。在一個頁面上，桌機使用 48 和 40 單位、手機使用 36 和 28 單位，將文件高度減少了約 10%。

當你收緊節奏時，元素尺寸不會改變。 卡片、字體、標誌、按鈕：保持原有的設計。透過比較新舊構建的元件尺寸來證明這一點。

區塊內距是頁面最容易出錯的地方。審計每一個交界處，而不是每個區塊：

交界處	總間距	視覺感受
兩個不相關的區塊	200-240px	不同的章節
一個接續上方區塊的區塊	40-80px	同一章節的兩個部分
滿版媒體與一個區塊相接	0	一個切分

測量上方區塊的 padding-bottom 與下方區塊的 padding-top 的總和。一個頁面如果出現 120/60、64/20、24/0 和 0/120 的組合，會產生 180、84、24 和 120 的間距，完全沒有邏輯。使用者會感覺到這種鬆散，但無法具體指出問題。

在單色背景上，超過約 240px 的間距需要放點東西。要嘛收緊它，要嘛在裡面放一個行動呼籲（CTA）。

首屏

英雄區塊的大小要讓下一個區塊能在第一屏顯示出來。使用 clamp(620, 100svh - 150, 900) 單位可以讓證明條（proof strip）在一次滾動後就顯現。一個充滿視口且下方沒有任何東西的英雄區塊，會隱藏頁面所依賴的證明。

共享元件屬於網站

一個存在於線上市場頁面上的導航列、頁尾或按鈕，就是既定的設計。不要在一個新頁面上重新設計它。當它在新的頁面上看起來不同時，原因幾乎總是來自頁面級別的樣式覆蓋。請比對線上市場頁面的計算後樣式，並移除這些覆蓋樣式，且只在洩漏的斷點範圍內作用。

字級系統

最多使用兩種字體族：一種顯示用，一種內文用。顯示字體中的數字看起來像設計過的；普通內文字體中的數字看起來像數據。

對於任何與其他數字排在同一行中的數字，務必設定 font-variant-numeric: lining-nums tabular-nums。沒有這項設定，「3,000」和「500,000+」就不會對齊，而且你無法知道原因。

負的字母間距（letter-spacing）隨尺寸變化：在顯示尺寸下約為 -0.02em，在內文尺寸下為 0，在大寫眉題上則為正的 0.08em。

精確匹配設計稿中的字體寬度。關於光學尺寸的陷阱，請參閱 extracting-figma-truth。

卡片與網格

最常見的卡片錯誤是不均勻的內容導致不均勻的卡片。

修改前	修改後	原因
`.card { padding: 2rem }` 在網格中	在網格上加上 `align-items: stretch`，並在卡片上加上 `height: 100%`	否則卡片的高度會等於其內容的高度
內容由上到下流動	在必須位於底部的元素上使用 `margin-top: auto`	將指標或 CTA 固定到所有卡片共享的基準線上
標籤在一張卡片中換行到 1 行，在另一張中換行到 2 行	在標籤上設定等於 2 行高度的 `min-height`	保持每張卡片的基準線相同
`<img>` 帶有內建尺寸	在圖片外包一層帶有 `aspect-ratio` 和 `object-fit: cover` 的容器	一個由不同長寬比圖片組成的網格，根本不是一個網格
卡片背後使用灰色填充	白色搭配 `1px` 細線	填充看起來像佔位符，細線看起來像經過設計的

統計與數字區塊

一個數字區塊由三個部分組成，順序固定：來源或標籤在上方，數字在中間，說明在下方。數字是區塊中最大的元素，且行中的每個數字共享一個基準線。

絕不要把非數字放在數字的位置上。在一行包含「150+」和「3,000」的項目中，放入「創意營運」會看起來像一個錯誤。要嘛找到對應的數字，要嘛將那個事實移到內文中。
一個換行成兩行的數字會破壞整行。「6 週到 24 小時」應變成「24h」，其餘部分放入說明中。
將說明限制在兩行內。如果需要三行，代表說明正在取代數字的功能。

標誌條

標誌的大小根據視覺重量來決定，而不是根據邊界框。一個堆疊式標章、一個方形徽章和一個單行文字標誌如果被設定成相同的 CSS 高度，看起來會有三種不同的錯誤。

從以下數值開始：堆疊式標章 44px，方形徽章 40px，文字標誌 22px，然後用肉眼調整。將每個標誌標準化為一種墨水顏色。混合的標誌顏色會讓條帶看起來像是拼湊出來的。只有經過授權的標誌才能放入條帶中（請參閱 writing-claims-that-hold）。

共享 CSS 與手機溢位

為桌機元件撰寫的寬度規則，例如 width: 37rem !important，可能會使整個文件的寬度超過手機螢幕寬度（428 對 390）。症狀是右邊緣出現一條白色條紋。在 390 寬度下檢查 scrollWidth 和 clientWidth，並將固定寬度限制在它們原本被設計的斷點範圍內。

套版頁面的跡象

每個區塊都置中
所有區塊的內距都是 120px，無視其之間的關係
卡片同時具備邊框、陰影和背景填充
標題使用比內文字體更粗的字重來設定
數字使用內文字體
使用了兩個非品牌色的強調色
一個頁面上同時出現了 4、8、12 和 16 等不同的 border-radius 數值

頁面佈局設計