查看完整版本: WebDesignerWall：网页的分栏/网格设计

WebDesignerWall：网页的分栏/网格设计

[url=http://www.webdesignerwall.com/][size=2][color=#800080]Web Designer Wall[/color][/size][/url][size=2]上的一篇文章。[/size]
[size=2]
如果你正在寻找网页分栏设计的灵感，这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性，无论对于信息量巨大的站点还是个人博客。

·[b]媒体站点[/b]

首先让我们看一些著名的媒体的网站设计，你能想象如果没有清晰的分栏，这样巨大复杂的信息将以何种方式呈现吗？

[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/nytimes.jpg[/img]

[/size][url=http://www.nytimes.com/][size=2][color=#800080]纽约时报[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/nationalpost.jpg[/img][/color][/size]
[size=2]
[/size][url=http://www.nationalpost.com/][size=2][color=#800080]国家邮报[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/guardian.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.guardian.co.uk/][size=2][color=#800080]英国卫报[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/timesonline.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.timesonline.co.uk/][size=2][color=#800080]英国时报在线[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/frieze.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.frieze.com/magazine][size=2][color=#800080]frieze杂志[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/wired.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.wired.com/][size=2][color=#800080]连线杂志[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/morning-news.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.themorningnews.org/][size=2][color=#800080]晨报新闻[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/portfolio.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.portfolio.com/][size=2][color=#800080]Profolio杂志[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/wearesurvivalmachines.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.wearesurvivalmachines.com/][size=2][color=#800080]We are survival machines[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/ux-magazine.jpg[/img][/color]
[/size][url=http://www.uxmag.com/][size=2][color=#800080]UX杂志（著名的用户体验杂志）[/color][/size][/url]

[size=2]·[b]博客设计中的分栏[/b][/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/aialex.jpg[/img]

[/size][url=http://www.aialex.com/][size=2][color=#800080]AI Alex[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/5thirtyone.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://5thirtyone.com/][size=2][color=#800080]5 Thirty One[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/subtraction.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.subtraction.com/][size=2][color=#800080]Subtraction[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/astheria.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.astheria.com/][size=2][color=#800080]Astheria[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/jeffcroft.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://jeffcroft.com/][size=2][color=#800080]Jeff Croft[/color][/size][/url][size=2] [/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/hellyeahdude.jpg[/img]

[/size][url=http://hellyeahdude.com/][size=2][color=#800080]Hell Yeah Dude[/color][/size][/url][size=2] [/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/jontangerine.jpg[/img]

[/size][url=http://jontangerine.com/][size=2][color=#800080]Jon Tangerine[/color][/size][/url][size=2] [/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/markboulton.jpg[/img]

[/size][url=http://www.markboultondesign.com/][size=2][color=#800080]Mark Boulton Design[/color][/size][/url][size=2] [/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/thetechnologyherald.jpg[/img]

[/size][url=http://www.thetechnologyherald.com/][size=2][color=#800080]The Technology Herald[/color][/size][/url][size=2] [/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/gapersblock.jpg[/img]

[/size][url=http://www.gapersblock.com/][size=2][color=#800080]Gapers Block[/color][/size][/url]

[size=2]·[b]突破分栏[/b][/size]
[size=2]
采用分栏设计并不是一定要把内容局限在框架之中，你可以采用一些图片来突破分栏，使得页面更多变化。
（这里我补充一个，QBN，[/size][url=http://www.qbn.com/][size=2][color=#800080]http://www.qbn.com/[/color][/size][/url][size=2]，它的商品部分永远都是突破格子）[/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/berkeley.jpg[/img]

[/size][url=http://spanish-portuguese.berkeley.edu/][size=2][color=#800080]UC Berkeley[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/jrvelasco.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.jrvelasco.com/][size=2][color=#800080]JR Velasco[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/chrizdee.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.chrizdee.de/][size=2][color=#800080]Chrizdee[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/aigalosangeles.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.aigalosangeles.org/][size=2][color=#800080]AIGA Los Angeles[/color][/size][/url]

[size=2]·[b]醒目的背景[/b][/size]
[size=2]
白色背景太千篇一律了？这里有一些很好的醒目背景上的分栏页面。

[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/31three.jpg[/img]

[/size][url=http://www.31three.com/][size=2][color=#800080]31Three[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/tnvacation.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://winter.tnvacation.com/][size=2][color=#800080]A Tennessee Winter[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/sundance.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.sundance.org/festival/][size=2][color=#800080]圣丹斯国际电影节[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/ungarbage.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.ungarbage.com/][size=2][color=#800080]Ungarbage[/color][/size][/url]

[size=2]·[b]均匀分割[/b][/size]
[size=2]
[img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/kineda.jpg[/img]

[/size][url=http://www.kineda.com/][size=2][color=#800080]Kineda[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/rainfall-daffinson.jpg[/img][/color] [/size]
[size=2]
[/size][url=http://rainfall-daffinson.com/][size=2][color=#800080]Rainfall Daffinson[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/erskinecorp.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.erskinecorp.com/][size=2][color=#800080]erskinecorp[/color][/size][/url]

[size=2][color=#800080][img]http://www.webdesignerwall.com/wp-content/uploads/2008/02/stuffandnonsense.jpg[/img][/color][/size]
[size=2][color=#800080][/color]
[/size][url=http://www.stuffandnonsense.co.uk/][size=2][color=#800080]Stuffand Non Sense[/color][/size][/url]

[size=2][[url=http://hi.baidu.com/savecan/blog/item/e299f2d08255208ba1ec9c7e.html][size=2][color=#800080]via[/color][/size][/url][/size][size=2]][/size]

[[i] 本帖最后由 lushsight 于 2008-3-5 18:19 编辑 [/i]]

:) 很好很强大！这个确实很实用~非常适合网站设计师设计首页的板式。现在国内的非设计类公司的官方站点都太千篇一律了~

不错，很好的布局，多学习学习，来顶一下。

布局很好~ 特别是颜色很好~ 很恰当的把内容分开~ 看着舒服极咯！！！:P

:loveliness: 超喜欢这片文，感谢楼主！！！！！！！！！:lol