Banner设计 - 从入门到精通(优秀网页设计15期讲座).docVIP

Banner设计V4.0 很高兴能有这个机会跟大家在这里分享一些我的心得。 首先要感谢@优秀网页设计创造了这个平台 首先简单的介绍下自己，目前我主要有3个身份。 我叫刘昊，从小喜欢画画，泥塑，电脑游戏。毕业于北京电影学院（动画学院） 15岁组装了自己的第一台电脑（后成为硬件发烧友，精通软硬件） 16岁开始学习传统动画，CG绘画等。 17岁接触互联网，并成立个人网站SixDogsNet（99年互联网春天一片大好，做过GUI外包也做过资讯频道编辑） 18岁本来想出去工作，考了个Adobe 平面设计师认证（ACCD） 19岁但后来还是考上了自己梦寐以求的学校…… 99年成立了个人网站SixDogs’Home 00年注册了国际域名SixDogs.Net 后来以SixDogs这个网名混迹至今。期间的作品，网站被《漫友》、《大众软件》、《HOPE》、《电脑报》、《计算机应用文摘》等杂志发表和推荐收录。 可能老一批网虫对我的这个名字有点印象。05年后因为全职工作就消声觅迹了。 多附一张图，以前很想做一个自己的品牌（狗牌……哈哈哈哈） 所以早期做过很多尝试…… 2005年---悲剧至今全身心专注于GUI、Web等视觉、交互设计。 先后服务于：新浪UC、猫扑、中国雅虎、淘宝网。 所以在7年全职设计师生涯中，积淀了一些小体会。下面跟大家分享下~ 之前本PPT（Banner设计-从入门到精通）放出来后，很多大神跟我说，缺少设计思路，设计方法等介绍。其实我是觉得设计本身主要贯穿了3个环节：沟通；创意；实现。 我个人更热衷分享实现环节的技术。 不是因为另外2个不重要（如果大家有想跟我讨论另外2个环节的问题随时欢迎~） 而是我觉得实现的技术更通用些，大家获益的比较直接，也更容易拿到结果（设计质量提升） 那接下来我们就正式开始喽~ 华丽的分割线------------------------------------------------------------------------------------------------------------- Banner设计其实是我们接触互联网工作后，最常见最普及的一种工作。它就像主食一样，支撑着一个项目，一个公司，一个网站的运转。也是多数新产品，新事物，各种优惠活动呈现给用户和消费者的主要第一途径。 其实这个PPT最初的目的是帮助我项目线中的运营同学能够自己完成一些简单的Banner任务，来缓解我的压力（）后来随着UED的壮大，这套东西就汇总成了PPT形式，用以新员工培训。大家在@优秀网页设计上下载到的是第四版。 什么是Banner？ Banner的核心使命其实是吸引用户关注，然后被点击。 所以它会是主题性明确，突出关键内容并有效抓住用户眼球的一种广告。通常穿插在页面中。当然在有效吸引用户的前提下，能跟不同页面融为一体是最好的境界。 大家可以看到上图中首焦Banner。 粗略一看我知道是卖服装的，39块包邮的T恤。 仔细看下，他们专注做T恤17年，但我看到左边的T恤时，我真不觉得他们这17年有在用心做（笑）另外似乎是新品上市的样子……还是国货（信息量好大） 其实用户并不太需要一次性了解这么多信息，过多的信息反而无法让用户集中于一个重点信息上。这也是需求方经常范的通病---填鸭式Banner 举一个正面例子 这个banner其实很暴力，百张影票，明星道具1元拍。这个文案很给力，也很直接。另外注释是构想私藏张学友演唱会等。目标群很明确。简单直接明了，这种banner在轮播中更容易被用户关注和点击。 结论：其实Banner设计的初衷还是被点击。那么所有的设计和创意都是围绕着吸引用户来进行的。简洁有效的文案，有时候是需要设计师自己去理解需求并提炼的。但是最后我们呈现出来的结果，一定要有重点，一个核心内容，几个围绕说明会变成一种成功率很高的套路。 那么在淘宝网的Banner需求中，我们的流程大致是这样的。 其实从图片上的流程可以看出来，沟通的过程会消耗掉一部分时间，然后就是初稿后的跟进。后面的反复修改我并没有写出来。因为随着设计师经验的积累，偏离核心目标和反复修改的次数会越来越少 字体方面 在淘宝，我们是禁止使用一些未授权字体的（因为字体公司会来讨伐） 所以在不能使用微软雅黑的前提下，我们通常使用“方正兰亭黑简”来达到相似效果。 在一个Banner中，尽量避免使用2种以上字体。字体清晰好辨认为佳。变形申拉什么的在保证品质的前提下可以有，但要符合需求本身的风格。 图片素材 图片的质量会影响到一个Banner的好坏及品相。那么其实大致需要注意的有3点： 图片的清晰度辨识性（模糊的图片会给人以不精致的感觉） 卡通素材的使用（谨慎）通常卡通素材是有版权的，另外就是跟Banner内容的风格是否一致。例如我曾经接手的保险类推