版式设计对于设计师来说是至关重要的，他会直接影响到作品最终的视觉效果。新手设计师经常会在一些基础的版式原则上犯错。今天给大家总结了我在工作和学习中对于版式设计的理解，希望对大家能有一些帮助。

1、必要的对比

无论是文字还是图形，想让用户一目了然，快速找到自己想要的信息，对比的运行是必要的。如果我们想让两个元素形成差异化，那就尽量让两者拉开较大的差距。对比就是为了“突出”重要的弱化次要的，这样的版式会符合用户的阅读习惯。设计是为用户服务的，Users don't want to think。

对比可以是文字的字号、字重、留白，也可以是图形的形状、颜色、大小等。另外值得注意的是，对比是建立在相对的基础上，有强便有弱如果想要突出每一个元素，那就相当于没有突出。

2、元素的疏密

在街上我们会很自然的将走在一起的人看成是熟人或朋友，那些各走一边的情侣，我们会认为他们可能闹矛盾了。其实这一切都是源于我们的心理认知，我们会本能的将那些视觉上相近的元素认为是有关联的内容。 所以在版式设计中我们通常都会将关系亲密的元素放在一起，而将那些关联性相对较弱的内容拉开一定的距离。用户在观看页面时会主动通过间距进行内容信息上的归类划分，如果页面中的信息是无序的堆积在一起，则会让用户产生不好的阅读体验。

左图中文本间的疏密关系得到了很好的控制，信息的传达十分简洁明确；然而右图的反面案例是我生活在真实遇到的，这就是没有注意排版时的疏密关系所造成的尴尬问题。

3、孪生的特性

对于两个长得很像的人，我们通常第一反应会认为他们可能是双胞胎。这种认知同样适用于版式设计之中，我们一般都会将外观相同或相似的元素默认为是一类。比如在UI设计中会将相同含义或层级的文字或元素组件在视觉表现上尽可能的趋于一致，因为这会符合用户的认知习惯，便于用户的理解。

左边图形中绿色的圆形我们会很自然的认为他们是同一类的元素；右边飞猪金刚区图标中通过相同的图标风格将其整体进行了统一，其次通过相同的颜色属性将每个横排划分为一组，便于用户的理解；网易云的金刚区同样采用了统一的风格样式。

4、完形的识别

当我们的大脑看到一个不完整的形状时，会自动脑补出之前存在于我们大脑中的形状进行填充，使之变成一个完整的形状，如果我们的大脑无法将其想成一个完整的形状时，我们的内心可能会“抓狂”，从而造成不好的用户体验。它能够使得设计作品更加的生动有趣富有创意。

5、无形的栅格

很多设计师都会借助栅格系统进行页面的版式布局，其目的有很多，但是最重要的就是为了使得的元素之间有规则的排布。元素之间的对齐是极为重要的，无论是左右对齐还是居中对齐，都会使得你的页面变得规整有迹可循。

相对于传统的平面排版设计，在网页设计中运用栅格系统进行设计还有着其他的作用，由于现在响应式（自适应）网页设计的越来越普及，运用栅格系统进行设计便于开发后期的实现，当浏览器的宽度不同时页面会呈现与其相适应的页面布局，这也是为了提高用户体验便于用户的浏览。

6、似空非空

中国的传统绘画中经常会运用留白的技法，画面看似很空，但从另一个角度反而丰富了画面，让人产生无尽的遐想。所以在版式设计中，也经常会运用留白的方式。很多新手设计师忌惮于画面中的留白，会觉得画面很空，于是在版面中添加了许多不必要的装饰元素，这样反而会使得画面杂乱，从而影响最终的视觉表现。版式简洁明了留白多，往往能体现作品的正式感与品质感，提升作品的气质。

7、版式的节奏

当我们在听音乐的时候，舒缓的节奏能使我们心情平静，动感的节奏会让我们心潮澎湃。节奏感在版式中的运用能够给观众带来不一样的心理与视觉体验。比如在长图的设计中，往往出现了两到三个同色系的页面之后紧接着一个不同颜色的页面，这是为了减轻用户的审美疲劳，让用户“眼前一亮”。

8、全局的一致

在UI设计中需要严格的遵守系统的设计规范，从而避免出现视觉体验上的混乱。当我们在设计一套或某个系列的作品时，最好不要随意的添加或改变某些元素，因为这样可能会造成作品的孤立，使得每一个页面都是一个独立的作品。如果我们是设计一个系列的作品时，版式中的文字样式或元素属性应当具有某些相同的风格特点。

9、图文的搭配

由于文字需要阅读，所以图形对于信息的传达会更利于用户的快速理解。另一方面，文字对于内容的传达太过直接，而图形却能够给与观众更为开放的思考空间。所以我们在版式设计中可以采用图文搭配的形式，既可以方便用户的理解，也可以避免页面出现全是文字的单调状况，从而增加版面美感。

版式设计的方法原则还有很多，这只是我目前的一些小小心得，如有问题请多多指教，与君共勉！