网页UI设计:Banner广告设计篇

WQ8I2M

WQ8I2M

2016-02-17 03:52

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的网页UI设计:Banner广告设计篇懂设计的网友们快点来了解吧!

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

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

1.大面积的Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

http://www.tearoundapp.com/

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

例其它类似Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

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

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

http://www.scrapblog.com/

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

其它类似Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

3.人物与文字

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

http://www.showandtellsale.com/

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

其它类似Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

4.创意矢量图形

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

http://ideafoundry.info/

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

其它类似Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

5.软件产品界面

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

http://bydreamtime.com/

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

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

其它类似Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

6.线条与光线

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

http://www.scarbantia-art.hu/

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

其它类似Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

7.纯文字内容的Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

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

http://enviramedia.com/

其它类似Banner

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

网页UI设计:Banner广告设计篇,PS教程,图老师教程网

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

进入论坛交流

展开更多 50%)
分享

猜你喜欢

网页UI设计:Banner广告设计篇

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页UI设计:Banner广告设计篇

关于Banner广告设计的两个观点

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
关于Banner广告设计的两个观点

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

网页设计师:浅淡网页BANNER设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页设计师:浅淡网页BANNER设计

优秀广告设计之电脑科技篇

平面设计 海报设计 海报设计素材 广告设计 平面设计素材
优秀广告设计之电脑科技篇

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

网页UI设计:简单解析标志LOGO篇

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页UI设计:简单解析标志LOGO篇

广告设计欣赏:手机宣传广告设计作品

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
广告设计欣赏:手机宣传广告设计作品

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

网页按钮中的“取消”与“撤销”

网页按钮中的“取消”与“撤销”

谈谈专题网页的首屏设计

谈谈专题网页的首屏设计
下拉加载更多内容 ↓