你知道页面元素之间的距离的标准吗？

thomas_hky

笔者在这里说的，虽然很简单，但是细节很重要；虽然是技术知识，但是你无需懂技术，就能看的明白，就能指导技术按照本文的要求设计制作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比较合理。