您好,我们为您提供软件开发、品牌形象策划、网站建设等服务,如您有需求请咨询:13526529836
A Better Tomorrow

浅谈网页设计的网格模板

来源:河南寻唐软件科技有限公司-刘勤勤 添加时间:2018/7/21 17:29:12
我们平时常用的网页尺寸都是1920px,内容编排一般1200,分为12格的话刚好每格100,怎么样都是偶数倍是不是算起来简单到美美的?

最近一直在看关于排版的东西,最突出最系统印象最深的应该就是网格模板了。

好用的程度在于非常基础,拿来就能用,怎么用都不会错。

我今天就在小白视角按照自己的理解小扯一下吧。

先看几个例子:

  

再看:

 

很明显排版都是按照网格来规整的

 

这跟小时候练字,物品摆货一个道理,画面工整平稳,整齐规范,视觉上就特别的顺畅好看。

网上大家关于网格系统的总结和尺寸各有不同,只要理解了网格的宗旨,其他的按照自己的喜好和习惯使用就好了。

下面简单举例个常用的尺寸形式,便于更详细的理解:

我们平时常用的网页尺寸都是1920px,内容编排一般1200,分为12格的话刚好每格100,怎么样都是偶数倍是不是算起来简单到美美的?

 

按照100打好辅助线,画好网格。剩下的只要把文字图片内容直接pou就可以啦!

因为每格都是等比划分,只要按照网格摆放的版块就默认了页面的秩序,有秩序感的画面才会有美感。有没有觉得好像走了个排版的捷径?啦啦啦啦~

关于更多网格的套用案列:

 

 

除了京东淘宝,各种大型网站特别是内容比较多,板块比较丰富的企业型网站,更是遵从了网格的规范,这里仅仅拿出几个热门案例,更多的理解和应用还需要大家自己去实操和挖掘。

网上有很多提供网格模板下载的,个人觉得没必要下,自己建辅助线打格子就可以了,按照自己需要的比例和格子尺寸,实践出真知,自己实操的多了,还会有很多新的理解。

祝愿大家都在设计上更进一步!

(最后啰嗦一句,网格虽然是标准的约束,但设计是不受限制的,大家按需使用即可,某些不规则的版块跟网格并不冲突。)

公司地址:郑州中原国家广告产业园3号楼8楼171室 联系电话:13526529836
河南寻唐软件科技有限公司 版权所有 豫ICP备14010601号-1