首页 > 网页制作 > 心得技巧

垂直栅格和渐进式行距应用举例

admin 心得技巧 2022-02-06 22:59:19 垂直栅格   渐进式行距"

新问题

来也匆匆,去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布,已经不知不觉过去了两个多月了。反过来,看看上次的成果。诶?怎么感觉边注有点奇怪呢?


(demo-6.html)

还是参考我的这篇 关于排版的文章 :我们知道

  • 中文互联网上最常用的行距是1.5左右
  • 行长越长,需要的越大的行距. (行距太小,读者阅读换行时容易串行. 行距太大,读者阅读行时会感觉到文字不连续.)

看来,对于边注的12px字体大小的,24px的行高显然过大了。但是,根据上一篇文章的方法,垂直韵律需要边注的行距和正文的行距应当一致。那么为了保持 垂直韵律,我们只能同时减少左右两边的行距——总结:不靠谱。那么,我们该如何调整边注行距,却又能够让我们建立的垂直韵律生效呢?这就需要我们引入渐进式行距

渐进式行距

总得说来,渐进式行距是对死板的垂直韵律的一个补充。垂直韵律是要求边注和正文的每一行都对 齐。相比之下,渐进式行距让边注和正文也对齐——但不是每一行——而是每几行对齐一次。一般是每4行或者每5行对齐一次。我们回顾一下上一篇文章,知道, 本文开始的那张例子,“配置”如下:

  • 正文:字体大小14px,行距24px,段后距24px
  • h1:字体大小24px,行距24px,段前距24px,段后距24px
  • h2:字体大小:18px,行距24px,段前距12px,段后距12px
  • 边注正文:字体大小12px,行距24px,段后距24px
  • 边注边框:边框粗1px,内补白11px——别忘了还要把它上移12px

我们修改边注的行距和段后距都为18px。那么情况就会像这样:


(demo-9.html)

不知道各位看官发现了没有,为什么第一行基线没对齐呢?这是因为流布局会将文字块按照行高做顶端对齐。如下图:

所以,在这里,为了使首行基线对齐,我们还要将边注下降一定的像素。可恨的是,需要下降的像素是多少——这个很复杂的问题,至少经过不才好几次的尝试都没有看出个规律来,而只得出以下三个结论:

  • 设正文行高是h px,边注行高是h’ px,需要下降的值为d px,那么,这个值将介于 1/2(h-h’) < d < (h-h’) . ①
  • 如果该行引入了西文字符(半角数字或者字母),该行的基线有时会比没有西文字符偏移一个像素。
  • 不同的字体渲染引擎可能行为不一致。

这个结论并不能有成型的公式来确定需要下降的具体像素值。那么,我们就根据结论①一个一个像素试验吧(3 < d < 6),反正不会太多。在本例中经试验可得,下降4px是能够让首行对齐的。对齐后,各位可以看到正文每隔4行,边注每隔5行,他们的基线会对齐一次。


(demo-10.html)

很有趣,是吧?

垂直栅格与渐进式行距应用举例

这套理论看起来略显枯燥。所以,我还是得举个应用的例子,不然理论对于现在来说没有任何意义。前几天,我遇到了一个问题是这样的:有一个系统,它能够用像 iGoogle那样的模块迅速搭建一个页面用于淘宝的各个子页面。但是,用模块搭建却常常遇到开天窗的问题,就像下面这样:

再看看模块本身,文字基线均未对齐,行距七零八落:

好, 现在,我们开始开刀。首先,我们用6px的红色网格线,画好标尺。为什么用6px呢?我们在前面的例子中,正文行距是24px,边注行距是18px,那么 他们的最大公约数就是6px. 也就是说,如果我们画好以6px为单位的横线族,那么,每3条横线就是一个18px单位,每4条横线就是一个24px单位。



画上线后,工作简单啦!利用18px和24px这两种行距,将文字的基线都挪到红色网格线上。

去掉网格看看吧:

回顾一下优化前的样子:

全部使用了18px或者24px的行距。其中,将右边模块的资讯条数由8条缩减为5条。甚至,我们可以继续发现,应用了垂直韵律之后,垂直的行数可以做自由得调整,而两个模块的高度可以保持高度一致。例如我们缩减了行数:

应用了垂直韵律之后,既美观又灵活,何乐不为呢?哇咔咔~

最后

当然,垂直韵律和渐进式行距还有很多应用的方法。总之,作为设计师,特别是网页设计师/交互设计师,我们不应当单纯地凭借感觉,应当专注到像素级别,严谨设计。
“严谨”一词,永远受用。送给我和大家。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/xinde/79753.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持