下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计CSS样式 → CSS:超越网格的布局
CSS:超越网格的布局
日期:2007-6-20 9:36:28 人气:61     [ ]
上一页 [1] 下一页
id="fontzoom">

原文作者: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 布局的理解,我们很容易发现这种布局习惯产生的原因。

图 5:k10k

[1] /200606/99845_2.htm'>[2] /200606/99845_2.htm'>下一页

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.