术语图鉴/UI/UX 设计/留白
←→切换Esc返回

留白 Whitespace / Padding / Margin

你可能会说

页面太挤了,帮我给各个区块之间留点呼吸空间。

元素之间的「呼吸空间」。

元素之间的「呼吸空间」。适当的留白让页面不拥挤、层次分明、重点突出。不是浪费空间,是设计手段。

也常被叫作Whitespace / Padding / Margin

生活类比

像文章的分段——如果所有字挤成一坨,你根本不想读。段落间距就是文字的「留白」。

🎮 动手试试

间距:16px
标题文字
这是一段正文内容
另一段正文内容

😊 间距适中,阅读舒适

选择题选择一个你认为最合适的答案

关于「留白」,以下哪个描述最准确?

你可以这样告诉 AI

帮我调一下这个页面各区块的间距,现在太挤了,卡片之间、段落之间、标题和正文之间都加点呼吸空间。

容易混淆?这样区分

留白 Whitespace / Padding / Margin≠
UI UI

留白是一种具体的设计手法(用空间创造层次),UI 是设计的整体对象(整个界面)。

什么时候用

页面拥挤需要呼吸

当元素挤在一起、信息密度过高时,增加 padding 和 margin 来创造视觉呼吸感,让每个内容区块都能被独立注意到。

和 AI 协作时

想让 AI 调整间距时,直接说「给卡片之间加 16px 间距、段落行高调到 1.6」,AI 能精确调整留白数值。

什么时候不用

信息密度优先场景

数据看板、监控大屏等需要在一屏内展示大量信息时,过多留白会浪费空间、降低信息获取效率。

与纯数据报表无关

如果做的是数据导出表格或 CSV 文件生成,没有视觉呈现需求,留白概念完全不适用。

组成结构 · Anatomy

1
核心概念Core

元素之间的「呼吸空间」。适当的留白让页面不拥挤、层次分明、重点突出。不是浪费空间,是设计手段。

2
实际表现In Practice

像文章的分段——如果所有字挤成一坨,你根本不想读。段落间距就是文字的「留白」。

3
与 AI 的关联AI Context

和 AI 沟通时提到「太挤了」「加点间距」,调的就是留白。

典型使用场景

调整页面间距
告诉 AI「这个列表页信息全挤在一起,帮我给每个卡片加 16px 间距,段落行高调到 1.6」
想弄懂概念时
告诉 AI「用大白话给我解释什么是留白,举个生活中的例子」

延伸阅读