网站设计里的间距：留白不是空白，是设计工具

很多企业评判网站好坏，习惯聚焦图片质量、配色风格、动画特效，却常常忽略看不见的间距与留白。在大量模板建站项目当中，经常出现这样的现象：图片素材、文案内容全部到位，但整个页面看起来拥挤杂乱，廉价感很强；反观宁德时代、固德威、京东方这类由上海雍熙定制的 B 端高端官网，没有堆砌繁复装饰，仅仅依靠合理的间距规划，就呈现出专业、通透的品牌质感。

大多数人对留白存在认知误解，把留白等同于 “空白”，认为留白就是页面空出来的多余区域，甚至觉得留白浪费屏幕展示空间，恨不得把每一寸页面都填满图文。但在网页设计的专业逻辑里，留白（负空间）是一套主动规划的设计工具，它可以划分信息层级、引导用户视线、降低阅读认知负担，是拉开高端定制网站和模板网站差距的关键细节。留白不一定是白色，深色背景下没有元素的深色区域同样属于留白。本文结合上海雍熙服务上百家 B 端企业官网的实战经验，拆解留白间距的真实价值、分类用法、常见误区，以及 PC 与移动端的落地思路。

一、重新理解留白：它不是闲置空白，是页面的隐形骨架

1.1 留白间距承担的四大核心作用

第一，划分信息边界，建立清晰的视觉层级。页面里的标题、正文、图片、卡片、业务模块，依靠间距区分彼此的从属关系。同一个模块内部元素间距更小，不同大模块之间间距放大，用户不需要分割线，仅凭空间距离，就可以分辨哪些内容属于一组，哪些内容相互独立。如果模块和模块紧紧贴在一起，所有内容混成一团，用户就很难读懂页面逻辑。雍熙在正泰电器、西门子 APT 产品列表页面，就依靠统一的卡片内外间距，让海量产品有序排布，工程师浏览选型时可以快速区分每一款产品信息。

第二，引导视线流动，制造视觉焦点。有一条基础设计规律：元素周边留白越大，就越容易抓住用户目光。想要突出首屏主视觉、核心 CTA 按钮、重点产品，就给它预留更多周边空间；次要辅助信息则适度收窄留白。固德威官网部分板块采用一侧图文密集、一侧大面积留白的布局，利用疏密对比，自然把用户视线牵引到产品和核心文案上，不需要依靠花哨特效就完成重点强化。

第三，降低认知负荷，缓解视觉疲劳。B 端官网访客大多是采购、工程师，经常需要阅读大段参数、方案文字。如果行间距、段落间距压缩过小，文字密密麻麻堆砌在一起，会大幅增加大脑阅读负担，很容易产生疲惫感进而离开页面。合理的留白相当于给眼睛留出呼吸的空间，提升长页面的阅读舒适度，减少页面跳出率。

第四，塑造品牌气质。留白直接影响网站传递出来的品牌感受。新能源、科技类企业，适度宽松留白，传递理性、简约、现代的气质；装备制造企业可以采用中等密度的间距，兼顾信息容量与专业感；过度拥挤会显得粗糙廉价，无节制的超大留白又会显得空洞单薄。雍熙为科大讯飞、地平线做官网设计时，就是以克制有度的留白，塑造科技企业可信稳重的品牌形象。

1.2 网页留白的三种主要类型

在实际项目当中，留白间距可以分为三大类，不同类型承担不同作用，需要分开管控，不能一概而论。

板块外留白，也就是大模块之间的垂直间距。用于分割首页各个业务板块，比如首屏和产品板块、产品板块和案例板块之间的距离。它负责切割页面的大叙事段落，桌面端 B 端官网，大模块之间需要预留充足空间，避免不同业务内容粘连在一起。

卡片与模块内留白，即内边距。是卡片、内容容器内部，文字图片距离边框的距离。很多廉价模板的通病就是内容紧贴卡片边框，没有内边距，视觉上压抑局促。产品卡片、资讯卡片，都需要预留内部留白，让内容和容器边缘拉开距离，提升精致感。

文字类留白，包含行间距、标题与正文的段间距、段落之间距离。很多网站只关注字号大小，忽略行高和段距。正文行高过紧，密密麻麻；标题和下面的正文贴在一起，用户分不清标题和正文的从属关系，阅读体验大打折扣。

二、B 端官网留白设计高频误区

2.1 填满主义：拒绝 “浪费” 空间，页面全部塞满内容

这是传统企业网站最普遍的误区。企业希望尽可能多展示信息，害怕留白会损失曝光机会，于是压缩全部间距，图片挨着图片，段落贴着段落，模块之间几乎没有空隙。页面信息密度过载，所有元素抢夺用户注意力，没有重点，访客浏览页面充满压迫感。要明白，用户并不会因为页面塞得满就接收更多信息，反而会因为视觉混乱快速关闭页面。

2.2 极端极简：把留白多等同于高级，盲目放大间距

与填满主义相反，部分设计师陷入另一个极端，误以为留白越大网站就越高档，无节制放大模块间距，少量内容被巨大空白隔开。页面变得零散破碎，用户需要不停滚动屏幕，有效信息占比过低，浏览效率下降。高端不等于空洞，留白是衬托内容，而不是把内容淹没在无尽空白当中。新能源品牌首屏可以使用大留白，但是产品列表、新闻详情这类内容页，就需要控制留白尺度，平衡信息密度与呼吸感。

2.3 间距规范混乱，全站尺度随心所欲

同一个网站，有的模块间距很大，有的模块挤成一团；有的卡片内边距充足，有的卡片内容紧贴边框；标题和正文之间距离忽大忽小。没有一套统一的间距规范，每一块区域凭感觉设置，页面整体观感杂乱。雍熙的定制项目会建立全站统一的间距体系，区分大模块、卡片内部、文字段落的基准尺度，保证全站视觉一致性，这也是模板网站很难做到的细节。

2.4 PC 端间距直接照搬移动端，适配出现严重问题

很多响应式网站，直接把桌面端间距原封不动搬到手机端。桌面屏幕宽大适合的大间距，放到手机狭小屏幕，会造成少量内容占据大量屏幕，有效信息被过度稀释；反过来，直接把移动端页面所有间距全部压缩删除，又会造成手机页面拥挤不堪。移动端需要独立调整间距数值，不能直接复用 PC 端的留白参数，既不能全部砍掉留白，也不能完全沿用桌面的大间距。

三、B 端官网留白间距实战落地思路

3.1 区分页面类型，灵活控制疏密节奏

不存在一套适用于所有页面的留白标准，要根据页面的定位调整疏密节奏。

首页作为品牌叙事页面，可以适度放大板块之间留白，利用疏密对比突出首屏、核心产品、转化区域，打造流畅的浏览节奏，宁德时代官网首页就通过大模块留白，分割 3D 场景、解决方案、全球布局各个板块，海量信息却不显拥挤。

产品列表页、案例列表页，需要展示大量卡片，留白不宜过度宽松。板块之间保持合理距离，卡片内部保证基础内边距，卡片与卡片之间间距均匀，兼顾可读性与信息展示数量，正泰电器电气产品列表就采用这种平衡思路。

产品详情、资讯新闻这类文字密集页面，重点优化文字层面留白，调整行高、段落间距，板块之间间距适度收紧，保证用户高效阅读大量文字内容，不需要无休止滚动页面。

3.2 重点区域优先分配留白资源

留白是一种视觉资源，资源要向核心内容倾斜。首屏主视觉、核心转化按钮、重要产品介绍板块，分配更多留白，让它们自动成为页面视觉重心；次要的辅助信息、底部次要标签，留白可以适度收窄。不要出现次要装饰图片四周留巨大空白，核心业务板块却挤在一起的主次颠倒情况。

3.3 移动端的留白处理原则

移动端屏幕空间宝贵，间距需要按比例缩小，但绝不可以直接删除留白。页面左右必须保留基础安全边距，内容不能顶到手机屏幕边缘；卡片内边距、行间距要保留，不能为了塞更多内容全部压缩。桌面端超大的板块间距，在移动端适度收窄，避免单屏有效信息过少。雍熙在京东方、科大讯飞的移动端官网项目中，不会简单压缩 PC 页面，会单独调整移动端留白尺度，保障手机端的阅读舒适度。

写在最后

很多企业做网站，把大量预算投入图片拍摄、3D 渲染、交互动画，却忽视间距留白这类看不见的细节。留白不是简单的 “空出来的地方”，它是一套隐形的设计工具，用来划分层级、引导视线、减轻阅读压力，直接决定网站的高级感和用户体验。

用好留白的核心，不是一味追求更大或者更小，而是追求疏密有度。该宽松的地方留出呼吸空间，该紧凑的地方控制密度，建立全站统一的间距规范，并且针对移动端做独立适配。摆脱 “填满就是充分利用页面” 的旧思维，才能让网站内容被用户轻松接收，真正发挥官网的品牌与商业价值。