小雨點

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

 

譯文:

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

 

問題

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

Photo by Max Delsid on Unsplash

 

解決

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

  1. 在背景中設置一個4px的網格
  2. 把所有的元素和文本都對齊在網格上
  3. 使用網格來測量文本之間的留白區域,而不是直接使用文本占位的大小
  4. 此外,受到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》( https://medium.com/eightshaps-llc/space -in- Design – Systems -188bcbae0d62),文章中主要討論了如何使用css 類來表示間距值,這有助于加強設計與開發之間的一致性。不幸的是,使用我的這種方法,幾乎不可能將間距表示為一組css類,因為間距值具有隨機性。

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

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

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

 

不同語言如何應用

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

Photo by Joshua Sortino on Unsplash

 

問題

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

 

本文翻譯已獲得作者的正式授權

授權截圖

原文地址:uxdesign

譯文地址:彩云譯設計(公眾號)

作者:Ethan Wang

譯者:彩云sky

轉載請注明:學UI網 » 4px網格設計方法,讓設計還原更精準

登錄收藏
 
你可能喜歡的:
數據可視化在移動端的應用數據可視化在移動端的應用
大廠產品告訴你:提升交互表現的8個技巧大廠產品告訴你:提升交互表現的8個技巧
設計案例精選,如何通過App改版提高50%交易額?設計案例精選,如何通過App改版提高50%交易額?
四步搞定底部導航動效(下篇)四步搞定底部導航動效(下篇)
新手設計師為什么要對斷點圖標Say No新手設計師為什么要對斷點圖標Say No
四步搞定底部導航動效(上篇)四步搞定底部導航動效(上篇)
Material Design 概述Material Design 概述
如何提高老帶新的轉化率(下)如何提高老帶新的轉化率(下)
系統性地教你:如何設計產品的信息引導?系統性地教你:如何設計產品的信息引導?
百度網盤10.0-服務升級背后的故事百度網盤10.0-服務升級背后的故事
?
陕西快乐10分