面向前端的设计规范-文字初探-Part2

1,063 阅读6分钟

没有看过面向前端的设计规范-文字初探-Part1的同学可能没有上下文,我这边简单总结一下之前三点讲的内容:

一、主字号:面向前端的设计规范推荐使用可以被2整除两次的「 16px 」作为主字号;
二、字阶:字号的增长如果符合一条曲线,可以让项目更有一致性,也更让人理解;
三、行高:面向前端的设计规范,建议「 行高 = 字号+8 」;

以上理论均属于推导过程,没有经过实践印证。

四、实践

在经过以上玄学的推导之后。最终的目的还是希望将其应用到我们实际的项目当中。我急忙赶在在我们设计的分享会以及前端的分享会上,去分享了以上纯理论的推导过程。有趣的事情是,两个组的同学反映出的重点完全不一样。

设计的同学,更多给的反馈是在思考我整个的推导过程是否在设计角度具有合理性,比如有的设计师,提出其实行高的增长更应该符合一条递增曲线。

前端的同学,更多的是在整个规范的可行性上有疑惑。他们比较担心很多设计的临界点如果覆盖不了,那这套理论是不是就 run 不起来了。

我本身是一个前端,所以我也有可行性上的顾虑。于是,我拿着我们现有的设计稿,按照我的整个理论,做了一下设计的重构。
image
左边是优化之前右边是重构之后 「 灰色的背景是我写的一个用来显示设计稿的结构sketch插件 」。解释一下我这边重构做的事情,我把所有的行高,高度,间距都用临近的 4 的倍数的值做了替换。可以惊奇的看到,我们从「 3个下间距+3个行高 」 变成了我们 「 1个下间距 + 2个行高 」。可以看到仅仅在这么小的一个模块中我们就可以省掉这么多的变量,这对于前端来说是非常可喜的。

大家可能会觉得这样的修改会不会对于设计稿视觉有特别大的冲击。 下图是我这边去掉结构框之后的视觉对比:
image
可以明显看到,这里影响最大的部分是书封和大标题的间距靠近了「 这里可以找设计师精进一下 」。而其它前端可喜的文字部分,我觉得影响是微乎其微的。

我把我们网站几个主要页面都做了这样的重构,我发现其实对视觉的影响真的比我想象中少很多。而这个恰恰能够证明这个看似玄学的推导其实是有一定可行性的。简单来说,一个对视觉重构冲击很小,但是却能给前端带来很大收益的理论「 面向前端的设计规范 」,是值得在项目中推广的。

五、行高的二次思考

在我重构设计稿的时候,对于间距影响的行高问题,我其实还有另外的发现。

image

上图可以看到,两个完全视觉一样的设计稿,对于设计师来说,把左边的图修改成右边的图就是修改一个行高的事。但是对于前端的同学来说,需要修改「 行高、上间距、下间距、高度 」这四个变量。

好玩儿的事是,即使设计师不给文本设置行高,对于设计来说几乎是没有影响的。简单的来说,sketch 因为没有网页中流的概念,所以行高几乎是不影响单行布局的。然后更好玩儿的点来了,就是前端可以完全不按照设计给的行高去还原设计稿。

既然设计脱离了行高,那么是不是可以让设计直接就采用对于前端有利的行高规范呢?怎么样对前端有利呢?就是前端需要考虑的变量越少,对于前端就越有利。而这又回到了我们之前讲的「 行高 = 字号 + 8 」这个结论。

你想按照这个结论就是 12px 的文字行高就是 20px ,24px 的文字行高就是 32px 了,而这让我们的行高变成了一个常量,在我们网页中高度几乎和行高是一致的,所以我们的高度也变成了常量。回到刚才上一段那个例子,我们修改设计,就从之前要考虑的 4 个变量「 上间距,下间距,行高,高度 」变成了只需要考虑「 上间距和下间距 」这 2 个变量。而这对于前端来说修改的时间就几乎减少了近1倍,而在最初测量的时候也相应的只需要测量上下间距就好,这又节约了时间。

虽然大多数情况设计师是不需要考虑行高的?但是一遇到文本换行的时候,设计师就需要考虑了。之前给设计分享,他们挑战「 行高 = 字号 + 8 」这个结论的点是说,这个结论在某些字号下是好看的,但是并不能覆盖到所有。

那么问题来了,前端希望行高是一个常量,而设计又觉得「 行高 = 字号 + 8 」这个覆盖面不够。那怎么办呢?其实可以看到,我们前端的点是希望行高是一个常量,和是不是符合这个「 行高 = 字号 + 8 」公式本身无关。只是说符合这个公式的行高,一定是一个常量。

那么问题就很好解决了,是不是可以让设计师做到,每个字号都只对应一个行高呢「 至少在同一个字体下 」?而这个行高正好是这个字号下,这边文本换行时最合适的行高。这样我们即让行高是一个常量,又覆盖了所有的字号状况。不管这个文本是单行还是多行,都能即迎合前端又符合设计。

也就说如果设计师给定,12px 的文字最合适的行高是 20px,那么在这个项目中,12px 的文本不管在任何地方都一定是20px「同一个字体下」。

而这是我在二次对于行高的思考之后,给出的面向前端设计规范的建议:在一个项目中,同一个字体在任何一个地方,它的行高和它的字号都应该是一一对应且唯一的。


「github 文章地址」:github.com/ziven27/blo…