网站Banner的视觉设计.pdfVIP

网站Banner的视觉设计 Banner设计可以说是我日常工作中最主要的一块需求 ，banner不比大型项目 ， 设计成本上来讲不 可能给太多的时间给设计师 ，所以这也引发了我对如何更有效率地完成一个banner的思考。我觉得 构成banner的重点主要有三个方面 ，即风格 ，排版以及配色。我个人的习惯是先定风格 ，再做大致 的排版和配色 ，然后根据整体再来调整 ，最后再优化细节。 下面我就根据自己的一些经验 这3个方面展开来讲一下(视觉大牛们请轻拍) ： 首先是风格 ，一般情况下风格在跟需求方沟通的时候就已经定好了大概的方向 ，同时我们可以问他 要一些参考 ，进一步确认风格 ，还有种情况是需求方方没有任何的要求 ，就说让你自己把握就好 ， 那这个我觉得也是分两种情况 ，一种是需求方真的信任你 ，放手让做 ，还有种6hh就是其实他自己 也不知道要什么样的 ，只是想等你做出来以后看了再说 ，如果是这种情况不讲清楚的话很有可能就 会面临重做的悲剧。第一种类型基本就不需要太操心 ，自己根据内容什么的来把握就好。第二种类 型的话就需要引起注意了 ，我们可以自己找一些认为比较合适的参考让需求方来选择 ，然后根据他 的选择和需求方确认风格 ，防止他后面说什么不要这种风格的 ，重做一版看看之类的。那么怎么来 分别是哪种类型的呢?我觉得吧一些经常合作的 ，是完全可以根据以往的经验的来判断他是属于哪 种类型的 ，如果是第一次合作的我就会先直接判定为第二种类型 ，也就是他自己也不知道要什么 样的 ，以后再根据他的表现重新分类好了。 下面我就按照我们这边的风格风向标来举一些例子 ： ❶ 时尚风 ： 可以看到上面这2个banner都有共同的特点 ，大标题、模特 ，报刊潮流杂志风。 ❷ 复古风 ： 复古风的重点是传统元素和复古图案 ，像第一个用了书法字体跟水墨感觉的图案 ， 第二个则是包含 了传统的剪纸元素 。 ❸ 清新风 ： 清新风的重点就是清爽、唯美 ，轻盈色调跟自然系 ，比如上面这个banner就让人感觉十分的清丽和 透亮。 ❹ 炫酷风 ： 这种风格通常比较多的是深色背景 ，有一些比较质感的元素跟光影特效。上面这个其实是我当时给 一个活动做的版头 ，平时这类风格做的会比较少点 ，写分享的时候也没有找到合适的banner ，就拿 了这个 ，我觉得可以归类到这个风格。 ❺ 简约风 ： 简约风的特点就是极简主义、大空间 ，就像这个banner没有任何过多的装饰元素 ，整体感觉就是非 常的透气然后是排版 ，所谓排版 ，即将文字、图片、图形等可视化信息元素在版面布局上调整位置 、大小 ，使版面达到美观的视觉效果。 之前在网上看到过一篇关 于ppt 排版六原则 （对齐 ，聚拢 ，重复 ，对比 ，强调 ，留白 ）的文章 ，我 觉得 这个在banner的设计中也是同样适用。这里我把这些原则稍微修改了下 ，更加适用于banner的 设计。 一、对齐原则 相关的内容要对齐 ，方便用户视线快速移动 ，一眼看到最重要的信息。 二、聚拢原则 将内容分成几个区域 ，相关内容都聚在一个区域中。 三、留白原则 千万不要把banner排得密密麻麻 ，要留出一定的空间 ，这样既减少了banner的压迫感 ，又可以引导 读者视线 ，突出重点内容。 四、降噪原则 颜色过多、字体过多、图形过繁 ，都是分散读者注意力的”噪音”。 五、重复原则 排版时 ，要注意整个设计的一致性和连贯性 ，避免出现不同类型的视觉元素。 六、对比原则 加大不同元素的视觉差异 ，这样既增加了banner的活泼 ，又突出了视觉重点 ，方便用户一眼浏览到 重要的信息。 下面我讲下比较常规的版式 ，主要是大方向的 ，时间紧的时候可以选择一种拿来直接套用 ，这里我 根据以往的经验大致分了6类 ： 再讲下文字的排版 ，文字的排版要求重点突出 ，大小粗细错落有致 ，字体保持在2种左右 ，像下面这 种大尺寸的banner文字就可以适当的做下变形 ，加入一些跟内容有联系的元素或者图形 ，可以更好 的表达整个设计的情绪。 最后是配色 ，色彩是由色相、明度和纯度构成的。 色相即颜色的相貌 ，用于区分各类颜色 ，如　 红色 ，黄色 ，绿色 ，蓝色等 ；明度即颜色的明暗和深浅 ，或者说颜色含量里白色的多少 ；纯度即色 彩的饱和鲜艳程度。 每种色彩都会因为色相 ，明度 ，纯度的不同 ，表现出不同的色彩感 ，色彩是有 情感的 ，不同的配色会带给人完全不同的心里感受。所以当你在做banner的时候就要考虑你想要表 达什么样的情感 ，想让用户看的时候有什么样的感受 ，你