WordPress divi主题

在您的网页设计中充分利用对称和不对称平衡

by | May 9, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

网站的视觉平衡对用户体验有即时的(通常是本能的)影响。 平衡的构图 感觉 正确,用户往往会立即接受它。 对称和不对称的使用是视觉平衡的基础。

google广告开户

在你的网页设计中实现对称和不对称的平衡在理论上非常简单——但每次都能做到正确需要实践。 在这篇文章中,我们将了解设计中的对称和不对称原则,以更好地了解它们如何协同工作以实现视觉平衡。

让我们开始吧!

什么是平衡组合?

视觉平衡使人们看到它时感觉良好。 视觉平衡和视觉不平衡之间的区别在于舒适和满足的感觉与厌恶和不适的感觉。 当某物具有良好的视觉平衡时,它立即变得有意义。 它给人的感觉是没有什么不合时宜的,而且构图就像它应该的那样。

对称和不对称是设计师用来在构图中实现视觉平衡的两种设计技术。 对称和不对称是反义词,因此对称和不对称平衡是相反的。

让我们更深入地了解每个术语的定义。

什么是对称

对称性是一种视觉数学规则,它表明如果一条线穿过图像的中心,如果不完全相同,两边将非常相似。 这条线可以水平、垂直或对角绘制,因此导致水平对称、垂直对称和对角对称。 这三个被认为是“反射对称”,因为它就像图像反映了自己。

此外,还有其他三种对称类型; 径向、超有理和引导反射。 您可以使用这四种对称风格中的任何一种来实现平衡的构图。

反射对称

最常见的对称类型是反射对称。 这个想法是分界线的每一侧几乎相同。 例如,一个切成两半的苹果或张开翅膀的蝴蝶。

反射对称

WordPress divi主题

图片来自 korkeng / shutterstock.com

径向对称

径向对称围绕圆形或径向形状重复。 例如,曼荼罗和圆形徽章。

径向对称

图片来自 Devi108 / shutterstock.com

平移对称

平移对称是指形状在视觉空间中一遍又一遍地重复。 例如,无缝模式。

平移对称

图片来自 andrykay / shutterstock.com

引导反射对称

引导反射对称类似于反射对称,但在轴上滑动。 例如,脚印。

引导反射对称

图片来自 Mark Rademaker / shutterstock.com

fiverr建站WordPress程序员

什么是不对称

不对称本质上是对称的反面。 从视觉上看,构图的每一面都不同。 与从一开始就是一种平衡的视觉技术的对称性不同,不对称性更难平衡。 了解不对称平衡如何工作的最佳方法是使用岩石平衡艺术。 在下图中,您可以看到一组平衡石。 尽管岩石看起来非常平衡,但成分并不是对称的。 即使两边不相等,构图仍然唤起和谐和视觉平衡。

不对称

图片来自 Vladnik / shutterstock.com

由于不对称平衡更难实现,它也比常规对称平衡更令人愉快。 这就是为什么这么多网站和杂志使用不对称布局来创建平衡构图也就不足为奇了。

网页设计中的对称平衡示例

现在我们知道什么是对称和不对称,以及这些技术如何帮助您实现视觉平衡。 让我们将这些知识应用到网页设计中,并查看一些示例来激发您自己的创作。

独立站选品工具

Polugar 俄罗斯面包酒

Polugar 网站的登陆使用反射对称来展示其产品的风格。 一个瓶子出现在中心,并且在它的每一侧都形成了漩涡状的形状。 稍后,当您滚动时,对称性会随着三个瓶子填满屏幕而扩展,底部的三个宣传语可以帮助您导航。 产品页面遵循三列对称网格,非常赏心悦目。

Polugar 对称网站

Max Shkret 艺术家作品集

Max Shkret 的这个设计作品集网站也以略微不同的方式具有反射对称性。 对称性一直扩展到边缘。 网站的其余部分是对称的,但不如加载页面那么完美。

最大怪物史莱克网站

Olivier Ouendeno 网页设计作品集

这个来自设计师 Olivier Ouendeno 的作品集网站是引导反射对称的一个很好的例子。 它是水平和垂直的,实现了一种独特的视觉平衡,几乎看起来像是有序的混乱。

高质量外链购买

奥利维尔 ouendeno 网站

网页设计中不对称平衡的例子

就像我上面提到的,不对称平衡不像对称平衡那么容易实现。 然而,当网页设计师管理不对称平衡时,结果是光荣的。 让我们看一些网页设计中不对称平衡的例子。 这些肯定会激发您的创造性思维。

首页 Sociētē 设计师网站

当您第一次登陆 Home Sociētē 网站时,您会看到看起来像是杂志传播的一部分。 左侧的全高图像框住了垂直菜单。 右边是短语的一部分是紧身衬线类型。 这个网站乍一看很讨人喜欢,但当你使用水平滚动时,它就会变得栩栩如生。 整个网站始终保持完美的不对称平衡。

Home Societe Screenshot - 网页设计中的不对称平衡

Headery CBD 油

这个 Headery CBD Oil 网站乍一看可能看起来是对称的,但它实际上是可能的最微妙的不对称平衡。 产品标题位于屏幕中央,形成初始对称,但滴管瓶位于左侧。 这会在右侧留下更多空白空间。 奇怪的是,黄色的聊天按钮是创造平衡的原因。

JasperAI 10000字免费额度试用

标题中央商务区

辅助资本网站

Adjuvant Capital 的网站使用了对角线不对称平衡,当屏幕较小时看起来会更好。 右边的三角形是一个视频,它平衡了左上角的文本块。

辅助资本反应位点

具有对称和不对称平衡的 Divi 布局

你怎么看? 哪种技术更适合视觉平衡,对称或不对称? 我认为两者都非常了不起。 在看了一些灵感之后,你一定想自己尝试一下这些视觉平衡技巧。 值得庆幸的是,Divi 库有很多布局可以帮助您入门。

让我们来看看。

WordPress备份工具updrafplus

加密货币布局——对称平衡

Cryptocurrency Consulting 布局具有很好的反射对称平衡。 右侧的白色按钮在蓝色背景上非常突出,因为它迫使整体对称性的视觉不对称。

加密货币 Divi 对称布局

Okape Juice Shop – 对称平衡

Divi 的另一个漂亮的对称布局是 Okape Juice Shop 布局。 三个瓶子集中在屏幕上,以创造主要的对称性。 布局的其余部分保持微妙的引导反射对称。

okape 对称平衡

整脊服务 – 不对称平衡

新的脊椎按摩疗法布局具有美丽的不对称平衡。 它左侧有一个大图像,右侧有一个橙色按钮,与橙色图像框阴影相平衡。 布局的每个部分都设置了不对称的平衡,但是当您滚动整个内容时,它也感觉像是引导反射对称。

不对称脊椎按摩疗法

观光旅游 – 不对称平衡

观光旅游的这种布局是一种不对称的平衡,看起来像美丽的混乱。 由于盒子的直线与照片模糊和起伏的边缘交织在一起,视觉平衡很有吸引力。

观光旅游不对称

轮到你设计视觉平衡

有了所有这些视觉灵感,现在轮到您将对称和不对称应用到您的设计中了。 记住对称和不对称的规则以及如何实现平衡的构图。 确保您的用户希望留在您的网站上并使用这些技术进行导航。

特色图片来自平面艺术/shutterstock.com