网站Banner的设计 - UCD大社区

让文字讲好banner的故事

讴歌 — 2012-09-13 16:35:12

关于banner设计的话题相信之前已经有很多设计师发表过自己的经验分享，让人看完以后也是感慨良多、受益匪浅。但是这并不妨碍我们再一次提起这个话题，每个设计师的工作方法和设计的切入角度都是不同的，今天我想跟大家着重谈谈banner中的文字设计，如何设计好banner中的文字，让文字和其他元素相辅相成达到和谐的统一。就算只是抛砖引玉，能让大家得到一丝共鸣，产生举一反三的作用，也是非常欣慰的。

对于Banner设计，很多人理解为是信手拈来，不需要太多的设计思路就可以完成，这是有必要订正一下的。设计banner可能并不难，但是设计一个称职又有视觉冲击力的banner，还是需要经验积累的。设计师应该力求自己设计的每个banner都经得起多方面的考验，在这个小方块里真正的做到有板有眼才行。也许很多人会说光设计banner对设计能有多大提高，其实如果你做到能设计好banner，你会慢慢发现做专题，甚至很多产品介绍页面也会越来越得心应手。接下来，我就跟大家谈一谈自己对于banner的中文字设计的一些经验方法，如有纰漏或者不同观点，谢谢指正。

一.文字的基本排列混搭

设计banner时候，千万不要不加思索的就把一行文字硬生生的放上去，那会让你的banner直接显得呆板木讷。往往很多新手设计师容易犯这样的错，就算字体颜色样式处理的很好，也会看上去很无趣、很僵硬。这时候我们就需要做一些文字排列混搭的设计：

①大小和颜色的混搭

②排列组合的混搭

③不同字体之间的混搭

④中英文字体的混搭

以上都是一些常见的处理方式。当然这也是banner文字设计的基础，其他很多的文字处理方式都建立在混搭的基础中，所以做好混搭的重要性就不言而喻了。

上图文字没有进行什么混搭，显得文字有些呆板；下图中文字进行了一些大小和排列的混搭，更能体现所要展现的气氛。

下面我们可以看一看其实设计师所设计的一些简单的文字混搭的banner作品：

二.文字的倾斜与斜切

有时候设计banner，根据背景构图不同或者我们想要更有视觉冲击力表现文字内容时，我们可以尝试对文字进行倾斜或斜切透视等处理，有时候这会更会令你达到意想不到的效果。普通的文字排列平平稳稳，方正有矩，我们可以用倾斜或者斜切打破这种“稳定的构图”，让画面更有动感和层次感。

上面的2个banner是利用了文字倾斜的效果，下面的3个banner同时利用了斜切的效果。文字利用了倾斜和斜切效果后，让文字和整个画面一下活泼起来，更能勾起了用户的阅读欲望。

三.让文字形成相对独立的区域

banner设计时，考虑到有些时候背景颜色比较复杂，也可能背景有比较多产品等元素，这时我们需要让文字放在一个相对独立的区域或色块中，如果没有相对独立的区域，我们就要自己设计创造出这个独立区域和色块，这样更便于文字阅读，也能让文字的视觉焦点加强。例如下图：

四.文字变形的魅力

设计banner和专题头图时，设计师经常用到文字变形，好的文字变形直接可以影响到文字的趣味性的提升，让banner和页面的气氛被烘托得相得益彰。很多设计师感觉设计banner只是个小工作，用不到文字变形那么麻烦，其实不尽然，选好合适的参照字体进行简单的文字变形并没有多么复杂，但是却能提升banner设计的品质，所以说益处良多。下面我先给大家举个工作中设计的小例子：

同理的文字变形设计延伸：

下面让我们再来看看其他优秀设计师对于文字变形设计的作品:

五.文字的3D应用

3D文字效果的应用在banner设计中也十分常见，利用好AI和PS等工具可以制作出令人满意的3D文字，如果你肯花多一点的时间，在材质或者光影上还可以做到进一步的效果提升。下面让我们看一些优秀设计师设计的3D字体样式banner：

六.生活中的字体元素

我们设计历史文化频道的banner时，或者当我们设计中国传统的节日时，经常要用到一些中国风的元素，就例如毛笔字。在生活中字体元素，毛笔字、粉笔字、字帖等我们也可以把它们活用在banner中，配合合适的背景和主题，让你的设计更突显出banner气氛。

上面的2个banner是利用了粉笔字的设计效果，突出了年轻，活力；下面的3个banner使用了毛笔字，字帖等中国风的字体效果，体现出文化，品味和底蕴的感觉。

七.犹抱琵琶半遮面

banner中，字体的设计一定要清晰，这样可以便于用户更流畅的阅读。不过有时也可以让文字“半隐半现”，前提当然是在保证没有阅读压力的情况下。“半隐半现”的文字可以让你设计的banner更生动更有层次感。

文字的下方部分被隐藏住，但是并没有妨碍阅读，反而让文字有了种融入背景环境的感觉。

文字的左边缘被上一个字压住，有种层叠的感觉，让文字的排列更显层次。

写在最后，banner中字体设计相关的学问其实还有很多，我这里只简单写了一点自己的经验心得。以上图例中有部门是网上收集来的其他优秀设计师的作品，文中借用不甚感激，如有侵权请及时告知，谢谢。

营销活动制作过程——以321大促为例

家宏 — 2012-07-11 09:11:40

一、需求分析

众所周知这是设计的第一步，个人认为这也是最重要的一步；因为整个活动的风格走向都是在这一步确定的。首先需要弄清楚需求方想要什么，可能这个需求方不止一个人，关键是谁来做决定；通过直接或间接的方式收集到的关键词是“热闹”、“抢”；因为是为3月21日的促销做预热，所以整个预热页面的重点就是促销气氛的烘托，以及3月21日当天活动告知。下面左侧为321预热页面需求草图，概括如下（右侧）：

二、颜色提取

三、创意构思

需求方案、时间、创意三个变量共同决定着作品质量；例如上图中黄色三角形的面积，通常来说面积越大则质量越高；当时间比较紧张时，则可以通过创意部分提升设计质量。

构思过程：

step1：

首先通过分析需求方案，可以发现整个活动都是围绕时间进行的，分为“00:00-09:00”、“00:00-09:00”两个时间段；于是联想到可以通过时间（或时钟）概念来对页面进行布局；

step2：

进行参考页面收集、提炼

step3：

把脑子里已经出现的雏形绘制出来，可以在纸上画草图，也可以在软件中用大色块填充；目的就是低成本的评估效果，以确保方案可行；如果此时对方案不满意也可以快速调整，这样就可以避免设计后期推翻重来的风险。

四、设计及优化

细节主要调整点：

1、优化了活动内容与时间的对应关系，使之更明确

2、背景层增加了多种产品图形来烘托促销气氛

总结：

虽然给设计师预留的设计时间只有三天，但只要做好需求分析选准方案，同样可以事半功倍。以上分享的设计过程只是个人经验，仅作参考欢迎讨论。

Banner设计“点横竖撇捺”

zhangqun — 2012-06-27 09:17:46

文字，这种与人类历史几乎同步的信息表达形式，同样也是视觉传达设计中最重要、最基础的元素之一。她的历史沿革应该已经有非常多的同学做过分享介绍，这里就不再赘述。我想讲述的是字体在网页设计中的运用，她最为常见的一种承载形式：banner字体设计，这几乎是每个Web设计师都会遇到的设计内容，不论是通栏、半通栏，还是各种大大小小尺寸以及活动营销推广的页面头部，都可以看到字体设计的身影。

阿里巴巴中国站首页改版后对于页面内的banner推荐位有了更高的要求，这也引发了我对如何做好一条banner的思考，我觉得在banner设计中相对图形及背景元素的运用，文字本身的设计与排版要重要很多，即使在没有任何背景元素的情况下，文字依然可以良好的传达信息，因此如果我们对banner上的文字进行巧妙设计不仅能鲜明的表达设计主题还能够增强用户关注度从而获得高的点击率，更可以提升网站页面审美价值，也只有理清的这样的思路才能更好的制订设计规范，保证页面广告投放质量的一致性。

下面根据我的理解大概的罗列了几种平时最常见banner字体设计表现形式(视觉大牛们请轻拍)：

根据文字本身的具体内容及其含义，使得文字的笔画结构与文字内容含义一致，符合用户的心理预期，下图中“断”字就故意在最后一笔切断。

思考banner的观众是谁或者说这个产品是谁用的，针对儿童类产品，在字体的表现上可以幼稚活泼一些，在设计上增加一些童趣的意味，假如是针对机械类产品，可以在字体笔画结构上做的硬一些，棱角分明，假如是针对女性的，文字的构建上可以纤细柔美、也可以时尚秀丽，假如… …

根据不同的主题氛围进行设计，如端午节，中秋节等传统节日进行的推广设计，可以增加人文的设计元素，如使用书法字体，用字体去烘托这个氛围，同样比较常见的还有一些使用礼品带、花枝藤蔓等装饰性元素结合文字出现以增加设计的美感。

用辅助图形与字体结合，这样的组合方式非常常见，设计原理就是根据字意词意，使用与之相关的图形元素与字体笔画形体相结合，图形元素的使用可以是具象的也可以抽象的，但对于这个的形式也很容易陷入设计泥潭，过分的强化图形或者说图形过于复杂，反而对字体有效传达造成影响，在设计时尽可能避免过度设计。

作为五笔画的最后一笔，除以上讲述的内容外，对于banner中的字体设计还是应该追本溯源，形式上的美感自然是设计表现的一方面，但再好看的商业设计也不能脱离一个设计关键要素：易识性，怎样才可以让字体既美观又具有良好传达力的呢？

1.咱们在做字体设计的时候，笔画粗细及风格要做到统一，这里说的统一并不是让你将文字的所有笔画粗细都调整的一摸一样，而是对于在一个词语内，同样的点与点或者横与横等需要尽量保持一种大小粗细，这样的好处是不会出现同样的笔画却大小不一，视觉上很凌乱的感觉。在完成了这样的粗细调整以后，为了使文字更富有变化，对于常见的勾、折等也应该进行风格上的统一，尽可能让文字结合起来看的时候拥有相对一致的视觉感受。

2.空间上的平衡，简单的说就是在进行字体设计时需调整空间留白，汉字的字型有繁有简，合理的分配笔画内的留白空间，才可以使文字看上去更为协调，不会因为有些汉字过于繁琐，空间留白不够导致很挤很压抑的极端情况。

3.为了解决可能出现的某几个字的笔画相差太大，在视觉上容易出现轻重不一的情况，对于设计完成的字体组合还有一次针对整体的微调过程，尽可能达到视觉的平衡感与一致性。

写在最后，这篇文章仅作为自己一段时间的设计知识积累，用于展示的案例图片都是取自平时的网络收集，之所以用点横竖撇捺作为标题是因为这是汉字书写最为基础的笔画，同样文字也作为视觉设计的最为基础的元素存在，两者之间存在一定的相通性,大师说设计不是一种技能，而是捕捉事物本质的感觉能力与洞察能力，很赞同。希望这篇呓语之文能多多少少给大家带来启发，也希望能抛砖引玉获得更多的相关分享，不胜感激。

关于边框和底色的那一些小事（二）

火炎新君 — 2011-11-15 22:15:18

记得冯氏幽默中葛大爷说过这样的一句话：“生活很简单，你把它搞复杂了；或是生活很复杂，你把它搞简单了”我想20-30岁的朋友可以理解前半句，30-40岁的朋友，可以理解后半句。你别越龄理解，那么你的心态就老了，也许你都不理解，那么你还不太成熟，比较年轻。哈哈，设计也是如此……。

上次写的博文大家觉得简单易懂，特别是好多的网站编辑觉得对他们的工作帮助比较大，这让“新君”好欣慰呢。与他们之间的沟通，我发现现在的网站编辑工作强度比较大，不但需要编辑各类实时的新闻，也要编辑新闻图片，专题等等。那么这次，我们就把这样的博文风格继续保持吧。“煎蛋”设计，快乐工作。

高手绕行，菜鸟上路，let’s go!

1、选择和底色相似的颜色作为文字的背景色

2、选择互补色作为文字颜色，形成强烈对比，强调文字的重要性。

3）最后是火炎新君收集的banner底图和文字的搭配，菜鸟们平时也要多多收集哦，看多自然心里就有数啦，哈哈。

最后，平时我要注意多多收集好看的banner，把他们都保存起来；不管是编辑还是设计师做图片的时候都可以翻出来看看他们的搭配。

找到合适自己的图片。

相关话题：网站Banner的设计源地址：http://www.365ucd.com/archives/1012.html

banner广告设计8技巧

liaochongzhi — 2011-11-07 16:18:13

在工作我们经常会有banner设计需求，和大项目比较，需求方从设计成本方面考虑，不会给设计师太多的时间。那么我们如何才能在短时间内做一个出彩而效果又好的banner呢？以下是整理的banner设计8技巧，现与大家分享：

一、主题明确
要突出产品主题，让用户一眼就能识别广告含义，减少过多的辅助干扰元素。切忌，banner被切割的太细碎，内容繁多，没有浏览重心。很多广告主往往会认为传达的信息越多，用户越有兴趣，其实并不然，什么都想说的广告，就是什么都没说好。

二、重点文字突出
用文字进一步的告诉用户，是打折或还是新货上市？如果我们最大的买点就是“4.1”折起，那么毫无疑问，“4.1”折的字样一定要大，要醒目，其余的则需要相应的弱化。

三、符合阅读习惯

阅读视线要符合用户从左到右、从上到下的浏览习惯。

不要这样：

四、用最短时间激起点击欲望

用户浏览网页的集中注意力时间一般也就几秒，所以不需要太多过场动画，需第1时间进行产品的展示，命中主题。并配以鼓动人心的措辞口号引导用户。

五、色彩不要过于要醒目
有些广告主要求使用比较夸张的色彩来吸引访问者眼球，希望由此提升Banner的关注度。实际上，”亮” 色虽然能吸引眼球，但往往会让访问者感觉刺眼、不友好甚至产生反感。所以，过度耀眼的色彩是不可取的。

六、产品数量不宜过多
很多广告主总是想展示更多产品，少则4-5个，多则8-10个，结果使得整个Banner变成产品的堆砌。Banner的显示尺寸非常有限，摆放太多产品，反而被淹没，视觉效果大打折扣。所以，产品图片不是越多越好，易于识别是关键。

下面对比一下以下A、B两款Banner中，哪一款更易于识别和引起关注呢？

A取产品局部特征图，同时配合宣传语，简洁明确，易于识别

B产品数量过多，没有亮点，页面堆的太满。

七、信息数量要平衡
很多人总认为信息多就，觉得所有信息都很重要，都要求突出，结果其反。如果banner上满是吸引点，那用户只会被注意，所以在Banner的有限空间内做好各种信息的平衡和协调非常重要。

八、留空
banner画面中需要留空,留空可以使图形和文字有呼吸的空间。

总结

通过以上总结出，我们在设计制作Banner时，需要注意以下几点

1．突出产品及其特征，采用有吸引力的宣传用语，适当弱化公司名称和标识；

2．图片并非越多越好，突出重点是关键，必要的产品说明不能少

3．合理安排画面内容，做到主次对比鲜明

4．颜色不宜过度夸张，努力营造愉悦、舒服的感观感受

相关话题：网站Banner的设计源地址：http://ued.baidu.com/?p=678

19楼的广告位-不影响用户体验的banner广告

izhangmiao — 2011-07-10 22:53:08

对于一些房产网站和地方社区网站来说，商家在网页上的硬广是其主要盈利收入，不断增加的广告收入，同时带来不断增加的banner广告，有的甚至在首页达到三屏至多，贴内五条硬广，另外还有无处不在的悬浮广告，关不掉的对联广告等等，用户苦不堪言，但为了盈利，能有什么办法呢，19楼，作为运营最好的地方社区网站，在广告位的设置方面，我觉得为我们提供了很好的参考。在不影响用户体验的前提下，banner广告怎么放呢。

1. 19楼很少出现对联广告，建议对联广告，如果出现，3秒钟后，自动缩小成竖条放置在屏幕左右两侧，同时可关闭，类似sina。

2. 旗帜广告和logo广告

这两个位置属于类似报纸头条，推广效果最好，不会让用户反感，且美化网站。

3. 注册区的广告

右边侧栏的banner广告和推荐位，这个位置的banner广告推荐效果非常好，可以引起用户注意，同时不引起用户反感。这个在左右边栏各个栏目下都可以考虑增加。

4. 通栏广告一分为五

通栏一分为五，比五个通栏叠在一起，感受要好很多，对商家的推广效果是否比通栏差很多呢，我觉得在文案得当的基础上，不会差。

5. 贴内广告

贴内广告，每一个帖子内页的顶部，19楼有独特的推荐专栏，五个图片推荐位，五条文字推荐位，广告A，广告B因为在“回复”和“发表新帖”按钮上方，靠近帖子标题，会非常吸引用户注意，甚至可能让用户抛弃主帖，转而点击进入推荐帖子。这五个广告位相对贴内五条硬广，给用户的感觉会更好，避免反感和影响看帖。

6. 帖子首个回复前的文字推荐

首条回复前的文字推荐位，效果也很好

相关话题：网站Banner的设计源地址：http://www.kaqishu.com/archives/151

Banner设计

guwei07 — 2010-09-25 22:08:09

前几天，我受到了一次打击，之前海盐的紧固件的专场上线后，实际的效果与我原本的设计相去甚远。究竟是什么原因造成了这样的差异呢？在经过一些对照比较后发现，问题就出在“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。）

相关话题：网站Banner的设计源地址：http://www.aliued.cn/?p=2966

浅淡BANNER设计

lcl — 2010-09-21 10:56:37

“位置：首页第一屏通栏格式：jpg 尺寸：960*90 ……”在工作我们经常会接到这样的banner设计需求，由于它不比大型项目，需求方从设计成本考虑不会给设计师太多的时间，那么我们怎么才能在短时间内做一个出彩的banner呢？以下内容仅个人在目前工作中针对banner设计收集整理的一些方法，与大家分享。

1、主题明确。

在着手设计之前，设计师应该先与需求方沟通，并从中获取需求方想要表达的主题和需要重点突出的点。然后在针对性地对广告对象进行诉求，形象鲜明的展示所要表达的内容。不要放一些没用的东西，除非你想赶走你的用户。

/ 三英战吕布的场景为背景加上随意放置的几本连环画，很好的体现了连环画这一主题

/ 小提琴和玫瑰的组合凸显了贵族的生活品质

/ 两个面带微笑的小学生让人一下就想到了希望工程

2、与整个页面相协调。

当我们确定表达的主题之后，要在banner实际放置的环境中展开后续的设计工作。色彩搭配要明亮干净，要与整个页面相协调。不能为了使banner更加吸引用户的眼球而大面积的使用一些浓重的颜色（特殊需求除外）。

3、顺应用户的浏览习惯。

我们知道大多数的用户在浏览网页的时候都是从上到下，从左到右的浏览。为了使banner更容易被用户浏览,我们应该顺应用户这样的浏览习惯，糟糕的设计会让用户无所适从，焦点到处都是。

因为浏览者的习惯是从左到右地看，这样做会更快更有效。不要认为浏览者会在看广告条内容（左）前点击按钮（右）。

/下面的图是在实际环境中的运用案例

4、点击才是王道

一般我们做的banner都是为了宣传、推广某个产品或新功能等，它本身就是引导用户点击参与的入口，我们目的就是要吸引用户点击。所以我们可以用不同形式和手法来表现，但相同处，通情达意，突出主题，富有乐趣，那它们则能让浏览者产生兴趣。

/上图中作者用红色的幕布和小号烘托出热闹的氛围，一面精致的铜锣第一时间吸引了浏览者的眼球，让人看了就想拿起旁边的小锤去敲打的冲动

我们换个方式来想，设计一个banner，如做一道菜，首先我们应该先确定想做什么菜，然后在把这道菜所需要的主辅材料放到锅这个环境里面炒，在这个过程中我们会根据客人喜欢的口味加入调料，装盘后我们为了搞好这道菜的卖相，在盘子里面放入一些装饰，达到在第一时间内从视觉上强奸人们的眼球，吸引他们来品尝。

本文主要从主题、实际运用环境、用户浏览习惯和做banner的目的这几个方面表达了我的见解，当然，除了上面所说的方法，其实还有很多我们可以借鉴的形式与思路，这里就不一一列举了，希望对大家有所帮助。如有不当之处，欢迎指正。

相关话题：网站Banner的设计源地址：http://www.xmued.com/?p=748

网易UED，连个Banner都做的这么专业

zhouqiang — 2010-08-23 19:41:31

写在前面的话

有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。

一思考专题定位

·顾及需求方的频道定位

因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。

图1
/女人频道的定位是知性，所以这个banner设计风格也是很贴切的。
/banner 赞助夏小萌

图2
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
/banner 赞助 10

·顾及此专题的定位

专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。

图3
/女人频道下的一个怀旧感的专题，所以画面做出了一些怀旧的感觉。
/banner 赞助璇

图4
/数码频道的一个和某手机赞助商的活动，所以banner也表露出一定的商业感

二明白文字在Banner中占主导地位

从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。

图5
/banner文字阐述专题主题，是绝对的主角。
/banner 赞助淑华

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

图6
/对主标题的断词比较巧妙，文字集中，主次明显，且文字与辅助图案相互呼应，统一感很好。
/banner 赞助淑华

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

图7
/长标题的时候，如果把‘征集各种端午风俗’排成一行，就会显得没有主次，也很有吸引力。我这里把‘端午’这个最重要的信息提出来，让用户很容易进入环境，然后让他们继续了解更多的信息。这里还要说一个小技巧，我这里‘征集各种’、‘端午’、‘风俗’这三个词虽然分别用了3种字体，但还是能读出‘征集各种端午风俗’这是一断话，因为同一个红色起到了很大的作用。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

图8
/这个banner附加了一些英文来丰富画面，让画面充满丰富的同时，充满生气。
/banner 赞助 LV

三构建辅助视觉

一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。

3种文字和辅助视觉常见的搭配方式：

1，文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

图9
/banner 赞助胡子

图10

2，文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

图11
/banner 赞助淑华

图12

3，主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

图13

图14

图15
/banner 赞助淑华

四，创造力对主题的艺术化表现

1，严肃话题也能做出新感觉

做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。

图16
/主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。

图17
/因为是做夏季高温的专题，所以在处理画面的色彩时候我对比度做的比较弱，就如同烈日下看东西的感觉。

图18
/这是春运的专题，我在处理画面用了很多斜的构成，因为斜的东西学构成的时候表达那种不安感是比较贴切的。拥挤的人群、阴霾的天空，不安中带着希望，当一张小小的火车票就能映出当回家的曙光时候，我想，或许这就是很多人对于春运的感觉吧。回头看看其他门户的专题，光艳无比，一股社会主义的优越感油然而生的感觉，不知孰对孰错，再想时，我已迷失。

2，轻松话题可以做出幽默感

有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。

图19
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。

图20

3，作品也能带点小情调

有时候来一些小的创意也会让banner增色不少。

图21
/摇滚的不是乐器，还是文字
/banner 赞助竆

图22
/冰雪也的不仅仅是车，还是文字

后面的话

有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。

相关话题：网站Banner的设计源地址：http://www.zhouqiang.com/?p=637

浅谈网页UI之Banner篇

zhouwenqi — 2010-08-09 12:44:37

关于网页UI,UE之类的论点文章网上太多了,更多大师将这些大师分析到极致,无论是开发领域还是设计领域,这些真正的大师所发表的文章都从不卖弄自己,更多的分析而无私的供献自己的独道见解,他们所写博文与其它政治、娱乐、商业等领域所发表的博文完全不同类型，我不是大师，但我很崇拜大师。

一个页面最醒目最吸引用户的应该是Banner了，尤其是Web2.0平台Banner显得更突出，Banner主要体心意旨，形象鲜明的展示所要表达的内容。因为它醒目，所以放一个很糟蹋的Banner上去效果也当然“醒目”了。因此网页Banner设计在这里起到了至关重要的作用，特别是首页的Banner,直接决定了用户的停留，下面让我们通过大量优秀的案例进入Banner，走进大师们的灵感世界。

1.大面积的Banner

http://www.tearoundapp.com/
这个Banner非常直接的采用了一个很大的iPhone图片，用户几乎不用思考的就知道网站的大概内容，而且加上与产品类似风格的功能按钮直接展示了部分功能，大的Banner最直接最醒目，处理也最需要谨慎，否则事关功倍。

例其它类似Banner

2.文字与图片1/2比例

http://www.scrapblog.com/
这种Banner不是很大，虽然文字与图片占居空间相等，但加上大的Button让文字内容相对比较醒目，这种Banner的处理重点在于背景与和图片和文字的协调，比例要均匀。

其它类似Banner

3.人物与文字

http://www.showandtellsale.com/
采用人物加文字内容,让主题思想显得更鲜明活动,人物可以更直接更友好的告诉用户这里有什么?

其它类似Banner

4.创意矢量图形

http://ideafoundry.info/
纯鼠绘而且的矢量CG图形，独特创意和视觉冲击，精致的矢量风格与网站整体完美结合，体现出网站整体实力。

其它类似Banner

5.软件产品界面

http://bydreamtime.com/
大凡软件产品服务网站都将自己的产品界面直接融合在Banner中,加上文字与个性Button,可以让用户直接深入的了解产品基本功能和构造,甚至会激起用户想立即试用的欲望。

其它类似Banner

6.线条与光线

http://www.scarbantia-art.hu/
渐变的背景在融入线条元素，让Banner更加动感夺目，单色或多色的光线让线条和背景更加炫彩，使Banner充满迷幻进一步刺激用户的探索欲望。

其它类似Banner

7.纯文字内容的Banner

不需要华丽的背景,更不需要图片的点缀,只需要一段文字加上单调的背景色....
http://enviramedia.com/

其它类似Banner

由于时间有限更多经典案例没来得及整理和未被发现,不同类型的网站搭配不同类型的Banner，Banner的主要功能到底是诱导用户，还是展示形象，还是刺激神经，这些观点都有它的支持者，所有Banner的核心共同点是让用户在短时间内将鼠标滑上去点击。做到这一点，设计人员还需要好好的琢磨。

如何做得Banner通情达意

wei — 2010-07-26 23:01:50

写在前面的话

一思考专题定位

·顾及需求方的频道定位

因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。

图1
/女人频道的定位是知性，所以这个banner设计风格也是很贴切的。
/banner 赞助夏小萌

图2
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
/banner 赞助 10

·顾及此专题的定位

图3
/女人频道下的一个怀旧感的专题，所以画面做出了一些怀旧的感觉。
/banner 赞助璇

图4
/数码频道的一个和某手机赞助商的活动，所以banner也表露出一定的商业感

二明白文字在Banner中占主导地位

图5
/banner文字阐述专题主题，是绝对的主角。
/banner 赞助淑华

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

图6
/对主标题的断词比较巧妙，文字集中，主次明显，且文字与辅助图案相互呼应，统一感很好。
/banner 赞助淑华

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

图8
/这个banner附加了一些英文来丰富画面，让画面充满丰富的同时，充满生气。
/banner 赞助 LV

三构建辅助视觉

3种文字和辅助视觉常见的搭配方式：

1，文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

图9
/banner 赞助胡子

图10

2，文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

图11
/banner 赞助淑华

图12

3，主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

图13

图14

图15
/banner 赞助淑华

四，创造力对主题的艺术化表现

1，严肃话题也能做出新感觉

图17
/因为是做夏季高温的专题，所以在处理画面的色彩时候我对比度做的比较弱，就如同烈日下看东西的感觉。

2，轻松话题可以做出幽默感

有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。

图19
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。

图20

3，作品也能带点小情调

有时候来一些小的创意也会让banner增色不少。

图21
/摇滚的不是乐器，还是文字
/banner 赞助竆

图22
/冰雪也的不仅仅是车，还是文字

后面的话

相关话题：网站Banner的设计源地址：http://uedc.163.com/2044.html

BANNER中的字体结构分析

K.C — 2010-07-26 15:07:42

本来想写“Advertisemen中的字体结构分析”，后来发现这个标题写得有点大，偏离了在目前工作中的针对性，因此缩小到banner的范围，以下内容仅个人在目前工作中对banner设计上的一点浅见，仅起抛砖引玉的作用。

Banner的传达方式 [TOPIC]
针对网站中的banner

Banner的本身形状：形状决定了其固定的构成方式，一般为矩形，横幅，左右结构和居中；
Banner的文字特点：主题式，一般分为主标题和副标题，文字较多；设计的时候还需要考虑应用到网站各种尺寸推广图的可读延伸性。
Banner的图像特点：辅助主题，增加文字的渲染力。
Banner的传达行为方式：载体为电脑屏幕，IE浏览器的第一屏位置，用户眼睛焦点停留时间约3秒以上。

[由于banner一般用于专题类网站，在门户网站的二级页面，用户进来之前，在首页已经对主题有一定的了解和认识，所以banner的作用是在二级页面中起到包装页面的同时增加内容的趣味度和内容方向引导；所以这也是和传统广告中普遍要求第一感官视觉冲击力来强奸眼球所不同的地方。]

文字在banner中的重要性

对于文字，我们常常听到需求方提出：“字要大！”
“啊？还要大？已经很大了！“ 然后很无奈的拉大一点，其实我们都知道大那么几个像素没有意义；
但细心想想，需求方要的真的只是那么一丁点的追求么？毕竟他们不是设计师，不懂得如何表达自己的想法，而唯一可以让们觉得显眼的方式只有大小的区别而已，或许是因为，字不够显眼，字的处理太普通，背景太抢眼之类的，或许，我们应该理解为：“字要显眼一点“，而”显眼“的方式却有很多种。

Banner=文字+图像[辅助]

Banner上的文字一般都占据了整个banner的70%的区域，而实际图像只占不到30%，往往很多的设计师更专注于那30%的图像设计，忽视了最重要的70%文字区域，最后只用系统字草草拼凑了之，试问这样的一个banner的设计合理么？

尤其当主题被延伸应用到小尺寸推广图的时候，只剩下放文字的区域时，这个推广图算是彻底完蛋了。

中文字和英文字母的属性区别

中文字与英文字母的区别，字母是一种纯粹发音符号，每个字母本身并没有意义，单词的意义来自于这些字母之间的横向串式组合，而汉字的组字方式是以象形为原始基础，也就是每个字都具有特别的意义，一个简单的字在远古时代就代表了一个复杂的生活场景，因而它也是世界上最形象的文字。两者之间的阅读方式和解读方式都有本质的不同，因此，汉字的编排不能照搬英文的编排方式，它们两者之间在编排上有一些客观的区别。

中英文字体的结构分析

a. 同样字号的实际大小不同，英文因为都是字母，字母的构成结构非常简单，屏幕最小可视像素为6px[代表字体：04字体]，中文则结构复杂。屏幕最小可视像素为10px[MS明朝/MS UI Gothic]和11px[新细明体/ PMingLiU]

b. 英文的整体编排容易成段、成篇，视觉效果比较自由活泼，有更强的不连续的线条感，容易产生节奏和韵律感。
中文整体编排容易成句、成行，视觉效果更接近一个个规则的几何点和条块，不容易产生动感的最主要的原因是因为整个结构是闭合的，笔划张力的总和趋于零。

c. 英文的篇幅普遍比相同意义的汉字的篇幅要多，在设计时，英文本身更容易成为一个设计主体，而且因为英文单词的字母数量不一样，在编排时，对齐左边那么右边都会产生自然的不规则的错落，这在中文编排时不太可能出现的，中文编排每个段是一个完整的”块”，很难产生这种错落感。

d. 英文的结构有大小不同的形状，在字形设计上不可能排列在同一条直线上，如gjpqy等字母齐下方的沉降线，而bdfhkl字母上齐顶线，其它字母才齐上中线和下脚线。然而，英文编排时自然产生的错落其实并不是西方设计师所期望的，他们在细排文字对齐上花大量的时间来调整字距、词距、行距、段前距、段后距等，使得段落更趋向于几何形态。

如何处理banner中文字的构成问题

关键字：理解-分解-重构

理解.

在进行文字的编排之前，首先要理解文字的内容。见过很多设计师只注重版式美现而不关注文字内容，文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，对于一条标题，如果我们不去理解标题所表述内容，就很容易本末倒置。这也是设计师需要和需求方重点沟通的问题，并从中获取需求方的关键字。

分解.

根据主题关键字所传达情感，分析字体本身的性格属性，综合画面，对其分解；笔划粗细与结构、留白、重心之间的关系，这是活字设计中的一个综合问题，并非一朝一夕就能掌握的，它不但对字的个性要有深刻的理解，而且还要具有非常敏锐的观察力。尤其对于字体本身所设定出来的一个形象，或这种字体通常会在什么地方出现？见到这种字体会想到什么？这是视觉传达中需要长期积累的。

重构

字体的设计需要考虑到标题整体组合在画面的均衡性，在不破坏字体的基本识别前提下进行再设计，使文字图形化，字体类别中的衬线字体和无衬线字体（serif vs sans-serif），在组合的时候，不建议把无衬线类字体和有衬线类字体直接组合。

从心理模型可以看出，常规的组合排列中，无衬线字体比衬线字体的常规组合性更好一些，但处理的不好反而会呆板。

书法字体，因为书法字体经过历代书法家对字体的追求，使其结构更加牢固，多一点少一点都会影响其本身的字型美感，且气场较强，不适合太小的版式和过长的句子大量使用；学过书法的同学，或许深有体会，在中国书法里是十分讲究“精”“气”“神”，用语言无法表达情绪的时候，书法的字里行间却能透露出来的气场，也就是所谓字的性格。

以上是书法类字体在特定主题情绪表达上的一些处理方式；文字并没有做特别的变形，而是切合主题的做了一些效果。

ps. 记得来网易面试时，HR曾经问过我一个问题：“对于视觉设计师这个职位里，你觉得设计师是什么？你能做什么？”
我说：“设计师在这里，往往更多的是担任着翻译师的角色，把讯息更快速准确的诠释给所有受众。”

相关话题：网站Banner的设计源地址：http://uedc.163.com/2006.html

浅析Banner构成与创意设计

番茄果果 — 2009-11-25 23:41:25

当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得到什么有用的信息，因此网页Banner设计在这里起到了至关重要的展示作用，特别是对于首页Banner，有效的信息传达让用户和文字之间的互动变得生动而有趣，下面就让我们通过大量优秀的设计案例走进Banner设计，走进设计师们的灵感挥洒空间。

一.Banner的构成与设计形态分解

自然界的万物形态构成都离不开点、线、面。它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同Banner的情感诉求。

a.点的聚合

点的排列所引起的视觉流动，引入了时间的因素,利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画面。点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。点的密集排列构成面，同样，点的距离越近，面的特性就越显著。

http://www.peminoz.com/

http://icondock.com/

无数图形的点聚合在一起，增强画面的韵律感

http://www.apple.com/

b.线的流动
线分为四类：直线、曲线、折线以及三者的混合。直线又有水平线、垂直线、斜线三种形式。其中，水平线给人平静、开阔、安逸的感受；垂直线给人崇高、挺拔、严肃的感受；曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或摆动。

http://oypro.com/

http://www.dongfeng-nissan.com.cn/3Ddrive/

严谨的线条，使页面稳重富有理性

c.面的分割

面在设计中的概念，可以理解为点的放大，点的密集或线的重复。Banner元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一

http://rareformbranding.com/

清晰突出的图片所产生的第一视觉点

http://www.cult-f.net/

色块与线条间不同比例的分隔画面，使页面具有形式美感

http://www.prville2009.com/

二.Banner设计的形式美法则

在banner设计中采用特殊的形式结构，会使网页变得个性十足并很好的区别于同类产品，让人记忆深刻。

a.有机形的柔和与美

有机形是由一定数量的曲线组合而成，是自然物外力与内力相抗衡而形成的形态。有机形富有内在的张力，给人以纯朴、温暖而富有生命力的感觉。

曲线与个性化的插图形成强烈的对比。

http://www.wildaboutgardening.org/

b.偶然形的独特魅力

偶然形是力的作用下随机形成的图形，它具有天然成趣的效果，利用偶然因素提炼美的方法，让Banner设计更加与众不同。

偶然形使页面产生趣味性

三.有效的设计创意方法

a.预留大面积的Banner空间创作

Banner设计占用很大的空间，且占用的空间是重要而有价值的面积，那么你需要万分小心的去处理，但是如果处理的好的话，它将会事倍功半，而且信息传达非常有效。

http://tearoundapp.com/

http://digitalmash.com/

b.有效的措辞与行为导向按钮

在banner设计中通过真实产品的展示，并配以鼓动人心的措辞口号及醒目的可以直接诱导用户点击的行为导向按钮，让网页获得更多的用户点击和关注目光。

http://www.guifx.com/

http://www.campaignmonitor.com/

c.插图及清新手绘让页面倍感亲切

http://srburns.es/

http://www.mailchimp.com/

http://www.hdlive09.co.uk/

d.引入肢体语言让画面变得生动

http://www.kompakt.cz/

http://www.ronniesan.com/

http://www.tolingo.com/

http://www.kinoz.com/

e.丰富的产品展示组合效果

用堆积这种效布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服力，丰富而富有层次感。

http://www.htc.com/asia/

http://www.darrenhoyt.com/

http://deaxon.com/

http://digitalmash.com/journal/articles/dynamic-columns/

http://www.shopify.com/

http://www.davidhellmann.com/

f.特殊肌理的组合

适当的运用肌理以及拼贴效果，让画面变得有质感且意味深长，是让Banner与众不同的好办法之一。

http://www.habitationsbouladier.com/

http://www.foxie.ru/

http://www.njrebel.com/

g.让资讯循环动起来

使用滑动效果来将更多信息填进到Banner区域。这对于有很多特性和丰富产品线的网站很有用，通过一些很有用的Javascript库及其插件，让这类效果更加活灵活现。

http://glue.be/en/

http://icondesigner.net/

通过以上大量的案例对比，希望能给您带来更多灵感碰撞，感谢您的阅读 ^_^

Copyright © 2008
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

相关话题：网站Banner的设计源地址：http://cdc.tencent.com/?p=1820

设计72变——寻求banner制作的变化

qiangwei — 2009-11-06 19:55:42

每周的《午间欢乐购》和《周末疯狂购》，已经成为视觉组的固定需求。从开始接触到现在5个月的时间里，思维也和这些小小banner逐渐碰撞出火花。

前期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲初期上手，按照熊猫同学一贯的通用排版去做。始终坚持白底，可以不用抠图，改变丝带的颜色，做做字体变形。

▲组织上下达命令，不能一层不变，需要改变。但是改变在哪里当时还没揣摩透，暂且做些颜色上的尝试。由清爽变成浓烈。

▲似乎是有那么点想通了，试着做风格上的改变，一次可爱卡通风格的尝试。

中期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲年中清仓，促销必然少不了红色，但是在大夏天用太多红色未免太过浮躁，尝试与蓝色的搭配。总感觉3折吸引不到会员了，1折吧~

▲因为模特的衣服和鞋子的色彩将这次主题定位紫色。个人比较喜欢需求这次的主题，所以很偏心的把心思用在主题字设计上。^_^

▲我只想用这个花花背景玩一下，大家先略过吧= =~

▲荧光粉和黄是经典的促销配色。吐血价放在整个视觉中心。貌似构图上有所醒悟。

近期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲好久没玩小粉嫩，顺便做个空间感试试。这是我一贯喜欢的甜美感，曾经有段时间刻意避免使用粉嫩，现在重新回归一下。

▲看到需求文案就觉得要cool，现在看来，当时想得太简单，欧美范很不够哪！应该力求简洁大气才对。

▲街拍立马就想到杂志感，需求给的文案是街头达人秀，觉得少了点什么，恩？加上look！才是杂志的范儿。

▲秋天到了，很庸俗的用了叶子和棕黄色系。个人对模特MM和旁边的箱子很喜欢，秋天是个该拖着箱子去旅行的季节。

▲在懒惰思维中继续挣扎，还是叶子，还是棕黄色系，唯一有变的是背景格子布和缝纫的线头。

▲这次是一次品质感的尝试，因为我找到了一个灰常有品质感的背景。hoho~

▲好玩的主题，所以任何一个元素我都想表现到位，唯一的缺憾是模特的着装不够party。

关于处理此类需求还有几点小建议：
1.这块banner起到页面中页头的作用，商品基本都是用来做点缀的，listing页面里并没有卖，商品不要打价格会误导会员，如果觉得画面空可以加商品标题。
2.每次根据需求的主题去寻找新的素材，围绕文案制造出一些小情境。放上应季应景的漂亮商品才是最有氛围的！
3.左侧固有的斜角区块可以根据每次排版做些变化，没必要都是丝带+文字。与主标题一起设计整个画面会更融合。

4.在需求文案原有基础上可以稍作调整，加上如“hot”、“至in”、“3折”、“look”、“抢”等煽动性文字。

5.好的素材是可遇不可求的，所以平日的积累才是至关重要的。

用心去设计，大胆的玩设计，朝着你感兴趣的设计点出发，寻求banner制作中的变化，让每个banner都是你独一无二的心思！

相关话题：网站Banner的设计源地址：http://ued.alimama.com/?p=317

BANNER二三事

小多 — 2009-09-26 13:07:05

看到几篇写banner设计的文章。考量角度是BANNER的转化率和视觉引导，和美不美无关。。。

第一个观点是：利用BANNER中人物的视线引导用户。
下图是利用眼动仪测试的两张不同BANNER的效果。
很明显，图2的主体文字部分受到的更多的关注.

Smashingmagazine 在这篇文章的下方放了一个这样的BANNER:
^_^学以致用啊。

第二个观点是：广告链接到和其内容相符的页面，可以减少页面跳出率。
下图是同一个广告到不同的两组页面的跳出率测试：
图1是链接到搜索结果页，图2是链接到更匹配的电钻页，跳出率减少了20% 。
如果广告主投放广告是按照点击付费的，无疑后者会给他带来更多的收益。

当然这一切都建立在用户愿意看你的BANNER的基础上，因为广告常常被用户主动忽略。
随笔做的记录，收集的很不完整。欢迎补充的。。。^_^

参考文章：
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
http://blog.gexiaofei.com/google-tip-for-website-convertion/
http://www.useit.com/alertbox/banner-blindness.html

相关话题：网站Banner的设计源地址：http://www.xiaoduo.net/?p=494

banner字体设计与应用

xiongmao — 2009-07-04 15:24:21

字体设计是人类商业活动的需求，它随着时代和科学技术的进步而不断地变化着。被广泛应用于网络

生活的各个方面。
现代字体设计在电脑技术的应用中已经深入到日常工作、生活的每一个角落。
随着工作中各类需求的增多，越来越多类目的广告banner设计对字体的要求也越来越多。要想设计出

较好的作品，从电脑里调出来的任何一种标准字体都是不适合的，因为那会造成千遍一律，设计“撞车”

的事故，识别性不强的弊端。它要求设计者根据不同需求，不同的设计氛围、生活常识，去捕捉具有准确

性、关联性、独特性、可开发性的不同个性的字体，以传递需求的意思和商品特征，这也是平面设计中字

体设计的关键所在。可以说认为进行字体设计的训练其本身就是加强设计师的观察能力、思维能力、艺术

创造能力培养。同时激发设计师端正字体设计学习热情。因为艺术来源于生活，只有你的作品让大家能看

见自己生活的点滴能引起共鸣的才是好的设计。
随着“意象”一词被广泛的使用，意象的含义也在不断的变化之中。因为它不是一个静止的概念，而

是观察者、观察对象和环境双向作用的结果。“环境存在着差异和联系，观察者借助强大的适应能力，按

照自己的意愿对所见的事物进行选择、组织并赋予意义。……因此对于一个特定现实的意象，在不同的观

察者中会迥然不同。”
“意象”的表现不仅在不断的变化，同时它还是一个非常抽象的概念，很难用一句话来概括。在我们的

日常设计工作中，“意象”被理解为“字体外在的型和人们生活中对该字的理解的形象”，这显然是我们

设计在创作的一个很好的方式方法。“字体外在的型”更多的被用来表达设计者的想法和渲染大环境，而

我们所说的意象更多的是用来形容那种自发的、随手而来、随心而发的一种感觉。在汉字的发展过程中，其形态始终与

其意义纠结在一起而无法摆脱。这也是汉字最终没有转化成为拼音文字的一个重要的原因。
由于其字体具有图像的基础，致使人们在书写它时很容易形成其形象的特质；但是这种形象又是不拘

泥于实物而带有较多抽象性的，因而更易于宣泄出书写者的心灵意象。汉字的自身特点赋予了它“可意象

性”――这是一种将人们心中意象的个性和结构特点与汉字本身联系起来的物质特性。汉字形体中，蕴

涵着一种对于任何观察者都很有可能唤起强烈意象的特性。它不仅仅是被看见，而且是清晰、强烈的被感

知，并且加入了创作者自身的心灵感受。汉字的这种特性，在汉字图形中得到了充分的体现。汉字图形的

意象设计，也可称为意象变化字体图形。
“其特点是把握特定文字个性化的意象品格，将文字的内涵特质通过视觉化的表情传神构成自身的

趣味。” 意象化的汉字赋予文字以字面外的强烈意念，通过丰富的联想别出心裁的展示浪漫色彩对文字

进行再创造。所变化出的意象文字超脱了具体的“形似”，而是提炼出了抽象的“意”，从而获得媒体功

能意构传神的表达。由于汉字的意义的多样性，以及创作者心灵意象的多变性，意象设计的方法呈现出多

种多样的面貌。
根据设计中所采用的字义的不同，和借用的象征物的不同来对汉字图形的意象设计方法进行一些分类

，其中也借用了一些我对现代汉字意象设计的一些分类方法。字义意象设计是指在汉字艺术设计中借用字

本身的含义特征，将所要传达事物的属性表达出来。这是意象设计中最简单的一种，它只要直观的表现出

汉字的意义就可以了。当然，不同的人表现出来的同一个汉字又有所不同。
介绍了这么多，你肯定也想设计一款好看的字体抓住客户的眼球了吗？下面根据我的学习过程总结的

一些经验和实例和大家分享。

iugiuhiuhi

今天，字体的应用效应已越来越被人们所重视，无论是对字体的选择或是对字体的使用都构成了衡量

一个设计师的标准。我们可以这么说，一个好的设计师既能很好地针对需要选择字体，又能对字体进行很

好地设计安排与控制。字体设计的感染力是巨大的，世界上无所谓好看的文字或不好看的文字只在乎设计

师如何对文字进行创意产生富有魅力的字体。新世纪设计师要运用崭新的观念去表现字体的时代性，设计

和组合上都要带给其他人清新的感觉。设计大多是为商品宣传服务，所以设计师要为客户打算，考虑有什

么可运用的资源，客户预备在这个设计上投资多少等，当然最重要的是这个字体的设计可否增加商品的吸

引力。大自然无形之手给我们展示一个色彩缤纷的世界，千变万化的色彩、形态配搭令人着迷；同样，一

个成功的字体设计，它拥有生命力，可以感染观众情绪。设计师对字体运用多作深入的了解和研究，才能

摆架字出更精彩的作品。

相关话题：网站Banner的设计源地址：http://ued.alimama.com/?p=157

网站Banner的设计 - UCD大社区

让文字讲好banner的故事

营销活动制作过程——以321大促为例

二、颜色提取

三、创意构思

四、设计及优化

Banner设计“点横竖撇捺”

关于边框和底色的那一些小事（二）

banner广告设计8技巧

19楼的广告位-不影响用户体验的banner广告

Banner设计

浅淡BANNER设计

网易UED，连个Banner都做的这么专业

写在前面的话

一 思考专题定位

·顾及需求方的频道定位

·顾及此专题的定位

二 明白文字在Banner中占主导地位

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

三 构建辅助视觉

1， 文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

2， 文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

3， 主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

四，创造力对主题的艺术化表现

1，严肃话题也能做出新感觉

2，轻松话题可以做出幽默感

3，作品也能带点小情调

后面的话

浅谈网页UI之Banner篇

如何做得Banner通情达意

写在前面的话

一 思考专题定位

·顾及需求方的频道定位

·顾及此专题的定位

二 明白文字在Banner中占主导地位

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

三 构建辅助视觉

1， 文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

2， 文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

3， 主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

四，创造力对主题的艺术化表现

1，严肃话题也能做出新感觉

2，轻松话题可以做出幽默感

3，作品也能带点小情调

后面的话

BANNER中的字体结构分析

浅析Banner构成与创意设计

设计72变——寻求banner制作的变化

BANNER二三事

banner字体设计与应用

iugiuhiuhi

一思考专题定位

二明白文字在Banner中占主导地位

三构建辅助视觉

1，文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

2，文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

3，主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

一思考专题定位

二明白文字在Banner中占主导地位

三构建辅助视觉

1，文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

2，文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

3，主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。