Banner设计心得

    前几天，我受到了一次打击，之前海盐的紧固件的专场上线后，实际的效果与我原本的设计相去甚远。究竟是什么原因造成了这样的差异呢？在经过一些对照比较后发现，问题就出在“Banner的设计”上。线上的版本只是将一些简单的未经处理的图片放了上去，话说术业有专攻，倒也是为难了运营的同学。一个好的页面是由若干个优秀的点组成，今天在这里就以首页Banner工业品类为例，进行模板化的粗浅总结，以期望对往后在保证Banner设计质量的前提下提高工作效率有所帮助。

    我将一块好的Banner设计总结出了3大条件：

    1. 明确的信息传达；之所以将这一条列为第一点是因为Banner最主要的目的在于告诉用户我们要干什么，我们要告诉他们什么。在网络世界里，我更倾向认为其是一个能真正体现个人意志的地方，如果我们不能在最短的时间内把我们想说的传达给用户的话，那用户会毫无顾虑的选择离开，而不用考虑什么“情面”。在具体的Banner设计中，信息的传达方式无外乎2种――图片和文字；图片是一种最直接的传达模式，也是用户理解成本最低的信息接受渠道，因此图片一定要选择明晰的，一眼看上去就知道到底在卖什么，要表达什么。

    而文字，是要进一步的告诉用户，我们这个是干什么呢，能给用户带来什么，是打折呢还是新货上市？因此，我们要按照我们的利益点的轻重来依次展现，例如我们最大的卖点就是“2折销售”，那么毫无疑问，“2折销售”的字样一定要大，要醒目，其余的则需要相应的弱化。

     2.合适的创意；一直以来我都认为我们做的其实是“戴着脚铐”的设计，我们需要在一定的框架内进行设计，否则网站的整体性从何谈起，毕竟我们做的是设计不是艺术。

    那Banner具体如何来“创意”呢？（之所有选择“创意”这个词，是因为“设计”包含文字排版，整体创意等，而这里说的是具体的创意）也许Banner的创意有千万种，但是有一种是较容易实现并能在之后的其他设计中通用的，这便是“氛围的营造”。所谓“氛围的营造”就是指根据具体产品的特性来烘托周围的气氛，这个气氛可以是一个很小的相关元素，例如下图，所有的设计都在于机器迸发出的火花，这虽然只是一个元素，但是却可以让死气沉沉的工具“活起来”，最为关键的是这个元素承载了多种电动工具的“共性”，换句话说就是在不同的电动工具的Banner设计中都可以使用到。

     3.优良的素材；很多时候，一个拙劣的素材会毁掉一个很好的创意，可以说素材是Banner设计中的点睛一笔。那么什么样的素材算是好的素材呢？我个人觉得有2点：一是较好的摄影效果，虚实有别才能形成较好的空间感；二是要靠设计师自身去辨别寻找。我总是认为，没有丑陋的事物，只是我们没有发现独特的美。就拿下面两幅图来说，同样的元器件，差别在哪里？

    如何定义模板：

    模板不仅仅是字号、颜色，而是包括了信息传达方式、排版、字体、创意、素材等一系列要素，我们所要做的一是规范二是找到共性。下面将从文字、创意、素材3大类来进行分析与设想。

    1.信息传达的一劳永逸――文字与图像；首先文字在于图像的层次之上，文字的排版、字号、字体都应有所规范，我们可以定义出不同文字量的排版方式，例如主题4个字的排版方式、8个字的排版方式等，相应的辅助文字对应主题如果排列；文字的层次关系需要明确，字体的选择尽量统一在3种字体选择内，当然在具体的设计中可以有所改变，但是至少要给设计师以参考。图片作为背景可以贯穿整个Banner，主体图片位于右侧，所占Banner比例约为三分一，这样整个Banner不会显得太拥挤，文字的辨别也较为明晰。

    2.创意的一劳永逸――“氛围”是虚的东西，只要保持核心的意思不变就可以，所有的材质、素材都可以更换，例如下图其“核心”在于体现机械的冲击感，背景材质，主体产品甚至于那个洞都可以更换，但是无论怎么更换，其总体的感觉是相似的。这便是创意的模板，一个创意可以在不同的产品上使用多次，而这其实是找到不同产品中的共性而已。

     3.素材寻找的一劳永逸――我们可以自己去拍素材：有一些产品，即使看起来很丑陋的产品，我们都可以发现它身上独特的一点，刚硬的美、柔软的美、简单的美、复杂的美。只是我们没有发现而已。同一个产品不同的角度能体现不同的特点，就像模特一样。6个角度我们可以使用6次，为什么不可以？

    收集素材的重复使用率：有多少我们电脑里的素材我们是使用三次以上的？又或是我们总是在不停的寻寻觅觅中。

    其实关键在于不要总是听同一首歌:一首歌，再好听，天天听也要腻的，但是如果隔了一段时间，你再听却会有不同的感受。（我们可以准备3套创意，三个素材，如此组合就有9个不同的BANNER。）

建议继续学习：

1. 手机应用创意过滤与失败经验谈    (阅读：2385)
2. 浅析Banner构成与创意设计    (阅读：1867)
3. Banner中的字体结构分析    (阅读：1772)
4. 如何做得Banner通情达意    (阅读：1645)
5. 靠谱的创意！    (阅读：1574)
6. 专题头图的秘密武器    (阅读：1421)