如何合理建立間距系統,來更快的實現設計方案。
讓設計師和開發團隊有意識的利用好間距系統,可以提高產品的可讀性和一致性。
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作為段落底部的邊距。
解釋WCAG SC 1.4.8中的段落間隔規則
在Sketch中多段落排版
如果對計算結果有疑問,我總是用視覺探索進行交叉檢查。與其他可能的值相比,段落之間的16px間距最佳。其實我認為12px間距會更好。但是我不想僅為這個用例為整個間距系統新增額外的值,另外我們的EHR產品沒有很多段落,幾乎沒有任何連續的段落。
列表中列表項內的間距
列表是由多個同質資料項組成的資料結構,由於列表將所有這些同質資料項組合在一起,因此列表項不像段落(它們之間有16px)那樣間距很重要。同時列表項仍然需要稍微分開,所以我嘗試了0px和16px之間的間距,我只有3個值可以試驗2、4、8,總體看起來列表項之間的間距為8px看起來最適合層次結構。
帶有標籤的2個連續輸入欄位之間的間距
表單有連續的輸入欄位,一個接一個地疊加在另一個之下。
無標籤2個連續輸入欄位之間的間距
無標籤對於可訪問性來說並不是一個好的處理方式。然而在某些情況下,標籤最好不要顯示,這些情況是:
- 當多個輸入欄位一起表示1個物件時(例如在下面的地址部分,“地址”欄位包括街道地址1,街道地址2,城市,州,郵編)
- 當標籤過於明顯/重複且無法拼寫時,例如搜尋。
第3C:元件規則
元件有按鈕、輸入欄位、圖示等,這些元件通常放置在一起(內聯)。此外所有的元件的尺寸均為4的倍數(也是8的倍數),因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框,整體高度為26px)。當元件能完美利用好基準網格,並且按規則設定間距時,整體佈局才會完美和諧。
2個元件的間距
我用了一個簡單的規則,即在大多數時候任意2個相鄰元件之間使用8px間距。在少數情況下使用4px來顯示兩個元件之間更緊密的關係(格式塔的接近性原則)。
元件內部間距
我對元件內部的任何左/右填充都使用了8px。
圖示在元件內部間距
根據格式塔的接近性原則,將圖示放在元件內,將他們的間距設定為4px,而不是通常的8px。
外部圖示與元件間距
如果圖示與元件關聯組合,則其與元件間距為4px以顯示其關聯關係(格式塔的鄰近原則)。但是如果圖示與一組元件關聯,那麼它與最後一個元件間距8px,以表明它不僅僅是與最後一個元件關聯,而是與整個元件關聯。
結論
- 你將提出一個具有有限數值和有明確使用規範的間距系統,這非常易於使用並且合乎邏輯記憶。
- 在UI中使用間距,使其資訊層次結構更加合理清晰,並遵守可訪問性指南WCAG1.4.8,這有助於不同能力的人更好的掌握和理解資訊。
- 開發工程師瞭解間距系統,並且熟悉其應用的場景和規則,這樣可以讓設計和開發之間的溝通更順暢,工作效率更高等。
- 設計師不再需要對所有內容進行排查,開發工程師不再需要花時間檢查Zeplin等其他工具中樣式問題。