网页设计的 "套路”

在开端一个新的页面规划项目的时分，不知道你会不会有那么一会儿的犹疑：“这个项目要从哪里着手呢？”伴跟着这种犹疑的，是“做点史无前例的作品”的激动。不过，很多时分，这些激动和犹疑都在需求的磨合、规划的细化中，逐渐淡化。对比咱们也都发现了，页面规划在很多时分都是相似的，乃至可以说，有些规划形式是长盛不衰的。

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

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



无论屏幕多大，这种规划都可以为用户展示满足的内容，供用户阅览和探究。尽管这种规划跟着屏幕、设备而有所区别，有的规划师会倾向于规划成固定宽或许横跨全部页面的规划，可是总体的形式都大同小异。

·导航栏
·顶部大图，图像上叠有文字标题
·2~4个分栏，承载纷歧样种类的信息，有的会有图标
·首要的内容区域
·页脚

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



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

有关趋势：不断增加这类页面开端选用颜色丰厚的插画式的图标，而扁平化的规划和这种规划页面有着天然的契合。

2、单页规划，单栏规划



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

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

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

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

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


3、自定义栅格



那些被规整切割出来的页面规划历来都没有过期过。无论是切割得细碎的页面区域还是大块的页面区块，大多都需求凭借一套洁净规整的栅格来支撑。在此基础上，内容按部就班地被置于纷歧样的区块中，被精心地安排展示出来。

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

在栅格中填充颜色，还可以用来承载文字内容。纷歧样的区块之间纷歧定非要用线条进行切割，可供选择的计划有很多，不过千万要操控好栅格尺度和距离。操控不好的细节，全部规划的平衡感也许会被损坏。

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

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

4、经典的F式规划



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

这种F式的阅览形式对应的页面规划即是F式规划，最要害的信息靠左显现，从上到下尽量保持在一条线上。

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

原理：人的做法很简单遭到习气的影响，而研讨也证明了人思考、做法确实是形式化的。从左到右，自上而下，大家大多习气了这种做法形式。F式的规划形式具有杰出的适用性，便于用户了解和交互。

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


5、极简分层



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

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



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

有关趋势：奇妙的暗影和突变常常被用在这么的页面傍边，强化元素之间的层次感。尽管这些规划方法一度“过期”，可是如今大有卷土重来之势，而Material Design 这么的规划个性即是它们的冲锋号。


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

今日所谈及的这些规划是通过期间洗炼的经典规划，选择合适的规划趋势同这些规划联系起来，常常可以带来不错的作用。