返回知识库

产品与设计 · 视觉基础

留白Whitespace

留白是主动用空白区隔分组、引导视线、给重要内容呼吸感的设计对象,不是「没东西填」的空。

长文阅读页:让内容重新呼吸

先读这篇真实文章,再把拥挤版放开;标题、图片、正文和收藏入口会在同一对象上建立清楚停顿。

真实物件:一篇户外杂志的手机与网页长文。默认标题、导语、图片、正文和收藏入口全挤在一起,阅读没有停顿。

! 内容粘成一团
SLOW JOURNAL / FIELD NOTE 04阅读约 6 分钟
山径 · 清晨 · 徒步笔记

穿过雾岭,
把脚步还给自己

从最后一班巴士下车,松针的气味替代了城市的提示音。

海拔 1,420m · 阴转晴
图片与导语粘连,视线没有停顿

清晨的路从一片松林开始。雾气把远处收起来,只留下鞋底踩过碎石的声响。转过第三道弯,光从树冠之间落下,路标终于显出颜色。

“留一段空白,读者才知道上一段已经结束,下一段值得开始。”
所有内容连续挤压,焦点不明收藏这篇 ↗

失败状态:内容本身完整,但标题、图片、段落和行动挤成连续信息墙;用户会跳读或直接离开。

从阅读页里读出的三条原则

留白是有任务的空白:它分组、引导视线,也衬托焦点。

  • 组间大于组内:段内行距保持连续,标题、图片和正文之间才需要更大的停顿。
  • 焦点周围给呼吸:收藏或下一步入口不必更艳,周围安静就能被找到。
  • 留白不是越多越好:过密会粘连,过空会切断关系,都要用真实内容和视口验收。

什么时候专门调留白

当页面像一堵信息墙、主操作被邻居淹没或段落边界难分时使用;高密度数据工作台需先保证一屏可比较的信息量。

适合

阅读文章、邀请函、产品说明、首屏、卡片和结账页等需要停顿与焦点的界面。

需要克制

表格、监控面板和紧凑列表不能一味放大空白,否则可比较信息被迫滚出屏幕。

怎么从内容安排留白

先分组,再设置节奏,最后在真实视口里看焦点。

  1. 把内容按同一任务分组,先确定哪些元素必须被连续读完。
  2. 组内使用较小一致间距,组间提高一档;只给关键行动额外呼吸。
  3. 带入最长标题、错误提示和小屏,检查有没有粘连、空站或首屏行动消失。

同一阅读页:正例与反例

目标相同,只改变空白是否服务分组与焦点。

正例 · 空白服务阅读节奏

段内保持紧凑,标题、图片、正文和收藏入口之间留出更大的停顿。

结果:内容仍完整,但分组、节奏与焦点都更清楚。
反例 · 把“越空越高级”当目标

段落内部也被拉散,图片与正文隔得像两篇文章,手机上一屏几乎没有内容。

后果:留白切断关系,阅读变成空站。

快速自测

结账页的金额总计和“确认支付”按钮该怎样安排留白?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。