刷新一下大脑,Grid based web design…
2008-01-17 20:23
274 查看
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其实只是刚刚学习现炒现卖,不过觉得这个概念非常简单非常有用但却比较容易被一些显得深奥的文字忽悠,所以来大言不惭地推荐一下。
如果我的理解有错误,欢迎指出,我不是嫦娥的学霸,对批评意见非常开放。
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其实只是刚刚学习现炒现卖,不过觉得这个概念非常简单非常有用但却比较容易被一些显得深奥的文字忽悠,所以来大言不惭地推荐一下。
如果我的理解有错误,欢迎指出,我不是嫦娥的学霸,对批评意见非常开放。
相关文章推荐
- [ORGINAL]OOP Panel control design(based on web )
- Web Application UI(四):Web-based Master-Detail Grid Form Design
- 第一次载入这个grid组件时就给这个grid组件初始化数据并选中其中的某一项,但始终无法选中,经单步调试发现,选中行的方法已被执行了,只是在所有的东西都执行完后,grid又刷新了一下,导致原先选中的项
- webview 刷新加载同一个网站出现 code=-999 解决办法
- web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
- UltraWebGrid模板列及行的相关操作(原)
- web 前端修改 自动刷新 插件使用 liveReload
- 利用javascript实现web页面刷新的方法【转】
- ComponentArt.web.ui中文帮助之Grid(四)
- web项目防止页面刷新重复提交的方法
- 关于webview加载网页,返回后总是刷新页面问题解决
- ligerUI ligerGrid在提交数据后,刷新表格,刷新数据
- 自适应网页设计(Responsive Web Design)
- An Objective Look at Table Based vs. CSS Based Design(中英文)
- java_web里面的代码,想复习一下曾经写过的代码
- Spring MVC异步刷新Web端代码
- 刷新一下字节度量...(1BB)
- 由于项目原因看了一下vml,写了一个Web工作流的设计器雏形!
- extjs4 grid 刷新数据时不改变滚动条位置
- 对于UltraWebGrid,如何手动合并行单元格?