每个布局都以空白页开头。然后是元素 – 徽标，菜单，文本部分，照片，插图等。元素的放置可以决定设计的成功程度。这就是为什么设计师在开始处理新页面时所做的第一件事就是决定该页面上元素的排列方式。页面上的空间元素有两种基本方法 – 设计者可以倾向于更对称的元素排列，也可以是不对称的元素排列。
对称性是什么？
很长一段时间，对称性被认为是设计的黄金标准。选择对称布局的偏好在架构中尤其明显。看看世界上最美丽的建筑之一 – 泰姬陵。泰姬陵有许多特性，使其美观，但其对称平衡是其中一个主要因素。
在设计中使用对称性的好处不是凭空产生的; 与许多设计原则一样，它源于格式塔原则，这是一种描述人类思维如何构建和安排视觉数据的人类行为理论。我们的思想自然会从我们看到的事物中产生秩序。这就是为什么对称性如此强大 – 对称设计是一种有序和稳定的设计，因此在眼睛上很容易。
对称的类型
对称性有三种类型：反射，旋转和平移对称。
反射对称
这可能是人们在听到“对称性”这个词时所想到的第一件事。也称为镜面效果，当所有内容围绕中心轴镜像时，会发生反射对称。轴可以是任何方向 – 它可以是水平的，垂直的，对角线以及介于两者之间的任何东西，只要轴的一侧上的物体被镜像或反射在另一侧上。
设计师经常使用反射对称来赋予任何一方相同的重量，或创造有趣的视觉效果。
旋转对称
也称为径向对称，当所有物体围绕共同中心旋转时，会发生这种对称。旋转对称性可以以任何角度/频率发生，只要存在围绕其旋转的共同中心，并且元素围绕中心点等间隔。
网页设计师在他们的工作中结合旋转对称来描绘运动（例如推断进度或运动）或以有趣的方式可视化数据。
平移对称
当在空间中的不同位置重复元素同时保持其一般或精确定向时，发生这种类型的对称。只要元素的方向得以保持，平移对称就可以在任何方向发生。
正确使用平移对称可以在设计中创造节奏。网页设计师经常使用平移对称作为被动元素来创建背景图案。但在某些情况下，可以使用平移对称作为传达信息的有效元素。NINX的网站使用简单的几何图形来传递主要信息 – 随着音乐开始播放，对象随时间移动。
不要试图达到完美的对称性
完美的对称性是指元素在轴上镜像并且两侧的元素完全相同。看看镜子，你会看到你的反射 – 两个镜像边完全一样。
但是在设计方面，对称性与相同的镜像不同。在网页设计和现实生活中，完美的对称性很少见。当我们考虑我们的环境时，我们周围的大多数自然物体和创造物并不是绝对对称的。例如，我们习惯于将我们的脸部和身体视为两个镜像部分。但是，脸的左侧与右侧不完全相同。
设计师可以通过播放用户对布局的感知来创建对称性，只要观看者从成品中获得对称感，就可以在每一侧略微变化。
什么是不对称？
不对称自然是没有对称性。在自然界中，我们几乎可以在任何地方看到不对称 – 例如在树枝或云的形状中，仅举几例。
在设计中，如果经常使用不对称来产生视觉张力。同时，不对称可能是一个难以掌握的概念，因为不对称设计中元素之间的关系变得更加复杂，可能很难创建一个完整的，有凝聚力的设计。这就是为什么许多设计师采用可预测的对称布局。但掌握不对称的设计师有更大的表达自由。
对称和平衡
许多设计师认为平衡只能在对称布局中实现。之所以发生这种情况，是因为“不对称”一词意味着缺乏平衡。虽然不对称的定义是缺乏对称性，但并不是缺乏平衡，正如一些错误的假设 – 缺乏对称性的设计仍然需要平衡。换句话说，无论你创造什么样的布局 – 无论是对称还是不对称 – 实现平衡都至关重要，因为不平衡的构图会让观众感到不舒服。
掌握平衡（对称和非对称）的适当技术是将页面上的每个元素视为具有视觉权重。视觉重量取决于元素的大小（较小的物体可能比较大的物体重量轻）和视觉特性（例如对比度）（对比元素可能比中性元素更重）。设计师需要发挥元素的重量，直到达到有效的平衡。
当然，在对称布局中实现平衡相当容易 – 您需要做的就是在页面的左右两侧放置相同的权重。
当谈到不对称设计时，任务可能会更难 – 你可能需要在一侧有几个小物品来平衡另一侧的大物体。
我们绘画中的平衡原则同样适用于网页设计。以下是艾伦图灵研究所网站的截图，这是非对称平衡的一个很好的例子。页面的左侧比右侧部分的内容更多，但设计师通过在页面的右侧部分添加对比元素来实现平衡。
一个完美平衡的公式
“我可以衡量平衡吗？”是设计师之间相当普遍的问题。为了找到这个问题的答案，许多设计师寻找一个特定的公式，让他们计算一切是否平衡。坏消息：没有计算余额的公式。好消息：我们可以使用强大的工具来确定构图是否平衡 – 我们自己的眼睛。
经验丰富的设计师能够一目了然地注意到不平衡的布局。但要实现这一目标，您需要通过开展实际项目并受到其他设计师工作的启发来培养您的眼球。你做得越多，你就越需要相信你自己的判断就必须做出任何设计决定。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261420.html