编者按：不得不说，网页设计绝对是有套路的！网页布局虽然千变万化，不过假如你仔细观察，会发现有一部分布局适用范畴相当广，经久不衰。今天的文章，咋们就来聊一下5种经典的网页布局。

在开始一个新的网页设计项目的时候，不知道你会不可能有那么一瞬间的犹豫：“这样的项目要从哪里着手呢？”伴伴随着这种犹豫的，是“做点前所未有的作品”的冲动。不过，好多时候，这些冲动和犹豫都在需求的磨合、设计的细化中，逐步淡化。相比大伙也都发现了，网页布局在好多时候全是相似的，乃至可以说，有一些布局模式是长盛不衰的。

这些布局模式，或者说框架，差不多是“约定俗成”的，它们为顾客所熟知，它们自身也更贴合顾客对信息的识别模式和使用习惯。今天的文章，咋们一同来聊聊五种拥有长久生命力的先进网页布局，也许你的下一个网页设计项目可以直接从这五种布局模式入手，无需过多犹豫和纠结。

1、顶部大图Banner+简单的栅格

不管屏幕多大，这种布局都可以为顾客呈现充足的信息，供顾客浏览和探索。虽然这种布局伴随着屏幕、设备而有所差别，有的设计师会倾向于设计成固定宽或者横跨整个页面的布局，不过总体的模式都大同小异。

·导航栏
·顶部大图，图片上叠有文字标题
·2~4个分栏，承载不同类别的信息，有的会有图标
·主要的信息区域
·页脚

这种布局设计干净清爽，有足够强的视觉表现力，并且经常采用的响应式设计，断点也很好控制。顶部大面积的轮播图或者Banner 也有很多插件或者应用来帮你实现。

原理：这种布局中，每个元素都各司其职，并且整个流程是富有逻辑的，顶部大图足以营造氛围，给予顾客特定的体验，下边的次一级元素可以做的很好的支撑。

相应趋势：越来越多这类网页开始采用色彩多样的插画式的图标，而扁平化的设计和这种布局页面有着天然的契合。

2、单页设计，单栏布局

单页式设计这几年特别火，它特别适宜于展现极简的信息，或者专注呈现一个主题。当网站的主题集中，信息也比较固定的时候，无需复杂的布局来呈现，单页单列式的布局足以应付一切。

·导航
·主要信息区域，文字+图片为主
·页脚

采用这种布局模式的时候，空间的控制至关重要，相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是必须要设计师反复推敲的，假如空间控制不合理会给顾客一种混乱的感觉，假如过于紧密则会产生局促感。

原理：单页式设计适合于小网站或者小型项目的呈现，它可以用来制造一个简单的介绍页面，让简单的信息显得不那么单调，强化信息的形式感和重量感。相对信息简单的博客网站而言，单页式设计也是不错的选择。

相应趋势：和单页设计结合较紧密的应该是动效设计和视差滚动，他们可以让单页式设计更加生动有趣，淡化单调的设计，赋予页面更强的生命力。

3、自定义栅格

那些被整齐分割出来的网页布局从来都没有过时过。不管是分割得细碎的网页区域还是大块的页面区块，大多都必须要借助一套干净整齐的栅格来支撑。在此基础上，信息按部就班地被置于不同的区块中，被精心地组织呈现出来。

在设计师的作品集页面中，你可以发现多种各样自定义的栅格布局。自定义栅格呈现信息的特点在于，它可以同时呈现大批的视觉化的信息，看起来足够多样又不可能落于下乘。下边这样的图库的成效看起来就相当震撼。

在栅格中填充色彩，还能够用来承载文字信息。不同的区块之间不一定非要用线条开展分割，可供选择的方案有好多，不过千万要控制好栅格尺寸和间距。控制不好的细节，整个设计的平衡感可能会被破坏。

原理：栅格的特点在于它的组织性，相对顾客而言，它具有规律性和可预期性。一个漂亮的栅格系统可以让顾客更快找到必须要的信息，在视觉上也更加协调当然。

相应趋势：栅格很简单被人视为卡片这样子的元素，可以为其加入翻转等各式各样的动效，呈现出越来越多的信息和视觉层次。

4、经典的F式布局

研究表明，顾客在浏览网页的时候，习惯于沿着F式的阅读轨迹来浏览信息，也便是说，顾客喜欢从左到右阅读，然后向下移动，再继续从左到右阅读。

这种F式的阅读模式对应的网页布局便是F式布局，较关键的信息靠左显示，从上到下尽量保持在一条线上。

·页头和导航
·靠左的一栏相对较宽，呈现主要的信息
·靠右常为侧边栏，呈现相应链接等信息
·页脚

原理：人的行为很简单受到习惯的决定，而研究也证实了人思考、行为确实是模式化的。从左到右，自上而下，人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性，便于顾客理解和交互。

相应趋势：F式布局中侧边玩法好多，有的设计师会将导航与之结合，或者在页面顶部加上大图Banner。

5、极简分层

极简化的设计一直都在流行，它的流行不是没有原因的。开放式的空间让顾客感觉更加轻松，也使得其中展现的信息更简单被聚焦。假如极简化的页面中加入不多的几个并列的信息层，可以让信息更有层次，也使得极简的页面拥有了细节。

这种设计并不复杂，不过让页面更加有趣了，它可以适配越来越多不同类型的项目了。这也解释了为什么顾客如此的喜爱类似Apple 官网这样子的设计。

原理：极简化的页面中加入简单的几个分层，让页面有了视觉焦点，尤其是当设计者想要引导顾客关注到某个关键的信息的时候，这种页面布局很很简单实现这一点。

相应趋势：微妙的阴影和渐变经常被用在这样子的页面之中，强化元素之间的层次感。虽然这些设计手法一度“过时”，不过现在大有卷土重来之势，而Material Design 这样子的设计风格便是它们的冲锋号。

新概念科技（上海网站开发）结语：

很多设计手法、设计趋势都经常会被人质疑，不过假如撇开情感要素，从较基本的设计原理上来推导这些趋势的时候，可以从根本上判读这些设计手法能否真的是有价值的。

今天所谈及的这些布局是经过時间洗炼的经典设计，挑选合适的设计趋势同这些布局结合起来，经常可以提供不错的成效。