视觉设计法则「视觉设计原则」

今天详细为大家梳理四大设计原则，在很多时候我们做设计的都会忽略一些基本的设计原则，俗话说九层之台始于垒土 由此可见设计的基础有多么重要。

很多设计师即使从事了很多年设计工作也不能完全说清楚设计的原则，设计全凭自己感觉，至于为什么这样去设计也很难有合理的解释。

那现在我们来了解一下，为以后的设计道路打下扎实的基础。

1、对比原则

强调事务之间的差异性，设计时要避免页面上的设计元素太过于相似，如果元素之间是为了有所不同，那么加大反差，确保对比明显、页面清晰是很有必要的。在生活中我们可以随处发现对比的存在，对比形式也是多种多样的：人们习惯了生活中的对比，如果画面没有对比，会让人觉得单调乏味。对比可以突出重点，使版面具有层次感，内容要点展示更有条理，对比关系越清晰，视觉效果越强烈。有了对比，画面才会生动活泼、主次分明。

对比的作用

1）、 突出重点恰当的对比可以很好的制造出焦点（画面主体），在版式编排中，有效利用视觉差异，通过构成要素之间的对比，把读者的注意力吸引到画面的主体部分上来，提高版面的注目效果，是版式设计的重中之重。利用鲜明的对比，可以形成强有力的反差效果，能第一时间让读者捕捉到主体和重点。此案例主要采用了色彩对比，主体人物和文字在版面中都异常显眼，因为它相比周围的视觉元素产生了很强的差异性。

2）、 丰富画面层次对比是版面建立有组织的层次结构最有效的方法。强烈的对比可以形成视觉落差，建立良好的信息层次，增强版面的节奏和明快感。

3）、打破呆板、活泼生动通过对比的形式可以避免版面的单调与平淡，使版面更富趣味性，也使得版面更加鲜活、生动，产生良好的视觉体验，激发读者阅读和观看的兴趣。用方向、大小和色彩形成对比，使标题与正文的层级更清晰明了，同时加入肌理对比为主体打造立体感，让版面更活泼，更抓人眼球。文字编排对比理论上元素的一切可改变特征都是可以形成对比，

本期只举例了部分常用的文字编排对比形式。

1）、大小对比通过视觉元素体量之间的差异，来达到制造视觉冲突的效果。视觉元素体量大小上形成了层级的划分，体量越大则层级越高，也就越突出。在版面需要呈现的信息里一般会有标题、小标题、内文之分，也会有重点信息和非重点信息。把重要的信息放大，次要信息缩小，就形成了大小对比。这样做的好处是可以减少次要信息对重要信息的干扰，使之更容易被接收，大小对比还能使版面的层次更丰富。

2）、粗细对比粗的字体比较沉重，细的字体比较轻盈，字体粗细变化形成了轻重对比。主体信息可以用较粗的字体，次要信息使用较细的字体，利用这种手法制造视觉流线，引导受众阅读信息。上面的案例中，只使用了思源黑体一种字体，但是采用不同的字体大小和粗细对比，也可以很好的区分信息主次层级。

3）、字型对比如果版面里的信息比较多，而只使用一种字体的话，也许会显得单调，用字型进行对比，既能把不同的信息区别开来，也能丰富版面。不同的字体有不同的气质，而字型的对比就是不同气质的碰撞。在进行字型对比的时候也要深层次考虑：字型的选择是否和主体内容相匹配，字体的风格能形成多大反差等。

4）、色彩对比运用色彩对比可以有效地突出重点、区分信息，还可以起到装饰画面的作用。大面积的背景色与少量的主体色形成了很强烈的对比效果，能够第一时间把读者视觉引导到文字信息和主角上。高明度、高饱和度的黄色主体文字和低明度、高冷的黑色背景形成强烈反差，使版面充满活力，也有效突出了文字信息。

5）、方向对比把版面中的文字信息分别朝不同的方向排列，可以有效增加版面的动感和空间感。

6）、疏密对比将大段的文字密集排版，可以让文字形成块状、视觉上更紧凑。剩下来的大面积可以用来展示画面主题，通过这样的疏密变化不但可以形成好的阅读节奏，也能更强化主题。

7）、肌理对比肌理是指物体表面的组织纹理结构，不同的材质具有不同的触感和视觉体现。文字或背景添加肌理，运用粗糙与细腻、质朴与华丽、厚重与轻薄等对比，可以增添画面的丰富度和表现力。主体「叶」书法字有着手写的动感，本身就具有质感，置入水墨的纹理进一步强调了效果。可以很好的区分文字信息的主次关系，也增加了画面的视觉美感和艺术表现力。

8）、动静对比在版式设计中常把有扩散感或具有流动性的图形或文字的编排称为「动」；而把水平或垂直性强、具有稳定性的图形或文字的编排称为「静」。「动」使整个版面充满活力，获得更高的注目度，而「静」使版面具有稳定的效果，将两者相结合可以产生一定的空间层次感。电影海报《影》恣意狂放的反白书法字作为背景具有强烈动感，和主角的静形成鲜明的对比，阴阳与刚柔并济，反映出浓浓的古典中式美学。

9）、空间对比版式设计并不局限于一个平面上的层次，也可以让元素有一些前后关系。文字与形象之间叠压或前后错落编排，使版面出现层次关系，让版面更生动活泼。虚实对比也可以营造出空间层次，使用虚化的背景来突出前景，不仅能突出重点信息，而且能够较好营造氛围感、场景感和立体感。使用远近对比体现空间关系，根据透视原理，近则大，远则小，可以营造出近景、中景、远景的画面层次感。

2、重复原则

重力适用于对象和形状，目的是统一，并增强视觉效果，但要避免过多地重复一个元素，让人感觉不太舒服，即使在视觉传达中也是如此；这听起来可能很奇怪-重力并不像现实生活中那样是一种真正的力量将二维物体向下拉。

但是引力深深地扎根于我们对现实的感知之中，以至于它甚至可以转换为页面上的二维物体。

重复比较简单的理解为一致性，颜色、形状、材质、空间关系、线宽、材质、空间等等。我们常说视觉规范的一致性就是这样，保持这些单元的统一，贯穿始终这样我们的页面排版才会整体、产品设计才会整体。

3、对齐原则

对齐的根本目的是使页面信息对齐，左对齐、右对齐、居中对齐，保持页面视觉统一而且有条理。然而对齐分为物理对齐和视觉对齐，物理对齐指的是我们可以用物理直线来衡量是否对齐；而视觉对齐指视觉感官上的对齐，它基本上所用在的地方是一些物理对齐不能带给我们对齐的感觉的特殊情况之下。移动端的阅读习惯是从左往右的，因此我们也是遵循向左对齐，或者尾部信息向右对齐。居中对齐在整体信息排列中较少使用，除非是比较正规、传统的产品设计使用居中对齐的大关系。而在小细节的对齐中居中对齐应对logo/头像等也有使用。从开发的成本上，对齐的设计也是方便了他们的开发。那么视觉对齐一般在什么情况下我们能用到呢？

1）、图形和图形之间的视觉对齐

一般出现的是在一个为具有收缩感而另一个不具收缩感的情况之下，比如说正方形和圆形。那么如何解决这个问题呢，我们只需要遵循以下的原则：将有收缩感的物体稍微放大一点可以和没有收缩感的物体达到平衡。

2）、文字和文字之间的视觉对齐

文字和文字分为三种情况。一种是中文和中文的对齐，因为中文是属于方块字，所以物理对齐基本就可以了；第二种是英文和英文的对齐，如图上所示，英文字体有些是属于收缩感字体，所以我们这时就需要进行视觉的对齐，如果英文都不是收缩感字体的话，我们只需要进行物理的对齐；第三种就是中文和英文的对齐，处理的方式和第三种情况想类似。

3）、图形和文字之间的视觉对齐

图形和文字之间的对齐分为两种情况。一种是权重比较小的线条图形和文字的对齐，这种情况我们只需要将具有收缩感的图形放大或者移动几个像素就可以达到视觉的平衡。另一种是权重比较大的块状图形，这种情况下我们只需要进行物理对齐就行了，因为块状的物理权重比文字大，可以弥补上视觉的不平衡感。

4、亲密原则

指的是将彼此相关联的项，在空间的角度上更靠近些。比如微信在发现页面中相似的类目靠的更近，我们的心理默认认为靠的更加近的是同一类别的的信息；相反的，如果没有运用亲密性的原则，整个微信的信息就如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉整体。因此我们在设计时候往往需要将信息整合把有亲密组织关系的内容整合一起。减少了混乱不堪的信息内容排列，整合框架，这也是方便用户浏览，满足了易读性、易用性。个人观点(在产品设计中亲密度的把控，要多学理论、然后理论实践结合，多多体证，才能更好的满足用户体验)看起来非常的混乱。

无论采用哪种形式，只是我们的大脑和眼睛如何连接以感知视觉信息，最重要的是在掌握的同时能更好的运用到设计事务上，使工作更进一步。