文章分类
HTML/CSS Flash教程 Fireworks教程 Dreamweave JavaScript 网站推广 网页理论 其他教程 视频教程
 产品搜索
关键字: 分类:

整站搜索:
最新更新资源:
海量设计素材
韩国网页设计模板
高清PSD素材库
Flash网站模板
设计素材图库:
婚纱影楼模板
韩国卡通图库
VIS模板
版式画册模板

最新素材图库



当前位置:首页 >> 网页教程>> HTML/CSS >> CSS:超越网格的布局

CSS:超越网格的布局


作者: 佚名 来源:网络 浏览:9996 日期:2006-6-12 16:13:09

原文作者:Molly E. Holzschlag
原文出自:Thinking Outside the Grid
中文翻译:54player.com - nobita (2006-06-01)

按此在新窗口浏览图片

“Aerials, in the sky, when you lose small mind you free your life” - System of a Down (1)

十一月的一个深夜,从空中俯瞰我的家乡,亚利桑那州的图森市,它那严谨的网格布局给我留下了深刻的映像。图森是美国众多规划过城市之一,从空中看,很容易发现图森的城市设计师把这种精确的布局成功的应用到了规划中(图1)。

按此在新窗口浏览图片

图 1

我是从伦敦回到图森,相比之下,伦敦完全没有遵循网格布局。它的设计中有螺旋状的,有圆形的,有梯形的,并且似乎更像是自然产生的(图2)

按此在新窗口浏览图片

图 2

这篇文章我构思了很长时间,因为通过鸟瞰城市的布局,让我联想到了 web 设计中的网格。用现有的技术和技巧,我们可以随行所欲的创造出基于网格的设计,或者,我们也可以完全打破这种网格。后者无疑将会增强我们的 web 设计:而摆在我们面前的挑战就是如何摆脱狭隘的思想,超越网格布局。

方向感和城市

如果我们把城市规划延伸到 web 设计中去,会有许多十分有趣的轨迹。基于网格的布局格外适用于那些有引导性,易于导航,真实的视觉表达的网站。网格能很好的帮助设计师来布置,浏览者也易于访问(图3)。

按此在新窗口浏览图片

图 3:Ryan Brill

从有利的一面来看,网格状的图森当然更容易亲近一些;你仅仅需要基本的方向感和街道地图。居民们根据这种网格来告诉别人自己家所处的位置:“我在坎贝尔大街和王子路的东南角。”道路和交通都是从北至南或从西到东,这样,城市就更容易导航。

另一方面,图森的设计是在城市有限发展的前提之下的,一旦城市的发展超出了这种前提,在保持它的导航性和可用性上就会出现无数的问题。此外,图森的网格给社区和邻里带来的优越性也并未凸现。结果许多图森的居民都感觉到城市缺少活动中心和独特的社区。并且当这种分割的确存在时,人们很容易找到他们的目的地,但也同样容易在某一个地方迷失掉。

伦敦与图森相去甚远,它像一个迷宫。我发现许多伦敦人都随身携带一本伦敦旅游指南来防止自己迷路!城市的交通系统就更具挑战性,最具表现性的算是出租车司机,他们必须通过一种测试来证明他们具有驾驶这种传统黑色出租车的“能力”。城市的有机发展并没有增强它的可导航性。

但在伦敦,那些让人惊叹的包围和充满趣味的区域划分呈现在城市的各个地方。可以说它不止有一两个文化中心或社区中心,而是许多个。降低了导航性,但增加了选择性,并且人们会有更高的动机来参与到城市发展中去。

当考察这些非结构化、自然的设计时,人们如何才能在这些蜿蜒,迂回的道路上找到方向呢?另一方面,在 web 设计和开发中可以打破这种循规蹈矩的思想。但至今,仍是有所保留的。在图4中,我们看到了一种完全破除传统网格禁锢的布局方式,在保持易用性的同时设计师采用了一种习惯之外的布局。

按此在新窗口浏览图片

图 4:AIGA Los Angeles

奇妙的书写方式

对于一个以代码为中心而非设计能力的人来说,代码和设计紧密的结合在一起,更能让我痴迷。我坚信,这种长时间禁锢在网格中的设计思想是表格布局所留下的后遗症(图5)。再加上慢慢开始的对 CSS 布局的理解,我们很容易发现这种布局习惯产生的原因。

上一页 下一页 1 2

上一篇:让innerHTML中的script脚本执行起来 下一篇:JS页内查找关键词的高亮显示
【关闭窗口】 【返回顶部】返回网页教程】 【返回HTML/CSS

相关推荐文章

Web标准实践——Go..

用代码“写”出扫描线效..

网页风格化 用CSS实..

第9天:第一个CSS布..

从HTML语言到网上家..

CSS重新定义项目符号..

用CSS定义标题的几个..


关于本站 | 广告服务 | 联系我们 | 站长微博 | 活动支持 | 友情链接 | 投稿热线 | 网站地图
版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号