4px栅格 - UI布局新方式

作者:Ethan Wang  I  翻译:毕纪灵

我已经使用4px栅格网格2年多了,并且一直试图让我的团队也使用它。我终于克服了拖延症,决定在我的第一篇媒体文章中讨论它。我正在寻找这个方法的反馈,所以请让我知道你的想法!目前还没有收到反馈。

1. 问题

让我抓狂的是,文本框占据的空间总是比实际文本大。因此,当使用文本框度量大小时,它最终会比您预期的更大。线的高度越大,问题就越大。在下面的示例中,设计是通过测量文本框之间的距离来创建的。当所有间距都设置为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的误差;然而,它仍然比使用边界框来决定间距更精确。

有一个例外: 在一个组件或容器中,我垂直居中图标或文字,而不管他们是否坐在栅格网格。因为大多数时候,开发人员可以使用flexbox居中一个元素,这比使用静态间距值更方便

3. 为什么

一般,栅格网格用于平面设计,以创建垂直的节奏感。在我设计web网络的日常工作经验中,我还没有遇到过如此需要更好的对齐节奏感的用例。

对我来说,使用4px栅格网格是视觉精度(对用户)和设计效率(对我来说)之间的平衡。在问题部分,我探讨了为什么从文本框测量会增加额外的间距。在一天结束时,用户无法看到文本框。所以使用这种方法是没有意义的,尤其是如果它造成了视觉上的不平衡,并没有给用户带来好处。另一方面,忽略边界框,使用栅格进行测量,可以获得更好的视觉精度。下面是这两种方法的比较。我们可以看到,当使用相同的间距值(32px、12px、32px、32px)时,使用栅格网格测量的设计更准确地反映了预期的间距。

有人可能会说,如果从文本框测量产生了太多的空间,那么,例如在第一张卡片中,将第一个间距值从32px降低到28px或24px将使“西雅图”的顶部和左侧填充看起来相同。但这样的话,它变成了一个猜谜游戏;除非你计算像素,否则你永远无法确定。另一方面,4px网格方法提供了一种更精确、更可预测的方法来确定它的32px(考虑到四舍五入带来的1-2px误差)。

就设计效率而言,这似乎需要更多的工作,但是由于网格的存在,设计工具(Sketch或Figma)可以帮助对齐元素并向栅格添加对齐线,因此对齐和间距变得较容易。下面是我使用栅格对齐文本的工作流。

TU6

或者,您可以选择不使用网格并手动测量帽高(如下面的gif所示),但这需要始终缩放像素网格。另外,容纳文本的容器大小可能不是4px的倍数。

图片7

4. 已知问题-设计-开发切换

当开发人员使用红线工具(InVision/Zeplin/Figma)查看设计时,使用栅格方法得到的布局似乎是随机间距值。下面的设计是使用栅格方法创建的。这些数字显示了你可以从红线工具中看到的间距:

上文中,我简要提到了 《 Space in Design Systems》 这篇文章。它讨论了如何使用CSS表示间距值,这有助于增强设计人员和开发人员之间的一致性。不幸的是,使用栅格网格方法,几乎不可能将间距值用一组CSS表示,因为组合类型不同时该值具有随机性。

我们还研究了许多人提出的一种减少随机性问题的技术,即使用::before和::after CSS伪元素来“裁剪”边界框(本质上是对行框应用校正间距)。然而,我的代码忍者男友Chris Caruso告诉我:

使用::before和::after CSS伪元素并不理想,因为它在不同的字体、浏览器、操作系统甚至屏幕分辨率上都不一致。针对单一组合可能会导致其他组合出现间距问题。从开发人员的角度来看,该技术没有遵循良好的编码规范,因为它使用负边距,并将无关元素应用于DOM——这两者都可能导致意想不到的负面影响。因此,在实际应用中,这种技术不值得冒险。

5. 定位?

我曾经做过一项本地化研究,研究了我们产品支持的8种编写脚本(拉丁语、汉语、西里尔语、德文、希腊语、韩语、日语和泰语)。然后我意识到,无论您使用哪种度量方法,最终,开发人员从工具中获取并放入CSS中的间距值才是最重要的。根据使用的非英语字体,即使行高相同,该类型的可视高度也可能比拉丁字母大或小。他们的背景基线也会发生变化。因此,无论您使用何种测量方法,本地化总是会稍微改变间距。然而,正如下面的示例所示,尽管有这些细微的不同,所有语言的文本仍然相对集中在空白区域。

(我对非拉丁文字的写作还不是很了解,但我想了解更多。如以上任何意见不正确或有待改善,请通知我。我只懂英语和汉语。大声告诉我的同事,是他们帮我把这句话翻译成其他语言的!)

6. 问题

如果有任何不合理的地方,或者您有任何问题、反馈或更好的解决方案,请让我知道!我已经研究这个课题很长时间了,所以我很想听听你的想法!如果你想聊天,请直接通过电子邮件(ethanw@microsoft.com)联系我!

原文作者:Ethan Wang

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

原文标题:《The 4px baseline grid — the present》

发布日期:November 11, 2018

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章