经验贴之——聊聊平面设计中的版式规范

磨磨唧唧磨磨唧唧终于又开始学习了，奔波的路上食不果腹、居无定所，上家房东解约之后距离下家房东签约的时间竟然有长达一周的时间！一周啊！这是个什么概念，这下实打实成为漂儿了~也实实在在感受到了生活的压力以及自己应变能力的不足，还有爸爸妈妈不在身边的窘迫，逼着自己开始长大承担生活的责任了！也算是自己经历这些比较好的一方面吧。

然后就想起来芥川龙之介之前说过：“删除我一生中的任何一个瞬间，我都不能成为今天的自己。”虽然也常常回想起自己之前的一些做法，遇见了一些事儿，遇见了一些人，想着重来一次的话，会不会比现在更好，后来想想也不全对，当你面临选择的时候，当时的你肯定是做了你当时最想做的事儿，就算回到过去，会是一样的结果。所以，现在最重要的是一直向前，才会一步步成为最想成为的自己～

不想高谈阔论，只想促膝而谈，和你聊一聊以设计实践的经验，每一篇我将从设计的一个角度出发，用你懂我懂大家都懂的话说一说一些常见的规范和误区，精彩不容错过你值得拥有！

古人云：入山见木，长短无所不知；入野见草，大小无所不识。然而不能伐木以作室屋，采草以和方药者，此知草木所不能用也。放到今天来讲，这便是实践出真知，只有你切切实实去做了，去感受了，经验才是你自己的。

在这个信息时代的重要生存法则就是资讯的传播与掌控，有那么个说法：“得信息者得未来”。

但不管是在传统纸媒还是多媒体上，信息的传播都无法离开图文编排的版式设计。我们在探讨传播的时候，它包括了主体、媒介、内容、受众、效果等因素。而当我们在谈具体的版式设计的时候，我们又在谈什么呢？

版式设计即是在预先设定的有限版面内，将文字、图形、图片、色彩等信息要素进行有目的地组合和排列。而版式设计诞生的目的则是：信息。传达信息是其唯一目的，无论在纸张还是网页上。什么是一个好的版式设计？先让我们一起看几个设计案例。

这是我之前收集的一些比较有设计感的网页截图。众所周知，网页最重要的功能就是传递信息，版面信息量大，需要很全面很直观的展现出整个网站的核心信息，结构紧凑，图片多于文字，用色简洁明快。字体、字号、粗细等元素被巧妙地运用来引导观者做大量的图片阅读，却不至于感到劳累或是杂乱找不到方向，版面中的文字信息少，图片多于文字，且排布更注重留白与正负空间的呼应，用色克制，营造了高端雅致的格调。虽然文字信息不多，但是版式展现出品牌背后的的气质和文化，这是一种抽象的信息。

什么是一个好的版式设计？可以这样说，当它以一种合适又美观的方式实现了传递信息的目的时，这就是一个好的版式设计，当然创意是其最好的调味品。

我们需要牢记的一点是：设计永远是为目的服务的。

只有明确了目的，才能有所取舍，舍去冗余，保留必需；才能有所侧重，建立视觉层级，突出重点；才能呈现不同的视觉格调，营造不同的氛围。这便是版式设计的圭臬。

当我们在谈版式时

我们谈的是版式的构成元素

当我们在进行版式设计的具体操作时，版面的构成元素是必须清晰认识和掌控的，它就像原料一样，只有灵活地调整，并进行有机地排列组合，才能得到一个和谐而又平衡的版式。而这一切都必须建立在对内容和目的的深刻理解之上。

下面是一个版式设计要素的基本构成内容详解，可以让我们更加直观地了解版面的构成，同时也方便了我们在实际设计场景中灵活地变通和使用。

栏—版面中—用线条或用空白贯通隔开的部分。

版心—版面上除去周围白边，剩下的文字和图片部分就是版心。版心是页面中主要内容所在的区域。

标题—版面中字号较大的点题性文字，用来吸引读者注意力。

视觉焦点—版面中最先吸引读者注意力的部分。

正文—版面中标题以外的主要内容，字号较小。

页边距—版心边沿至成品边沿的空白区域。

注解—对表格或插图所作的解释和补充说明。

天头—版心上方的余白。

地脚—版心下方的余白。

出血—印刷装订工艺要求页面的底色或图片须跨出裁切线一定的位置，通常为3mm，以免裁切时裁掉页面中的内容。裁切线以外的部分称作出血。（印刷品为主）

下面两个版式设计比较规范和标准地使用了上面的版式基本要素，很具有参考价值。

版式要素重点：标题、副标题、信息、注释

当我们在谈版式时

我们谈的是版式的设计方法

合理的版式设计呈现方式能让设计师事半功倍，极大地提高设计的效率，也能化腐朽为神奇，使版式富于美感和创意。

通过对优秀案例的欣赏之下，我发现，除了在版面控制上有自己的个人理解之外，他们在基础方法上普遍重视版面的视觉平衡和对网格系统的应用。

分块维持视觉平衡

分块，就是对页面中的元素进行梳理，按照内容或功能进行分区，然后进行大小及位置排布，并以此建立起基本的视觉层级结构与平衡。以下是一个我比较喜欢的独立服装设计品牌详情页，利用色块使图文的配比清晰，信息的传达效率高。

因现代排印技术的发展需求，在20世纪初欧洲的设计师就倡导用客观、理性的态度来构作品，并通过严格的规则来实现设计。而现代意义的网格理论基础主要发端于20世纪40年代瑞士的“客观排版设计运动”。

网格是一种理性、灵活的高效规划版面形式的法则，在现代版式设计中具有非常重要的指导意义和普遍性。它可以更好的维持设计的视觉秩序，从而使版面能更加清晰有效的传递信息，并带来丰富多变的形式，因而被世界各地的设计师所重视和应用。

网格系统作为一种设计方法，旨在加强版式的秩序，便捷我们的工作，因此需要根据实际情况灵活变通。正如《平面设计中的网格系统》的作者约瑟夫·米勒－布罗克曼所说，“网格系统是一种辅助，而不是保证。它允许许多可能的用途，并且每个设计者可以寻找适合于他的个人风格的解决方案。但是必须学会如何使用网格; 它是一种需要练习的艺术。

灵活的网格，不单单只是矩形，根据图片实际使用情况，而设置出一种新式表格。这个作品是典型的灵活运用网格系统的代表。

版式设计是一门学科，从表面看，它是一种关于图文编排的技术；实际上，它不仅是一种技能，更实现了技术、艺术、视觉心理的高度统一。

以下是我觉得完全没有遵守任何一种规范、而且极端随心所欲视觉效果还蛮好的设计的网站，也是我最喜欢的。

最后，感谢我自己，收集了这么多奇奇怪怪的素材，虽然没怎么整理，看起来乱糟糟的，但是每次打开不仅能找到自己想要的东西，还可以有惊喜的发现！以我目前的水平并不能够完完整整的分析或者讲明白这个网站设计中的原理或者亮点或者作者的意图，那就先挖个坑，慢慢填吧~