上一篇
下一篇
网页设计的新趋向 Grid based web design
作者:陈泓博 日期:2007-12-21
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 步骤:
1: 规划叶面和grid设计
2: 设计叶面效果图，喜欢photoshop的朋友有用武之地了
3: 产生css和xhtml代码 （可以手写，也可以用工具，但无论如何已经有很多现成的可以参考，不必为div+css不听话烦恼了）
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. 容易产生比较好的设计，对用户的眼睛有利
30 Weblogs with Grid Based Design 30个用Grid Based Design设计的blog
http://www2.jeffcroft.com/
http://www.subtraction.com/
更多...
基于网格的设计：第2部分，设计博客主题模板Grid-based design: Part 2, Designing blog theme templates这篇文章写的不错
我觉得理解和使用grid based design最好的地方是yahoo YUI grid CSS, 有足够多的资料和例子来帮助我们充分理解，最好的是他还提供了一个在线设计工具，可以非常直观地设计叶面的布局并生成page layout代码。 这对我这类并没有足够美术功底但又对叶面设计有特殊要求的人来说非常有帮助。这篇文章应该是YUI grid css的设计者写的，非常值得阅读。
过去我曾经说，好的web 设计师是应该能用notepad写精美css的人，现在有了grid based web design的方法，可以不需要了。 有好的美术功底和创意，把这个grid based web design吃透，你就可以成为不错的掌握css+xhtml 设计的叶面设计师… 当然要成为优秀，仍然还有很多事情要做，能用notepad写css仍然是和基本要求 。
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: 869
发表评论
