布局设计中的对称与不对称
每个布局均以空白页开头。然后是元素-徽标，菜单，文本部分，照片，插图等。元素的位置可以确定设计的成功程度。这就是为什么设计师在开始创建新页面时要做的第一件事就是决定元素在该页面上的排列方式。页面上的空间元素有两种基本的方法-设计者可以倾向于元素的更对称排列，也可以不对称。
在本指南中，我们将了解对称和不对称如何在设计中起作用。我们将介绍每种方法的基本技术，技巧和最佳实践。
参加我们的“转换设计”课程
准备将您的设计技能提高到一个新的水平？参加我们的“转化设计”课程，并提高发展业务并帮助客户成功所需的技能。
还不是Shopify合作伙伴？立即注册！
什么是对称性？
长期以来，对称性一直被认为是设计的黄金标准。选择对称布局的偏好在体系结构中尤其明显。看看世界上最美丽的建筑之一-泰姬陵。泰姬陵具有许多特性，使其在美学上令人愉悦，但其对称平衡是主要的平衡之一。
泰姬陵不对称设计
在设计中使用对称性的好处并不是凭空产生的。与许多设计原理相同，它是从格式塔原理中产生的。格式塔原理是一种人类行为理论，描述了人类思维如何构造和排列视觉数据。我们的思想自然会根据所看到的事物创造秩序。这就是为什么对称如此强大的原因-对称设计是一种具有顺序和稳定性的设计，因此很容易被看到。
了解如何编写出色的设计简介，以保持项目进度。
对称类型
对称共有三种类型：反射对称，旋转对称和平移对称。
反射对称
这是人们听到“对称”一词时想到的第一件事。也称为镜像效应，当所有物体围绕中心轴镜像时，就会发生反射对称。轴可以处于任何方向-可以是水平，垂直，对角线以及介于两者之间的任何方向，只要轴的一侧被镜像或反射在另一侧即可。
不对称设计反射
反射对称：鸟类围绕中心水平轴镜像。
非对称设计反射镜
现实生活中的反射对称性。
设计人员经常使用反射对称性来使两侧的权重相等，或创建有趣的视觉效果。
非对称设计平移对称
Method.digital使用反射对称性作为其主要图像。
旋转对称
也称为径向对称，当所有物体围绕共同的中心旋转时，就会发生这种对称。只要存在一个共同的中心，所有物体都围绕该中心旋转，并且元素围绕一个中心点等距分布，则旋转对称可以在任何角度/频率下发生。
不对称设计旋转对称鸟
围绕公共中心旋转对象
旋转对称在现实生活中非常普遍。例如，海星的手臂从中心向外辐射。
设计不对称旋转对称海星
许多教堂的天花板画也使用旋转对称。
不对称设计旋转对称天花板
Web设计人员将旋转对称性纳入他们的工作中，以刻画运动（例如推断进度或运动）或以有趣的方式可视化数据。
不对称设计旋转对称数据
由英国广播公司（BBC）的《明日世界》（Tomorrow's World）委托制作的互动式问卷调查“ 全球价值”（Global Values）使用旋转对称性来可视化数据。
平移对称
当元素在空间中的不同位置重复出现，同时又保持其基本方向或精确方向时，就会发生这种类型的对称。只要保持元件的方向，平移对称性就可以在任何方向上发生。
不对称设计翻译对称鸟
同一对象以均匀间隔移动几次。
不对称设计平移对称栅栏
栅栏是平移对称性的一个很好的例子。
正确使用平移对称性可以在设计中产生节奏。Web设计人员经常使用平移对称性作为创建背景图案的被动元素。但是在某些情况下，可以将平移对称性用作传达信息的有效元素。NINX的网站使用简单的几何结构传递主要信息-随着音乐开始播放，对象随时间移动。
不要试图达到完美的对称
完美的对称性是当元素在轴上镜像并且两侧完全相同时。看着镜子，您将看到自己的反射-镜面的两个侧面完全相同。
但是在设计时，对称性与相同的镜像并不相同。完美的对称性在网页设计和现实生活中都是罕见的。当我们考虑环境时，我们周围的大多数自然物体和创造物并不是绝对对称的。例如，我们习惯于将脸部和身体视为两个镜像部分。但是，脸部的左侧与右侧并不完全相同。
设计师可以通过玩弄用户对布局的感知来创建对称性，并且只要观众从成品中获得对称感，在每一侧都可以稍作改动是完全可以的。
您可能还会喜欢：使用网格布局：打破网格如何为客户创造难忘的体验。
什么是不对称？
不对称自然是不对称的。在自然界中，我们几乎可以在任何地方看到不对称性，例如树木的树枝或云的形状。
不对称设计树枝
一棵树的分支是不对称的。
在设计中，不对称（通常用于产生视觉张力）。同时，不对称可能是一个很难掌握的概念，因为不对称设计中元素之间的关系变得更加复杂，因此可能很难创建一个整体的，有凝聚力的设计。这就是为什么许多设计师都选择可预测的对称布局的原因。但是掌握不对称性的设计师拥有更大的表达自由。
对称与平衡
许多设计师认为，只有在对称布局中才能实现平衡。之所以发生这种情况，是因为“不对称”一词意味着缺乏平衡。虽然不对称的定义是缺乏对称性，但正如某些人错误地假设的那样，它并非缺乏平衡-缺乏对称性的设计仍然需要平衡。换句话说，无论您创建哪种布局（无论对称还是不对称），实现平衡都是至关重要的，因为不平衡的构图会让观看者感到不舒服。
掌握平衡（对称和不对称）的一种合适方法是将页面上的每个元素都视为具有视觉上的分量。视觉权重取决于元素的大小（较小的对象可能比较大的对象重）和视觉属性（例如对比度）（对比元素的权重可能大于中性元素）。设计人员需要发挥元素的重量，直到达到有效的平衡。
当然，要在对称布局中取得平衡是很容易的-您需要做的只是在页面的左右两边放置相同的权重。
不对称设计对称平衡根琴祭坛
这是扬·范·埃克（Jan van Eyck）创建的根特祭坛的一部分，这是 对称平衡的一个很好的例子。
当涉及非对称设计时，任务可能会比较艰巨-您可能需要在一侧上放几个小物品，以便在另一侧上放一个大物体。
梵高星夜不对称设计
梵高的 《星夜》是非对称平衡的一个很好的例子。梵高通过使用不同大小的对象并使用颜色和对比度来达到平衡。
我们在绘画中拥有的平衡原则也适用于网页设计。下面是Alan Turing Institute网站的屏幕截图，它是非对称平衡的一个很好的例子。页面的左侧比右侧的内容更多，但是设计人员通过在页面的右侧添加对比元素来实现平衡。
不对称设计alan-turing主页
完美平衡的配方
“我可以衡量余额吗？” 在设计师中是一个相当普遍的问题。为了找到这个问题的答案，许多设计师都在寻找一个特定的公式，使他们能够计算出一切是否平衡。坏消息：没有计算余额的公式。好消息：我们可以使用强大的工具来确定构图是否平衡-我们自己的眼睛。
经验丰富的设计师能够一眼注意到不平衡的布局。但是要实现此目标，您需要通过从事实际项目并受到其他设计师工作的启发来训练自己的眼睛。您所做的越多，您在做出任何设计决策时就越会相信自己的判断。
您可能还会喜欢：主题开发人员如何从Brutalist Web Design中学习。
对称与不对称
最终，在设计布局时，您需要决定要创建对称设计还是非对称设计。这个问题没有统一的答案，具体选择取决于项目的具体情况。让我们看看如何在设计中使用对称性和非对称性。
当对称最有效时
以下是一些一般情况，最好采用对称方法进行布局设计：
您正在寻求更严肃的美学（您想传达古典主义）
您想增强识别和回忆（对称形式使回忆信息更容易）
您想要实现更多的顺序和结构
您不想在元素的排列上花很多心思，但仍然想要实现平衡（对称布局本来就是稳定且平衡的）
现在，让我们回顾一下这些案例在现实生活中的样子。
传达信任感
对称布局对于希望表现信任氛围的设计非常有效。毫不奇怪，许多优先考虑信任的公司在设计中都使用了对称性。
非对称设计对称音频徽标
许多汽车制造商在设计中使用对称性来营造一种稳定感。奥迪有一个对称的标志。
对称设计是可以预测的。因此，如果您要设计一个要求稳定性的网站（例如，银行或保险公司的网站），那么对称设计可能是您的正确选择。
PayPal主页的设计是对称平衡的。一切都围绕垂直轴进行反射-导航栏居中，特色图像居中，标题居中。
不对称设计对称余额贝宝
页面只有一个交互对象
对称性对于具有单个交互对象的页面效果很好。典型示例是登录/注册页面。通过将关键的交互对象或关键消息放在中间，您可以将焦点放在页面的中心。
不对称设计机器学习Google
Google搜索页面是一个具有单个交互对象的对称布局的很好示例。
非对称设计，对称平衡，单个相互作用，对象安装
Instapaper还在屏幕中央创建焦点，并在其中显示关键信息。
网页具有两个（或多个）同等重要的选项
对称设计使您可以平均吸引页面的所有区域。一个典型的例子是在线商店，出售男女产品。对称性可以帮助设计人员在同一空间中传递两个同样重要的信息。
不对称设计对称保暖器
Paulwarmer使用对称布局来传达两个同等重要的类别。两块内容成正比。
当不对称效果最佳时
对称通常被认为是稳定和协调的。但是，对于某些人来说，稳定性可能是可预测的且无聊的。不对称布局往往更有趣和动态。
在以下情况下不对称：
您已经准备好花费额外的时间来安排要素，以找到实现平衡的独特方法
您正在寻找一种更有趣的布局来传达用户的兴趣
使布局突出
如今，当用户有许多不同的选项可供选择时，一个站点必须具有特殊性，以使其在所有其他站点中脱颖而出并降低跳出率。当设计师掌握不对称性时，他们会创造出更令人难忘的产品。
由Google创建的教程Slice of Machine Learning，教您如何构建机器学习分类模型，它使用非对称设计为访问者创造了难忘的体验。
传达动力
当网页设计师使用“动态”一词时，他们所指的是一种设计，在这种设计中，观看者的眼睛会四处移动并穿过设计。不对称的设计会唤起运动的感觉。这就是为什么许多体育品牌在单个元素（例如徽标）中使用不对称布局和不对称的原因。
不对称设计耐克徽标
不对称传达运动感。
为了吸引注意
不对称引起了人们的注意。适当的不对称布局会自动将观众的视线转移到焦点上，凝视自然首先落在设计的关键部分上。通过定位和调整页面上的元素，您可以将眼睛引向不同的区域。
选择重点时，请记住，任何设计的主要目标都是沟通。在您设计的每个网页上，您都会向访问者讲述一个故事，因此请务必选择有助于您以最有效的方式讲故事的焦点。
以下是一些可以引起您注意的事项：
对比。对比度可用于突出显示特定元素或将其隐藏。通过增加特定元素的对比度，您可以使它脱颖而出。相反，通过降低对比度，可以使元素淡入背景。
空格。使用空格将一个元素与另一个元素隔离。
运动。人眼难以动弹，要注意运动的物体。
方向提示。眼睛将遵循方向提示（例如，方向提示可能是指向特定方向的箭头）。
人脸。眼睛将沿着照片中的眼睛前进，因此站点的访客将与设计中的人朝相同的方向看。
非对称设计波美主页
鲍姆（Baume）的首页设计使用空格将观众的眼睛引导到特定区域。
不对称设计的运动对象
Detaen使用移动物体（三角形）来吸引用户的注意力
非对称设计关键解决方案主页
对Keysolutions采取行动的 呼吁打破了对称性，并引起了人们对自身的更多关注。
不对称设计简单的生活方式健康主页
当人们访问Simple Lifestyle Health时，他们会按照屏幕图像中的眼睛来阅读关键信息。
在设计中结合对称和不对称
对称性并不总是一个选择。通过将对称性和非对称性相结合，可以创建最有趣且美观的设计。
您可以将布局分成较小的部分，并尝试在每个部分中实现对称或不对称的平衡。例如，您可以使用对称布局，其中不对称用于创建兴趣点并在一组相似元素内组织视觉层次。
不对称设计方丹酮carnevale acireale主页
Fondazione Carnevale Acireale在设计中同时使用了对称性和非对称性。
掌握对称和不对称
对称性（或缺乏对称性）可能是设计人员工具箱中的强大工具。对称自然会唤起秩序感和稳定性，而另一方面，不对称可帮助设计师实现设计的独特性和个性。将两者结合起来，可以创造出独特且给观众留下深刻印象的设计。
