首页>前端教程>界面设计

网页设计中是如何计算网格系统的?

宽屏时代,1920px的画布,满足大屏幕显示器,可以通过背景的100%让屏幕填充完整。内容版心区域在960px-1350px之间,满足1024分辨率的显示器和1366分辨率的笔记本电脑用户。

其实现在pc端都是宽屏时代了,所以pc端的网页几乎都是以1280或者1440分辨率为最低需求。

可以通过百度的流量研究院得到一些数据。

百度流量研究院数据.jpg

那么在网格布局的时候,就可以设置好自己网页的版心宽度了。

网页宽度不是固定的,网格栅格的间距也不是固定的,分栏有三等分、四等分、五等分、六等分的,所以在一个复杂网页的设计中,可能需要建立多个不同的网格系统辅助。

如果需要满足三、四列等分布局,则3*4=12列的网格就可以搞定,如果需要四、五等分的,则可以用4*5=20列的网格布局。

举个站酷的例子。

站酷在1440px的分辨率下内容的宽度是1130px,五等分,间隔是20px。那么网格可以选择10/15/20的分列,用网格布局的时候,网格的宽度=内容宽度+1个列间距,设计的时候总宽度为1130+20=1150px,只有分为10列的时候,每一列的宽度为95px是整数,分为15列和20列,每一列的宽度都是小数。总宽度=(列数*列宽+列数*列间距),所以1150=(10*95+10*20)。如图所示:

站酷栅格化布局.jpg

当然,这是我的推测,站酷是不是这样布局的,我还真不知道。

再举一些列子来验证一下。

腾讯网的首页,内容宽度是1000px,间隔是20px,则页面总宽度为1020px,分了三列,则可以选择3的倍数的网格,可以分为12列。1020=(12*65+12*20),如图所示:

腾讯网格布局.jpg

如果设置了宽度是1200px,间距是20px,则页面的内容宽度是1180px。如果需要12等分,则1180px=(12*80+20*(12-1)),每个栅格的宽度是80px。12列的栅格满足大部分比例关系,而且设置间隔为20px,12等分、16等分、20等分的网格,每一列都是整数。

比如UI中国的首页:

ui中国网格布局.jpg

根据以上案例的反推,可以得到一个网格布局大致的规律。

总宽度=内容宽度+一个列间距。

根据网页布局的等分比例,设置一个可以整除的网格列数,比如四等分,可以设置12列、16列、20列的,越复杂的网页,需要设置更多的列数,或者不同的地方,使用不同的网格布局。

然后设置好间隔值,最后每一列的宽度算出来是整数最好。


13
保存到:

相关文章

Top