“留白很重要” 是设计共识,但留白多少、留在哪里,需要具体标准:
文本行间距:按字体大小 “阶梯式设定”
统一的 1.5 倍行间距不适用于所有场景。正确规则是:字体大小 12-14px 时,行间距设为字体大小的 1.6 倍(如 14px 文字对应 22.4px 行间距);16-18px 文字设为 1.4 倍(16px 文字对应 22.4px 行间距);20px 以上标题文字设为 1.2 倍(24px 标题对应 28.8px 行间距)。这种阶梯式设定能让不同字号的文本都保持舒适的阅读节奏,有助于延长用户阅读时长。
模块间距:“8px 倍数” 原则避免混乱
页面中不同模块(如导航栏与 Banner、产品卡片与标题)的间距,需遵循 “8px 倍数” 规则:小间距(如文字与图标之间)用 8px 或 16px,中等间距(如卡片之间)用 24px 或 32px,大间距(如不同板块之间)用 48px 或 64px。例如导航栏底部与 Banner 顶部的间距设为 32px,Banner 底部与产品区顶部的间距设为 48px,既能区分区域,又不会让页面显得松散,提升视觉统一性。
图片留白:“内留白比外留白更关键”
图片周围留多少白不重要,重要的是图片内部主体与边缘的 “内留白”。例如产品图若主体紧贴边缘,会显得拥挤;需在主体与图片边缘之间留出 10%-15% 的内留白(如 800px×600px 的产品图,主体需放在 720px×540px 的范围内)。这种处理能让图片主体更突出,帮助用户聚焦产品核心信息。