加入收藏|设为首页

手机版
$(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; });
新闻中心
经典案例 [ 更多 ]
  • 中国大麦网

  • 田美花园

  • 树年手机

  • 黑龙潭

  • 以幸时尚摄影

合作伙伴

网页页面的均衡规划和选择

2014-05-30 11:37:21 来源:知讯网络 字体大小:TTT
[摘要] 1 尺寸   a)800*600能照顾到所有网友的电脑,但相当是张“小报”。  b)1024*768渐成主流。1024*768能比800*
 1.尺寸

  a)800*600能照顾到所有网友的电脑,但相当是张“小报”。

  b)1024*768渐成主流。1024*768能比800*600多出一栏的信息。

  c)正文页采用自适应设计,能在正文页做更多相关内容。首页也可以尝试自适应的设计。自适应设计的核心是要留出宽度伸缩自如的栏。

  d)在1024*76模式下,页面的长度不易超过10屏。

  e)随着电脑升级换代,分辨率提高,电脑屏幕能够提供的面积越来越大,这是一种难得的资源,要充分利用。“小报”改“大报”要增加一倍的纸张成本,网站改“宽版”,不增加任何成本。

  2.字体字号

  a)目录页用小字号,为的是放更多的标题。

  b)正文页用大字号。为的是让读者读得舒坦。

  c)慎用不容易看清楚的楷体。楷体的作用等于图片,主要起美化版面的作用。

  d)多用对搜索引擎友好的标粗,来表示重点。

  3.颜色

  a)同一个页面的颜色不要超过4种。眼花缭乱,容易产生视觉疲劳。

  b)颜色对比不要反差太大。网页版面不是美术作品,要避免形式对内容的喧宾夺主。

  c)文字+底色能够起到很好的突出作用,在视觉变化上相当于图片的作用。

  4.静态化

  a)访问量大的页都应该静态化,以便减少服务器压力,增强网站稳定性。访问不到的网页是最差的网页。

  b)动态化和静态化在一个页面中结合使用,能同时得到轻负荷和即时交互性的好处。

  c)哪些页面的哪些地方需要静态化要在一开始就考虑,访问量大了之后,再高考虑,就迟了,由动态化转为静态化,会有很多历史问题。

  5.分栏

  a)首页选4栏?还是3栏?

  b)正文页多用2栏。

  c)“纵向逻辑”是指将相近的内容从上至下排列,而不是从左向右排列。如果读者对这方面内容感兴趣,他会从上至下,逐行阅读。这样可充分力利用首屏,让首页增多从上至下阅读的可能。

  d)避免一栏太强,一栏太弱。通过图片、套红等手段进行调控。平均使用读者主意力。使读者不敢放过左中右任何一栏。

  6.图片

  a)一图胜千言。十分必要时才用。因为图片的编辑成本和带宽成本都比较文字高很多。

  b)在目录页的图,小点,再小点,多用特写;小分辨率,能看就行。在正文页的图,保证清晰,美观。正文页有的是版面。

  c)正文页在5屏之内,尽量不要分页。让读者一次读完。

  7.导航条与网站地图

  a)导航条是网站的门牌号码,不能随意更改。否则,读者会迷路,找不到他原来看的内容。

  b)导航条上的分类名的前后次序要兼顾重点和读者阅读逻辑,即归类摆放。

  c)导航条最多三行。最好二行。太多行显重。

  d)导航的更多,就是网站地图。网站地图的摘要版可以放在网站底部,成为底部导航。网站的底部导航,很有必要。其好处是:一、可放多行;二、可形成网站底部的阅读重点。将读者从首屏带到最后一屏,期间会增加很多点击。

  e)主导航和频道导航:主导航每页都有,频道导航只在本频道页面出现。

  8.首页更新成本

  a)首页设计不能只考虑美观、协调,要考虑24小时更新一遍之要求。更新是网站的生命,一定要最大限度地降低首页更新成本。

  b)交叉自动同步更新的设计,可有效降低各种首页更新成本,给读者内容丰富即时的感觉。

  c)更新即时的首页是网站的资源,因为是资源,更多的标题会拥上这个首页。如此,正循环,这个首页也就火了。更新不即时的首页是网站的鸡肋,会越来越寂寞,最终会被荒废。

  d)每个首页的设计成至少要有一个读者点击进去的理由。即时更新比独家内容成本低。
$(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"}) }