提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
来源:UI设计网 作者:绿豆芽儿
对于高深的栅格系统,很多人可能琢磨不透,其实我们定的各种网页对齐规范,网页模块大小规范,就是来自栅格系统。
本文是个人学习前辈的文章和主流网站的分析,总结的对栅格系统的理解,得出的[a+i=100]的栅格方法
题记:提起网页布局,大家公认最为规范的就是栅格系统,对于高深的栅格系统,很多人可能琢磨不透,其实我们定的各种网页对齐规范,网页模块大小规范,就是来自栅格系统。本文是个人学习前辈的文章和主流网站的分析,总结的对栅格系统的理解,得出的[a+i=100]栅格布局。
(本文仅做学习交流使用,未得权威认证,欢迎大家批评指正,文末注引出处。)
栅格系统
栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁。最早出现于印刷,简单的说就是运用固定的格子使界面排列工整简洁。后来延续到web设计,其中比较有名的是960 Grid System。目的也无非让网页布局的更合理、易于阅读等。
使用网格系统,让你的设计具有正式感和规范感,还具有一种结构分明的设计感。这让你设计起来更轻松,对于开发者来说,同样如此。(让设计师清楚的跟其他人解释他们是如何设计的)
栅格化的基础概念
当n = 24, i = 10;假如A=40,则W=950;假如A=50,则W=1190;假如A=60,则W=1430。
当n = 24, i = 20;假如A=50,则W=1180;
当n = 12, i = 20;假如A=100,则W=1180;
栅格化是通过确定等分的单位宽度以及单位宽度之间的间距,把单位宽度进行组合的一种排版方式。
首先分析等份的复杂度,如果版式仅仅是4等份、3等份的话,12列的栅格系统就可以满足需求。如果有较多不等分的可能,那么还是建议采用24列的栅格系统
栅格系统的三种形式:
1、 有边距的栅格:
当我们用已知想做的宽度的时候,可以用这种栅格
假设W=1200,i=30(10的倍数),n=12
W=(a+i)*n
1200=(a+30)*12
a=70
例如1、<人人都是产品经理>采用这种栅格,(所有内容皆在版心1200px内,图片内容块是A的倍数,多数内容间距30px,根据内容灵活应用栅格)
2、无边距的栅格
假设W=1200,i=10(10的倍数),n=12
W=(a+i)*n-i
1200+10=(a+10)*12
a约等于90
所以W=(90+10)*12-10=1190
所以这种等分方式是最接近1200屏幕需求
例如:淘宝,天猫,京东
W=(90+10)*12-10=1190
1180版心:
W=1180,i=20(10的倍数),n=12,a=80
W=(80+20)*12-20=1180
例如:UI中国
3、直接等分的栅格
简单明了,直接根据站点内容分几块
例如1:站酷
所有内容都在版心1083px内。以10px倍数为间距,每个模块250px。
例如2:echo回声
所有内容都在版心1000px内。以15px的倍数为间距。
总结:
以上栅格皆是A=100,先确定栅格间距i,再根据网页宽度定栅格的数目n。所以个人得出的定义就是现在主流的网页是以100为基准的栅格,(如:90+10、80+20、70+30、85+15)。
很多人,尤其是对于新手来说——网格系统会阻碍他们的发挥创造。你会感觉你的灵感被束缚在这些条条框框里面了。如果出现这种状况,我建议你从网格系统中跳出来,用自己的创意去设计,根据自己所做的项目,按照自己的经验来排布元素,然后再切出网格系统,想出一个二者结合的两全其美的办法,稍做调整,如果网格系统和你的原创设计出入过大,不能有效协调,那么建议换一个网格系统,或者自己设计一个。其次,网格系统用起来比较困难,有一定的学习成本,需要有一定的数学基础,你得懂比例,会计算。对于那些数学不好的人来说,网格系统真的是太复杂了。但是我认为,刚开始虽然比较难以上手,但是习惯之后,你会得心应手,设计也将会更加出彩。还有在网页设计或排版的时候除了注意竖向的布局,一些横向也是要注意的,标题间距、模块间距也要统一,最好与栅格间距统一,多以5、10、15、20、30等为间距。
网页图片
对于网页中的图片建议用一些常见的比例,如:1:1、4:3、16:9、7:5、3:2、16:10、21:9,
1.43:1、7:5等
好了,就这些,栅格系统还需大家到实际项目中去实践,用了就离不开他,用了他你好大家好。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册