今天我们素马在Behance设计官网、Dribbble官网 及 Instagram 官网上筛选了部分精品网页设计作品，令大家感兴趣的是，这些作品在首页设计风格中都非常善于采用栅格化系统来布局排版，形成非常简约且视觉流畅的对齐版块，值得我们借鉴。
考虑到每一个案例首页设计版式都比较长，篇幅有限我们大多数只截取风格首屏来点一下。
01-
网站设计案例一
首先从首页可以看出，网站主要内容区域从标志logo到折叠菜单结束，并非满屏，而是限定宽度剧中。这就给了下面排版布局立了对其的基础。其次是横向屏幕切割上也做了巧妙划分。加上最为抢眼的配角This is what we do...，采用了视觉复层遮罩、重叠的方式，也很巧妙，又兼顾到了从上到下的对其和比例划分。
02-
网站设计案例二
首屏横幅区域巧妙采用了文字遮罩的方式设计了海报。整版下来，你会发现有左对齐也有右对齐，但是一点都不影响整体的统一性。首屏可以看到五六个功能模块区域，通过栅格化系统对齐划分好比例、对齐位置。
03-
网站设计案例三
字压图的方式，在很多高端的设计类、珠宝类、时装服饰类品牌网站中常见。这种方式可以营造一种空间、错位、层次和变化感。加之采用滚动视差技术的话，这地儿会飞起来，给人感觉是灵巧的。但字的亮度及底图的饱和度是要后期维护时必须考虑到。对网站使用者有一定的美感和图象处理技术的要求。
04-
网站设计案例四
全屏布局腻了？可以看看这种趴着的L布局。视频入口模块区域的凸出及高位排布，是设计的巧妙之处。
05-
网站设计案例五
除了布局和对齐，这种表现方式，交互设计一定要够创意和强悍才能撑起来。字体竖向排布要考虑后期响应式下的布局，对技术的要求较高。
06-
网站设计案例六
左侧VI logo 区域的版块面积，跟普通的划分有不一样的感觉。
07-
网站设计案例七
这个是标准版的上下对齐。需要某一个地方来一个与众不同才能有创意。版面中几个深灰色块是关键。
08-
网站设计案例八
这是一个纯文字布局的网页，由你来发挥，又是如何着手？
09-
网站设计案例九
这个作品，在benhance, instagram, pinterest上面均有发布。是众多黑白风格设计、极简风格中的精品。整个版面下来，印象最深刻的是它的标记的设计手法。下面内容去的排版布局，其实只是简单的抽位、错位及删格对齐。
10-
网站设计案例十
很经典的四块划分屏幕方式。用字段形成块状元素来布局。
11-
网站设计案例十一
如果你对线条驾驭得不够熟练，可以借鉴这个案例。线的长短，粗细，走向，以及跟线框、块的结合，让版面产生高逼格设计感，而且没有多余、零碎的感觉。
更多关于《常见网页布局类型有哪些》点击这里。
