：
​ 平面设计是使用形式和颜色传达信息的艺术，但这可没有听起来这么容易。设计是一个反复试验的过程，通常需要反复迭代才能清晰表达出自想说的内容。尽管我们更倾向于把这一过程看作是一种本能，但一个有丰富经验的设计师会有一套不断扩展的设计框架来指导他完成最终的作品。

​ 我们现在来讲整个设计框架中的第一项：构图。在下面，我将会用一个简单的矩形来演示三种简单的构图变化：位置，大小，旋转。以此来达到不同的表达效果。虽然这看起来很基础，但是这些关系是大多数成功设计的关键要素。同时这也是一个介绍视觉传达的好方法。

位置

​ 大多数书面语言都有习惯的阅读方向。西方大多数的国家，字符都是水平排列，我们从左到右，从上到下阅读。这告诉我们，设计中的图形位置能够引导用户的视线。

按照习惯性的阅读方向，这是开头。

按照习惯性的阅读方向，这是结尾。

​ 在瑞士汽车俱乐部的这些海报中，约瑟夫·穆勒·布罗克曼（JosephMüller-Brockmann）使用位置（和尺寸）确定了不同些形状的优先级。

​ 在第一个海报中，构图的张力让人觉得左边的摩托车就要撞上孩子。在第二张海报中，自行车上挥手的人让人以为是画面的主体，实际上恰恰相反。

Joseph Müller-Brockmann ©

在p5中，我们使用rect()函数来绘制矩形，传递给此函数的前两个数字确定了矩形在画布中的位置。如果这些数字均为零，那么矩形就会显示在左上角，较大的值会使矩形出现在画布的右侧(x)和底部(y)。这使得代码中定位形状变得容易，大部分图形编程语言都以这种方式工作。

rect(0, 0, 100, 100);
rect(300, 200, 100, 100);

反复输入随机的数字来调整形状的位置不如用一些基础的数学运算计算出形状的位置。这会使你的画布与图形建立联系，并且会使设计作品的缩放变得更加容易。请看下面的例子。

​ 我们可以使用处于画布中的一个精确的位置坐标来画出这个矩形。但是一旦我们改变了画布的大小，矩形就不再出现在我们想要的位置。我们需要改变矩形x 和y坐标使矩形重新出现在正确的位置。

​ 但是下面的代码就修复了这个问题，其中width和height变量用于动态计算矩形的位置。为了计算x的值，我们从画布右边缘（width）开始，然后减去矩形（100）的大小，最后减去画布边缘和矩形（25）之间我们想要的间隙。该y位置使用相同的公式。

rect(width - 100 - 25, height - 100 - 25, 100, 100);

大小

​ 通过增加重要形状的大小并减小次要形状的大小，可以使设计更加清晰。从交通标志到文章标题，我们每天都会遇到这种设计模式。

这个正方形占据了主导地位，因为它占据了大部分画布。

这个正方形的统治地位比较低，应为其周围有较大的空白空间。

1959年的“Think small”广告就是一个很好的例子，说明了如何使用大小来强调文本。在这一系列广告中，大众甲壳虫的图像以不同尺寸打印在原本为空的画布上。

“Think small”海报©

传递给rect()函数的第三个和第四个数字定义了矩形的宽度和高度。和位置一样，根据画布大小动态显示矩形的大小可能非常有用。在上面的示例的基础上，以下代码显示了真正的动态设计，其中用于尺寸和间距的静态数字已由计算代替。现在，矩形的位置和大小都会随着画布自动缩放。

rect(width - (height/3) - (width/20), height - (height/3) - (width/20), height/3, height/3);

但是，上面个的代码变得非常难阅读。如果需要改变矩形的位置，则需要花一些时间从代码中解析出每一部分的含义。要解决此问题，在代码顶部用变量来储存这些数字通常会很有帮助。这使得代码更具可读性，后续代码的更改也变得更加容易进行。下面的代码会生成同样的内容，但是现在所有的值都被保存在变量中，这些变量的名称清楚地表明了它们的用途。

var size = height / 3;
var margin = width / 20;
var x = width - margin - size;
var y = height - margin - size;
rect(x, y, size, size);

让代码显得井井有条非常重要，尤其是当你开始设计多个形状和图形时。

旋转

形状发生旋转时，周围留白的形状会发生变化，这能呈现出形状得动态。

因为具有对称性，没有旋转的矩形是静态的。

旋转45°会呈现更加复杂但仍然对称的留白。

旋转27°时会破坏对称性，并且使矩形呈现出动态。

​ 选装的形状在许多设计中可以找到：为儿童设计的书经常会使用旋转的形状来创造趣味。流行杂志使用旋转的网格系统使内容看起来不那么枯燥，而面向狭窄受众的出版物可能会使用水平和垂直线来暗示内容的质量。

保罗·兰德（Paul Rand）在儿童书籍的俏皮封面上使用旋转的矩形。

阿迪达斯Logo中的梯形被旋转以传达速度和活力。

​ rotate()函数只需一个参数，该数字为弧度制的旋转角度。弧度制是基于圆半径的角度测量单位，圆周上半径长度的弧对应的圆心角为1弧度。因此，借助数学的魔力，一个完整的圆为2π(或大约6.283)弧度。那些对复杂的弧度制不感兴趣的人，radians()函数可以把一个角度制的值转换为弧度制。下面的代码会使画布发生（大约）90°旋转。

rotate(PI/2);
rotate(1.57);
rotate(radians(90));

​ 使用rotate()函数时，不是旋转单个形状，而是旋转整个画布。因为所有形状都是在画布上绘制的，所以所有形状都会旋转。与能够改变原点位置的translate()函数结合，可以精确的实现所需的旋转。

​ 作为例子，我们使用上面个的例子。我们在绘制矩形之前使用了rotate()函数，注意画布是围绕着原点而不是矩形旋转的。

var size = height / 3;
var margin = width / 20;
var x = width - margin - size;
var y = height - margin - size;
rotate(radians(10));
rect(x, y, size, size);

​ 如果我们希望旋转发生在矩形的左上角附近，那我们必须做一些不太直观的操作。首先，我们首先通过使用translate()函数将画布移动到矩形的位置。再调rotate()函数后，会在变换过的画布上绘制矩形。

var size = height / 3;
var margin = width / 20;
var x = width - margin - size;
var y = height - margin - size;
translate(x, y);
rotate(radians(10));
rect(0, 0, size, size);

随着我们深入研究更多的排版，我们将进一步研究如何使用translate()和rotate()制作更加复杂的图形。

设计一个词

​ 练习这些排版函数的一种好方法是“设计一个词”练习。从字典中选一个形容词，然后通过更改单个矩形的位置，大小和旋转来设计出与形容词感受贴近的图形。这能帮助你建立平面设计最基本的技能之一：创建与内容相对应的视觉效果。

​ 下面演示了”陡峭”的练习。怎么通过一个矩形和三个函数来设计这个词？在词语和位置、大小和旋转之间找联系。你可能会注意到陡度是与旋转相关的：通过旋转矩形，可以使矩形看起来像陡峭的山丘。通过改变大小可以使这座山变高，并且延伸到画布之外。通过改变矩形的位置，可以创建不对成的留白。下面演示了这些步骤。

1. 首先我们旋转矩形，直到它看起来很陡峭。

   

2. 我们更改它的大小，让它破出画布。

   

3. 把矩形往右边稍微移一移，来吸引人的注意。

​ 下面的例子展示了更多类似的设计。记住，不是所有的形容词都会这么简单，你会发现自己需要更多的形状。那是下一章的主题，所以不用担心。

平 查看代码

大 查看代码

害羞 查看代码

这章展示了贯穿本书的主题：以平面设计理论为基础，学习如何在代码中实现这些思想，并通过练习来实践这些概念。尽管这只是进入平面设计领域的第一步，但作品的构图非常重要。经常会在设计作品中发现构图问题，不论是用户界面不突出的重要按钮，还是其他主体在画面中含糊不清的例子。切记不要急于为了好看而做设计，要让基本的概念成为设计过程中的关键部分。

作业

从字典中随机选择一些形容词，尝试通过单个矩形的位置，大小和旋转来传达这些形容词的意思。然后请朋友猜测这些图像的意思。

你可以把作业发在下面评论区中。

本文译自Programming Design Systems

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。