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

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

問題

在平時的工作中，讓我感到抓狂的是，文本占位幾乎總是比實際的文本高度要高。因此，當使用文本占位的高度來應用邊距規范時，總是會顯得比預期的要更大。文字行高越大，偏差就越大。

在下面的示例中，設計是通過運用文本之間的空間來創建的，當所有間距都為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

問題

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

原文：https://uxdesign.cc/the-4px-baseline-grid-89485012dea6

作者：Ethan Wang

譯者：彩云sky，公眾號：彩云譯設計

本文由 @彩云sky 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議