中国B2B研究网
联系我们 | 付款方式
首页 资讯 研究 视频 网站 人物 学院 博客 策划 开发 推广 销售
 
当前位置:首页 > B2B研究文库 > B2B网站建设 > B2B行业网站“页面元素之间距离”的标准
B2B行业网站“页面元素之间距离”的标准
来源:中国B2B研究网 发布时间:2011-12-30  浏览:
  本文节选自《B2B行业门户网站设计开发实战研究报告》第四章 第3.4节

  这个章节主要给大家讲下B2B行业网站网页各元素之间的距离,涉及文字与图片距离、内容与边框距离、页面与屏幕距离等,这个部分其实说简单也简单,说复杂也复杂,因为在我们平时浏览网页、报纸、书籍、期刊、电视等各种媒体的时候,对于文字与图片、内容与边框之间的距离也有一个基本的认识。如果给大家一个网页,网页上各种元素之间的距离太宽或太紧,大家也能体会到,并能提出修改意见。但是对于专业的产品经理、页面设计制作人员、公司管理层,我们需要的是高度关注细节,对页面每一个元素之间距离不对的地方,都要高度敏感,提出正确的修改方案。
 
1   网页各种元素之间距离的基础知识
 
  这个小节是对下面讲的各个元素之间的距离起到很好铺垫,让大家从本质上去理解页面设计标准。
  A  元素之间有一定距离才能利于阅读:这个要从用户阅读行为去考虑,我们的视线在看不同的内容时,网页各种元素之间有一定的距离,才能合理的区分和辨别出各个元素的不同点,更好的阅读体验。
  B  一般各种元素之间的大致距离:这个很难有统一的标准,不过根据我对各种网页排版的调查分析,一般都在8PX-20PX之间,比如:页面标题栏与标题栏之间的距离,一般为10PX,导航页信息链接与信息配图之间的距离,一般在8PX-12PX之间,导航页信息链接与边框之间的距离,一般不小于10PX。具体的在后面做详细讲解,最少不能低于5PX,否则读起来很累。
  C  留白是设计的需要:打开一个网页,用户希望看到一些留白的空间,留白不是指白色,而是指仅显示背景色,如果背景色是白色,留白指的就是白色。留白可以让读者注意到重点的内容,更有层次感,比如推荐的信息标题,周围的空白比普通未推荐的内容周围空间要多,这个是设计者故意而为之,目的是提醒用户,这个是重点内容。
  D  各种逻辑上相同的元素之间的距离也要相同:比如一个网页,第一屏文字与边框的距离为15PX,第二屏仍然要相同,不能下面就变成8PX,同一个表单输入框,离左边提示输入内容的文字的距离也要一样,比如都为10PX,不能有一些输入框距离就大一些,这个就造成了不对齐,使页面看起来杂乱无章,缺乏美感。
 
2   文字与图片之间距离的一般标准
 
  文字与图片之间的距离分为几种情况,一是导航页图片配图与信息链接或导读之间的距离,二是内容页图片与信息文字之间的距离,三是导航页产品图片或人物图片与信息标题之间的距离。一般标准如下:
  A  导航页图片配图与信息链接或导读之间的距离:8PX-10PX比较合理,这个距离不能太大,超过了10PX就觉得太宽了。
  B  内容页内容图片与信息文字之间的距离:这个距离一般可以比较宽,一般空一行,20PX-25PX都可以,因为有很多空间可以使用。
  C  导航页产品图片或人物图片与信息标题之间的距离:这个距离一般比较窄,尤其是竖行排列的时候,可以更窄一些,5PX也是可以的,如果这个标题分两行,行距一般比较窄,110%-120%之间最理想。
 
内容与边框之间距离的一般标准
 
  无论是图片、还是文字,与边框都必须要有一定的距离,在《B2B行业门户网站设计开发实战研究报告》里,我将页面分为导航页、内容页、功能页三种页面,不同的页面与边框的距离有一定的不同。
  A  导航页内容与边框的距离:由于导航页空间比较小,每个地方都要分布不同的内容,越靠上、越靠左的内容越重要,内容与边框的距离一般在10PX-15PX比较合理。
  B  内容页内容与边框的距离:这个距离一般可以比较宽,从20PX—40PX都可以,因为有足够的空间,新浪、阿里巴巴的新闻内容页内容离边框的距离就是4OPX,腾讯为30PX,中国服装网为20PX,本研究报告认为,20PX-30PX是最合理的。
  C  功能页操作提示或输入框与边框的距离:由于这种页面内容不多,以用户操作为主,有更多的空间,比如:用户注册页面、信息发布页面等,这样的距离不定,如果空间太多,可以居中对齐,左右的距离都是一样的,根据实际情况而定。


图(103)  阿里巴巴首页商人社区截图(截图日期:2012-09-23)

  如图(103)所示为阿里巴巴首页的截图(本文是写作报告是所写,现在已改版),内容与左边边框、上边标题栏的距离为:15PX,离下面的距离为20PX,内容图片与左边文字的距离为:15PX,推荐标题与下面导读的距离为20PX。基本符合我讲的这些标准。如果我来设计,内容离下面边框的距离,应该和离上面边框的距离一样高为最佳。
 
标题栏上文字与标题栏边框的距离
 
  标题栏一般由图片和文字构成,图片一般为背景,文字一般会加链接,分为标题名字,以及“更多>>”的链接,文字在标题栏上一般是上下居中对齐,标题栏名称离左边的距离一般为:15PX-20PX,“更多>>”离右边的距离一般为:15PX-20PX,当然也有例外,但是大部分的情况下是这样的。
  整个页面上的标题栏文字离左右的距离要统一,形成规范,才能不会杂乱无章。有一种情况也可以不一样,就是标题栏的设计完全不一样,为了排版需要,距离要设置成不一样。
 
页面与顶部、底部、左右的距离
 
  A  与顶部距离:可以为零,也可以为5PX,都可以,本报告认为不要有距离最好,最高不超过5PX。
  B  与左右的距离:虽然现在的电脑都是宽屏,尤其是新配的电脑,但是我们设计网页还是要以1024分辨率为主(这一点,我在《B2B行业门户网站策划实战研究报告》里也做过介绍),页面宽度最多可以到1002,即左右宽度为10PX,这样可以没有滚动条。我认为页面使用995PX最合适,左右留13PX左右的距离。对于超过1024分辨率的宽屏显示器,左右两边的距离是随显示器宽度而变化的。
  C  与底部的距离:底部文字与页面底部的距离在18PX-30PX之间比较合理,太高了,太粗糙,太低了影响阅读,本研究报告认为,18PX是最合适的,正好是文章的标准行距,可以取得最好的阅读体验。
 
  本章节就讲到这里,虽然很简单,但是细节很重要;虽然是技术知识,但是你无需懂技术,就能看的明白,就能指导技术按照本文的要求设计制作B2B行业网站。

  本文原创作者:李学江,先后从事程序开发、网站策划、项目经理、策划总监、销售总监等职,从事B2B行业门户网站研究8年多,现致力于B2B行业网站的策划、建设、推广、销售及运营研究研究,著有 《B2B行业门户网站策划实战研究报告》《B2B行业门户网站推广实战秘籍》《B2B行业门户网站设计开发实战研究报告》《B2B行业门户网站销售实战攻略》 ,欢迎交流指导咨询,交流QQ:1580658565

    《B2B行业网站策划实战研究报告》  
 构建成功商业模式,找准方向,超越对手!        永久接受免费咨询服务!

    《B2B行业网站设计开发实战研究报告》  
助您建设一流网站,为成功奠定坚实基础!        永久接受免费咨询服务!


    《B2B行业网站推广实战秘籍》   
 即学即用推广宝典,助您网站流量大幅提升!     永久接受免费咨询服务!

    《B2B行业网站销售实战攻略》   
 系统阐述销售知识, 汇聚销售技巧,提升销售额!   永久接受免费咨询服务! 
编辑:B2Byj
加入收藏 】 【 字体: 】【 打印 】 【 关闭
 相关文章
本文关键词:B2B行业网站  页面元素  标准  
如何举办行业巡回交流会?推广B2B行业网站 2014-5-20
如何举办行业巡回交流会?推广B2B行业网站 2014-5-18
王海波:腾计划影响无数企业 创造B2B行业标准 2014-5-13
B2B行业网站52b2b.cn将更换为2B.cn 2014-5-7
如何让B2B电子商务平台更标准化、规范化 2014-5-7
B2B行业网站外链建设总攻略盘点 2014-5-4
 B2B网站系列研究报告
B2B行业网站策划实战研究报告 B2B行业网站设计开发研究报告 B2B行业门户网站推广实战秘籍 B2B行业门户网站销售实战攻略
 热门资讯
敦煌网对接DHLink物流平台 实现数据互通182次
采购电商化 企业采购生态发生变革182次
阿里巴巴在全球招募梦想家134次
兰格钢铁刘长庆:努力成为行业领军126次
首届B2B行业论坛将于27日在北京举行126次
 热门研究
B2B电子商务平台如何跨过鸿沟?238次
水分营销对B2B站点的影响究竟有多大?222次
阿里发放出口红包:重新激发B2B198次
阿里IPO报告:B2B将在信息、数据、交易间寻找最佳模型190次
王海波:腾计划影响无数企业 创造B2B行业标准174次
B2B人物资讯 更多
原果壳李涛创建“极量实验室” 探索智能B2B
  近日,略带沉寂的智能领域被一家名为极量实验室的诞生搅起不小...  阅读全文>>
阿里巴巴IPO在即:马云走上舞台中央
  导语:美国《华尔街日报》网络版今天刊登题为《阿里巴巴(滚动资讯...  阅读全文>>
兰格钢铁刘长庆:努力成为行业领军
  兰格钢铁网董事长刘长庆在接受专访时表示,目前兰格钢铁电子交易平...  阅读全文>>
旅游百事通张力:旅游B2B电商崛起之道
  旅游行业散客化和移动互联网时代的到来,让旅游市场比任何时候都更...  阅读全文>>
B2B人物专栏 更多
如何举办行业巡回交流会?推广B2B行业网站
  行业巡回交流会一般用在传统产品营销推广上,也叫会议营销,目的就...  阅读全文>>
王海波:腾计划影响无数企业 创造B2B行业标
     中国网5月12日讯 提起天猫、京东,几乎没有...  阅读全文>>
王利锋:管理者意识决定B2B电商运营高度
  电子商务浪潮的迅猛推进,新商业模式层出不穷,伴随而来的营销方式...  阅读全文>>
实战:企业主开展B2B之前应该考虑的几个问题
     中国电子商务研究中心特约研究员、苏州经贸职业...  阅读全文>>
热门图片资讯
B2B电子商务平台如何跨过鸿沟?
阿里发放出口红包:重新激发B2B
采购电商化 企业采购生态发生变革
 
关于我们 | 网站导航 | 积分赚取 | 积分兑换 | 免费注册 | 付款方式 | 联系我们
手机:0515-85457789 客服邮件:1580658565@qq.com
在线服务 QQ:1580658565 地址:江苏省东台市三灶大街19号
Copyright@2007-2014 b2byj.com All Rights Reserved 粤ICP备09010822号