高手之路!如何有效布局信息繁杂的网站?

2013/09/24 10994

互联网信息时代,很多内容为主的网站都信息过载,这导致了载入速度过慢。电商网站如此,新闻类网站也是如此,而一些设计师作品集网站或者设计机构的网站也是如此,老实说,作为设计师,应该避免信息过载现象的出现。而一旦你掌握这些技巧,那么你离高薪酬的资深设计师也就不远咯。

内容主导的页面布局会自然而然的繁杂、问题多,设计这种网站的过程,也是一个艰难的挑战,而且网站拥有者的目的是想给用户提供更多的信息,信息会越来越多。当然,可以听听专家指导,坚持一些亘古不变的设计原则,来确保布局的组织良好和架构分明,这就能减少很多不必要的繁杂。

推荐阅读:
聊聊网页设计创新式布局与交互

今天涵盖了一堆信息量大,但是却不杂乱的网页设计,具备愉悦的即视感。不吹牛,您可以挨个点看感受一下:)

Action Film
相当复杂的网站,但是在布局上很聪明将一堆小视频组织的条理分明。登录页分成好几条线,是精确的多媒体侧边栏。

Action Film

Salon’s
组织有序,不同尺寸的很多照片排列在一起也非常有序,打破了单调布局的常规。

Salon homepage

House
栅格布局,整齐、灵活,不同区域的缩略图和文字看上去很舒服,很有区分性。

House

W Magazine
有样、精致,内容区域文本和图像的高度对比,黑色的背景也起到了良好的陪衬。

W Magazine

Served MCR
强烈的手绘风格,极其冲击的视觉表现。细节到位,草图很有趣,一点点精致的水彩效果,几组手绘风字体,多而不乱。

Served MCR

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

Time
三栏布局,如有需要可切换成四栏

Time

Direnduvar
非常规的网站,插画风格,精致的小涂鸦,手绘风字体。拖拉起来非常爽,非常有趣的探索体验。

Direnduvar

Kod and Form
留白区域很足,有机协调的布局,润滑流畅的字体。整体看起来不错。

Kod and Form

结论

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

原文地址: http://designmodo.com/content-heavy-website-designs/
作者:Nataly Birch
优设网翻译:@MartinRGB
转摘请注明优设网译文出处,谢谢各位小编。

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:156982)分享实战经验。
设计微博:拥有粉丝量55万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/content-heavy-website-designs

sketch UI 界面设计 平面设计 转场动效 交互设计师 设计师 设计师专访 扁平化设计 排版布局 职场 设计流程 用户体验设计 视觉设计 素材下载 配色 web前端开发 海报设计 AI教程 设计规范 设计理论 字体下载 产品设计 设计趋势 神器下载 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 用户体验 优秀网页设计 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里