赞助商
立即赞助

用4px网格设计方法,让你的设计还原高达 95%!

UI设计3年前 (2021)发布 流光
2.9K 0 0

一般,文字的实际占页面中并不紧贴文字可视界,一的额外距的,所以对于标注稿中的文字部分,发往往出的效果与设稿会偏差。那如何精确视觉规范,又能兼顾发实,本文探讨的一问题。文章提供一套设方法,旨加严谨实规范化,精确化,设与发之间保持平衡。

我用 4px 网格设计方法 2 多了,也试让我的团队使用这套方法论。如今,我终于克服了拖延症,决我的第一篇 Medium 文章中探讨这方法,并望用这篇文章获得家的一些反馈。

问题

平时的作中,让我感到抓狂的,文本占几乎总比实际的文本高度高。因此,当使用文本占的高度应用距规范时,总会显得比预的。文字行高越,偏差就越。下面的示例中,设通过运用文本之间的空间创建的,当所间距都 32px 时,所的垂直间距实际会比 32px 很多

译者注:这家使用 sketch 时应该会常遇到。

用4px网格设计方法,让你的设计还原高达 95%!

△ Photo by Max Delsid on Unsplash

解决

由于这样的问题,我使 4px 格方法来规范视觉精。是我的设计过程:

  • 在背中设置一个 4px 的网;
  • 把有的元素和本都对齐在格上;
  • 使用网格测文本之间的留白区域,不直接使用文本占的小。

此外,受到 Medium 上 Nathan Curtis 的《 Space in Design Systems 》章影响,我给团队定义了一组间距值,方快速使。

用4px网格设计方法,让你的设计还原高达 95%!

为了有容都对齐于格上,这种方法基本上将本的可视取整为 4 的倍数,这样可会成 1-2px 的误差,但实仍然会直接本占位来设定间距更为精确。

用4px网格设计方法,让你的设计还原高达 95%!

△ 测量本上方最的一条格线的距离

一例外:组件或者某器中的图标或者文本应该垂直居中,无论他们否对齐于基准网格。因多数时候发可以使用弹性布局(flexbox)将元素直接居中,这比标注静态的间距实用。

用4px网格设计方法,让你的设计还原高达 95%!

每行内元素中的文本 sketch 中都使用下居中对齐,基线此时对齐也关系的。

理由

传统意义,网格设常常用于纸媒印刷,用打造垂直方向的节奏感,设 Web 用户体验的作中,同样也需把控好这样的节奏感。

我来说,使用 4px 网格法是视觉精度和设计效率平衡。在问题部分,我讨论了使用文本占位齐所带来麻烦,用户其实是看不见这个所谓文框。所以使用这「严谨」设计,其实是没有多大意义,会造成视觉上不平衡,并没有用户带来好处。

另一个角度来说,忽略文本占位空间,使用网格来进行测量,则可以获得更高的度。

下面是两种方法的比,我们以看到,当使用相同的间距值(32px,12px,32px,32px)时,使用网测量的设计更准确地反映预期的间距。

译者注:里我想提一句,在际输出标注稿的时,间距不是图中所示,标注自动减去文字占位空间,比 Seattle 与 City in Washington 之间的标注间距能是 8px,样开写出来的 css 代码才能与页面中的际文占位对齐。

用4px网格设计方法,让你的设计还原高达 95%!

有人可能会说,如果是因为从文本占位而产生了多的间距,那,将上图第一张卡片计中的「Seattle」间距从 32px 降低 28px 或者 24px 来顶部和左侧的 Padding 值相同不就行了。但是,这做就成了一件靠觉的事情,除非去计算像素,否则远无法确定。另一方面,4px 网格规范提供了一个更确、更好把控的方法来确定间距大。

就设计效率而言,似乎需要做更的工,但是由网的存在,设计软件(比sketch或Figma)以用自动吸附功能帮助对齐网,因此际处理时其并不烦。下面是我平时使用网局时的工流程:

△ 我的工作流中如何处好本

或者,的时候可以选择不使用网格参考线,只用一素块手动测,但这就需将画面方法至素小。

译者注:我自己平时就常这么,这样测会准确。

△ 图一可选的作流,直接两文本之间的间距,不使用网格参考

已知问题:如何与开发对接

当发拿到这样的设计标注稿时,看到的间距可是看似没有规律的随机间距,这对开发来说,并友好。

用4px网格设计方法,让你的设计还原高达 95%!

上中,我到了一篇章《Space in Design Systems》,章中要讨论了如何使 css 类来表示间距值,这有助于强设计与开发之间的一致性。幸的是,使我的这种方法,几乎可将间距表示为一组 css 类,因为间距值具有随机性。

我们还研究了许多人提出的一种减少随机性问题的门技,使用::before ::after CSS 伪类「裁切」界框(本质对行内元素的间距校)。然,我的发男友则告诉我:

使用::before ::after CSS 伪类并不理,因不同的字体,浏览器,操作系统甚至不同的屏幕分辨率都不一致。针对某一字体好的设置,其他方又可能出问题。从发的角度,这样也遵循很好的码规范,因使用了负距,将无关的多余元素应用到了 DOM 结构中,这可能会导致一些意不到的副作用。因此,真实项目中,这种技不得冒险。

(译者注:貌似这里作者并明确与发的对接,我人认,作垂直方向的间距,文字小不变的况下,让发直接按标注的间距写 CSS ,复杂度也能接受。)

不同语言如何应用

我曾了一项不同区语言的研究,研究我的方法否支持 8 种书写语言(拉丁语,汉语,里尔语,德语,希腊语,韩语,日语泰语)。然后我意识到,无论使用哪种度方法,终发都从标注稿中获得间距写 CSS 中的界框间距重的。不同的字体,即使行高相同,可视高度也会区别。然,如下图中所示,尽一些细微的改变,所语言的内仍然相对集中相同的置。

用4px网格设计方法,让你的设计还原高达 95%!

△ Photo by Joshua Sortino on Unsplash

结语

如果任何不合理的方,或者任何问题,反馈或好的解决方案,请让我知道。我已研究这课题很时间了,所以我很听听的法。

原文:《The 4px baseline grid — the present》  Ethan Wang

欢迎关注译者的公众号:「彩云译设计

用4px网格设计方法,让你的设计还原高达 95%!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

很多人说看过很多设计道理却依然做不好设计,还不如直接看设计案例来的简单粗暴。今天为大家找到一篇实战好文,一个人,3天时...
APP 设计
写这篇文章也是总结了以前刚接触的时候遇到的问题,还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文,...
切图工具
读完这篇文章你将会了解到: 关闭按钮「x」的设计历史 「x」设计的注意事项 关闭按钮设计的最佳案例 「x」图标在应用...
关闭按钮
设计交付对于 UI设计师来说是一项必要的工作流程,设计交付影响着界面的最终实现和各尺寸适配效果。今天就和大家分享一下不同...
APP 适配
以一个 app 改版案例,深入浅出地告诉大家如何适配深色模式,同时给出了正确和错误的示范,相信对于目前流行的深色设计趋势来...
彩云译设计
Axure 制作 toB类项目的 Web端原型比较常见,可以将原型做得非常系统、交互逻辑逼真,适用于大部分测试和演示等场景中。甚至...
axure
一个互联网产品从构思到落地,大致分为以下环节:发现商机 – 市场调研 – 头脑风暴 – 产品策划/功能设计 – 原型绘制 – 交互设...
切图工具
我们很多人都喜欢玩游戏,那么为什么会喜欢?是喜欢游戏中的虚拟奖励么?但是那些奖励又不如实物奖励一样能直接改变你的生活...
动机模型