QQ空间怎样设计让广告动起来【网页设计】.docxVIP

QQ空间怎样设计让广告动起来【网页设计】作者: 一网学???最后更新时间：2015-07-21 14:13:34编者按：同学们除了每天紧跟优设的#每日作业#熟悉软件，想在能力上有质的提升，还得多花时间学习高手们的创作过程。今天腾讯的设计师把一个QQ空间视频广告的创作思路和想法分享出来，全程满满体现的都是专业素质范儿，绝对能让你一窥成为高手的门径。背景六月，深圳，在这个最容易骚动的季节和城市里，刚度过10岁生日的QQ空间也在酝酿着一场骚动——关于广告的骚动。目前在SNS社区信息流下所展示的广告都是静态图片，这种类型的广告对于客户而言很难多方位的展示产品，同时对用户来说吸引力也较弱。在此背景下QQ空间主动追求变化，决定推出SNS第一只开放视频广告，让信息流广告有更多的可能性。所以就需要一次推广活动，把这一全新广告能力传播出去，让更多人了解，扩大行业影响力并触达潜在客户。初步思路要把此次推广做好，就需要站在广告主和用户双重的角度考虑问题。虽然这次推广面对的是广告主及潜在客户，但是也要充分考虑广告受众（也就是用户）的体验。对于用户来说，大段文字的描述很难第一时间抓住其注意力，少量的文字或者图画又无法把问题讲清楚。为了解决这个矛盾，并把对用户的干扰降到最小甚至把干扰转化成兴趣点， 方案决定采用动静结合的方式—静帧和GIF图搭配。按照系列进行投放：最初几天，每天放出系列图中的一张，最后一天引出视频。这样自然而然的再把前几天的内容串起来。表现方式确定之后，难点就在于用什么来承载：既要和主题贴合，又要通过一系列从静到动的变化来体现动态广告的优势。基于上述认识，经过讨论先确定了初步的文案，如：对CD、黑胶来说“动”才有价值：对风扇而言“动”才能实现其功能；齿轮“动”才有力量；风力发电机“动”才有力量；舞蹈“动”才有生命力；最后视频广告“动”的才更精彩。视觉尝试面对初步文案，视觉首先要将其解构为视觉语言，并对其进行视觉语义分析。我们将文案拆解为“视觉元素”和“文字元素”，所谓视觉元素就是设计方案中出现的图形元素，这里包括风车，CD，萤火种等；文字元素则是视觉元素的行为方式，这里主题元素为：“动”。视觉元素的设计：首先为了展现视觉元素的特点，所有的视觉元素都采用平视视角来完成。其次，视觉元素都采取拟物与扁平二混法进行设计。再次，色彩上尽量不要出现多余配色，以灰阶为主。文字元素设计：“动”这个概念抛出地过于直白，用户太容易猜到结果，引不起用户进一步了解的兴趣。若采用“想xxx”这样的语气，则给用户的想象留下空间—用户似乎看懂了，却又不知道要干什么，给其留下了悬念。下图是两张初步方案稿。大家觉得虽然“想xxx”含蓄一些，但还是不够有趣和耐人寻味。于是在此基础上又优化了一轮文案：先说静的好，但是还差一点，以此来吸引用户的注意，最后再由静到动地去把动态的“好”展现出来。根据新文案，再次进行解构和设计。通过解构我们得知，重点在“差一点”，那么如何向用户表达差一点呢？首先，我们对构图进行了变化，将视觉元素由满图改为半图：在视觉上给用户的第一感觉是—哎？图还没完呢，还差一点。同时配合醒目的文字：“XX，还差一点”这样的句式来强化对用户的印象。随着图片的投放，用户会觉得越来越神秘—-到底是什么还差一点呢？第二，对配色进行了改变：灰阶图虽然唯美，但由于过于平淡，无法在第一时间给用户形成视觉冲击。因此，如果在大面积的灰色中加入一些醒目的颜色就会变得非常富有张力和动感，给人一种静中蕴藏动的感觉，也为后期做了铺垫。这个冲击色的选择需要遵循两个原则：1.醒目。2.不违和。3.传递品牌价值。由于QQ空间的品牌色是黄色，首选此色，经过设计比对，此黄色满足前面提到的三点。第三，质感方面，没有采用卡通化和超写实的表现手法，仅用简单的颜色渐变填充。去掉明显的高光，把不重要的细节简化成色块，突出产品轮廓及块面的对比。弱化了细节的干扰后，颜色对比就更强烈。最终方案挂在墙上，或是迎风飞扬？快乐，由你主张——7月7日见！尘封遗忘，还是浅吟低唱？优雅，与你共赏——7月7日见！习以为常，只因从未失望！精准，伴你成长——7月7日见！生活本来动静皆宜，何必忍受平淡无奇——惊喜，明天见！静态图确认之后就开始着手动态视频的制作。我们宣传的是动态视频，也就是从静态广告到动态广告。那么视频也应该契合这个主题。因此视频应该：先展现静—再由静过渡到动—最终动态画面出现。这样从形式上和内容上都符合我们的主旨；而且在一个动态的视频里表现出了动和静的区别和强烈对比，这个视频本身就说明了动态视频的强大和优点。视频结构选取了四种视频元素：风车、唱片、手表与萤火虫。之所以选择这四个元素，是为了突出静与动的差距；这四样东西只有动起来才能展现其价值：制作风车就是为了它能迎风而动，否则对于人们毫无价值；唱片不动，永远不能知道其中