刷新一下大脑，Grid based web design…

 

By Robert on 开发工具

Grid based design 最近已经悄悄在web design领域流行起来，这种架势大有过去CSS+XHTML取代Table叶面框架的意思。

Grid based web design是table的回归

Grid based design是什么？不要被名字给吓唬了，其实并不是很高深的东西。简单地来理解，我认为这可以理解为Table based design的一种回归。:) 只不过不用table来撑叶面框架了，改用div + css.

Table其实是个天生的好grid结构，但table本来的设计目的是为了显示表格化的信息，不应该用来作为叶面框架，另外table本身的html markup tags太不直观，因此逐渐被div配合css来取代了。

用div 和css固然好，但有个问题，就是他们“不太听话”，和table相比他们太“自由”了，因此可能导致几个恶果：一种是叶面设计简陋，达不到设计师期望的 要求；若干年前，我计划“赶时髦”完全采用css来设计叶面框架，听到最多反对的声音就是“xxx那样的设计css搞不定”，其实不是css搞不定是人搞 不定，我记得可能是04年的国庆长假，我闭门学了几天css弄出了几个幼稚但能说明问题的原型设计，终于证明了css可以搞定大部分问题。 另一个问题就是div滥用和css代码冗余混乱，这个问题相当普遍，某种程度上这是css的学习曲线稍高导致的。

Grid based design其实就是把css + div的page layout设计进行规范化，并且采用古老的“grid”的做法来作为定位page layout和元素的基本方法。 可以认为grid based web design是对table based web design的一种回归，保留了好的，去掉了不好的。

Grid based web design 步骤:

Step#1:? 规划叶面和grid设计

Step#2: 设计叶面效果图，喜欢photoshop的朋友有用武之地了

Step#3: 产生css和xhtml代码 （可以手写，也可以用工具，但无论如何已经有很多现成的可以参考，不必为div+css不听话烦恼了）

Step#4: 浏览器中看效果

(部分图片应用自：Grid-based design: Part 2, Designing blog theme templates)

Grid based design的优势

1. 设计师们重新充分利用ps的力量

Grid based design使得网页设计师可以更好地配合photo shop等画图工具来创作更好的叶面，抱怨css+div初期带来的不适应。

2. 可重用的叶面设计模式

可以认为Grid based design其实是web设计者们在前面这段时间里的经验的总结而形成的一种模式，因此对于叶面的layout已经有很多可以参考的设计，只要注意去参考，可以避免出现某种设计实现不了和大量垃圾css代码的问题。

3. 容易产生比较好的设计，对用户的眼睛有利

工欲善其事必先利其器

这篇文章是最近流行的，给出了不少link和叶面截图，不过我觉得这篇文章对理解grid design并不好, 其中的link中给了一堆指导文章，最长的那个说实话通篇理论和废话，搞得很玄乎，只有一篇比较直观易懂。

我觉得理解和使用grid based design最好的地方是yahoo YUI grid CSS, 有足够多的资料和例子来帮助我们充分理解，最好的是他还提供了一个在线设计工具，可以非常直观地设计叶面的布局并生成page layout代码。 这对我这类并没有足够美术功底但又对叶面设计有BT要求的人来说非常有帮助。

这篇文章应该是YUI grid css的设计者写的，非常值得阅读。

过 去我曾经说，好的web 设计师是应该能用notepad写精美css的人，现在有了grid based web design的方法，可以不需要了。:) 有好的美术功底和创意，把这个grid based web design吃透，你就可以成为不错的掌握css+xhtml 设计的叶面设计师… 当然要成为优秀，仍然还有很多事情要做，能用notepad写css仍然是和基本要求 。

—

补充: 其实web design我算外行了，只不过我有自己的审美观而且爱赶新潮而已，grid based design其实只是刚刚学习现炒现卖，不过觉得这个概念非常简单非常有用但却比较容易被一些显得深奥的文字忽悠，所以来大言不惭地推荐一下。

如果我的理解有错误，欢迎指出，我不是嫦娥的学霸，对批评意见非常开放。