栅格化系统简介



栅格系统的设计原理


1.关于栅格系统的典故


rasterize1.png


2.什么是栅格?


栅格系统以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。栅格系统有时候也称为网格系统。


网页栅格系统是从平面栅格系统中发展起来,对于网页设计来说,栅格系统的使用,不尽可以让网页的信息呈现更加美观易读、更具可用性,而且对于前端来说,网页将更加灵活与规范。


在网页设计中,如果把网页宽度平均切分为多个网格单元,每个单元之间预留一定的空隙,此时整个页面就如同一个栅格系统,如图所示:


rasterize2.png


3.栅格系统的设计原理及应用


图中给出了一个标准的栅格系统中所包含的几个部分,分别是总宽w、列宽c、槽宽g、外边距几个部分。这样总宽的公式如下:


rasterize3.png


rasterize4.png


边距部分不显示内容的,用于将网页主题内容和边缘进行分割。可以改变面数和槽宽,设计出很多栅格系统。常见的栅格系统:


rasterize5.png


4.栅格系统的优势


使用栅格系统的网页设计非常有条理,看上去也很舒服,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。


最重要的是,它给整个网站的页面结构定义了一个标准。对于视觉设计师来说,不用再为网站的每一个页面都想一个宽度或高度了;对于前端开发工程师来说,页面的布局设计将完全是规范的和可重用的;对于内容编辑或广告销售来说,所有的广告都是规则的、通用的,再也不用做出一套多张不同尺寸的广告图了。这对于大型网站的开发和维护来说,能节约不少成本。



栅格系统框架搭建举例


1.打开栅格系统


rasterize6.png


2.新建一个文档,使用宽度168像素,高度1200像素。


rasterize7.png


3.将栅格系统拖进来,进行居中操作。全选,把栅格系统解锁,使用对齐工具,选择居中对齐。


rasterize8.png


4.建立参考线360像素,1320像素,240像素。


rasterize9.png


5.新建,设置一个24像素文档纵向


rasterize91.png



小作业


了解栅格系统的公式含义。完成课上搭建的栅格系统示例。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

麦子大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部