一、版心是什么

如果只用一句话来说明，版心就是“页面真正用来承载内容的那块心脏区域”。你怎么划这块“心”，基本就决定了整页是紧张还是松弛，是高级还是土气，是偏理性还是偏情绪。很多设计师刚开始学排版时，注意力自然会落在“字用多大”“图片放哪儿”“按钮居中不居中”这种局部问题上，但真正成熟的排版往往从另一端切入：先决定这一页的“心脏”长成什么形状、占据多大面积、处在什么位置，然后才谈字距、行距、图片比例这些细节。因为一旦版心被确定下来，所有元素都必须在这块区域内安家落户，整页的气质其实已经先被定了一半。

在传统书籍设计中，版心有非常具体的定义：在一张纸的四个边距之内，那块真正用来放正文、标题、图片的矩形区域，就是版心。纸张的外轮廓是裁切尺寸，往里的一圈空白是页边距，再往里那块承载内容的区域，就是整页的“活动舞台”。

你可以把一页纸想象成一个人：纸张尺寸是外轮廓，页边距好比衣服和周围的空气，而版心就是躯干，标题、正文、插图、页码这些“器官”都必须安稳地待在里面。理解到这一层，你就很难再把版心仅仅当成“软件里边距参数”的设定，而会把它视作页面气质的发源地——是一块“性格被具体化”的矩形。

二、从纸张到屏幕

很多设计师会有一个错觉，觉得“版心”听起来是印刷书籍领域的术语，做网页、做 App 好像用不太上。实际上，如果你稍微换一个视角，很快就会发现，数字界面里只是换了一种叫法，本质仍然是在定义“内容出现在哪一块区域”。

在网页上，人们习惯把主要内容约束在一个居中的宽度里，1200 像素也好，960 像素也好，这块居中的内容区与浏览器左右两侧的留白区之间，实际上就是对“版心”的一次定义。移动 App 也是类似的思路：屏幕上有状态栏、有底部手势区域、有圆角屏幕的内缩区域，设计系统里通常会先划出一个 safe area，在此基础上再往里收一圈左右内边距，真正放列表项、卡片、图文模块的区域，其实就是数字版的版心。

图片来源

甚至在某些登录页、活动落地页或者品牌故事页中，你会看到设计师刻意把文字和主视觉集中在屏幕中间一块偏窄的矩形区域里，其余地方仅用大面积色块或背景纹理铺满，这个居中的矩形，就是那一页的版心在屏幕语境下的体现。

纸张时代的版心强调固定尺寸和几何比例，屏幕时代的版心则要同时考虑响应式布局、不同设备宽度和滚动行为。但无论载体如何变化，背后的逻辑没有变：始终有一块区域，是页面所有重要元素约定俗成的“活动边界”；你先把这块区域想清楚，再来讨论图层、组件和对齐，页面才会稳得住。

三、概念边界

3.1 页边距：版心和纸边之间的空气

页边距指的是版心外面那一圈空白，它处理的是内容区域和纸张边缘之间的“呼吸空间”。从视觉上看，页边距越宽，版心就越像是被“托”在中间的一块画面，阅读时会觉得更安静、更克制；页边距越窄，版心越接近纸边，整体感觉就越直接、越“冲”向边缘。

3.2 出血：印刷裁切时的安全缓冲

出血则是印刷裁切时的安全冗余，它不是在纸内，而是在裁切线之外再多加的一圈画面。设计时把背景色或者图片稍微延伸出裁切边缘，这样裁刀哪怕略微偏一点，也不会露出白边。出血关心的是“东西别被裁没了”，更多属于生产工艺层面的考虑，而不是排版气质的主要来源。

如图红色区域即为出血（bleeds）区域

3.3 安全区：屏幕上的硬件“禁区”

安全区（safe area）则更常见于屏幕设计，它用来避开刘海、状态栏、底部手势条或者折叠屏的屏幕缝，保证重要信息不会被硬件遮挡。你可以把它想象成设备强行划出去的一块“禁区”：内容不能进入这里，否则再好的排版也会被遮挡打断。

iPhoneX的安全区因受刘海屏及取消home键的影响与传统机型略显不同

3.4 三者与版心的关系

如果用一个画面来概括这几者的关系，可以把它们想象成三个同心结构：最外层是与印刷和硬件安全相关的出血、安全区，它们解决“生存问题”，保证画面不被裁坏、不被挡住；往里一层是页边距，它决定整页还能不能顺畅地呼吸；再往里那块真正承载内容的矩形，就是版心，它解决的是“内容究竟出现在哪个范围里”和“秩序从哪里开始”的问题。分清楚这几个概念，你在讨论“调边距”“扩大版心”“调整安全区”时，才不会把不同层级的设计决策混在一起。