读书频道 > 网站 > 网页设计 > Bootstrap实战
3.2.2 解析960栅格系统
2013-11-02 15:41:18     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

网页设计中,当搭建页面结构复杂的门户型网站时,一般习惯定义页面宽度固定宽度,同时多选择宽度为950px/960px。例如,Alexa全球排名前100的站点,它们的主页宽度多为950px或960px,这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站,如AOL为960px,Yahoo!为950px,淘宝为950px,新浪为950px,网易为960px,搜狐为950px,优酷为960px。而对于网站功能专一、页面结构相对简单的站点来说,它们的主页宽度似乎没什么规律,如Google、YouTube、Facebook、Flickr!、eBay、百度、新浪微博等。

大部分用户的电脑屏幕分辨率是1024像素×768像素,在自然状态下,浏览器窗体的大小约为974像素×650像素,如果减掉左右两边各7像素的边框,网页的实际大小约为960像素×650像素。

另外,960可以分解为26×3×5,这使得960可以分割成以下宽度的整数倍,共26种:2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320、480。

目前绝大多数显示器都支持1024像素×768像素及以上分辨率。为了有效地利用屏幕宽度,同时保证栅格的灵活度,可以看出960像素是非常合适的。这样,在目前主流显示器下,960像素就成为网页栅格系统中的最佳宽度了。

不少设计师喜欢采用960固定宽度布局,当然对于结构复杂的网站来说,960并不是万能钥匙,大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局,最大限度地呈现信息。Google更是简简单单,主题部分就一个列表。eBay的页面也非常简洁,商品页面宽度自适应,信息自然流畅,购物很踏实。类似的站点还有很多,对于这些站点来说,宽度自适应布局更受青睐。

对于结构复杂的网站来说,可维护性和可扩展性非常重要。作为以信息展示为主的门户型网站,960的宽度对于信息的阅读比较友善。

一个标准的栅格系统包括以下几个部分,如图3-5所示。

 

将流线(Flowline)的总宽度记为W,列(Column)的宽度记为c,槽(Gutter)的宽度记为g,外边距(Margin)的宽度记为m,列的个数记为N,可以得到以下公式:

W=cN+g(N-1)+2m

一般来说,槽的宽度是外边距的两倍,上面的公式可以简化为:

W=cN+g(N-1)+g=(c+g)N

将c+g记为,公式可进一步简化为:

W=CN

上面的公式就是栅格系统的基础。

在具体应用中,外边距其实是一个空白边,从视觉上看并不包含在总宽度内。不少栅格设计里习惯性地设定槽的宽度为10px,这样外边距就是5px.当W为960,分割成6列时,左右外边距各为5px(也可以将外边距集中放在一边)。

无论外边距放在何处,如果去除外边距之后,将W的含义变为去除外边距的总宽度,公式变化为:

W=NC-g

将上面的公式实例化:

950=12×80-10=16×60-10=24×40-10

这就形成了960栅格系统的3种常见切法,如图3-6~图3-8所示。

 

上面3种切法中,N越大,灵活度越高。可以根据网页的实际复杂度来选用对应的切法。在960Grid System主页(http://960.gs/)中展示了12×80的应用(见图3-9),其中左图网站地址为http://interactionhero.com/,右图网站地址为http://5by5.tv/。


 

图3-10展示了16×60的应用,其中左图网站地址为http://www.sonymusic.com/,右图网站地址为http://fedoraproject.org/。

 

目前严格采用栅格系统的网站非常少,那么为什么我们还要努力学习并实践网页栅格化呢?这是因为栅格系统具有以下优势。

能大大提高网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。

基于栅格进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。

对于设计师来说,灵活地运用栅格系统,能做出很多优秀和独特的设计。

对于大型网站来说,使用栅格化将是一种潮流和趋势。

栅格系统是美好的。但不能够一味地追求将所有设计都栅格化,因为任何设计都有其适用范围,超出适用范围,勉强使用只会带来无尽的烦恼。对于栅格系统来说,以下场景非常适合:

页面的总体宽度布局,比如两栏、三栏等布局;

一些固定区块的尺寸,比如广告图片的尺寸;

区块之间的间距,可以参考栅格系统的槽宽;

一些可以栅格化的小区域,暗合栅格往往能简化布局上的考虑。

除了上面这些应用场景,勉强使用栅格系统,往往会束手束脚,适得其反。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.2.1 网页栅格系统的设计技法
下一篇:3.2.3 Bootstrap栅格系统
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站