加入收藏|设为首页

手机版
$(function(){ $("#sj").hover(function(){ $(".wap_in").show(); },function(){ $(".wap_in").hide(); }); });
惠州-惠城
0752-2285080 130 752 11555
深圳
重庆
昆明
贵阳
$(window).scroll(function(){ var scrollTop = $(document).scrollTop(); if(scrollTop > 0){ $("#top").addClass("s_down"); } else { $("#top").removeClass("s_down"); } initTop = scrollTop; });
新闻中心
经典案例 [ 更多 ]
  • 中国大麦网

  • 田美花园

  • 树年手机

  • 黑龙潭

  • 以幸时尚摄影

合作伙伴

谈谈网站上的BANNER设计的功能?

2014-05-30 12:10:59 来源:知讯网络 字体大小:TTT
[摘要] Banner设计其实是我们接触互联网工作后,最常见一种工作。他的主旨就是主题明确,突出关键内容,抓住用户眼球。

Banner设计其实是我们接触互联网工作后,最常见一种工作。他的主旨就是主题明确,突出关键内容,抓住用户眼球。

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

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

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

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

最后总结几点
1.画面整体统一,颜色搭配的看起来舒服;
2.页面元素要以组为单位;(如文字和文字之间的间距不要过大,让人看起来是一组)
3.采用吸引力的用语,或者添加“火速参与”等刺激性的词语按钮等,让用户在最短的时间内有去点击他的欲望。
4.主次对比分明,合理安排页面布局;
5.输出K数不宜过大,否则加载速度会慢;
6.最后最重要的一点是,前期工作一定要与需求方沟通好,要知道,在工作中,沟通是非常重要的一件事情。

$(document).ready(function() { $("#selectXiangGuanLianJie").change(function() { var hrefstr = $.trim($(this).val()); if (hrefstr != "" && hrefstr != "0" && hrefstr != undefined) { var tmp = window.open("about:blank", "", ""); tmp.moveTo(0, 0); tmp.resizeTo(screen.width + 20, screen.height); tmp.focus(); tmp.location = hrefstr; } }) }) var yzhzsfid = "10000007"; $(document).ready(function() { if (para("q")) { $(".ccooperate .item").eq(para("q")).show().siblings().hide(); $(".xymenu li a").eq(para("q")).parent().addClass("current").siblings().removeClass("current"); } else { $(".ccooperate .item").eq(0).show().siblings().hide(); $(".xymenu li").eq(0).addClass("current").siblings().removeClass("current"); } $("input:text,select,textarea").bind({ focus: function() { $(this).css("border-color", "#222") }, blur: function() { $(this).css("border-color", "#bbb") } }) }) function fontSizeChange(){ $(".newspage center.info span").click(function(){ $(this).addClass("current").siblings().removeClass("current"); if($(this).hasClass("small")) $(".zw").css("font-size",14); if($(this).hasClass("middle")) $(".zw").css("font-size",16); if($(this).hasClass("big")) $(".zw").css("font-size",18); }) } fontSizeChange(); $(".rxxm").imgFade(); setFullHeight(); $(window).resize(function(){ setFullHeight(); }); $(".rxxm").imgFade();

深圳知讯
深圳业务咨询

惠州知讯
惠州业务咨询

重庆知讯
重庆业务咨询

贵阳知讯
贵阳业务咨询

昆明知讯
昆明业务咨询

客服李小姐 客服李小姐

客服许小姐 客服许小姐

客服王小姐 客服王小姐

 备案客服 备案客服

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ff0883abc848f2bd29b354805cee56dbd' type='text/javascript'%3E%3C/script%3E")) var box = new LightBox("idBox"); $("idBoxCancel").onclick = function(){ box.Close(); } $("idBoxOpen").onclick = function(){ //box1.Close(); box.Center = true; box.OverLay.Color = "#000"; box.Show(); } var box1 = new LightBox("idBox1"); $("idBoxCancel1").onclick = function(){ box1.Close(); } $("idBoxOpen1").onclick = function(){ //box.Close(); box1.Center = true; box1.OverLay.Color = "#000"; box1.Show(); } function kefu_close() { document.getElementById("bottomDiv1").style.display="none"; $(".footer").css({"margin-bottom":"0px"}) }