面对空白画布无从下手是很多设计师（包括经验丰富的）都会遇到的难题。不得不说，网页规划肯定是有套路的！网页布局尽管千变万化，可是假如你仔细观察，会发现有一些布局适用领域适当广，经久不衰。今日的文章，咱们就来聊一下5种经典的网页布局。

在开端一个新的网页规划项目的时分，不知道你会不会有那么一会儿的犹疑：“这个项目要从哪里着手呢？”伴跟着这种犹疑的，是“做点前所未有的著作”的冲动。不过，许多时分，这些冲动和犹疑都在需求的磨合、规划的细化中，逐步淡化。比较咱们也都发现了，网页布局在许多时分都是相似的，甚至可以说，有些布局形式是长盛不衰的。

这些布局形式，或许说结构，几乎是“约定俗成”的，它们为用户所熟知，它们自身也更贴合用户对内容的识别形式和使用习气。今日的文章，咱们一同来聊聊五种拥有耐久生命力的优异网页布局，或许你的下一个网页规划项目可以直接从这五种布局形式下手，无需过多犹疑和纠结。

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

不管屏幕多大，这种布局都可以为用户展现满足的内容，供用户阅览和探索。尽管这种布局跟着屏幕、设备而有所差异，有的规划师会倾向于规划成固定宽或许横跨整个页面的布局，可是整体的形式都迥然不同。

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

这种布局规划洁净清新，有满足强的视觉表现力，并且常常选用的响应式规划，断点也很好操控。顶部大面积的轮播图或许Banner 也有许多插件或许应用来帮你实现。

原理：这种布局中，每个元素都各司其职，并且整个流程是赋有逻辑的，顶部大图足以营建气氛，给予用户特定的体会，下面的次一级元素可以做的很好的支撑。

相关趋势：越来越多这类网页开端选用色彩丰厚的插画式的图标，而扁平化的规划和这种布局页面有着天然的契合。

2、单页规划，单栏布局

单页式规划这几年十分火，它十分适宜于展现极简的内容，或许专心出现一个主题。当网站的主题会集，内容也比较固定的时分，无需杂乱的布局来出现，单页单列式的布局足以敷衍全部。

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

选用这种布局形式的时分，空间的操控至关重要，适当检测规划师规划留白和布局平衡的功力。元素和元素之间的疏密关系是需求规划师反复推敲的，假如空间操控不合理会给用户一种紊乱的感觉，假如过于紧密则会产生局促感。

原理：单页式规划适合于小网站或许小型项目的展现，它可以用来制造一个简略的介绍页面，让简略的内容显得不那么单调，强化内容的形式感和分量感。对于内容简略的博客网站而言，单页式规划也是不错的选择。

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

3、自定义栅格

那些被整齐切割出来的网页布局从来都没有过时过。不管是切割得细碎的网页区域仍是大块的页面区块，大多都需求借助一套洁净整齐的栅格来支撑。在此基础上，内容墨守成规地被置于不同的区块中，被精心肠组织展现出来。

在规划师的著作集页面中，你可以发现林林总总自定义的栅格布局。自定义栅格展现内容的优势在于，它可以一起出现许多的视觉化的内容，看起来满足丰厚又不会落于下乘。下面这个图库的作用看起来就适当震慑。

在栅格中填充色彩，还可以用来承载文字内容。不同的区块之间纷歧定非要用线条进行切割，可供选择的方案有许多，不过千万要操控好栅格尺寸和距离。操控欠好的细节，整个规划的平衡感可能会被损坏。

原理：栅格的优势在于它的组织性，对于用户而言，它具有规律性和可预期性。一个美丽的栅格系统可以让用户更快找到需求的内容，在视觉上也愈加和谐天然。

相关趋势：栅格很简单被人视为卡片这样的元素，可以为其参加翻转等林林总总的动效，出现出更多的信息和视觉层次。

4、经典的F式布局

研究标明，用户在阅览网页的时分，习气于沿着F式的阅览轨道来阅览信息，也便是说，用户喜欢从左到右阅览，然后向下移动，再持续从左到右阅览。

这种F式的阅览形式对应的网页布局便是F式布局，要害的信息靠左显示，从上到下尽量保持在一条线上。

·页头和导航
·靠左的一栏相对较宽，展现主要的内容
·靠右常为侧边栏，展现相关链接等内容
·页脚

原理：人的行为很简单遭到习气的影响，而研究也证明了人考虑、行为确实是形式化的。从左到右，自上而下，人们大多习气了这种行为形式。F式的布局形式拥有杰出的适用性，便于用户理解和交互。

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

5、极简分层

极简化的规划一直都在盛行，它的盛行不是没有原因的。开放式的空间让用户感觉愈加轻松，也使得其间展现的内容更简单被聚集。假如极简化的页面中参加不多的几个并列的内容层，可以让信息更有层次，也使得极简的页面拥有了细节。

这种规划并不杂乱，可是让页面愈加风趣了，它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱相似Apple 官网这样的规划。

原理：极简化的页面中参加简略的几个分层，让页面有了视觉焦点，尤其是当规划者想要引导用户关注到某个要害的内容的时分，这种页面布局很很简单实现这一点。

相关趋势：奇妙的暗影和渐变常常被用在这样的页面当中，强化元素之间的层次感。尽管这些规划方法一度“过时”，可是现在大有卷土重来之势。

结语

许多规划方法、规划趋势都常常会被人质疑，可是假如撇开情感要素，从基本的规划原理上来推导这些趋势的时分，可以从根本上判读这些规划方法是否真的是有价值的。

今日所谈及的这些布局是经过时间洗炼的经典规划，选择适宜的规划趋势同这些布局结合起来，常常可以带来不错的作用。最好的设计通常是混合使用这些布局。