不得不说，网页规划肯定是有套路的!网页布局尽管千变万化，可是如果你仔细观察，会发现有一些布局适用领域适当广，经久不衰。今日的文章，我们就来聊一下5种经典的网页布局。
在开端一个新的网页规划项目的时分，不知道你会不会有那么一会儿的犹疑：“这个项目要从哪里着手呢?”伴跟着这种犹疑的，是“做点史无前例的作品”的激动。不过，许多时分，这些激动和犹疑都在需求的磨合、规划的细化中，逐渐淡化。比较我们也都发现了，网页布局在许多时分都是相似的，乃至可以说，有些布局方式是长盛不衰的。
这些布局方式，或许说结构，几乎是“约定俗成”的，它们为用户所熟知，它们本身也更贴合用户对内容的识别方式和运用习气。今日的文章，我们一同来聊聊五种具有耐久生命力的优异网页布局，或许你的下一个网页规划项目可以直接从这五种布局方式下手，无需过多犹疑和纠结。
1、顶部大图Banner+简略的栅格
不管屏幕多大，这种布局都可认为用户展示满足的内容，供用户阅览和探究。尽管这种布局跟着屏幕、设备而有所差异，有的规划师会倾向于规划成固定宽或许横跨整个页面的布局，可是整体的方式都大同小异。
·导航栏
·顶部大图，图片上叠有文字标题
·2~4个分栏，承载不同类别的信息，有的会有图标
·首要的内容区域
·页脚
这种布局规划洁净清新，有满足强的视觉表现力，而且常常选用的呼应式规划，断点也很好操控。顶部大面积的轮播图或许Banner 也有许多插件或许应用来帮你完成。
原理：这种布局中，每个元素都各司其职，而且整个流程是赋有逻辑的，顶部大图足以营造空气，给予用户特定的体会，下面的次一级元素可以做的很好的支撑。
相关趋势：越来越多这类网页开端选用颜色丰厚的插画式的图标，而扁平化的规划和这种布局页面有着天然的符合。
2、单页规划，单栏布局
单页式规划这几年十分火，它十分适宜于展示极简的内容，或许专心出现一个主题。当网站的主题会集，内容也比较固定的时分，无需杂乱的布局来出现，单页单列式的布局足以敷衍全部。
·导航
·首要内容区域，文字+图片为主
·页脚
选用这种布局方式的时分，空间的操控至关重要，适当检测规划师规划留白和布局平衡的功力。元素和元素之间的疏密联系是需求规划师反复推敲的，如果空间操控不合理会给用户一种紊乱的感觉，如果过于严密则会发生短促感。
原理：单页式规划适合于小网站或许小型项目的展示，它可以用来制作一个简略的介绍页面，让简略的内容显得不那么单调，强化内容的方式感和分量感。关于内容简略的博客网站而言，单页式规划也是不错的挑选。
相关趋势：和单页规划结合最严密的应该是动效规划和视差翻滚，他们可以让单页式规划愈加生动风趣，淡化单调的规划，赋予页面更强的生命力。
3、自定义栅格
那些被规整切割出来的网页布局历来都没有过期过。不管是切割得细碎的网页区域仍是大块的页面区块，大多都需求凭借一套洁净规整的栅格来支撑。在此基础上，内容墨守成规地被置于不同的区块中，被精心肠安排展示出来。
在规划师的作品集页面中，你可以发现林林总总自定义的栅格布局。自定义栅格展示内容的优势在于，它可以一起出现许多的视觉化的内容，看起来满足丰厚又不会落于下乘。下面这个图库的作用看起来就适当震撼。
在栅格中填充颜色，还可以用来承载文字内容。不同的区块之间纷歧定非要用线条进行切割，可供挑选的计划有许多，不过千万要操控好栅格尺度和距离。操控欠好的细节，整个规划的平衡感可能会被损坏。
原理：栅格的优势在于它的安排性，关于用户而言，它具有规律性和可预期性。一个美丽的栅格体系可以让用户更快找到需求的内容，在视觉上也愈加和谐天然。
相关趋势：栅格很简单被人视为卡片这样的元素，可认为其参加翻转等林林总总的动效，出现出更多的信息和视觉层次。
4、经典的F式布局
研讨表明，用户在阅览网页的时分，习气于沿着F式的阅览轨道来阅览信息，也就是说，用户喜欢从左到右阅览，然后向下移动，再持续从左到右阅览。
这种F式的阅览方式对应的网页布局就是F式布局，最要害的信息靠左显现，从上到下尽量保持在一条线上。
·页头和导航
·靠左的一栏相对较宽，展示首要的内容
·靠右常为侧边栏，展示相关链接等内容
·页脚
原理：人的行为很简单遭到习气的影响，而研讨也证明了人思考、行为确实是方式化的。从左到右，自上而下，人们大多习气了这种行为方式。F式的布局方式具有杰出的适用性，便于用户了解和交互。
相关趋势：F式布局中侧边玩法许多，有的规划师会将导航与之结合，或许在页面顶部加上大图Banner。
5、极简分层
极简化的规划一向都在盛行，它的盛行不是没有原因的。开放式的空间让用户感觉愈加轻松，也使得其间展示的内容更简单被聚集。如果极简化的页面中参加不多的几个并排的内容层，可以让信息更有层次，也使得极简的页面具有了细节。
这种规划并不杂乱，可是让页面愈加风趣了，它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜欢相似Apple 官网这样的规划。
原理：极简化的页面中参加简略的几个分层，让页面有了视觉焦点，尤其是当规划者想要引导用户关注到某个要害的内容的时分，这种页面布局很很简单完成这一点。
相关趋势：微妙的暗影和突变常常被用在这样的页面当中，强化元素之间的层次感。尽管这些规划方法一度“过期”，可是现在大有东山再起之势，而Material Design 这样的规划风格就是它们的冲锋号。
结语
许多规划方法、规划趋势都常常会被人质疑，可是如果放下情感要素，从最基本的规划原理上来推导这些趋势的时分，可以从根本上判读这些规划方法是否真的是有价值的。
今日所谈及的这些布局是通过期间洗炼的经典规划，挑选适宜的规划趋势同这些布局结合起来，常常可以带来不错的作用。
微信：boxiangchina