怎样考虑BANNER的细节
写在前面的话
有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。
一 思考专题定位
·顾及需求方的频道定位
因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。
/女人频道的定位是知性 ，所以这个banner设计风格也是很贴切的。
/banner 赞助& 夏小萌
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
/banner 赞助& 10
·顾及此专题的定位
专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。
/女人频道下的一个怀旧感的专题，所以画面做出了一些怀旧的感觉。
/banner 赞助& 璇
/数码频道的一个和某手机赞助商的活动，所以banner也表露出一定的商业感
二明白文字在Banner中占主导地位
从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。
/banner文字阐述专题主题，是绝对的主角。
/banner 赞助& 淑华
·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。
/对主标题的断词比较巧妙，文字集中，主次明显，且文字与辅助图案相互呼应，统一感很好。
/banner 赞助& 淑华
·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。
/长标题的时候，如果把‘征集各种端午风俗’排成一行，就会显得没有主次，也很有吸引力。我这里把‘端午’这个最重要的信息提出来，让用户很容易进入环境，然后让他们继续了解更多的信息。这里还要说一个小技巧，我这里‘征集各种’、‘端午’、‘风俗’这三个词虽然分别用了3种字体，但还是能读出‘征集各种端午风俗’这是一断话，因为同一个红色起到了很大的作用。
·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。
/这个banner附加了一些英文来丰富画面，让画面充满丰富的同时，充满生气。
/banner 赞助& LV
三 构建辅助视觉
一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。
3种文字和辅助视觉常见的搭配方式：
文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。
/banner 赞助 胡子
文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。
/banner 赞助 淑华
主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。
/banner 赞助 淑华
四，创造力对主题的艺术化表现
1，严肃话题也能做出新感觉
做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。
/主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。
/因为是做夏季高温的专题，所以在处理画面的色彩时候我对比度做的比较弱，就如同烈日下看东西的感觉。
/这是春运的专题，我在处理画面用了很多斜的构成，因为斜的东西学构成的时候表达那种不安感是比较贴切的。拥挤的人群、阴霾的天空，不安中带着希望，当一张小小的火车票就能映出当回家的曙光时候，我想，或许这就是很多人对于春运的感觉吧。回头看看其他门户的专题，光艳无比，一股社会主义的优越感油然而生的感觉，不知孰对孰错，再想时，我已迷失。
2，轻松话题可以做出幽默感
有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。
3，作品也能带点小情调
有时候来一些小的创意也会让banner增色不少。
/摇滚的不是乐器，还是文字
/banner 赞助 竆
/冰雪也的不仅仅是车，还是文字
有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。
类似文章推荐：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。android开发日记（12）
暂时想到两种方法：
1. &listView.addHeaderView(headView);&
2. &listView适配BaseAdapter时，设置多个type类型
& & &然后getItemViewType获取类型判断添加。
1.要注意的问题是：防止多次添加，加个判断即可
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3009次
排名：千里之外
原创：20篇
(7)(1)(1)(1)(2)(1)(3)(4)(1)(4)新浪博客自定义页面说明
新浪博客自定义页面说明页面大背景(body)
指的是整个博客的最大背景，由于中间部分被覆盖，所以显示的效果只是两边的部分。
题图上背景(logo) 是指所在的横长条的背景。
题图下背景(banner) 是指博客名字博客地址 复制　﹥收藏本页）所在的那部分的背景。
logo和banner宽各为770，logo高40，banner高134，单位均为像素。
题图下的菜单背景” 是指“HOME...搜索┆帮助┆退出”等字所在的那个横长条的背景。
正文标题栏上翻时的图片 指的是文章发表了之后文章标题的图片。
面板标题栏下翻时的图片 指的是点击标题后出现标题后的后面的图片。
面板的背景图片 指的是左边比如我的文章列表什么的背景图片。
正文背景 是指整个文章文字所在的大背景！
以上代码可以更改博客各个部分的图片，更换的图片尺寸要和原尺寸一模一样，关于上传图片和怎么得到图片地址请参考：无限制上传图片的方法
　　具体操作步骤是：复制代码→控制面板→新增空白面板→钩选源代码(出现钩号，同时文档里出现DIV的字样)→粘贴代码→钩选源代码(钩号消失)→保存新增面板→定制个人首页
→选取新增个人面板→保存
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。如何自己制作新浪博客模板_百度知道
如何自己制作新浪博客模板
制作步骤是：1）成功登陆博客后，点击控制面板2）进入后可以看到左侧有一个“定制我的首页”3）点击进入左侧可以看到“添加模块”4）点击进入后，看到“自定义空白面板”5）下面有“创建新的空白面板”6）进入后输入“面板标题名”，然后，下角可以看到“显示原代码”7）选中后，将下面的源代码复制后放在它们中间：&STYLE type=text/css&body{background:url(页面背景图片) repeatscroll!}.logo{background:url(题图logo图片) norepeat no scroll!}.banner{background:url(题图大图) norepeat no scroll!}.menu{background:url(&题图下的菜单图片&) no-}.feeds .up{background:url(&正文标题栏上翻时的图片&) no-}.feeds .down{background:url(&正文标题栏下翻时的图片&) no-}.feeds .function{background:url(&正文摘要结尾处菜单的图片&) no-}.links .up{background:url(&面板标题栏上翻时图片&);}.links .down{background:url(面板标题栏下翻时的图片);}.links .mid{background:url(面板的背景图片);}.photo .mid{background:url(形象照片处的背景图片);}.label .mid{background:url(自定义面板的背景图片);}.calendar .mid{background:url(&日历面板背景&);}.callboard .up{background:url(&公告栏标题栏上翻时图片&);}.callboard .down{background:url(&公告栏标题栏下翻时图片&);}.callboard .mid{background:url(&公告栏背景图片&);}.bodyBg{background:url(&正文背景图片&);}.bodyBottom{background:url(&正文背景图片&);}.gbook .up{background:url('留言板标题栏上翻时的图片') no-}.gbook .down{background:url('留言板标题栏下翻时的图片') no-}.feeds .page{background:url(&正文文章页数图片&) no-}&/STYLE&8）最后保存设置即可.注：1.把文字部分改成图片地址即可,但图片地址必须是网络上已经存在的，否则不能显示。
2.需要哪部分就添加哪部分的代码，不需要的不用加。
3.建议博友最好一个一尝试,就会知道哪个代码是模板中的哪部分了.
其他类似问题
为您推荐：
提问者采纳
请参考，然后使用 Photoshop 来剪切图片，或者在网络上找一些相关的教学文章和视频来参考学习://blog，建议先找一些图片素材： 音乐旋风模板 宽，接下来就是制作图片了.cn/s/blog_491dbdc7010007wh。 接下来你要弄明白新浪博客首页图片各部分的尺寸，得到图片地址.html" target="_blank">http。 《大师之路Photoshop CS2 教程》 FLASH8专业版实例视频教程 Flash MX 2004超速入门与实例提高视频教程 Photoshop CS基础及应用视频教程 编辑图片的软件下载首先你要学会使用制作图片的软件，建议参考《无限制上传图片的方法》这篇文章来上传图片，然后根据《更换博客首页各部分图片代码》这篇文章代码：1024 像素 高：72 其他风格模板 宽.sina：72 文章标题图片尺寸。 以下的视频教程希望可以帮到有需要的人，查看尺寸大小.0简体中文版参考资料，它的功能很强大，把代码中的图片地址复制-粘贴到地址栏中：135像素 分辨率： 宽770像素 高随意 分辨率72 各部分图片尺寸太多： 宽550像素 高28像素 分辨率72 一侧图片标题尺寸：你想使用什么系统模板，利用此模板我公布出来的代码：180像素 分辨率.com，你可以分析一下模板代码，上传到你的博客：72 横幅下图片尺寸：<a href="http.sina，做成和这个模板一样的效果，大背景://blog，再把各部分图片存到你电脑中，粘贴代码，请参考《隐藏博客各部分的代码》 不会添加代码的朋友： 横幅尺寸，然后自己制作或者修改图片，就先更换上： photoshop7： 宽770像素 高28像素 分辨率72 大背景尺寸，下面我列出来一些，我就不一一列举了，文章和一侧模块标题背景图片等等，看看是什么图片，此软件在网络上很好搜索下载，然后用 Photoshop 或者鼠标右键点击图片察看属性。图片都制作好后，建立模块。 如果看中我某个模板，在我的教学分类的后面几页有几个 Photoshop 的视频教程，请参考《更改博客各部分文字颜色的代码》 想隐藏某一部分。 修改文字颜色，在特效和教学分类中寻找答案：600 像素 分辨率： 宽210像素 高28像素 分辨率72 文章背景尺寸：《关于添加特效的详细介绍(图片)》 更多效果请点击我博客首页的文章分类。 -------------------------------------------------------------------------------- 明白各部分图片的尺寸后。 图片上传后，就可以了，把得到的图片地址添加到相对应的代码地址中：770像素 高，大家可以参考一下，打开这个图片，制作横幅，首先要在脑海中想象一下你想要的效果：770像素 高，最好的办法就是： 宽，这就需要你系统的去学习了.cn/s/blog_491dbdc7010007wh，推荐使用 Photoshop 这是最常用的，至于如何使用它.com
提问者评价
您可能关注的推广
新浪博客的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何快速设计好Banner？6个步骤帮你速成！_皇国燊_新浪博客
如何快速设计好Banner？6个步骤帮你速成！
世界看脸，网站看Banner，门面当然要漂亮，不过很多同学以为做Banner是门技术活儿，自己学艺不精做不了。如果你看了今天这篇文，就会明白，技术于Banner，就像刀法于人，虽有招式，但无内功支撑，久战必败。而这篇好文，就是Banner的内功修炼心法，按6个步骤来，速成可待。
@Heidixie（阿里巴巴资深交互设计师）
：团队小伙伴问到这个问题，发了一封邮件分享自己的思路，顺便贴过来。
适用前提：
非专业视觉设计师 没太多空闲时间去做。
为什么要做banner？banner是用来传达信息的。一切不以传达有效信息、有效传达信息的banner都是yy.
baner是用来促使用户行动的，也即Call To
Action。无法让用户产生你所期望的banner都是无效的。
所以，先摆脱一个错误的认识：banner仅仅是用来装饰用的，仅仅是为了吸引人注意啥的想法。
所以，我们既然是非专业设计师，就要回归到做banner的本源，为了达到以上效果，同时兼顾美观、大方、好看。
大方和好看的banner未必需要高深的视觉技巧，和繁琐的PS功能，但是要兼顾视觉的几个原则，我稍后会列出。
第一步：定义要传达什么信息
这一步，和视觉、审美什么的都没关系。
比如，半月谈，我们要传达的信息有：
品牌LOGO，让用户一眼就知道哪里出品，下次形成条件反射，所谓的视觉认知是需要一定的重复的，只有不断重复才能加深用户印象。
子品牌LOGO，让用户知道我们出了什么东西，并且有系列感。
以上就是我们要传达的核心信息了。你也可以认为这就是一个BANNER，只是——看起来没那么好看而已。
但是，我们发现信息还不够，我们还想要传达：
我们的内容大概是什么，从而让用户形成期待
既然是系列，我们希望用户能够知道这是第几期，从而当他们想要从某一期有兴趣时点击到全部，也有地方去。
所以，我们把信息又放出来。现在我们有4类信息。
第二步：定义信息的优先级
虽然我们有4类信息，但是优先级肯定不一样的，所以对应到设计上，我们给它放的版块的大小、颜色的突出是不一样的。
第三步：考虑用户视觉路径
也即你想引导用户先看哪里，再看哪里，然后再做什么。
通常，用户的阅读从上到下，从左到右边，所以一般重要的内容会放到左上角。
不过这个规则可以用醒目的图片、刺眼的颜色轻易打破，但是我建议你不要轻易这么做，所有的图片和颜色都要有意义，为什么要用这个图片为什么要用这个颜色。
确保用户一开始有视觉中心，如果用户一眼不知道先看什么，那么这个banner就是失败的。
有了视觉焦点后，你可以从视觉焦点引申开来，使用视觉里的亲密性原则（把内容相近的地理位置靠近一些、对比原则等等），引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。
第四步：考虑标准识别颜色
既然我们要传达品牌形象，请确保用色从我们的标准VI色盘中选择，而不要随便用。
我是配色弱怎么办？有这3个板斧打遍天下：《秒变配色高手！怎么都不会错的6条网页设计配色原则》
记住，品牌传达，重复性很重要。就像我们看到红、黄、白配色会想到麦当劳，看到绿和黑就想到星巴克一样。
第五步：做视觉的排版
（不要考虑太多设计技能，否则就陷入到：我不是专业的，所以我不会做设计上）
排版上，信息已经完整，优先级已经出来，无非就是把它变得好看一些而已。
让banner好看的几个要诀：
很好办吧，让内容纵向、横向都有一条线，可以对齐。要么居中，要么底部。尽量确保页面上不要有一个元素，没有任何元素和它能够形成对齐的关系。
不要让所有内容都没有聚集地堆在一起，让那些关系比较亲密的内容聚合成一个区域，不要让一个banner上的区域超过4个。
3. 简单质感：
千万不要加任何PS的滤镜、阴影、能不渐变就不渐变，因为已经不流行了，不要盲目使用各种样式。
如果要用图标，尽量选择样式统一，且能够保持你的优先级次序的图表。比如我们引导用户先看左边，再看右边，结果你在右边的图标里选择了一个血红的，可能用户的视线立马被吸引过来了。
5. 不要让字体超过3种。尽量用宋体、黑体、方正黑体，不要用什么魏碑体、行楷等，一看就比较山寨。
第六步：做更多的美化
如果你不想做，其实上面也可以了。
想做的话，我们可以：
比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点，不要为了装饰而装饰，所有的装饰都要有意义、让背景更加有质感。比如加点磨砂感觉。
比如，你还可以适当变换下别的排版，比如：居中的排版，更容易引导用户从上到下的阅读视角，也是很多人偷懒比较喜欢的排版风格。
综上所述，做banner有一大半的精力是梳理信息、设定优先级、设定用户浏览次序，和PS的技能没有太多关系，所以，每个人都可以去尝试做好一张看似很有设计感，但是实际上又没花什么精力的banner。
博客等级：
博客积分：0
博客访问：3,585
关注人气：0
荣誉徽章：