国内最专业的IT技术学习网

UI设计

当前位置:主页 > 亚博体育app手机版 >

4px网格设计方法,让设计还原更精准

发布时间:2019/06/29标签:   APP设计    点击量:

原标题: 4px网格设计方法,让设计还原更精准

译者注:一般来说,文字的实际占位在页面中并不是紧贴文字可视边界,是有一定的额外边距的,所以对于标注稿中的文字部分来说,开发往往做出来的效果与设计稿会有偏差。那如何精确视觉规范,又能兼顾开发实现,是本文探讨的一个问题。文章提供一套设计方法,旨在更加严谨的实现规范化,精确化,在设计与开发之间的保持平衡。

译文:

我用4px网格设计方法2年多了,也尝试着让我的团队使用这套方法论。如今,我终于克服了拖延症,决定在我的第一篇Medium文章中来探讨这个方法,并期望用这篇文章来获得一些大家的反馈。

问题

在平时的工作中,让我感到抓狂的是,文本占位几乎总是比实际的文本高度要高。因此,当使用文本占位的高度来应用边距规范时,总是会显得比预期的要更大。文字行高越大,偏差就越大。在下面的示例中,设计是通过运用文本之间的空间来创建的,当所有间距都为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代码才能与页面中的实际文本占位对齐。)

版权信息Copyright ? IT技术教程 版权所有??? ICP备案编号:鲁ICP备09013610号