布局的原则：提升设计的九个永恒概念

布局的原则

提升设计的九个永恒概念

当你开始学习设计时，很难判断为什么一个构图不好。你浪费时间拖动东西直到它看起来更好，或者求助于复制。
学习强大布局背后的原则可以帮助你更好地规划，并且在你遇到困难时，可以退后一步，系统地评估需要改变的地方。
就像音乐家学习乐器以更有效地分享他们的愿景，这些想法并不是为了限制你的创造力。相反，它们提供了表达的机会，同时允许你实现设计要求。

如何使用本指南
每个原则都有一个简要概述，后面跟着一个例子。
如果你真的想让你的学习巩固下来，请一次研究一个概念，并尝试用不同的方式将其整合到你自己的布局中。
记住，这些例子只是原则的一个示例。还有无限的变化！把每个例子当作你自己工作的出发点。

焦点

兴趣的中心点
吸引你目光的位置——事物交汇或分散的地方。
“三分法”是一个广为人知的技巧。
常常被介绍给摄影初学者，它涉及将画布分为三个相等的水平或垂直部分，然后将主题放置在这些想象中的网格线上。
你也可以将其应用于布局，将一个清晰的焦点放置在画面的正确三分之一处。

空白

就像音乐需要动态（强和弱），布局也需要空白。“空白”意味着视觉休息的安静区域，给其他元素留下呼吸的空间。

空白不必完全为空。照片填满了整个背景，但海洋和天空的安静区域抵消了悬崖和树木。
布局利用了照片所提供的清晰空间，在这里放置导航和标题，并在它们周围留有空白，即与悬崖保持一定距离。

![[Pasted image 20250420173241.png]]

层级结构
优先考虑最重要的元素。
这有助于引导读者并带领他们前行。
标题通常比正文更突出。图像可以根据你的意图成为焦点或融入背景。
作为这是一篇摄影随笔，戏剧性的画面最为突出。
标题比署名、正文和说明文字显著突出。
![[Pasted image 20250420173334.png]]

分组
不是均匀地间隔元素，而是将属于一起的东西聚集在一起。
这有助于读者理解信息。
海报有一个突出的标题——艺术家名字。实用信息集中在底部，然后进一步分为两组：右侧的售票信息，左侧的“时间和地点”。

规模
使用大的尺寸对比来增加戏剧性。
尝试使用巨大的标题、小的说明文字，或者全幅图像与很多空白的布局相邻。

点大小的戏剧性差异产生了戏剧效果。这既在视觉上令人愉悦，又在用户浏览这个网站时吸引他们的注意。
这引出了我们的下一个原则……

序列

视频编辑器理解序列的力量。
网页设计师应该类似地考虑用户在页面上滚动。面板不应被视为孤立的，而应作为一个序列的一部分，从而创造出一种电影般的体验。
翻阅一本设计精美的咖啡桌书籍产生的效果类似，因为在翻阅时布局“移动”。

对齐

垂直轴线要谨慎处理。
也要注意水平基线。
网页上的响应式布局是一个挑战，每个屏幕尺寸都应该得到妥善处理并仔细检查。看似随机的对齐显得不够专业。

类型为左对齐，沿左侧轴线对齐。
列通过细黑垂直线进行强调。
同时也注意了垂直对齐，作者姓名与列底部对齐，强调水平布局。

平衡

对称性通常被采用，因为它是最容易实现平衡的方法。居中对齐适用于某些格式，并且可以用于非常短的文章部分。
然而，左对齐应该是默认的。它更容易阅读，并且在图形上更可取，因为只有一边有参差不齐。
非对称布局更灵活，通常看起来更优雅。只需使用平衡元素来分配视觉“重量”。
![[Pasted image 20250420174906.png]]
这篇摄影集的构图比所有图片大小相同的照片更具有视觉趣味性。它被精心安排以达到平衡。
右页的模特正在观察布局，并且被放置在画框稍偏右的位置。
她的目光朝向左页顶部的图片。左下角的图片通过增加这个区域的视觉重量，平衡了整个跨页的构图。
这个布局是使用我们的最终原则创建的…

Grids 网格

掌握网格的命令可以让你实现上述所有功能。
对于希望制作有效布局的设计师来说，这是最有用的工具。结构产生秩序并传达信心。

打印（或“固定”布局）允许设计师以标准化的方式设置边距并使用行，这在响应式设计中很难实现。
如果整页都在视野中，底部边距应大于顶部。当这些边距高度相同时，看起来布局就像是从页面上掉下来一样。

一旦你熟悉了这些原则，你会在各个地方看到它们。通过分析摄影、艺术品、建筑以及平面设计来训练你的眼睛，思考布局对你产生的影响。
成为布局大师需要指导和多年的经验，但希望这里的一些建议能帮助你建立信心，并开始更快地工作。
随着你不断进步，请确保你做出的决策是有意的，而不是随意的。
如果您喜欢这个免费资源，请告诉我们！