详细解析网页Banner设计的心得技巧

2016-02-17 01:28 9 1 收藏

图老师小编精心整理的详细解析网页Banner设计的心得技巧希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - 平面设计 】

关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验。如有错误,尽管拍砖,小女子虚心请教学习。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

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

Banner设计其实是我们接触互联网工作后,最常见一种工作。那么Banner到底是什么呢?Banner的核心使命其实是吸引用户关注,然后被点击。他的主旨就是主题明确,突出关键内容,抓住用户眼球。一个Banner他是由背景、主视觉和标题文字三部分组成,在我刚刚接到需求的时候,我首先分析他的重点词、字,想要表达什么,分析好了后可以在纸上画下草稿,在大脑里有个大概的视觉效果,想法多的话可以画几版不一样的,最后根据草稿定一个定稿,接下来就可以找素材着手做了。在做期间,还要注意整体的美观,让人看起来舒服。

下面从这三部分逐一给大家分享下。

一、背景

我们画画的同学可能都知道,一个画面不可能都面面俱到,重点的需要细致刻画,有的一笔带过即可。设计一个Banner有时候就像画画似的,首先要有大的环境,那Banner的背景就好比大环境,其实主要是起到衬托、烘托气氛的作用。一个新需求过来,首先我们考虑要营造一个什么样的环境,什么样的气氛,是欢快的、悲伤的、可爱的还是比如过年,可能就用红橙色,比如儿童类的,颜色上就要纯一点,活泼点等等。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

但是需要注意一点,背景不能太花,否则会影响整体的一个可读识性,简单,清晰即可。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

二、主视觉元素

Banner中的主视觉要清楚,符合主题,元素不可太多,否则看起来跟人感觉就会乱。有的人在做时只要是有地,就全放满,其实页面适当的留白也是提升画面品质的一个好方法。视觉元素不论是人物,还是其他,一定要清晰,在我们找素材的时候也要找像素质量高的,我一般会去站酷、昵图网、花瓣或者直接google搜,不要太多。还有一点注意的是不可盗用他人的作品,头像等等。大家都懂的:)

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

下面的这个Banner看起来就比较乱,东西太多,想表达的也太多,这时候需要用户去花时间思考它想告诉我们什么,而往往这时候用户是不愿意是思考的,一是画面不知道他要表达什么,二是整体上没有吸引住用户的眼睛,这种情况下这个Banner是做到比较失败的。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

三、标题文字

标题文字非常重要,是整个Banner的主题,重点文字一定要在背景中突出出来,不论用颜色对比、放大、变形设计还是即便做立体效果等等。(这里我分享一个经验,就是在页面上新建一个黑色的图层,样式改成饱和度,整体上成黑白的效果后一眼就能看出来了)

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

这个Banner标题用了描边和投影,从背景中出来了,但还是看起来不舒服,主要是他的文字有用曲线、斜线的方式,让人不禁会顺着字的排版顺读下去,他这里面不同方向的斜线用的还比较多,这种方式看多了就会比较累,没有形成统一。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

这个Banner看起来比较清新,没有过多的元素,但重点是文字,由于背景用的浅色,文字也用的浅色,用户是很难看出来的,影响用户的阅读性。

最后总结几点

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

1.画面整体统一,颜色搭配的看起来舒服;

2.页面元素要以组为单位;(如文字和文字之间的间距不要过大,让人看起来是一组)

3.采用吸引力的用语,或者添加火速参与等刺激性的词语按钮等,让用户在最短的时间内有去点击他的欲望。

4.主次对比分明,合理安排页面布局;

5.输出K数不宜过大,否则加载速度会慢;

6.最后最重要的一点是,前期工作一定要与需求方沟通好,要知道,在工作中,沟通是非常重要的一件事情。

以上是自己在平时工作中总结的一点点小经验吧,希望对初学设计的同学来说有点帮助,还望大师们多多指点,我会虚心学习。有部分图是从网上找的,在这里借用下,如果侵犯您的权了,请告知下。谢谢。

来源:https://www.tulaoshi.com/n/20160217/1577275.html

延伸阅读
在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局类型 布局实现 采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸...
互联网行业,几乎每天都有新的网站上线,旧的网站改版,但不论是新站还是改版都有一个共同的特征就是’全新’,全新的产品结构,全新的视觉风格带来全新的用户体验,这样的创新和调整多多少少都会给用户带来些许茫然。 最近关注一些大型站点改版设计,如七月末淘宝的改版2013淘宝新详情页改版出炉以及针对京东改版谈网页设计趋势,...
怎么了?除非你对某类对话框已司空见惯,否则遇到,第一反应往往是这样的?这种体验就像你明明急着去赶车,途中却不断被拦住塞传单一样。不能否认,它是一种打断,有时甚至会成为打扰。做为设计师,虽知打断暂不能杜绝,但不使之变为打扰,却是我们该努力做到的: ① 多次打断=打扰 隔一个小时打断你一下,你或者还可以忍受。若是1分钟内好几次...
在网页设计中使用更多的视频,被认为是2014年的一大设计趋势。当然有一些人会坚持大量使用文本/内容,他们认为内容是网站的根基,其他人则认为需要打破传统,因为访客的好奇心是不会满足于单一的内容铺陈的,需要为访客的好奇心制造惊喜。 无论如何,视频增多文本减少的网站在过去的几个月里层出不穷。这样的解决方案有其优缺点,但是至少它引...

经验教程

605

收藏

73
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部