网站设计banner

1、怎么设计网页banner

Banner规格尺寸大小不一，文件大小也有一定的限制，这就使得在设计上增加了许多障碍，颜色不能太丰富，否则会在文件大小的限制下失真，软文不
能太多，否则会没有重点，得不偿失，怎么在方寸间把握平衡，变得十分重要。接下来，我为大家总结累一些，如有鄙陋，请指正，万分感谢。

第一部分：颜色

1．Banner与环境对比

试想如果在一个以浅色调为基准的网站上投放Banner，是不是从明度上拉开对比会很好的提高用户的注意力呢(相反亦然)。

以此也可推想出，如果在一个有颜色基调的网站上投放补色或者对比色的Banner，效果就会变得更瞩目(补色和对比色案例)。

2．Banner颜色简单至上

(1)试想一个Banner五颜六色，是不是就能够吸引眼球了呢?首先，先对比一下

哪个更吸引你的注意力呢?大多数人肯定会觉得后者给用户带来的视觉传达力更强，简洁明确、朴素有力的效果，给人一种重量感和力量感。前者颜色虽多，却没有带来更好的视觉传达效果，为什么呢?颜色过度使用会打乱色彩节奏，并且，减弱了颜色间的对比，使整体效果变弱。

(2)其次， 使用颜色越多，最后保存时文件体积越大，加载起来越慢，让用户等待就意味着和用户说再见了，如果靠降低品质来达到Banner的上传要求，那展现给用户的是低质量的banner，也一样会丢失一些用户。

所以，颜色简单有力，加载清晰快速，对于banner的视觉传达很重要，只要让用户产生点击欲望，我们推广的目的就达到了。

第二部分：构图

1．构图的定义及规则

构图其实说白了就是经营画面，进行布局，如何在你构图的引导下吸引用户点击，产生欲望，了解内容，如果都能达到，那说明你的构图成功了。构图的基本规则是：均衡、对比和视点。

均衡：均衡不是对称，是一种力量上的平衡感，使画面具有稳定性。

均衡不是对称

对比：在构图上来说就是大小对比，粗细对比，方圆对比，曲线与直线对比等等。

白色线条的对比产生了空间感

视点：就是如何将用户的目光集中在画面的中心点上，我们可以用构图去引导用户的视点

将视点集中引导到slogan上

介绍完构图的基本规则，举例子检视下：一张X-MEN的宣传banner，这张banner人物排布既平衡又不对称，人物大小不一，产生出对比，突
出了部分剧中人物。Banner正中一个大大的X，把视点集中到了画面的最中心，很好的利用基本构图规则进行banner设计。

2．构图的样式

构图大概分以下几种：(1).垂直水平式构图 (2).三角形构图(正三角和倒三角)(3)渐次式构图 (4).辐射式构图 (5).框架式构图 (6)对角线构图

(1)垂直水平式构图：

平行排列每一个产品，每个产品展示效果都很好，各个产品所占比重相同，秩序感强，此类构图给用户心情：产品规矩正式、高大、安全感强。

(2)正三角形和倒三角构图：

多个产品进行正三角构图，产品立体感强，各个产品所占比重有轻有重，构图稳定自然，空间感强。此类构图给用户心情：安全感极强、稳定可靠。

多个产品进行倒三角构图，产品立体感极强，各个产品所占比重有轻有重，构图动感活泼失衡，运动感空间感强。此类构图给用户心情：不稳定感激发用户心情，给用户运动的感觉。

(3)对角线构图：一个产品或两个产品进行组合对角线构图，产品的空间感强，各个产品所占比重相对平衡，构图动感活泼稳定，运动感空间感强。此类构图给用户心情：动感十足且稳定。

(4)渐次式构图：多个产品进行渐次式排列，产品展示空间感强，各个产品所占比重不同，由大及小，构图稳定，次序感强，利用透视引导指向slogan。此类构图给用户心情：稳定自然，产品丰富可靠。

(5)辐射式构图：多个产品进行辐射式构图，产品空间感强，各个产品所占比重不同，由大及小。构图动感活泼，次序感强，利用透视指向slogan，此类构图给用户心情：活泼动感，产品丰富可靠。

(6)框架式构图：单个或多个产品框架式构图，产品展示效果好，有画中画的感觉。构图规整平衡，稳定坚固。此类构图给用户心情：稳定可信赖，产品可靠。

3．软文（Slogan）

(1)俗话说得好“话不在多，精辟就行”当今炙手火热的微博就是一个例子“140字概括你要说的”，Slogan也是一样。

(2)要言之有物，第一要抓住用户的心里，了解用户的想法很重要。第二我们要推给用户什么，用户对什么感兴趣。下面举个例子：

Slogan只有四个字，终于来了，白色iphone4吊足了apple迷门近两年的胃口，这四个字恐怕是他们最想听到的。用户从不会质疑apple的性
能，科技领先性及用户体验性，他们最想的恐怕就是拥有自己梦寐以求的白色iphone4。所以，apple的slogan简约而不简单。

2、网页Banner怎么设计?

1、点击才是王道

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

2、主题明确

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

3、与整个页面相协调

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

4、顺应用户的浏览习惯

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

5、文字的排列设计

由于是以文字为主体部分，背景其实就无关紧要了，大多数这样的设计，我们都可以拿纯色背景或者是风景、科幻类的壁纸，取其整体的部分作为你需要的设计背景，通常我在截取时都习惯选择大部分能吸引眼球的图案又或者是渐变渐现的纯色部分。

3、网站设计如何做好banner设计?

1、突出产品主题，避免繁琐

关于广告的主题，很多人会犯一个错误，认为传达的信息越多，用户越有兴趣，其实不然，现在人们的时间很有限，信息泛滥的时代，如何能突出产品主题，让用户一眼就能识别广告含义，才是最重要的，避免繁锁内容，减少客户的阅读负担。

2、要善于突出重点文字

文字描述是用来给用户看的，所以一定要把重点文字突出，比如五一打折活动，一定要把五一吐出来，字样一定要大，要醒目，其余的则需要相应的弱化。

3、按照客户的阅读习惯来设计

一般人们的阅读习惯都是从左到右、从上到下的，所以网站设计网站banner时候也要遵循这个规律，不要相反，会让人很不舒服。

4、产品展示要能激发客户的欲望

信息爆炸的时代，客户浏览网页的注意力是几秒钟，所以要第1时间进行产品的展示，命中主题。

5、过度的色彩不要太耀眼

色彩搭配固然重要，但是不能太过夸张，会让访问者感觉刺眼、不友好甚至产生反感。产品图片，色彩不是多多益善，适合最重要，易于识别是关键。如果太多，产品信息就会被淹没，视觉效果大打折扣。

关于网站设计如何做好banner设计，环球青藤小编今天就和您暂时分享到这里了。如果您对网站设计、页面排版、图像处理方面比较感兴趣，希望分享的这篇文章可以给您的学习或工作提供帮助。如若您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。

4、怎么设计网页banner?

设计网页banner的方法如下：
1、以文字为主
虽然现在网站的图片大多都提倡图文并茂，这样能够提高用户体验，但是我们现在看到很多网站上的图片很多都是以图片为主，这样就是容易陷入一个误区：banner图只是为了用图片的形式来展示网站的主要产品或者企业的总体形象。其实这样的banner是很难能吸引到用户的。因为有些用户还是需要一定的文字来理解广告中的内容的。如果是文字为主，做到言简意赅，这样的图文并茂才能有利于提高点击率。
2、不要出现价格信息
一般的消费者对于价格都是非常敏感的，除非是你的产品价格相比同行业的产品价格低出很多，很有价格上的优势，否则不建议在banner上出现价格信息。因为价格一旦不是用户心理能接受的，这个banner就会被用户无视。
3、添加免费或者巨大优惠等字样
根据众多消费者的消费心理，他们对于那些物美价廉的产品都是非常热衷的。对于企业网站的推广和banner的设计也是这样，在banner上添加免费或者巨大优惠等字样也是能很有效地吸引到用户。
4、设计带有行为号召力
我们平时上网看到有些banner上会有个类似点击的按钮或者链接，潜意识会有着想点击的念头，可能会情不自禁地点击进去。这种方法也能很好地提高点击率。

5、怎样做好一个网页的banner设计?

一个好的banner设计的好，主要体现在点击率方面，好的banner应该是非常容易吸引用户的眼球的，让用户看到了这个banner后有强烈的点击进去了解的欲望，而不是普通的一个广告banner展示的形式。
主要体现在以下的几方面：
1，以文字为主
虽然现在网站的图片大多都提倡图文并茂，这样能够提高用户体验，但是我们现在看到很多网站上的图片很多都是以图片为主，这样就是容易陷入一个误区：banner图只是为了用图片的形式来展示网站的主要产品或者企业的总体形象。其实这样的banner是很难能吸引到用户的。因为有些用户还是需要一定的文字来理解广告中的内容的。如果是文字为主，做到言简意赅，这样的图文并茂才能有利于提高点击率。
2，不要出现价格信息
一般的消费者对于价格都是非常敏感的，除非是你的产品价格相比同行业的产品价格低出很多，很有价格上的优势，否则小编建议最好不要在banner上出现价格信息。因为价格一旦不是用户心理能接受的，这个banner就会被用户无视。
3，添加免费或者巨大优惠等字样
根据众多消费者的消费心理，他们对于那些物美价廉的产品都是非常热衷的。对于企业网站的推广和banner的设计也是这样，在banner上添加免费或者巨大优惠等字样也是能很有效地吸引到用户，但是小编还是要提醒一句，一定要实事求是，如果点击进去，发现只是一个圈套，这样的作为会引起用户强烈的不满。
4，设计带有行为号召力
我们平时上网看到有些banner上会有个类似点击的按钮或者链接，潜意识会有着想点击的念头，可能会情不自禁地点击进去。这种方法也能很好地提高点击率哦。

6、网页艺术设计banner的制作技巧有哪些？?

简单且完整的设计
当Larry Page和Sergey Brin向潜在投资者介绍他们的产品——“Google”的时候，他们将Adwords作为后备选择——万一他们不能获取任何利润的话。最后他们采用了后备计划，同时我们也看到了他们的选择是多么明智。是什么让枯燥乏味的广告得这么成功?与其他广告不同的是，他们既没有唤起浏览者的好奇心也没有影响网页的主流思想。事实上，其相反面是正确的。Adwords看起来像搜索结果的一部分，让人们感觉这些广告是由需而生的。这个简单的设计不仅帮助Google提升了他们的搜索引擎同时也促进了Adwords广告的发展，对此我们毫无疑问。
参与互动
Banner设计者会巧妙地运用一些类似Flash的工具设计一种可以邀请用于参与互动的banner。让用户参与互动的方法多种多样。一些网站设计者利用一种在以前很流行的游戏元素设计banner。我们都知道pacman(吃豆人)这个很流行的游戏。我以前见过一个我最喜欢的banner就是让pacman去“吃”美元。结果就是出现了一个很漂亮的标语要求你开储蓄帐号，帮助你用固定的利率存钱。这个互动banner后面的目的很简单就是让用户参与互动，然后当他们的意志不是很坚定的时候在恰当的时机向他们介绍销售信息。
经过实践证明这些互动banner是很有效果的。这样的banner的最大的缺点就是大部分网站管理者不允许在他们的网站上使用。因为他会影响网页内容。

7、网站Banner 应该如何设计

一般网络banner设计都需要文案，都是根据文案来做的，所以需要文案才能设计，配图需要和文案有联系，这种设计主要考虑构图，构图技巧可以在花瓣上面有许多模版，

8、官网banner的设计尺寸一般多少

官网Banner设计尺寸一般是468*60像素，大小如果gif格式是14K，如果是swf格式是16K。

全尺寸banner是468*60px，半尺寸banner是234*60px，小banner是88*31px，另外还有120*90，120*60也是小图标的标准尺寸。

336*280、300*250、以及160*600 这三种大小的Banner广告在宣传效果上较好。在高度一定的情况下，宽度越大，效果也会越好，因为这样广告会给用户带来了较好的阅读体验。Banner位置在网页的顶。

(8)网站设计banner扩展资料：

随着大屏幕的显示器出现,banner的表现尺寸越来越大,760X70;1000X70像素的大尺寸banner也有。

根据IAB国际广告局2001年第二次标准公布的尺寸有：

1、"摩天大楼"形尺寸：120×600 

2、 宽"摩天大楼"形尺寸：160×600

3、 长方形尺寸：180×150

4、中级长方形尺寸：300×250 

5、大长方形尺寸：336×280

6、 竖长方形尺寸：240×400

7、 "正方形弹出式"广告尺寸：250×250

9、网页设计如何做好banner设计?

【导读】在网站设计的时候，关于网站banner设计，是非常考验设计师的水平的，因为很多客户既要求节约成本，又要效率高，短时间可以设计出出彩的作品。那么，网页设计如何做好banner设计呢?今天就跟随小编一起来了解下吧!

1、突出产品主题，避免繁琐

关于广告的主题，很多人会犯一个错误，认为传达的信息越多，用户越有兴趣，其实不然，现在人们的时间很有限，信息泛滥的时代，如何能突出产品主题，让用户一眼就能识别广告含义，才是最重要的，避免繁锁内容，减少客户的阅读负担。

2、要善于突出重点文字

文字描述是用来给用户看的，所以一定要把重点文字突出，比如五一打折活动，一定要把五一吐出来，字样一定要大，要醒目，其余的则需要相应的弱化。

3、按照客户的阅读习惯来设计

一般人们的阅读习惯都是从左到右、从上到下的，所以网站设计网站banner时候也要遵循这个规律，不要相反，会让人很不舒服。

4、产品展示要能激发客户的欲望

信息爆炸的时代，客户浏览网页的注意力是几秒钟，所以要第1时间进行产品的展示，命中主题。

5、过度的色彩不要太耀眼

色彩搭配固然重要，但是不能太过夸张，会让访问者感觉刺眼、不友好甚至产生反感。产品图片，色彩不是多多益善，适合最重要，易于识别是关键。如果太多，产品信息就会被淹没，视觉效果大打折扣。

6、做好信息的平衡和协调

信息并非越多越好，不要把所有信息都突出，要做好各种信息的平衡和协调，才能真正地吸引人。

7、学会留空

在banner画面中，有经验的设计师都会留空，从而使图形和文字有呼吸的空间，视觉效果更胜一筹。

以上就是小编今天给大家整理分享的关于“网页设计如何做好banner设计?”的相关内容，希望对正在备考的你有所帮助。为了帮助各位小伙伴更快的上手工作，小编特此还整理了平面设计小白入门宝典，需要的自取哦!

10、网页设计中banner设计尺寸是多少

不同的环境下设置的尺寸都不一样

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，网页宽度保持在1002以内，就不会出现水平滚动条，高度则视版面和内决定。

3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右。

4、1024*768 下网页的尺寸:width=955,height=600                                             

800*600 下网页的尺寸:width=760,height=420。

5、一般分辨率在800*600的情况下，页面的显示尺寸为：780*428px，

分辨率在640*480的情况下，页面的显示尺寸为:620*311px，

分辨率在1024*768的情况下，页面的显示尺寸为：1007*600px。

(10)网站设计banner扩展资料：

banner设计标准尺寸大全

Internet Advertising Bureau
(IAB，国际广告局)的"标准和管理委员会"联合Coalition for Advertising Supported Informatiln
and
Entertainment(CASIE，广告支持信息和娱乐联合会)联合推出了一系列网络广告宣传物的标准尺寸。

这些尺寸作为建议，提供给广告生产省和消费者，使大家都能接受。现在网站上的广告几乎都遵循IAC/CASIE标准。

1997年第一次标准公布

Num Size(pix) Name

1、468×60 全尺寸banner

2、392×72 全尺寸带导航条banner

3、234×60 半尺寸banner

4、125×125 方形按钮

5、120×90 按钮＃1或小图标

6、120×60 按钮＃2或小图标

7、88×31 小按钮或banner

8、120×240 垂直banner

2001年第二次标准公布

Num Size(pix) Name

1、120×600 "摩天大楼"形

2、160×600 宽"摩天大楼"形

3、180×150 长方形

4、300×250 中级长方形

6、240×400 竖长方形

7、250×250 "正方形弹出式"广告

IAB 将不再支持1997年第一次公布标准中的392×72形。

从banner自身的设计大小看

1、全尺寸banner横幅设计为468*60px，半尺寸banner为234*60px，小banner为88*31px，另外120*90，120*60也是小图标的标准尺寸。

2、页面长度原则上不超过3屏，宽度不超过1屏。

3、每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K。

4、每个标准页面为A4幅面大小，即8.5*11英寸。

参考资料来源：网络-网页设计标准