您现在所在的位置:

首页 > 电子商务 > 网站建设 > 浅谈B2B行业网站“页面元素之间距离”的标准

浅谈B2B行业网站“页面元素之间距离”的标准

来源:中国电子商务研究中心   2012-01-04 03:15
  这个章节主要给大家讲下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%之间最理想。

  3内容与边框之间距离的一般标准

  无论是图片、还是文字,与边框都必须要有一定的距离,在《B2B行业门户网站设计开发实战研究报告》里,我将页面分为导航页、内容页、功能页三种页面,不同的页面与边框的距离有一定的不同。

  A导航页内容与边框的距离:由于导航页空间比较小,每个地方都要分布不同的内容,越靠上、越靠左的内容越重要,内容与边框的距离一般在10PX-15PX比较合理。

  B内容页内容与边框的距离:这个距离一般可以比较宽,从20PX—40PX都可以,因为有足够的空间,新浪、阿里巴巴的新闻内容页内容离边框的距离就是4OPX,腾讯为30PX,中国服装网为20PX,本研究报告认为,20PX-30PX是最合理的。

  C功能页操作提示或输入框与边框的距离:由于这种页面内容不多,以用户操作为主,有更多的空间,比如:用户注册页面、信息发布页面等,这样的距离不定,如果空间太多,可以居中对齐,左右的距离都是一样的,根据实际情况而定。
  • 一比多网站:一比多一比多移动平台
  • 一比多咨询热线:13361975067   

    沪公网安备 31011502004088号

  • 增值电信业务经营许可证:沪B2-20070060 网站ICP备案号:沪ICP备07012688号 一比多(EBDoor) 版权所有 Copyright 1998-2018 EBDoor.com All rights reserved.