常见网站设计布局分享

　　在网站建设设计中，网页设计是核心，核心不仅仅体现在网页设计上，还体现在网页的布局上，往往一个精密的网站布局体现网站的战略眼光和专业水平。在网站建设中，常用的网站布局有以下5种常用的方式和技巧。

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

　　无论屏幕多大，这种布局都能够为用户展示充足的内容，供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异，有的设计师会倾向于设计成固定宽或者横跨整个页面的布局，但是总体的模式都大同小异。

　　·导航栏

　　·顶部大图，图片上叠有文字标题

　　·2~4个分栏，承载不同类别的信息，有的会有图标

　　·主要的内容区域

　　·页脚

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

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

　　·导航

　　·主要内容区域，文字+图片为主

　　·页脚

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

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

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

　　3.通栏

　　这种布局方式相对于大框套小框而言，用户浏览网页不在受到方框的限制，这种方式显得大气些，眼界显得更开阔些。

　　另外这种方式还有一个便利之处那就是主视觉部分可以随机灵活处理，既能往上移到网站logo和导航的位置，也可以移到向下扩展的内容区域。这种布局方式也是网站中常用的布局方式。

　　4.导航在主视觉下方的布局。

　　这种布局方式在一些资讯门户网站建设中还是比较常见的，导航直接放置在banner的下面，这可以弥补banner中设计素材被截断的缺陷。

　　另外这种布局方式，用户打开网页就能看到网站的导航，这样对于新客户来说是及其友好的，新客户不用刻意去寻找网站的导航，而且访客可以通过第一眼就能分清网站主要导航内容。

　　5.极简分层

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

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

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

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

　　许多设计手法、设计趋势都常常会被人质疑，但是如果撇开情感因素，从最基本的设计原理上来推导这些趋势的时候，能够从根本上判读这些设计手法是否真的是有价值的。

　　今天所谈及的这些网站建设布局是经过时间洗炼的经典设计，挑选合适的设计趋势同这些布局结合起来，常常能够带来不错的效果。