零基础网页电商美工版式设计编排技巧

版式设计又称编排设计，是平面设计中的重要组成部分，版式设计就是要调动各类视觉元素进行形式上的组合排列。精彩的版面，从文字的编排，到图片的选择，再到线条的应用和色彩的搭配 等，都要精心组合、用心设计。

文字是版式设计中最主要、最直接的信息表达形式，具有其它语言符号不具备的传递功能，文字版式设计的好坏直接影响整个版式的设计质量。文字编排是将文字用艺术化的手段进行加工创造、排列组合，使其具有视觉和色彩上的独特性，产生冲击力和感染性，能很好打动阅读者，使阅读者方便快速地了解到作品的内容。

①字体选择。字体的设计、选用是文字编排设计的基础。可以 把字体当作一种独立的艺术形式，可以对它进行艺术加工，使其符合创作者的个性和情感意识。在设计和选择字体时，要根据作品的风格和内容进行把握，对于字体和字型的选择和搭配的好坏是非常有讲究的，不同的字体具有不同的造型特点，有的字体苍劲有力、有的娟秀清雅、有的则端正严谨。

例如：标题性文字一般选用比较简洁、醒目的黑体、艺术体等；而正文内容则比较多地选择楷体、宋体等较为清新、秀雅的字体。这种在字体选择上的差异往往使文字呈现出一种对比的样貌，更加凸显特色，增加感染力。

②字号设置。好的文字编排一定注意文字的大小对比，即字号 的设置。字号的设置得当与否直接影响着版面的阅读效果和视觉效 果，一般在文字比较多的版面设计中，字号的设置应该有3到5种变化。

例如：标题的字号我们可以选择大号，具有醒目、突出、张扬的特点；在副标题的字号选择上我们应该设置标题字号的一半或三分之一 即可；而对于正文部分，可以根据内容的重要性差别设置1到2种更小的字号。

③间距设置。在文字的编排中也要注意字距、行距的比例设 置，也就是要考虑疏密对比，过密或者过疏都会带来视觉疲劳，造成心理不适的感觉。字距和行距的选择通常也是依靠设计师的直觉和自我感受，也是设计师对编排设计的一种心理感受的表达，同时也要根据版面的内容和阅读目标人群来设定，以达到最佳的阅读效果。

通常情况下周边空间大于行间距，上下边距要大于左右边距，当然还要考虑到亲密性。当然还要注意段落文字是采用哪种结构形态，通常使用的有左右对齐、居中对齐、左对齐、右对齐等，无论哪种形态都有自己的特点和个性，在运用中要做到版面内容和整体视觉效果相统一。

在版式设计中，图形的概念很广，一种是以写实为主的摄影图 形，又称为图像或图片；另一种是通过手绘或电脑软件制作的图形或符号，它们都有着各自的特点，在版式设计中也有着不同的作用，根据版面的风格和内容来选择图形的种类。而版面设计中图形的数量、 大小、位置和编排方式对版面效果影响非常大。

①图形数量。版面中图形数量多少直接影响到版面的效果，也 影响到读者的阅读兴趣。一般来说，如果版面中文字较少，可以使用 多个联系紧密，重点突出的图形，穿插于文字段落间，形成动感、时尚、明快的风格；而版面中如果文字较多，也可以使用1到2张具有代表性，能突出主题的大图形，整体给人大气、畅快的感觉。

②图形大小及位置。图形的大小和位置关系直接影响着信息传 递的先后顺序。通过对图形的功能及内容来确定图形的大小及编排位置，有效地传递信息。对含有重要信息的图形，在编排时要进行放大，并放在醒目的位置，而其它的次要图形要进行相对缩小，以明确主次关系，从而制作出版面的节奏感。

③图形形状。图形根据其外形要以分为几何形与自然形，几何图形可以是几何状的任何图形，自然图形就是图形中某个具体图形的外形。圆形图与方形图是最为常见的几何图形，而在版面设计中方形图使用量最大，方形图使得版面呈现出规范、整齐的效果，使读者阅读流畅；圆形图在保持了图片处轮廓的同时，削弱了方形四角的锐利感，呈现出更加圆润、柔和的印象。

④图形剪裁。对图形中不重要的部分可以进行适当剪裁，同时 也能改变图形的长宽比，调整图片的效果，令图形更加美观，更适合版面的需要。

⑤图形编排规律。通过将图形进行倾斜放置，或者将若干图形 按照一定的路径排列形成倾斜构图等方法，来打破平衡增强图片的动感；运用多张图形按照一定的规律排列成一定的走向，也可以形成明确的方向性，引导读者进行阅读；对图形采用一定的对齐方式不仅方便阅读，也是一种创造版面美感的方法。

在版式设计中色彩比图形和文字对人的心理影响更为直接，具有更感性的识别性能。色彩五彩斑斓，由于人们对色彩的爱好出于本能，因此版式设计作品中的色彩表现成为人们关注的焦点。在进行版面设计时，如何能使色彩运用和搭配恰当合理，能激发大众的好奇心，是每个设计师都要研究的配色原则。

①黑白色配色原则。黑与白有强烈的对比关系，灰色是对这两 种颜色的调和，这种配色给人一种安静、素雅、舒畅的感觉，同时还具有很强的时尚感。黑白灰搭配是中性色配色的大众方法，彰显出艺术感与舒适度并存的风格。

黑白灰的无情绪能很好地体现高级感，奢侈品的产品、海报中大量运用黑白灰配色。由于黑白灰的简装、高级感，科技产品、现代家居宣传版面中使用黑白灰配色。

②单色配色原则。单色配色方案在很多设计项目当中，都呈现 出了极具表现力的一面。结合许多新的趋势和新的技术，优秀的单色配色并不一定弱于多色配色，它能将简化繁忙的设计，使版面干净， 具有条理性；能使各种元素保持一致，紧密结合；单色配色可以以低调的方式使用明亮或强烈的色彩。

单色配色并不是指只有一种颜色， 而是只有一种色相。确定色相之后，通过调整明度和饱和度，来获得一个色相下不同的颜色，创造出有层次的配色方案。单色调色是丰富多彩的，它轻松地应用在了网页、logo、商务名片、产品包装等领域。当然在具体的设计中，在主要使用单色配色方案的同进时，可以添加额外的一种或者两种色彩来补充或者加强效果。

③互补色配色原则。互补配色是采用完全对立的两种色相进行色彩搭配，例如：红与绿搭配，黄与紫搭配，蓝与橙搭配等。互补色的色相对比最强烈，较对比色更加丰富、更加具有感官刺激性。

④类比配色原则。类比配色是指比较相近的颜色进行搭配。这 种配色因为含有三原色中某一共同的颜色，所以很协调。颜色由暖至冷的顺序为红橙黄绿蓝紫，它们彼此之间互为邻近色。类比配色可以 产生渐变感，色调又很明确，低色彩的对比产生和谐的美感，在使用时颜色不易过多。