如何有效布局信息繁杂的网站?

2014-4-29 蓝蓝 设计资源

转载蓝蓝设计(   www.lanlanwork.com  )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的   BS界面设计 、 cs界面设计 、  ipad界面设计   、  包装设计 、  图标定制 、  用户体验 、交互设计、   网站建设 平面设计服务

来源:http://www.lanlanwork.com/blog/?post=1838

如果您想订阅本博客内容,每天自动发到您的邮箱中,   请点这里

互联网信息时代,很多内容为主的网站都信息过载,这导致了载入速度过慢。电商网站如此,新闻类网站也是如此,而一些UI设计师作品集网站或者设计机构的网站设计也是如此,老实说,作为设计师,应该避免信息过载现象的出现。而一旦你掌握这些技巧,那么你离高薪酬的资深界面设计师也就不远咯。今天蓝蓝设计的的这篇文章,涵盖了一堆信息量大,但是却不杂乱的网页设计,具备愉悦的即视感。不吹牛,您可以挨个点看感受一下:)

Butterfly
信息密集的作品集网站,设计师很有技巧的利用色彩和扁平的图像来中和”繁杂的信息”

Butterfly

Health
著名的在线杂志,信息结构层次分明,背景干干净净。

Health

My Own Corks
干净优雅,扁平化的区块带来了额外的呼吸空间。

My Own Corks

Karl Anders
结构坚实有力,标准的平铺式格局。黑白配色,去除了繁杂感。

Karl Anders

Tomorrow Counts
大量的文本和信息,因此他们仔细的调整了布局,以便达到更好的可读性。柔软的绿色,活力的橙色,这两种颜色作为点缀,点亮了整个页面。

Tomorrow Counts

REI 1440
从来没见过吧,概念化、独一无二、效果令人振奋。
通过键盘便可以实现缩略图的滚动。

REI 1440 Project

The Camry Effect 
很好的将功能不同的区块和数据良好的结合到了一起,网站也提供了过滤功能,让用户自行定制显示内容。

The Camry Effect

Phillips Internet Consulting 
标准的图像滑动,屏幕只有一半用来显示图像,这给导航元素留下了大量的空间。不过,深邃的背景和较大的字体有点让人感觉杂乱。

Phillips Internet Consulting

Accuel AZKS
简明、直观、高效,让用户快速了解设计师作品,深色效果,每个作品的风格不一,彼此衬托。栏式布局有效的防止了视觉混淆。

Accuel AZKS

Etch
整个网站,黑色支配,但是Lomo风的图像赋予整个页面一种活力。内容之间留下了充足的空间,让页面变得很有序。

Etch

Vogue
信息量大,内容非常的流行。没有沿袭杂志等纸媒传统,完美无瑕的展示各个照片,通过白色背景作为间隔。三栏式布局。

Vogue

The New York Times
深思熟虑的设计,如何在内容量大的前提下保证信息组织的效率?类似报纸的风格。尽管这个页面的第一印象是繁杂,但是仔细观察,你会发现页面的分割、组织其实非常有效率,易于消化。

The New York Times

How Cool
又一个流行时尚类网站,主要通过图片的视觉表现来吸引用户注意。主页面看起来非常协调整齐,因为对留白区域的合理运用。

How Cool

Mamo
很用心的布局,仅仅包含了Logo、标题以及图像。让整个页面很干爽。

Mamo

结论

大体上来说,网格式布局可以帮助信息量大的网站有效组织布局,合理设置信息层级,达到一致性的视觉效果。
你是如何通过布局来防止信息过载的?有什么诀窍吗?求分享!

标签: 网页设计技巧 优秀网页设计 经验分享 栅格布局


Powered by emlog 京ICP备12006971号-1 sitemap