最近天气怪异，很多人都感冒了，我也中招了，连家里的2个娃也都感染了。折腾了一周，今天终于好转，希望大家勤奋学习的同时，注意休养生息，多运动，多喝水，这样才能天天一起分享好的东西哟！~

创新互联建站-专业网站定制、快速模板网站建设、高性价比新巴尔虎左网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式新巴尔虎左网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖新巴尔虎左地区。费用合理售后完善，10多年实体公司更值得信赖。

一开始我们提到在众人面前得意卖稿。卖稿是我们创新互联的内部用词。经过自己设计的作品，想要得到内部项目组或者顾客的认同，需要在灯光摄影下犹如滔滔不绝的江水般讲解自己的作品。这就难免有各种棘手的问题来为难你。通常被提问的问题大概有“你为什么这样布局”“整体风格对齐方式是什么”“品牌VI色系是什么，你的方案中配色方案是什么”等等，其中一定会有人提到“整体画面平衡问题”，不懂设计的人都会问这样的问题。例如，这个太大了，那个太突出了等等，其实就是说关于设计平衡的问题。那么，我们今天就简单聊聊设计平衡方面的问题，希望此文能帮助大家提升一下自己，真正能在卖稿时春风得意。

靠感觉做设计并不是行不通，但不是每个人都天赋异禀，如果大家都依靠感觉做设计，那么成为高级设计师的可能性就太低太低了。“说不出为什么，但总感觉怪怪的”是很多设计师经常遇到的迷思，这很有可能可能是因为大家在做设计的时候太依靠自身感觉。一副好的作品肯定不是由单方面决定的，设计师肯定是对版式、配色以及字体选择上都做了无数次的推敲，把大问题拆成一个个小问题反复琢磨，最终呈现出优秀的整体。今天我们就针对版式中的一个小问题来讲解——版式的平衡

平衡是设计之道。一个优秀的设计应该充分考虑各方面的因素,包括产品自身的属性(造型、色彩、材料、工艺等)以及产品与使用者和使用语境的关系等。"人——机一环境"、"艺术化设计"和"商业设计"、"大众设计"与"小众设计"、东方与西方、传统与现代等是设计中几对相互关联和相互制约的因素,在设计中要充分考虑他们之间的相互关系,以达到设计的平衡。

说到版式或者版面设计，可以提到的话题很多，例如留白是否得当，色彩是否整体融洽，内容是否有层次主次感等等，但其中有一个话题是不得不提的，那就是平衡，内容的平衡，视觉的平衡感。一个版式是否平衡也经常成为评判画面好坏的标准。

那么版式为什么要平衡，平衡又分为哪几种，用什么方法能制造平衡，这将是所要所要讨论的三个重要设计原则。

画面为什么要平衡

构成版面的所有要素都是有“分量”的，比如面积大小和颜色的深浅等。我们在编排画面的时候依据的就是各种元素的“分量”。我们要力求做到整体细节和谐且没有矛盾，当然这不能是设计师的一厢情愿，而要要让观者也能感受到这一状态，那么这个作品才算是成功的。从视觉的角度出发的话，就是版面要做到平衡或者是均衡。

我们可以仔细观察下生活中的物体，平衡的事物几乎占满了我们的视线。无论是对称还是非对称的物体，只有达到平衡的状态，看起来才是和谐的，才能给人一种安全感，同时也更加方便我们使用（如图1）。我们也可以把平衡理解成一种稳定，版式是否平衡，也可以说版面是否稳定。

上图中，你看到一个大学的门口就知道笔者跟学校的有关系了吧。哈哈~~

设计中的视觉平衡或者画面平衡，是怎么定义比较合理呢

平衡或是均衡，是一种张力均等的状态。想要做到画面的平衡，必须让元素按照美的视觉效果、力学原理等行进排列组合，这个过程中既有理性的逻辑推理，又有感性因素的参与。一个平衡的版式并非左右两边一个像素都不差或者两边的元素完全相同，它是一个相对的概念，指的是视觉上看起来是平衡的。这里我们把平衡分为三类：对称平衡、非对称平衡和整体平衡。

第一，对称平衡

对称平衡是以纵向为中心，在视觉上两边是对等的。对称的版式通常是静态的，它通过相似性体现平衡，并能唤起古典主义的、庄重的和稳定的感觉。

对称平衡经常配合居中对齐出现在版面中。如书籍的封面或是比较正式的活动海报等。

对称设计的空间较为刻板，各要素均置于空间的中心部位，能给人传递出一种平静和稳定的感觉。

第二，非对称平衡

非对称平衡在形式上不平衡，也就是没有明显的对称轴，但能引起关注且具有活力。非对称平衡的两边看上去并不相同，但却具有相同的张力，是通过对比体现平衡。非对称设计给人以现代感、力量感和活力感。

非对称的版式是在不相似或不相等的要素间创造秩序和平衡。由于非对称的版式具有不可预见性，所以设计上也能带来更多的变化。由于非对称版式可发挥空间更大，那么也就意味着对设计师的能力要求会更高。前面有提到“平衡或是均衡，是一种张力均等的状态”，图4这个案例左边有大量留白，右边有大量的黑色，左边留白是为了衬托“静物”这个主题，我们的注意力会放在“静物”两个字上，所以“静物”的分量就很重；那么到了右边，大量的黑色只是作为背景存在，所以黑色的分量就比较轻，这样一来，左右两边便达到了张力均等的状态，也就是平衡。

第三，整体平衡

整体平衡也被称作马赛克式的平衡。这种平衡通常是很多内容编排在同一页面的结果。

通常在编排信息点非常多的页面时要做到整体平衡。整体平衡的页面由于信息量较大，所以信息区块的划分一定要清晰，可利用网格线或者较为明显的间隔来划分信息区块。

在做设计时，我们该如何做才能达到画面平衡感呢？有五个可行的办法。

方法一，对称构图

我们来看这个案例，就是一个典型的对称的构图形式（如图8）。对称式构图是一种很常用的构图形式，对称本身就是平衡的，所以对称式构图对版式的平衡有着天然的优势。

通过文字组的排列形式，也很容易发现这个案例运用了四分栏的形式。这里要注意的一点是，对称式构图的元素最好是在一个倒置的金字塔或者倒置的梯形中排列（如图9），这样有利于引导读者进入下一信息层。

方法二，对角线构图。

这里有三张对角线构图的海报作品。第一张中的插画元素形成了一条很明显的对角线；第二张的毛笔字元素从右上到左下，这是第一条对角线，左上角红色的文字组加上两个红色石头元素形成了第二条对角线；第三张中，黄色的字母元素是第一条对角线，方向是从右上到左下，灰色的背景是第二条对角线，方向是从左上到右下。

对角线构图为什么是稳定的？我们可以将画面中的对角线想象成一个梯子，只有梯子斜搭在墙面上的时候才能达到稳定的状态。一个画面中，在相同元素数量的情况下，排列成对角线的形式，能有利于让元素占满画面，所以看起来更加平衡。

方法三，S型构图

S型构图同对角线构图有异曲同工之妙，这种构图方式也比较有利于帮助元素沾满画面，使得画面整体更加均衡。S型构图还能增加画面的生动程度，且富有空间感。

方法四，巧妙利用常规的几何图形构图

首先我们想象一下生活中有哪些几何形状是平行的，比如我们常见的桌子凳子是什么形状；我们周围的建筑是什么形状；我们的交通工具又包含有什么样的形状？我这里列举了三种形状：矩形、三角形、梯形。这三种形状的稳定性都相当高，利用好这三种形状也能帮助我们创造一个平衡的画面。

我们来看一下几何图形是如何运用到版式设计中的。稳定的几何形状通常以“看不见”的形式存在，画面中不会赤裸裸地呈现出这些形状，而是将元素按照形状的轮廓进行排列（如图13）。第一张中文字组排列成了规则的矩形，配合规则的间距留白，创造出了非常美观的版式；第二张作品，人物和毛笔字都是按照三角形来排列，整体效果也十分的稳定；第三张作品是按照梯形的轮廓来排列文字组，人物和人物上方的文字组又组成了一个梯形。类似的作品很多很多，大家可以把这些作品拖到软件中，尝试寻找一下它们都运用了哪些形状来排列元素。

方法五，空白区域放主题

在素材的空白区域，或者是已搭建好的框架的空白区域放上主题文案，这对于所有设计师似乎都很容易做到的，如果要做到画面的平衡，就不得不考虑素材的“动势及方向性”了。

动势指的就是动作的趋势，图下中nike的这张海报，人物明显有向右运动的趋势，那么在放置文案的时候，人物左边的文字就做得粗一些，用来平衡人物的动势。下图那张韩文的banner，人物的动作就有明显的方向性，也可以叫做指向性。文案都是顺着人物手的方向来排列，然后在最后边放置“22%”打折元素，并且主标题也在最后边做了变形，来平衡左边的人物素材。

不只是人物的动作具有方向性，眼神的方向性也是很强的，我们平时在使用人物素材的时候，要留意人物眼神的方向，最好是顺应眼神的方向放置重要信息。

由于主体文案没有顺应人物素材的动势，观者的注意力容易被人物动作方向引导到banner之外，文案作用被弱化。

主体文案顺应人物素材动势，起到强调作用。

主体文案要顺应人物眼神方向。如何判断人物眼神方向呢？我们看人物瞳孔的指向是哪里就可以了，这张素材人物瞳孔的指向明显是右下方，所有主体文案被安排在了banner的右下方。

好了，我们来总结回顾一下今天分享到的主要内容及点面。

首先我们讲了版面设计为什么要平衡以及通常我们说画面平衡的三种分类

第一种是对称平衡，第二种是非对称平衡，第三种是整体平衡。

然后总结了五种比较容易实现画面平衡的方法

第一种是利用对称构图，这里要注意让画面种信息呈现倒三角形排布，这样有利于引导读者向下阅读信息；第二种是利用对角线构图；第三种是利用S型构图，S型构图和对角线构图有异曲同工之妙，都是有利于元素占满画面；第四种是利用稳定的几何图形，如矩形、三角形、梯形等；第五种是在画面留白处加文字信息，这里要注意素材指向性和动势。

希望大家在阅读完文章后，自己动手练习一下。平时在做新项目时也要逐步。

注意这些方面的小问题。秒变大师，从点击做起！

网站题目：想在众人面前得意卖稿你的设计够劲才行——有理论依据的设计比仅用感觉更靠谱
网站网址：http://hbruida.cn/article/sepscs.html