如何设计高点击率的Banner
Banner的中文翻译是横幅广告，在网页端和软件的轮播图中都会经常看到它，设计师们将需要宣传的内容设计好后，再应用到不同尺寸的版面环境中。我们可以通过明确的层级，简化的信息，以及适当的留白来保证内容的清晰传达。在此基础上正确的图片选择与裁切也是实现高点击率的重要条件，当信息正确的传达后，对内容感兴趣的用户也自然的会产生点击行为。那么如何才能做到这些呢？这其中都具有哪些技巧呢？本期的内容会为大家解答。
文字信息经过整理后，首先要做的就是将划分好的层级做大小对比，这里需要注意的是，对比的幅度过小，会导致信息之间的区别变得不明显，给人模棱两可的错觉。信息之间的逻辑产生了混乱，也严重影响了信息的传达效果。
可以使用等倍和等差的比例关系来保证对比的有效性，上图中蓝色的最小方块到最大方块的大小以倍数递增，方块之间的大小区别明显，下方的黄色方块从小到大依次增大1.5倍,区分依然明显。等倍的比例通常用于标题文字的对比，当文字依次变小后，为了减小对比的幅度，小尺寸的文字之间的对比通常选用等差的比例关系。
这是运用倍数调整后的文字信息，将最小的文字设定为一个单位，而第二大的文字比例是两个单位，最大的文字比例是最小文字的四倍。经过调整后，人们可以一眼就区分出这是三组不同的信息。
经过对比我们可以发现，大小对比明显的文字组合无论从美观度还是信息的传达上都要优于对比不明显的组合。但对比一定要越大越好吗？对比强烈的版面会增强版面的跳跃率，会传达出：大气、直接、生动、活泼等印象，而在保证对比明显的前提下，也可以适当降低对比幅度，文字的跳跃率变低后，能够传递出：雅致、高级、宁静、庄重、规整等印象。
用户在页面上停留的时间是有限的，当页面被打开后，很可能在数秒内就会被关闭或转到其他页面中，在这种情况下，如何才能在短时间内快速传递有效的信息呢？上图的例子中，设计师想要尽可能多的将产品卖点全部都展现在版面中，但也因为信息量过大的缘故，从而导致了在短时间内无法达到理想的传播效果。
将内容拆解，我们可以得到活动主题、点击按钮、产品卖点、产品型号、以及产品图。产品图是吸引视觉的主要武器，也具有烘托版面气氛等功能，同产品型号与活动主题同为重要性信息，而其余卖点信息应放置到点击后进入的详情页面中。
经过修改后，版面中的内容得到了进一步的简化。通过加大产品图的面积，来巩固其第一视觉焦点的地位，将简化后的信息成组，安静的放置到版面的空白位置。保留引导按钮是为了暗示用户产生点击行为，更多的信息则留到点击后的页面中。
留白具有强调信息的作用，同时也会给版面带来透气感，上图这个例子中，设计师试着将能够填满的空间全部填满，使得信息的边缘没有足够的喘息空间，元素的边缘之间相互影响，从而降低了版面的识别性。另外，从信息内容的气质来分析，也不适合选用这种满版的编排形式。
琐碎的视觉空间充斥在整个版面中，使原本拥挤的版面变得更加复杂。分析内容信息，文案中的主要内容佛珠，被放置在版面的中心位置，而其余的文字信息与烘托氛围而添加的佛像放置到了版面的两侧，为了解决原材料的放置问题，也可能是为了填补佛珠内部的空白，设计师将两块木板不规则的放置到了佛珠底层位置。
将原版面的素材拆解开来，根据文案内容，我们首先要传递的信息是“缅甸花梨木”所制作的成品“顺纹佛珠”，其次是烘托佛珠氛围的佛像（这里并不清楚这尊佛像是否与缅甸有关）再其次是原材料“花梨木”。划分好主次顺序后，我们重新编排这个版面。
经过修改后，版面信息变得更加直观。将佛珠与佛像成组，作为版面中的主体元素，佛珠的面积大于烘托氛围的佛像，佛像的位置也填补了佛珠内部的空白，原材料以底纹的形式平铺在版面中。与原版面对比，修改后的版面更加易于识别，留白的加入也进一步烘托了版面的禅意与雅致感。
修改后的留白面积增大，完整留白空间使版面变得更加规范，同时也加大了元素周围的空间，使其减少边缘的干扰，更有助于内容的传达。文字与主体在版面的比例关系大致卡在黄金分割线的位置，相对于原版面来说，会更加和谐与自然。
在已知版面周围都会出现什么色彩的情况下，我们可以通过色彩的变化，使版面从大环境中凸显出来。具体可以通过色彩明度的变化与色相饱和度等区分。左图中黑色的色块在接近浅色的环境中非常的显眼，右图中环境色均偏冷色调，暖色调的红色成为了焦点。在修改色彩时，也需要看项目的气质与色彩是否匹配来决定采用何种色彩。
banner广告的目的是吸引眼球并传递信息，而有些banner的目的除传递信息外，还需要观者产生点击行为，这就需要在版面中加入“查看更多”,“立即参与”,“了解详情”，“马上开始”等虚拟按钮（Call to Action）来暗示点击行为。虽然作为banner广告的点击有效区域是整个版面，但为了让观者知道这个版面是具有点击功能，设计师经常会加入虚拟的点击按钮来加以暗示。
虚拟按钮的加入暗示着用户点击版面的行为，同时也是丰富版面的装饰性元素，并不是说所有需要点击的页面都需要加入点击按钮，因为长期以来，用户基本已经习惯了点击行为。在版面中信息非常丰富的情况下，我们可以选择性的决定，是否加入虚拟按钮。
版面越大，意味着可承载的信息量越丰富，版面越小，意味着能够承载的信息也就越少，如果在小的版面中强行加入过多信息，会导致版面变得非常复杂，反而没办法轻松的识别出想要传达的内容了。
上图的夜景照片在正常尺寸下具有丰富的细节，给人非常宏观的印象。作为常规尺寸下的照片来说并不会有什么问题，但应用到小尺寸的情况时，原本丰富的细节也被一起缩小了。小尺寸下，画面的内容变得非常复杂，甚至不仔细看都分辨不出内容来。画面中没有明确的焦点，从都市夜景变成了模糊不清的纹理。
那么针对小尺寸的版面，我们应该做哪些优化呢？我们可以选择具有代表性的意向图片来解决这个问题。在小尺寸下承载不了过于复杂的信息，相对简单，主体明确的局部特征更容易让人们快速理解。如上图中，南瓜灯就已经可以代表万圣节这个概念了；与其选用医生诊断的照片，局部的听诊器也是不错的选择；表现足球比赛，足球也就是主角，希望大家能够通过这些例子来理解信息的筛选与提取的过程。
图片选择好后，我们来搭配相应的文案信息，这里需要注意的是，因为版面的尺寸本身就已经非常小了，所以文字信息的添加不宜过多。字号方面也不建议选用过小的字体，因为过小的字体可能会导致观者的阅读困难。
对于那些竖条形状的版面来说，常规的图片尺寸基本都需要经过裁切处理才能完美的镶嵌于其中，无论是横向还是竖向的版面都会涉及到这个问题。设计师需要具备识别照片中不可裁切区域的眼光，所谓不可裁切区域，就是只要被裁切后，就无法正确传达出想要传达内容的区域。
有时，就算已经放大到不可裁切的地步，版面依然没有被填满，这种情况大概可以分成两者处理形式，一种是采用不填满整个版面，直接采用这种两段式结构；另一种是采用拉伸图片内“可延伸区域”或填充边界附近的颜色，来实现版面中图片的全覆盖。两种方式各自拥有不同的气质属性，需要根据实际的项目调性选择。
banner设计经常会遇到将设计好的版面元素延展到不同尺寸的情况，俗称也叫“套尺寸”。遇到这种情况时，需要注意哪些呢？上图大致模拟出设计好的一些基本元素，试图让大家理解相同元素在不同尺寸中的应用以及变化。
需要注意的细节大多是上文提到的关键点，主要考验的是设计师对版面的把控能力，以及在不同尺寸的版面中元素的变化性。
根据文案信息发想关联词汇，这是一个电影配乐的合集，从标题文案中，我们可以提取出“跑调”“放飞”“电影配乐”以及“品味”等关键词。在第一层关键词中似乎还很抽象，我们可以继续联想，跑调可以理解成找不到音调，这个“找不到”就可以用更加具象的指南针来比喻它，五音不全也可以代指跑调，那么跳动的音符图标呢？以此类推，借助思维导图的方式，我们可以将抽象的词汇找到可以表现的具象的点，并根据这些关键词来发展创意，从不同角度找到设计的切入点。
选用代表歌声输入的麦克风，作为这个版面的主视觉。因为是横版尺寸的原因，为了不让麦克风显得过于小，这里运用裁剪的技巧表现特写中的主体元素。同时金属材质的加入，也为画面带来了一些品质感的印象。
人声是主乐，其余的也就成了配乐。为了表现这个主副关系，调整麦克风分割版面的比例，同时添加色彩加以区分，作为电影配乐，红蓝眼镜经常与电影这个概念绑定在一起，选用红蓝作为区分色也多少可以暗示出电影这个印象吧。文案中，“跑调没关系”属于一个趣味点，这里决定着重表现“跑调”这个概念。
将文案信息划分好层级关系后，按照大中小的比例编排到版面中。“跑调没关系”放置到红色的主要区域，其余文字放置于从属区域。为了保证主标题的主导地位，我们刻画一下主标题，将文字复制一层并改为描线层叠到文字下方，给人立体的感觉。主体环境光的加入，也让其在版面中能够更加融入这个环境。
表现跑调的指南针与表现音乐的音符图标进行结合，点出了找不到调这个概念。我们将其作为装饰信息放置在主标题旁边。“放飞你的品味”则绘制了一个在蓝天中自由飞翔的飞鸟，以抽象的图形来表达自由与放飞的印象。
整个版面主要讲的是音乐相关的主题，为了丰富版面形式感也为了让两侧色块建立关联性，添加代表配乐音频的音波线，并围绕整个版面，起到了将左右两侧的画面连接到一起的作用。音波的图形与主标题左对齐并与之成为组合。
跑调也常被说成五音不全（中国古代为五音），即do／re／mi／fa等，我们将其放置于版面的四个角落作为装饰，也应了五音不全这一印象的图形化，将其围绕在音波线的周围。
继续刻画主视觉，模拟出印刷时的套色不均衡的样子，为主体带来一些设计感，右下角入“音乐频道”的节目标签。描述了这是某音乐频道的一档专题栏目。
两边色块稍显单薄，将“跑调”与“放飞品味”两个英文翻译以装饰的底纹的形式置于色块中。为版面烘托出一些国际化的味道。注意在不同的底色下，底纹透明度的数值调整是不同的，红色底纹的透明度要少于蓝色底纹的透明度，在视觉上两边的明度才会是一样的视觉感受。如果两边采用相同明度，会在视觉上显得蓝色下的底纹偏弱。
最后，为了继续加深版面的品质感，为其加入纸张的纹理效果，这个版面就基本完成了。版面中的所有元素的编排以及效果都是建立在思维层面上的，一切元素的位置都是有理有据的。只有能够说出道理来，你的设计才会更具有深度和寓意。
电影是以数字影像呈现的，而跑调在这种环境下的视觉化应该什么样子呢？如果说正常情况下的电影放映是在美妙的歌唱的话，那么跑调的影像就一定是这种因为故障所产生的干扰效果了。给人一种封存很久的复古录像带的感觉，其中充满了故事性。
根据文案信息展开联想，这是一个陈奕迅的歌曲集合的专题，强调那些不为人知的好听歌曲，让大家重新认识陈奕迅。因此仅根据文案信息发展联想关键词，“从头来过”这里可以理解为回到过去，重新再来，时光隧道也算是一个可以具象呈现的点。冷门好歌，也就是那些人们大多都没听过的，未知的歌曲，充满了不确定性，也就有了若隐若现等联想词的产生。根据以上得出的可以具象展现的切入点，我们开始执行版面的编排。
找到这张图片还是蛮惊喜的，这张摄影除了展现了陈奕迅本人在闭眼想象的肖像之外，背景还结合了舞台背景的抽象图形，这也可以作为暗喻时光隧道的一个意向。冷色的整体色调与“冷门”多少也具有一定关联，将主视觉经过裁剪后居中放置到版面中。
采用图叠字的技法将文字与主形象结合，放大冷门好歌四个字，强调为主标题，并吸取人物身体的色彩填充到文字上。其余小文字作为二级文字编排到版面中上方位置。
为了表现“不为人知”，“若隐若现”的概念，以降低主标题的透明度来表现。使文字底层的图形透叠上来，增加了主标题内部的细节。描边的加入，是为了将原本因为降低透明度而变暗的色彩重新提亮。
继续为主标题添加细节，“若隐若现”也可以理解为遮遮掩掩，遮挡这个点可以应用在文字笔画中。将文字笔画以重新覆盖的形式添加到文字笔画交错的位置上，这样也间接提高了字体本身的层次效果。
接下来为笔画添加色彩，继续刻画主标题文字。因为文字与画面的色彩面积已经占据了主导地位，所以这里选择不同的色相为笔画填色，也不会导致版面色彩变得凌乱。
不同色彩的笔画，经过拆解后刚好可以作为彩色纸片的意向呈现。来烘托动听的歌曲给人们带来的愉悦，欢快的心理感受。天空中洒满了碎彩纸，也表现出了热闹的氛围。
最后，将英文名作为装饰元素添加到版面左上角的空白处，其余文案信息也依次添加到版面的空白位置，这个版面就基本完成了。
本期我们一起学习了如何使信息保持简洁的处理方法，以及字号的对比技巧。同时也探讨了留白与色彩是如何产生凸显作用的，吸引点击的按钮更是引导用户的有效手段。最后也向大家介绍了各种尺寸与比例下的延展技巧，希望本期我们的内容能够对你有所帮助，熟练掌握好这些设计技巧，是提升banner点击率的基础。只要有效并快速的将信息传达出去，有兴趣的用户自然会产生点击行为了。那么本期的内容就到这里，我们下期再见～
往期精品内容推荐（点击图片）
长按二维码关注研习设
每周一篇原创、精品设计文章
（每周四晚9:00）
欢迎个人转发，转载请参照“转载须知”