如何合理建立間距系統，來更快的實現設計方案。

HTML · 發表 2019-03-20 15:52:05

摘要：讓設計師和開發團隊有意識的利用好間距系統，可以提高產品的可讀性和一致性。 Cheatsheet總結了我的方法我最近致力於為電子健康記錄（EHR）產品定義間距系統，以改善產品頁面的可讀性和一致性。我提出了3個間距規則（3C規則）和以4為基準的間距網格，並且這些規則與新的印刷系...

讓設計師和開發團隊有意識的利用好間距系統，可以提高產品的可讀性和一致性。

Cheatsheet總結了我的方法

我最近致力於為電子健康記錄（EHR）產品定義間距系統，以改善產品頁面的可讀性和一致性。我提出了3個間距規則（3C規則）和以4為基準的間距網格，並且這些規則與新的印刷系統配合得非常好。

存在的問題

當定位垂直元素時，設計師不應做出隨意或者任其自然的判斷。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量：“根據實際情況來決定使用5px或10px。”這種方法雖然是10的倍數並且可用，但是它不符合任何印刷要求的規範。

——Robert Bringhurst，著有《印刷風格元素》一書。

我們在EHR產品中使用了5px、10px、15px、20px的邊距/填充，但是在何時何種情況下使用這些間距，我們並沒有一個嚴格的規範。
邊距/填充只是間距系統的一部分，字型行高也會增加額外的高度空間，但目前我們沒有為現有（舊的）文字樣式建立行高規範。
相似的元件和內容在產品中看起來不一致，這造成了EHR產品的整體樣式不統一，並且因為資料疏密程度不同，造成了閱讀體驗的不流暢。

解決問題

步驟1：確定文字行高（確定基準網格）

首先我們假設使用非常流行的8點基準網格（即以8的倍數為一個間距規單位）會達到好的效果，因此在實驗中，我把基準主體字型大小設定為13px，行高設定為8的倍數即16px或則24px然後看看這兩個行高規則是否有用。如果沒用，則意味著8點基準網格是不適用的。

然後我將基準字型大小設定為13px，並在16px和24px之間的偶數尋找行高值。開始我將它與18px（6的倍數）匹配，如果成功那就意味著我採用了6點基準網格，也就是6的倍數（間距會是3、6、12、18、24）。後來我嘗試了20px的行高，使用起來效果很好，所以我採用了4點基準柵格（也就是間距為2、4、8、12、16、20等）。

步驟2：用希克定律和幾何級數來確定間距值

“隨著可選擇數量的增加，做出決定的難度將會增加。”

——希克定律

我們要想出一個可感知的間距系統來簡化設計決策，另外將所需值的數量保持在一個最小範圍內。

間距值是基準網格的倍數數值（如步驟1中確定的4點基準網格），因此我的間距值為4點基網格（2、4、8、12、16、20、24、28…)
一般來說，4–-5個間距值已經為產品設計提供了足夠的差異性，即使對於複雜的企業產品也足夠了，但是在實際過程中可能需要靈活的在規範中增加間距值。
我決定使用4點基準網格，因為它提供了更好的視覺可感知區間，對於層次結構的展示來說非常好，因此間距值應該是(2、4、8、16)。

如何以可預見的方式應用這些間距值？3C法則來拯救你。

我深受Nathan Curtis上面文章中介紹的Insets，Stacks＆Inline等間距詞彙的影響。我決定在其基礎上構建一個額外的詞彙組，以便我的團隊更容易理解每個詞彙的使用環境。我將所有的間距規則分解成3個C：容器、內容和元件。

· 容器規則使用了平方差的概念（使用16px）

· 內容規則使用了堆疊的概念（頭部堆疊使用2px，葉節點堆疊使用0、4、8、16px具體取決於內容型別）

· 元件規則使用內聯的概念（大多數情況下使用8px，4px表示關聯關係）

第1C：容器規則

容器是UI中的框架，其中包含內容，通常這些內容是頁面、卡片、模態、彈窗等。由於容器在層次結構中處於最高層次，所以我確保所有容器的間距值（在我的例子中是16px）。提示：切勿在任何間距計算中包含邊框。

第2C：內容規則

內容存在於容器內部，內容包含：
標題（h1、h2、h3、h4、h5）以段落，列表，表格，表格的形式穿插資料。

所有這些內容都是使用頁邊距垂直疊加的，但字型行高也為指定的頁邊距增加了額外的間距。我無法以一致的方式解決這個問題，因此我同時考慮了行高和邊距，建立了自己的處理堆疊的方法，以下是我的過程：

A）首先解決頭部堆疊

如下圖，我通過使用2個選項來獲取標題的行高。

為了簡化這2個選項之間的行高決策，我計算了每個行高比，並決定使用等於1.5或更高的行高。對於選擇哪個行高，我仍然猶豫不決，但是在進行了視覺探索並回顧了設計團隊的結果之後，我們確定了應該採用那個行高選項。

視覺探索的過程

我從頂部的H1開始，嘗試使用2px、4px、8px等的不同間距選項。行高為36px的間距選項都很緊湊，但4px間距與行高40px感覺恰到好處！

接下來我解決了H2問題，在我們的產品中，H2恰好是白色頁面的第一個標題。所以根據容器規則，最上面的H2在頂部有16px。我決定在所有H2標題上面給出16px間距高度（最大允許間距值），因為這個值使得層次結構非常清晰。

然後我在所有標題（H2、H3、H4、H5）和列表、段落、表格之間進行了間距值0px、2px、4px和8px的實驗。2px和4px的間距相差無多，但是我們在設計團隊內部審查結果時，2px的視覺感知更好，儘可能的堅持只有一個邊際數值，因為它簡化了設計和開發過程。

標題和葉節點間距實驗

標頭堆疊 - 間距為2px和4px

B）接下來解決葉節點堆疊

EHR有4種主要型別的葉節點：

表單（幾乎50％的產品）
列表（幾乎30％的產品）
表格（可能是產品的15％）
段落（可能是產品的5％）

我開始為最簡單的內容型別——段落來處理間距。

每個段落內的間距

這非常簡單，只需要清空段落中的所有文字行空間，這樣兩行之間就有0px邊距。

Sketch中的排版段落（行高20px是通過視覺探索得出的，並使用WCAG SC 1.4.8進行驗證，其中規定“ 行間距至少是段落內的空間的1.5倍 ”（20/13 = 1.538）

兩個連續段落之間的間距

我第一個想法是使用行高為20px的間距，但後來看到了WCAG SC 1.4.8，其中指出 “段落間距至少要比行間距大1.5倍，因此一段最後一行的行高為250％，這樣可以保持距離下一段第一行間距更合適。假設％值是根據基本字型為13px的大小計算的，我計算出兩段之間的實際間距應約為（ps - ls）= 13px，將使用margin-bottom：13px在CSS中定義。但是13px不是我們在步驟2中確定的間距值之一，因此我選擇了16px作為段落底部的邊距。