文章 · 前端工程

栅格排布:让信息密度翻倍而不显乱

信息密度和可读性并不冲突,冲突的是「没有节奏的密度」。栅格排布要解决的就是这件事:让更多内容进来,同时让眼睛知道该往哪看。

先定基线,再排内容

所有行高、间距、内边距都取同一个基数的倍数,排出来的东西自然对齐。这比逐个调间距可靠得多。

用留白分组,而不是用线

分隔线是最省事的做法,也是最容易让界面变吵的做法。把间距拉开一档,视觉上的分组效果一样,界面却干净得多。

让密度有层次

同一屏里不要所有区块都塞满。一个区块密、相邻的松,眼睛才有呼吸的地方。密度的对比本身就是一种层级。

密度不是塞进去多少,是留下来的有多少能被看见。

评论6

访客

登录后参与评论,你的发言会署上自己的名字。

  • 陈默

    陈默作者@chenmo2026-09-19

    先占个位:文里的数字都是本地实测的,测试环境写在文末备注里,有疑问直接在这儿回。

  • 何知白

    何知白@hezhibai2026-09-20

    中文按需加载这块终于有人把量化的过程写出来了,之前看到的都只给结论。

  • 苏晚

    苏晚@suwan_dev2026-09-21

    我们也是这么做的,唯一想补充的是切片之后记得把字体文件放到带长缓存的路径上。

  • 顾青

    顾青@guqing2026-09-22

    对,缓存头配错的话每次访问都会重下,前面省下的全还回去了。

  • 郑一鸣

    郑一鸣@yiming2026-09-22

    想问下这种切片方案在字体版本升级的时候怎么处理?全部重下还是只换变化的分片?

  • 吴桐

    吴桐@wutong2026-09-23

    行高和字距那一段说得很实在,中文确实不能照搬西文那套参数。