一般來說，文字的實際占位在頁面中并不是緊貼文字可視邊界，是有一定的額外邊距的，所以對于標注稿中的文字部分來說，開發往往做出來的效果與設計稿會有偏差。那如何精確視覺規范，又能兼顧開發實現，是本文探討的一個問題。文章提供一套設計方法，旨在更加嚴謹地實現規范化，精確化，在設計與開發之間保持平衡。

我用 4px 網格設計方法 2 年多了，也嘗試著讓我的團隊使用這套方法論。如今，我終于克服了拖延癥，決定在我的第一篇 Medium 文章中來探討這個方法，并期望用這篇文章來獲得大家的一些反饋。

問題

在平時的工作中，讓我感到抓狂的是，文本占位幾乎總是比實際的文本高度要高。因此，當使用文本占位的高度來應用邊距規范時，總是會顯得比預期的要更大。文字行高越大，偏差就越大。在下面的示例中，設計是通過運用文本之間的空間來創建的，當所有間距都為 32px 時，所有的垂直間距實際上會比 32px 大很多

譯者注：這個大家在使用 sketch 時應該會經常遇到。

△ Photo by Max Delsid on Unsplash

解決

由于這樣的問題，我使用 4px 網格方法來規范視覺精度。以下是我的設計過程：

• 在背景中設置一個 4px 的網格；
• 把所有的元素和文本都對齊在網格上；
• 使用網格來測量文本之間的留白區域，而不是直接使用文本占位的大小。

此外，受到 Medium 上 Nathan Curtis 的《 Space in Design Systems 》文章影響，我也給團隊定義了一組間距值，方便快速使用。

為了讓所有內容都能對齊于網格上，這種方法基本上將文本的可視高度取整為 4 的倍數，這樣可能會造成 1-2px 的誤差，但其實仍然會比直接用文本占位來設定間距更為精確。

△ 測量文本上方最近的一條網格線的距離

有一個例外：在組件或者某個容器中的圖標或者文本應該垂直居中，而無論他們是否對齊于基準網格上。因為大多數時候開發可以使用彈性布局（flexbox）將元素直接居中，這比標注靜態的間距更為實用。

每個行內元素中的文本在 sketch 中都使用上下居中對齊，基線在此時沒有對齊也是沒有關系的。

理由

傳統意義上，網格設計常常用于紙媒印刷，用來打造垂直方向上的節奏感，在設計 Web 用戶體驗的工作中，同樣也需要把控好這樣的節奏感。

對我來說，使用 4px 網格方法是視覺精度和設計效率之間的平衡。在問題部分，我討論了使用文本占位對齊所帶來的麻煩，用戶其實是看不見這個所謂的文字外框的。所以使用這種「嚴謹」的設計，其實是沒有多大意義的，會造成視覺上的不平衡，并沒有給用戶帶來好處。

另一個角度來說，忽略文本占位空間，使用網格來進行測量，則可以獲得更高的精度。

下面是這兩種方法的比較，我們可以看到，當使用相同的間距值（32px，12px，32px，32px）時，使用網格測量的設計更準確地反映了預期的間距。

譯者注：這里我想提一句，在實際輸出標注稿的時候，間距不是圖中所示，標注會自動減去文字占位空間，比如 Seattle 與 City in Washington 之間的標注間距可能是 8px，這樣開發寫出來的 css 代碼才能與頁面中的實際文本占位對齊。

有人可能會說，如果是因為從文本占位而產生了太多的間距，那么，將上圖第一張卡片設計中的「Seattle」間距從 32px 降低到 28px 或者 24px 來與頂部和左側的 Padding 值相同不就行了。但是，這樣做就成了一件靠感覺的事情，除非去計算像素，否則永遠無法確定。另一方面，4px 網格規范提供了一個更精確、更好把控的方法來確定間距大小。

就設計效率而言，這似乎需要做更多的工作，但是由于網格的存在，設計軟件（比如sketch或Figma）可以利用自動吸附功能幫助對齊網格線，因此實際處理時其實并不麻煩。下面是我平時使用網格布局時的工作流程：

△ 我的工作流中如何處理好文本

或者，做的時候可以選擇不使用網格參考線，只是用一個像素塊手動測量，但是這就需要將畫面方法至像素大小。

譯者注：我自己平時就經常這么干，這樣測量會更準確。

△ 上圖是一個可選的工作流，直接量兩個文本之間的間距，而不使用網格參考

已知問題：如何與開發對接

當開發拿到這樣的設計標注稿時，看到的間距可能是看似沒有規律的隨機間距，這對開發來說，并不友好。

上文中，我提到了一篇文章《Space in Design Systems》，文章中主要討論了如何使用 css 類來表示間距值，這有助于加強設計與開發之間的一致性。不幸的是，使用我的這種方法，幾乎不可能將間距表示為一組 css 類，因為間距值具有隨機性。

我們還研究了許多人提出的一種減少隨機性問題的熱門技術，使用::before 和::after CSS 偽類來「裁切」邊界框（本質上是對行內元素的間距校正）。然而，我的開發男友則告訴我：

使用::before 和::after CSS 偽類并不理想，因為在不同的字體，瀏覽器，操作系統甚至不同的屏幕分辨率上都不一致。針對某一個字體做好的設置，在其他地方又可能出現問題。從開發的角度來說，這樣做也沒有遵循很好的代碼規范，因為是使用了負邊距，將無關的多余元素應用到了 DOM 結構中，這可能會導致一些意想不到的副作用。因此，在真實項目中，這種技術不值得冒險。

（譯者注：貌似這里作者并沒有明確與開發的對接，我個人認為，作為垂直方向上的間距，在文字大小不變的情況下，讓開發直接按標注的間距值來寫 CSS 值，復雜度也能接受。）

不同語言如何應用

我曾經做了一項不同地區語言的研究，研究我的方法是否支持 8 種書寫語言（拉丁語，漢語，西里爾語，德語，希臘語，韓語，日語和泰語）。然后我意識到，無論使用哪種度量方法，最終開發都是從標注稿中獲得間距值寫進 CSS 中的邊界框間距才是最重要的。不同的字體，即使行高相同，可視高度也會有區別。然而，正如下圖中所示，盡管有一些細微的改變，所有語言的內容仍然相對集中在相同的位置上。

△ Photo by Joshua Sortino on Unsplash

結語

如果有任何不合理的地方，或者你有任何問題，反饋或更好的解決方案，請讓我知道。我已經研究這個課題很長時間了，所以我很想聽聽你的想法。

原文：《The 4px baseline grid?—?the present》??Ethan Wang

歡迎關注譯者的微信公眾號：「彩云譯設計」