网站布局设计是平衡美学与实用性。该网站绝对应该看起来不错，但更重要的是，它应该给用户什么，他们来尽可能高效。用户对困难的网页几乎没有耐心，这就是为什么最高反弹率发生在访问网站的前十秒内。诚然，一个好的网站布局不会总是使访问者留下来（特别是如果内容不尽如人意），但你肯定不希望这是他们离开的原因。

为了确保您获得一个网站，您的访问者不会反弹，我们已整理了本指南的基本网站布局设计。我们将阐述好设计应该完成的基础知识、有效网站布局的关键技术和最常见的网站布局类型。

网站布局的目标

简单，虽然听起来简单，网站布局的唯一目标是支持网站的目标，无论是转换，品牌知名度，娱乐或其他目标。但是，网站的目标通过内容来表达，布局设计描述了如何有效地提供这些内容。有句，以下是网站布局可以服务的一些常见功能：

信息显示：良好的网站布局组织信息，使其以明显的顺序结合在一起，易于扫描，赋予最重要的元素重量，使用户的工具直观地查找和使用。

用户参与度：良好的网站布局使页面在视觉上引人入胜，引导用户的眼睛走向兴趣点，并鼓励他们继续浏览网站。

品牌：良好的网站布局在品牌化方面也起着一定的作用，使用与公司品牌相一致的间距、对齐和规模。

这些高级目标是什么驱动网站布局设计，但在我们查看特定的网站布局之前，让我们讨论如何更详细地实现这些目标。

网站布局设计过程

绘制网站布局的过程应该发生在创建网站的早期阶段，即在您建立网站策略之后的某个时间，但在您跳入图形程序创建界面之前。

网站布局通过线框可视化，这是一个基本的骨骼图，显示内容如何配合在一起。将线框与网页设计区分开来非常重要，这是为网页创建前端图形和其他视觉效果的全过程。网站布局设计是网页设计的重要组成部分，它从线框开始。理想情况下，视觉设计应遵循线框布局，以便图形元素具有战略定位，而不是短暂的美学偏好。

1. 识别所有内容区域。线框通常代表具有简单正方形和矩形的内容，无论是图像还是文本块。重要的是要提前知道您有多少内容，并以每件作品的大致大小（或字数计数），以便您可以将元素与准确性结合在一起。
2. 创建一系列线框和原型。布局可以像笔和纸绘图一样简单，但也有许多程序（如Whimsical）致力于简化流程。因为线框不是详细的艺术作品，你可以一次制作出几个。即使你爱上了你的第一个想法，你应该设计更多的线框来扩展你的想象力，给自己选择。没有花哨的图形来分散你的注意力，你可以自由地专注于用户的体验，并探索哪种安排将是他们最直观的。请务必考虑所有屏幕大小——建议您从移动设备的布局开始，从那里向上构建。
3. 测试、收集反馈和重复。一旦您有一些选择，请确保从同事那里收集反馈。像Invision和Figma这样的应用程序允许您创建交互式原型，因此您可以轻松测试按钮和导航，而无需构建实际的网页。让试用用户在浏览原型时自行进行屏幕记录，可以显示 UX 的绊脚石。一旦你有一些笔记，回到第二步，并重复，直到它是完美的。

虽然这些是创建网站布局的字面步骤，但很难知道是什么使布局有效或不有效，当你刚刚起步。在下一节中，我们将讨论您可以用来指导设计决策的特定技术。

有效网站布局的关键技术

网站布局设计是一个几十年的做法，这意味着多年来已经建立了一些设计惯例和原则，以指导设计师在他们的工艺。以下是这些技术中最有帮助的一些：

视觉层次结构

视觉层次结构是一种设计六种设计元素以增强对比度的方法，以便强调选择的内容件高于其他内容。为此，布局中最重要的部分是用户需要根据页面目标立即识别的部分。这些通常包括头条新闻、价值主张、行动号召和导航等用户工具。

视觉层次结构可以以多种方式表现，如字体选择（大小、重量甚至不同的字体配对）、将页面上较高的重要元素对齐或使用互补颜色使元素脱颖而出。

阅读模式

阅读模式描述了用户扫描页面的最常见方式，并以定向线（矢量，数学书）进行描述。由于研究表明，79% 的网站访问者只浏览过页面，因此必须尽可能轻松地进行扫描。设计您的布局与特定的阅读模式是一个有效的方法做到这一点。

将阅读模式融入您的布局涉及战略性地将元素沿观众的视线放置。最常见的模式是 Z 模式（曲折矢量;可用于图像重的布局）和 F 模式（逐行矢量;可用于文本重的布局）。

查看本指南，了解在网页设计中使用阅读模式>>

折叠上方或下方

在 Web 设计中，"折叠"是由于屏幕大小限制而切断网页的行。当页面加载时可见的内容据说是"折叠上方"，并且内容要求用户向下滚动以显示它，据说是"折叠下面"。

在网站布局设计方面，最重要的和/或有说服力的内容（如价值主张和 CTA）应安全地放置在折叠上方，以便用户不必去寻找它。这个空间估计在1000×600px的大多数屏幕尺寸。说完，设计师还可以使用折叠来切断有趣的图形和复制，以鼓励用户向下滚动，继续他们与网页的互动。

网格系统

网格系统是基于刚性测量和指南的布局。网格由列（指定内容放置空间）和排水沟（列之间的空格）组成。

虽然网格系统起源于印刷杂志和报纸，但在面对大量内容时，它们无处不在的数学顺序和一致性在网页设计中无处不在。同时，设计人员还需要警惕网格设计的单调性，并且必须利用这些限制在网格内创建意外的安排。

查看网格设计的历史和资源指南>>

空白空间

空白空间，有时称为负空间，只是设计中没有任何内容的区域，即空空间。虽然很容易被忽视，而且往往容易填满内容，但空白空间可能是网站布局中最重要的资产。

考虑在否则空荡荡的页面上，一行文本比在内容杂乱无章的页面上更有效地吸引你的眼睛。充足的空白创造了重点，同时使整个作文感觉不那么令人生畏的阅读。与印刷页面不同，网页的使用时间没有限制，这让设计师可以更自由地在空白下具有战略性和慷慨。

作者：Jamahl Johnson