UI界面設計

巧用4px網(wǎng)格設計方法，讓設計更規(guī)范精準

2216

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

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

問題

在平時的工作中，讓我感到抓狂的是，文本占位幾乎總是比實際的文本高度要高。因此，當使用文本占位的高度來應用邊距規(guī)范時，總是會顯得比預期的要更大。文字行高越大，偏差就越大。在下面的示例中，設計是通過運用文本之間的空間來創(chuàng)建的，當所有間距都為32px時，所有的垂直間距實際上會比32px大很多（譯者注：這個大家在使用sketch時應該會經(jīng)常遇到）。

Photo by Max Delsid on Unsplash

解決

由于這樣的問題，我使用4px網(wǎng)格方法來規(guī)范視覺精度。以下是我的一般設計過程：

1.在背景中設置一個4px的網(wǎng)格

2.把所有的元素和文本都對齊在網(wǎng)格上

3.使用網(wǎng)格來測量文本之間的留白區(qū)域，而不是直接使用文本占位的大小

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

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

測量文本上方最近的一條網(wǎng)格線的距離

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

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

理由

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

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

另一個角度來說，忽略文本占位空間，使用網(wǎng)格來進行測量，則可以獲得更高的精度。下面是這兩種方法的比較，我們可以看到，當使用相同的間距值（32px,12px,32px,32px）時，使用網(wǎng)格測量的設計更準確的反映了預期的間距。（譯者注：這個有個點我想提一句，在實際輸出標注稿的時候，間距不是圖中所示，標注會自動減去文字占位空間，比如Seattle與City in Washington之間的標注間距可能是8px，這樣開發(fā)寫出來的css代碼才能與頁面中的實際文本占位對齊。）

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

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

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

或者，做的時候可以選擇不使用網(wǎng)格參考線，只是用一個像素塊手動測量，但是這就需要將畫面方法至像素大?。ㄗg者注：我自己平時就經(jīng)常這么干，這樣測量會更準確）。

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

已知問題-如何與開發(fā)對接

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

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

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

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

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

不同語言如何應用

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