Wensity 版面配置是做什麼的？

版面配置是頁面在人們閱讀文字之前，告訴他們什麼是重要的、什麼是屬於一起的方式。好的版面配置來自三個習慣：固定的間距刻度、按距離分組，以及統一的對齊系統。此技巧將設定這三者，並涵蓋響應式結構。

如果專案已有間距刻度和容器寬度，請沿用它們。

1. 間距刻度

使用 4px 基底。每個 margin、padding 和 gap 都來自此列表：

代號	px	典型用途
1	4	圖示到標籤、緊湊的行內間距
2	8	控制項內部、標籤與其輸入框之間
3	12	緊湊列表中的項目之間、按鈕的垂直內距
4	16	卡片內距（緊湊）、相關控制項之間的間距、行動裝置頁面邊距
5	20	按鈕的水平內距（大）
6	24	卡片內距、表單欄位之間的間距
8	32	區塊內的群組之間
10	40	區塊標題與其內容之間（大）
12	48	行動裝置上的區塊內距
16	64	應用程式中的區塊之間、平板上的區塊內距
20	80
24	96	桌面行銷頁面上的區塊內距
32	128	主視覺區內距、圍繞一個重大聲明的空間

Tailwind 的預設刻度已遵循 4px 基底（p-4 是 16px），因此請使用其步驟，不要發明 p-[13px]。只有在您於渲染中檢查過的光學修正情況下，才允許使用奇數值（例如一個看起來偏了 1px 的圖示）。

2. 按距離分組

單一最重要的版面規則：群組內部的空間小於群組之間的空間。 標籤距離其輸入框 8px；下一個欄位距離 24px。卡片的標題距離其文字 8px；下一張卡片距離 24px。當內部與外部間距相等時，所有東西都會漂浮分散，沒有任何東西看起來像是一個群組。

目標是內部與外部間距的比例約為 1:2 或 1:3。
標題上方比下方有更多空間。 標題屬於其後的內容。典型：標題上方 48px，下方 16px。
盒子之前的間距。 先使用距離進行分組。僅在距離不足時才添加邊框、分隔線或背景（例如密集的表格、工具欄、繁忙背景上的內容）。給每個群組都加上一個盒子會讓頁面顯得很沉重。
對同層級元素使用 gap（flex gap-4、grid gap-6），而不是對子元素使用 margin。這能將間距集中在一個地方，並避免在列表末尾出現多餘的 margin。

3. 節奏，而非千篇一律

一個每個區塊都有 96px 內距、置中標題和三欄網格的頁面沒有節奏。有目的地改變密度：

交替使用密集區塊（功能網格、表格、標誌）和開放區塊（一個陳述、一張大圖）。
讓重要的區塊佔據更多空間。空間是你分配注意力的方式。
僅在內容真正屬於同一類事物時才重複版面。

4. 對齊

單一起始邊。 區塊內的標題、段落、按鈕和圖片共享同一條起始線。大多數「看起來不對勁」的抱怨都是因為兩條邊相差了幾像素。
預設對齊到起始邊（text-align: start，在英文中是靠左，在阿拉伯文或希伯來文中是靠右）。僅將簡短、獨立的內容置中：主視覺標題、單一 CTA 區塊、空白狀態。表單、表格、列表和長文字對齊到起始邊。
在表格和數據列中將數字對齊到結束邊。
對齊到文字，而非盒子。 圖示旁的標籤應對齊標籤的 cap height 或中心，而不是行盒的頂部。在 flex 行中，單行使用 items-center；多行文字則使用 items-start 並在圖示上添加一個小的上外邊距。
光學調整： 播放圖示、箭頭和圓形形狀在數學上置中時看起來會偏移。在看到後，將其微調 1 到 2px。

5. 容器與寬度

容器	最大寬度	用途
Prose	65ch（約 640 到 720px）	文章、文檔、長段落
Narrow	560 到 640px	表單、登入、聚焦的任務、置中的主視覺陳述
Content	1120 到 1280px	大多數行銷區塊和應用程式頁面
Wide	1440 到 1600px	儀表板、畫廊、編輯器
Full bleed	100%	背景、圖片、應觸及邊緣的產品照

頁面邊距： 手機上 16px，平板上 24px，桌面上 32 到 48px。保持一致：整個網站每個斷點只有一個邊距值。
將背景與內容寬度分開。 區塊的背景可以全幅顯示，而其內容則保持在內容容器中。
不要讓文字在寬螢幕上全幅顯示。 圖片和網格可以增長；段落則不行。

6. 網格

行銷版面使用 12 欄，可以實現一半、三分之一、四分之一以及不對稱分割（7 和 5、8 和 4）。不對稱分割看起來比 6 和 6 更具設計感。
卡片使用自動填充網格，讓欄數跟隨空間變化：

.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

min(100%, 280px) 可防止在寬度小於 280px 的螢幕上溢出。 auto-fill 在只有一兩張卡片時保持卡片寬度穩定；auto-fit 則會拉伸少數卡片以填滿行。要有目的地選擇。

讓彈性軌道可以縮小。 Grid 和 flex 子元素預設拒絕縮小到其內容以下，這就是為什麼長文字或寬表格會溢出儀表板。對彈性軌道使用 minmax(0, 1fr)，對包含文字的 flex 子元素使用 min-width: 0（Tailwind min-w-0）：

.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.row > .text { min-width: 0; }

僅對等高的內容使用等高的卡片。 在一行中的卡片預設會拉伸到最高的一張。這對於方案集合來說沒問題；但當其中一張卡片明顯是主打商品時就不合適了。
Bento 網格： 根據重要性改變磁貼大小，保持一個間距值，並為每個磁貼提供真實的內容。空白的裝飾性磁貼看起來像個模板。
當一行中的卡片需要彼此對齊標題、正文和按鈕時，使用 subgrid（grid-template-rows: subgrid）。

7. 響應式結構

先設計行動裝置，然後隨著空間增加再添加結構。

斷點應跟隨內容，而非裝置。 在版面開始看起來不對勁的地方添加一個。Tailwind 的 sm 640、md 768、lg 1024、xl 1280 是不錯的預設值。
重組結構，而不僅僅是縮小。 在行動裝置上，三欄功能網格變成一欄，並排的文字和圖片堆疊起來，圖片放在第二（如果圖片傳達了訊息則放在第一），表格變成卡片列表或在其自己的容器內水平滾動，側邊欄變成抽屜。
對出現在不同寬度中的元件使用容器查詢（例如側邊欄和主要欄位中的卡片）：

.card-wrap { container-type: inline-size; }
@container (min-width: 480px) { .card { grid-template-columns: 160px 1fr; } }

在 Tailwind v4 中：在父元素上使用 @container，在子元素上使用 @md:grid-cols-2。

根據螢幕縮放間距。 區塊內距：行動裝置 48px，平板 64px，桌面 96px。間距可以從 16 逐步增加到 24 再到 32。
視口高度： 對於全高版面，使用 min-h-dvh（或 100dvh），而不是 h-screen（100vh）。在帶有工具欄的行動瀏覽器上，100vh 比可見區域高，因此內容會隱藏在工具欄下方。
帶有瀏海的手機的安全區域： 固定底部欄使用 padding-bottom: env(safe-area-inset-bottom)，並在 viewport meta 標籤中設置 viewport-fit=cover。
從右到左的語言： 使用邏輯屬性（margin-inline-start、padding-inline、inset-inline-end；Tailwind ms-*、pe-*、start-*）代替 left 和 right，並使用 dir="rtl" 進行測試。鏡像方向性圖示（返回箭頭、V 形符號），不要鏡像標誌或每個圖示。
永遠不要出現水平頁面滾動。 在 320px 處檢查。通常的原因包括固定寬度、長單詞或 URL、w-screen 元素（它包含了滾動條寬度）或負的 margin。

8. 表格

標題行扮演標籤角色，在表格滾動時固定（position: sticky; top: 0），使用帶色調的背景或更強的下邊框。
按密度設定行高： 緊湊 36px，預設 44px，舒適 52px。當使用者需求不同時，提供切換選項。
行之間使用細線分隔符或斑馬紋色調分隔，兩者不要同時使用。
數字使用 tabular-nums 並對齊到結束邊； 文字對齊到起始邊；狀態和操作放在最後幾欄。
行動裝置上的寬表格： 在其自己的容器內水平滾動（overflow-x: auto），並固定第一欄，或者切換到每行的堆疊卡片。永遠不要讓表格將頁面推向側面。
空白、載入和錯誤狀態應位於表格框架內，保留標題，以便使用者知道將出現什麼內容。

9. 密度

根據螢幕的使用頻率來匹配密度：

行銷和入門： 開放。每螢幕項目少，空間寬敞，字型大。
日常使用的應用程式畫面： 緊湊。行高 36 到 44px，間距 8 到 12px，14px 文字。每天使用螢幕的人希望一次看到更多內容。
表格和資料工具： 密集，如果使用者需求不同則提供密度切換。
不要在一個面板內混合不同的密度。

10. 觸控目標與點擊區域

觸控螢幕上任何可點擊的內容都需要 44x44px 的目標，即使可見圖示只有 16px。（WCAG 2.2 AA 要求至少 24x24px；44px 是舒適的大小。）使用內邊距放大點擊區域，或使用一個以控制項為中心、不可見的偽元素，這樣版面就不會改變：

.icon-btn { position: relative; }
.icon-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

獨立觸控目標之間至少間隔 8px，以免拇指同時碰到兩個。

11. 分層

保持一個小的 z-index 範圍，並僅使用這些值：

:root { --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; }

使用 showModal() 開啟的原生 <dialog> 以及帶有 popover 屬性的元素會渲染在瀏覽器的頂層，高於所有 z-index，因此它們不需要設定 z-index。z-index: 9999 表示對堆疊的理解不足。應該修復堆疊上下文（通常是父元素上多餘的 transform、filter 或 isolation），而不是提高數值。

12. 固定與固定定位元素

固定 header：保持較短（56 到 64px），並且只在頁面在其下方滾動時才為其添加背景（純色或模糊），這樣頁面頂部可以保持乾淨。
在被錨定的標題上添加一個等於 header 高度的 scroll-margin-top，這樣頁內鏈接就不會落在 header 下方。
行動裝置上的固定底部欄需要上述的安全區域內邊距，並且不能覆蓋頁面上的最後一個內容；在頁面底部添加等於該欄高度的內邊距。

Wensity 版面配置