亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

作者：Ethan Wang  I  翻譯：畢紀靈

我已經使用4px柵格網格2年多了，并且一直試圖讓我的團隊也使用它。我終于克服了拖延癥，決定在我的第一篇媒體文章中討論它。我正在尋找這個方法的反饋，所以請讓我知道你的想法!目前還沒有收到反饋。

1. 問題

讓我抓狂的是，文本框占據的空間總是比實際文本大。因此，當使用文本框度量大小時，它最終會比您預期的更大。線的高度越大，問題就越大。在下面的示例中，設計是通過測量文本框之間的距離來創(chuàng)建的。當所有間距都設置為32px(在第一張卡片中)時，所有垂直間距實際上都比32px大得多(如第二張卡片中所示)，即使您將它們都設置為32px。

2. 解決方案

因為這個問題，我使用4px柵格來得到更好的視覺精度。以下是操作過程:

①我在背景中設置了一個4px的柵格

②我將所有UI元素和文本對齊到柵格

③我使用柵格來測量文本周圍的垂直空間，而不是使用文本的邊框。具體地說，我從最接近文本上限高度的柵格線測量文本上方的空間，從文本下方的柵格測量文本下方的空間。

④此外，我還為我們的團隊定義了一組間距值，靈感來自于這篇由Nathan Curtis撰寫的媒體文章:Space in Design Systems。【文章鏈接https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62】

為了讓所有柵格都位于網格上，這種方法基本上將文本的可視高度(與柵格的上限高度)舍入為4px的倍數(如下面的gif所示)。這會導致1-2px的誤差;然而，它仍然比使用邊界框來決定間距更精確。

有一個例外: 在一個組件或容器中，我垂直居中圖標或文字，而不管他們是否坐在柵格網格。因為大多數時候,開發(fā)人員可以使用flexbox居中一個元素,這比使用靜態(tài)間距值更方便

3. 為什么

一般，柵格網格用于平面設計，以創(chuàng)建垂直的節(jié)奏感。在我設計web網絡的日常工作經驗中，我還沒有遇到過如此需要更好的對齊節(jié)奏感的用例。

對我來說，使用4px柵格網格是視覺精度(對用戶)和設計效率(對我來說)之間的平衡。在問題部分，我探討了為什么從文本框測量會增加額外的間距。在一天結束時，用戶無法看到文本框。所以使用這種方法是沒有意義的，尤其是如果它造成了視覺上的不平衡，并沒有給用戶帶來好處。另一方面，忽略邊界框，使用柵格進行測量，可以獲得更好的視覺精度。下面是這兩種方法的比較。我們可以看到，當使用相同的間距值(32px、12px、32px、32px)時，使用柵格網格測量的設計更準確地反映了預期的間距。

有人可能會說，如果從文本框測量產生了太多的空間，那么，例如在第一張卡片中，將第一個間距值從32px降低到28px或24px將使“西雅圖”的頂部和左側填充看起來相同。但這樣的話，它變成了一個猜謎游戲；除非你計算像素，否則你永遠無法確定。另一方面，4px網格方法提供了一種更精確、更可預測的方法來確定它的32px(考慮到四舍五入帶來的1-2px誤差)。

就設計效率而言，這似乎需要更多的工作，但是由于網格的存在，設計工具(Sketch或Figma)可以幫助對齊元素并向柵格添加對齊線，因此對齊和間距變得較容易。下面是我使用柵格對齊文本的工作流。

或者，您可以選擇不使用網格并手動測量帽高(如下面的gif所示)，但這需要始終縮放像素網格。另外，容納文本的容器大小可能不是4px的倍數。

4. 已知問題-設計-開發(fā)切換

當開發(fā)人員使用紅線工具(InVision/Zeplin/Figma)查看設計時，使用柵格方法得到的布局似乎是隨機間距值。下面的設計是使用柵格方法創(chuàng)建的。這些數字顯示了你可以從紅線工具中看到的間距:

上文中，我簡要提到了《 Space in Design Systems》這篇文章。它討論了如何使用CSS表示間距值，這有助于增強設計人員和開發(fā)人員之間的一致性。不幸的是，使用柵格網格方法，幾乎不可能將間距值用一組CSS表示，因為組合類型不同時該值具有隨機性。

我們還研究了許多人提出的一種減少隨機性問題的技術，即使用::before和::after CSS偽元素來“裁剪”邊界框(本質上是對行框應用校正間距)。然而，我的代碼忍者男友Chris Caruso告訴我:

使用::before和::after CSS偽元素并不理想，因為它在不同的字體、瀏覽器、操作系統(tǒng)甚至屏幕分辨率上都不一致。針對單一組合可能會導致其他組合出現間距問題。從開發(fā)人員的角度來看，該技術沒有遵循良好的編碼規(guī)范，因為它使用負邊距，并將無關元素應用于DOM——這兩者都可能導致意想不到的負面影響。因此，在實際應用中，這種技術不值得冒險。

5. 定位?

我曾經做過一項本地化研究，研究了我們產品支持的8種編寫腳本(拉丁語、漢語、西里爾語、德文、希臘語、韓語、日語和泰語)。然后我意識到，無論您使用哪種度量方法，最終，開發(fā)人員從工具中獲取并放入CSS中的間距值才是最重要的。根據使用的非英語字體，即使行高相同，該類型的可視高度也可能比拉丁字母大或小。他們的背景基線也會發(fā)生變化。因此，無論您使用何種測量方法，本地化總是會稍微改變間距。然而，正如下面的示例所示，盡管有這些細微的不同，所有語言的文本仍然相對集中在空白區(qū)域。

 (我對非拉丁文字的寫作還不是很了解，但我想了解更多。如以上任何意見不正確或有待改善，請通知我。我只懂英語和漢語。大聲告訴我的同事，是他們幫我把這句話翻譯成其他語言的!)

6. 問題

如果有任何不合理的地方，或者您有任何問題、反饋或更好的解決方案，請讓我知道!我已經研究這個課題很長時間了，所以我很想聽聽你的想法!如果你想聊天，請直接通過電子郵件(ethanw@microsoft.com)聯(lián)系我!

原文作者：Ethan Wang

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

原文標題：《The 4px baseline grid?—?the present》

發(fā)布日期：November 11, 2018