魔琳人生-路漫漫其修远兮



重读《超越CSS》

已经不记得是在哪本书中看到对《超越CSS》的推荐了。
只记得,对这个名字很感兴趣,因为一种马上想超越的心态。

看了前半部分后就觉得有些失望了,感觉实质性的东西说得很少,都是泛泛而谈。
于是,被束之高阁了。

前不久,刚好有点空闲时间,又耐下心开始重新翻阅。
虽然有些句子读起来还是有些别扭(应该是翻译问题),可这次感觉受益匪浅,有点慢慢改变我的生活(哈哈,小夸张一下)。
这可能就是人在不同阶段看待问题会有不同观念导致的吧。

《超越CSS》和《禅意花园》并不是一种类型的书,《超》对纯CSS技术说得并不多,主要着重于设计思路的转变与提升。
作者不仅强调标准,也非常强调创意、外部展现和灵感的重要。特别是如何换种方式看待问题以及如何拓展思路。


书中的基本原则

1. 不同的浏览器显示不同的样式,而不是一味的求统一。
这一点,和我一直以来的观点完全相悖。
因为刚开始学习时,受到德国人的影响,德国人的细致和认真是众所周知的,在他们眼里不容许1像素的偏差。
在这种思想的主导下,一直都觉得丝毫不差的页面才是极致。

其实,换种想法想想,在不同的浏览器中看到完全不同的风格设计,也是种很有意思的事情。
虽然在实际生活中这样的情况不多,但这种常常换思路去思考问题的方式很可取。

2.运用所有可用的CSS选择符
尽可能少的添加不必要的标签和类名,而是使用属性选择符、子对象选择符、相邻选择符、伪类和伪对象。

3.使用CSS3尽可能地展望未来
虽然在每个设计中都依赖CSS3特性还为时过早,但是将现阶段的实践作为理解明天无限创造可能的方式却弥足珍贵。

4.运用JS和DOM来弥补CSS的不足

5.避免运用Hacks和滤镜
作者提倡使用IE条件注释。

6.使用富含语义的命名规范和微型格式
命名应该使用表意的名词,而且命名规范在团队设计和开发环境中,能节省更多的工作和思考时间。
即使你是一个人工作,当在相当长一段时间之后,再重新捡起以前做过的项目,规范的命名同样会让你收益。

微型格式就是为标记添加一些有意义的属性,更多微型格式的最新信息和发展贡献见这里

7.分享你的想法,与他人协作
正如作者所说,我们其实并不在意自己的分享是否对每一个人都有用,有价值的是分享的过程。
而且总会从分享一个想法或一个技术中获得比自己独自保守它 要更多的东西。

突出内容
阐述了CSS布局并不是一味的以DIV来代替表格,而是给予它本身的含义和顺序。
合乎逻辑地组织和排列内容顺序是非常必要的,一开始最好不要问自己“我需要什么XHTML元素来完成这个设计”,而是问,“这是什么?”。
看起来像什么并不重要,重要的是含义。

很有意思的是,作者把世界看成一个列表,每一项都扮演着它自己的角色。比如:
书架上的书、停放在一起的摩托车、中世纪的头盔。(回头再上图)

当这个“世界”变得复杂时,我们可以尝试使用“复合体”,也就是标签的嵌套使用。

遵循基于内容的过程
在这个流程中,内容是关注的焦点。

1. 聚集内容
先列出内容清单,再一点点细化并整理大纲。

2. 使用框架图去组织和表达内容
作者提出一种优于传统框架图的灰盒方法,其实目前还有很多新的设计框架图的方法,比如我们目前在使用的Axure RP Pro就很不错。

3. 创建静态设计去阐述创意概念以及布局思想
在设计图上加上标签指南这种方法真的很好,很方便的让程序员看到是如何划分的,不至于总是对一层层的标签乱了阵脚。

4. 编写意义丰富的用来组织内容的标签
根据主要内容、二级内容、导航等编写分离内容的标签。

5. 用CSS实现设计
最后,就是思考一种最符合实际的布局方式等样式给页面穿上外衣。

灵感的来源
最喜欢的就是这一章节,很多作者提到的观念都是以前自己没有想到和思考的。

引入基于网格的设计,了解如何跨越多种媒体使用网格,最终通过受其他媒介网格的影响,给设计的普通布局和界面元素带来全新的看法。
学会使用网格的构成与比例,是进行伟大设计的基础之一,它能帮助我们创造一种“令人觉得舒服”的排版和模式。
而且,在寻找网格设计的例子时,不必把目光盯在远处。打开早报或则你喜爱的杂志,你就会发现网格无处不在。
网格中固有的竖线与横线在世界上几乎是无处不在,它是人类为我们自身而设计的。

并且学会使用1.62的黄金比例以及参考报纸杂志的排版。

还有一个很有意思的做法就是为WEB设计使用基调板,其实就是设计剪贴薄。
可以是杂志上闪亮汽车的广告、巧克力的铝箔包装、七彩糖的包装纸……为你的主基调收集。
很喜欢这种方式,一直以来都是用电脑去收集和整理资料,觉得这种可感知的物体好过冰冷冷的电脑
想像自己为每一个主题去收集不同类型的小片段是件非常有意思的事情。

其实,最重要的就是用心观察生活,在下次上班途中,把你的眼睛从报纸或则iPod上挪开,看看你的周围有什么不同。
看看建筑物上石雕或则窗户上包含的细节,你可能会得到在其他途径从未想过的新思路。
不管看到什么,都保持开阔的心胸,你就不会受到一样东西是否有用以及怎样使用它们的限制。

最后一部分内容,作者列出了一些布局的例子以及CSS3的使用,在这里都能够下载到这些例子,这里就不说了。

还有其他一些供参考的网址:
sIFR(scalable Inman Flash Replacement)
CSS画廊
调色板创建器

最大的收获就是懂得开阔的去接收生活带给你的信息,并把这些信息运用到自己的工作上。

魔琳人生:www.linlife.com


没有评论 so far
Leave a comment

TrackBack URI

发表评论




Search

RECENTLY

Comments

ARCHIVES

Tag Cloud