加拿大进出口外贸外贸B2B行业网站——页面元素之间距离的标准



加拿大外贸

你知道怎么设计外贸B2B行业网站网页各元素之间的距离吗?你知道怎么处理文字与图片距离、内容与边框距离、页面与屏幕距离吗?其实,对于很多人来说,这个问题不是那么的简单!如果给大家一个网页,网页上各种元素之间的距离太宽或太紧,大家也能体会到,并能提出修改意见。但是对于专业的产品经理、页面设计制作人员、公司管理层,我们需要的是高度关注细节,对页面每一个元素之间距离不对的地方,都要高度敏感,提出正确的修改方案。我们平时浏览网页、报纸、书籍、期刊、电视等各种媒体的时候,对于文字与图片、内容与边框之间的距离仅仅有个基本的认识。下面我们就来具体了解一下B2B的外贸建站相关内容吧!

         首先,要了解网页各种元素之间距离的基础知识。元素之间有一定距离才能利于阅读:这个要从用户阅读行为去考虑,我们的视线在看不同的内容时,网页各种元素之间有一定的距离,才能合理的区分和辨别出各个元素的不同点,更好的阅读体验;一般各种元素之间的大致距离:这个很难有统一的标准,不过根据我对各种网页排版的调查分析,一般都在8PX-20PX之间,比如:页面标题栏与标题栏之间的距离,一般为10PX,导航页信息链接与信息配图之间的距离,一般在8PX-12PX之间,导航页信息链接与边框之间的距离,一般不小于10PX。具体的在后面做详细讲解,最少不能低于5PX,否则读起来很累;

        留白是设计的需要:打开一个网页,用户希望看到一些留白的空间,留白不是指白色,而是指仅显示背景色,如果背景色是白色,留白指的就是白色。留白可以让读者注意到重点的内容,更有层次感,比如推荐的信息标题,周围的空白比普通未推荐的内容周围空间要多,这个是设计者故意而为之,目的是提醒用户,这个是重点内容;各种逻辑上相同的元素之间的距离也要相同:比如一个网页,第一屏文字与边框的距离为15PX,第二屏仍然要相同,不能下面就变成8PX,同一个表单输入框,离左边提示输入内容的文字的距离也要一样,比如都为10PX,不能有一些输入框距离就大一些,这个就造成了不对齐,使页面看起来杂乱无章,缺乏美感。

        其次,了解文字与图片之间距离的一般标准。文字与图片之间的距离分为几种情况,一是导航页图片配图与信息链接或导读之间的距离,二是内容页图片与信息文字之间的距离,三是导航页产品图片或人物图片与信息标题之间的距离。一般标准如下:导航页图片配图与信息链接或导读之间的距离:8PX-10PX比较合理,这个距离不能太大,超过了10PX就觉得太宽了。内容页内容图片与信息文字之间的距离:这个距离一般可以比较宽,一般空一行,20PX-25PX都可以,因为有很多空间可以使用。导航页产品图片或人物图片与信息标题之间的距离:这个距离一般比较窄,尤其是竖行排列的时候,可以更窄一些,5PX也是可以的,如果这个标题分两行,行距一般比较窄,110%-120%之间最理想。

       然后,要了解内容与边框之间距离的一般标准。无论是图片、还是文字,与边框都必须要有一定的距离,页面分为导航页、内容页、功能页三种页面,不同的页面与边框的距离有一定的不同。导航页内容与边框的距离:由于导航页空间比较小,每个地方都要分布不同的内容,越靠上、越靠左的内容越重要,内容与边框的距离一般在10PX-15PX比较合理。内容页内容与边框的距离:这个距离一般可以比较宽,从20PX—40PX都可以,因为有足够的空间,新浪、阿里巴巴的新闻内容页内容离边框的距离就是4OPX,腾讯为30PX,中国服装网为20PX,本研究报告认为,20PX-30PX是最合理的。功能页操作提示或输入框与边框的距离:由于这种页面内容不多,以用户操作为主,有更多的空间,比如:用户注册页面、信息发布页面等,这样的距离不定,如果空间太多,可以居中对齐,左右的距离都是一样的,根据实际情况而定。

       接着就是了解标题栏上文字与标题栏边框的距离。标题栏一般由图片和文字构成,图片一般为背景,文字一般会加链接,分为标题名字,以及“更多>>”的链接,文字在标题栏上一般是上下居中对齐,标题栏名称离左边的距离一般为:15PX-20PX,“更多>>”离右边的距离一般为:15PX-20PX,当然也有例外,但是大部分的情况下是这样的。整个页面上的标题栏文字离左右的距离要统一,形成规范,才能不会杂乱无章。有一种情况也可以不一样,就是标题栏的设计完全不一样,为了排版需要,距离要设置成不一样。

        其次,页面与顶部、底部、左右的距离。与顶部距离:可以为零,也可以为5PX,都可以,本报告认为不要有距离最好,最高不超过5PX。与左右的距离:虽然现在的电脑都是宽屏,尤其是新配的电脑,但是我们设计网页还是要以1024分辨率为主,页面宽度最多可以到1002,即左右宽度为10PX,这样可以没有滚动条。我认为页面使用995PX最合适,左右留13PX左右的距离。对于超过1024分辨率的宽屏显示器,左右两边的距离是随显示器宽度而变化的。与底部的距离:底部文字与页面底部的距离在18PX-30PX之间比较合理,太高了,太粗糙,太低了影响阅读,本研究报告认为,18PX是最合适的,正好是文章的标准行距,可以取得最好的阅读体验。

    这些内容虽然很简单,但是把握好细节还是很重要的。虽然是些简单的技术知识,但是只要你认真理解,还是能搞清楚的。

评论
不管是平台还是网站细节很重要,把握细节才能做的更好

评论
底部文字与页面底部的距离在18PX-30PX之间比较合理,太高了,太粗糙,太低了影响阅读,本研究报告认为,18PX是最合适的,正好是文章的标准行距,可以取得最好的阅读体验。
加拿大电商露天电影首发——葡中双语字幕《中央车站》 http://bbs.shanghai.com/thread-1714999-1-1.html screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoo 加拿大电商做区块链为什么都注册新加坡基金会 目前做区块链项目的客户都会通过注册基金会来作为项目的主体,为什么都在新加坡注册基金会,首先性价比高,而且新加坡市场也比较成熟,项目
  ·生活百科 业主自住保险涨得这么快!
·生活百科 在澳洲可以零元买吗?一位阿姨推着一车食物从超市走出。保安

加拿大进出口外贸

加拿大电商关于免抵退问题

加拿大贸易当月销项-进项=-6万元,当月FOB总价*退税税率为10万元,那么当月可退税是6万元,免抵4万元 请问:这免抵的4万是不是要留到下期再进行抵扣????? 评论 这个问题问财务了。 评论 ...

加拿大进出口外贸

加拿大电商EN10204-3.1 材质报告

加拿大贸易路过的前辈们有没有知道EN10204-3.1证书的? 我的客户现在要求材质报告上要注明EN10204-3.1字样,但是原厂的材质报告几乎没有这个字样。国内的大厂,基本上通过了各种认证,是不是他们 ...

加拿大进出口外贸

加拿大电商外贸小白趟过的雷

加拿大贸易本人4个月换了3份工作,现在这份工作月底又要换工作了。我就说说我都遇到过哪些坑和哪些坑人的公司。 算算,去年毕业到现在有一年了。大学毕业就跑市场,自己创业,结果被现实 ...

加拿大进出口外贸

加拿大电商订舱订不到怎么办

加拿大贸易刚接触公司的地板产品,前辈却告诉我,目前最大的问题是除非是大公司订购,否则高昂的运费白搭。今天带我的前辈给我算了一下运费,都一万八了都。而且说订舱也订不到。那我来 ...