Cheshirecat

网格系统常见于字体设计(Typography),平面设计(Graphic Design),尤其是在杂志报纸的图文混排中有更多的应用.成熟的网格系统往往都具有良好的比例关系和对空白空间的精确把握,同时具有优秀的扩展性.在传统的印刷工业中,一般的,可以将网格简单划分为单列网格(single-column grid),多列网格(multi-column grid),附水平锚点多列网格(horizontal anchor)以及模块化网格(modular grid).选用网格主要取决于画布(canvas)和内容(content).

网格的存在在字体设计中是因为要求字体具有良好的辨识性,而在传统的平面设计和排版行业中,除去作为信息载体的可读性的特征,网格系统的使用有助于生产效率的提升.而网页作为承载信息的新媒体,是传统媒体在屏幕上的表现形式,网格系统的使用同样能提升可读性和效率.而负责表现形式的表现层主要是由层叠样式表(CSS)来控制的.

网页网格系统组成元素(翻译自Web Standards Creativity一书)

宏观元素(Macro elements)表现:宏观元素主要负责网页结构(Structure)表现.主要包含内容分栏(Columns),网站头部(Master head),主导航(Main navigation)和网站底部(Footer).

微观元素(Micro elements)表现:微观元素主要为结构内部的填充元素表现.主要为侧栏元素(Sidebar elements),状态栏(Status boxes),标题(Headings),列表(Lists),表格(Tables),链接(Links),段落(Paragraphs),图片(Images)等.

网页网格系统的实现要点

由于网页主要显示载体为屏幕,不像传统的纸张一样具有固定的画布(canvas)尺寸,整个页面的比例(ratios)要求考虑到元素的度量,如画布,字体,图片,边距以及其他空白的单位设置.另外还需要考虑到网格系统的重用性(reusable),扩展性(flexible),兼容性(compatible)等要点.
[未完待续,详细看一下当前存在的几种网格布局(YUI Grid,Blueprint,YAML,960 Grid)的实现再写.]