咱们在进行初期的网站规划时，总会纠结这样一个问题：我应该从哪开端做起呢?咱们总是想着发明一些特别的款式可是成果往往又与易用性和可测验性相违反。实践上，有一些网站的版式历来都没有过期，它们现已被用户遍及的承受而且简直适用于任何类型的网站，这些版式不只结构严密，逻辑明晰，而且版式精约时尚，充溢现代感;今日咱们就以下面的五个事例打开，一起来看看怎么在你的下一个项目中充沛的运用它们。

1. 广告主图调配简练的格栅体系

不管屏幕尺度巨细怎么，这种结构严密的版式都会给用户供给丰厚的内容，以便快速预览或进一步的深化了解;尽管这种布局的实践尺度会跟着设备的类型有所改动，可是从全体上看仍是大致相同的。

网站主导航

主图和标题

2-4列附有小标题信息元素的模块

主体内容区域

底部

这种布局办法精约时尚，不只为用户建立了激烈的视觉次序，而且它本身的代码结构十分适宜呼应式网站规划。此外，你也能够改动主导航的款式，或许把主图换成短视频都是能够的。

唯命是从原理：每一个视觉元素与对应的文字内容都有归于自己的方位，而且依照重要等级及逻辑流次序规整摆放;主图作为用户进入网站第一眼看到的画面应该具有激烈的视觉冲击力，其他的辅佐信息则需具有激起用户点击的激动的作用。

规划趋势：在摆放规整的信息元素上增加明度较高的五颜六色图标，或许为矩形图片增加描边，除此之外，在整个规划中可选用扁平化的规划言语来统筹用户界面。

2. 一页，一列

当网站的内容比较少或只要一个焦点信息的时分，把一切的内容合理散布在一个页面是最好的布局办法;信息简略，没有杂乱的逻辑关系，那咱们就不用把页面切割成许多模块，只需求一个页面，横向切割各内容区域，不只层次分明，一起恰当的留白，调配适宜的配图，特别显高端大气上档次。

主导航

图文结合的主体内容区域

底部

当选用这种版式的时分，空间的规划是一项很重要的内容。咱们要保证内容之间有足够的留白，这个需求能够经过加大内容边际间的距离来完结;但这种办法也会带来一些危险，假如距离设置的较小或许距离不平等，则会使整个页面显得拥堵和紊乱。

唯命是从原理：单页的网页排版适用于小型网站，它能够充沛内容匮乏或许结构简略的网页;这种排版一起也适用于简略的博客或只要一种内容款式重复摆放的网页。

规划趋势：为单一的页面增加视觉错差作用来招引用户持续翻滚页面，这些简略风趣的交互作用能运用户充溢爱好地进一步了解，一起也丰厚了网站的内容(就好像用户每翻滚一次鼠标便是一个新页面相同)。

3. 网格版式

规整简练的网格排布(相似九宫格)款式历来都没有过期过，不管它是否依照栅格体系精密的划分了板块仍是只是只要4X4的块状结构，一排排规整的网格方块从一开端就明晰的为你展现了网站的内容结构，它们经过了高度的总结归纳，开宗明义的让你看到了网站的大体概括，然后发现自己感爱好的板块。

网格版式在规划师中十分的盛行，他们常用来制造个人网站，经过网格的款式错落有致的展现自己的视觉著作，让观者有种走进画廊的感觉。

网格版式还能够以五颜六色色块或容器与文本结合的款式出现，网格切割线依据实践情况可有可无。有许多参数需求考虑，记住要科学规划每个格子的巨细，以及网格间的距离，这些细节都是影响整个规划是否成功的重要因素。

唯命是从原理：一个功用杰出的网格版式是无与伦比的，它能够让用户不费吹灰之力便能找到而且深化了解自己感爱好的内容，一起整个页面在视觉上也会愈加的调和一致。

规划趋势：在网格中运用简略的交互动画，当鼠标滑过或许点击的时分，网格翻转显现辅佐信息，想要其他的挑选吗?能够参阅谷歌的Material Design，选用纸片款式替代网格。

4. 经典的F形式

研讨标明，人们在检查一个网站的时分眼睛翻滚的区域出现出特定的F形式。首先会检查网站顶部的导航，然后从左到右的阅览，之后笔直向下移动，直到底部的辅佐信息。

依据F形式咱们就能够把用户感爱好的内容放到最适宜的方位。一起，依据这个概念就能够把内容的次序有序的摆放下来。

头部和导航

左面栏作为主要内容区

右侧侧边栏能够放相关链接和一些辅佐性的信息，侧边栏的高度适中即可，不用延伸到底部。

底部内容

唯命是从原理：人们是习气性的生物，这个测验显现出人们的思想办法以及阅览网站的习气。把这种习气充沛运用到网站规划中，就能够规划出很棒的著作。

规划趋势：侧边栏导航，点击翻转显现悉数导航信息，或许在F形式上面增加广告主图。

5. 最小分层

这种办法重点是杰出最小分层的内容区域，纯色的大布景让用户感到很放松，这样一切的精力都会会集对焦点信息阅览上了。大空间中摆放着看似简略规整的图层，可是这些图层调集的信息却并不简略，它们或许比你幻想愈加杂乱，而它的款式也相对愈加的精美。

这种把商业意图和精约规划有机交融在一起的办法在许多的项目类型中得到了运用，它的可行性和可塑性都是很高的。这就运用户能够不花费任何学习本钱就能习气性的完结订单的购买，例如Apple官网便是一个很好地比如。

唯命是从原理：分层布局能够依照视觉元素的重要等级顺次摆放，特别适用于精约风格的网站，图层上十分精粹的把产品的特色用文字描述出来，再合作精美的图片，极大的促进了用户的购买愿望。

运用纤细的突变和暗影来界说不同图层内容的差异性，尽管这种办法现已很掉队了，可是运用妥当作用仍是不错的。这些纤细的改动是只要用户在进行操作时才干察觉到的交互细节。谷歌的Material Design便是把实际的实在体会带入二唯空间的最好的比如。

总结

当咱们在纠结运用哪种风格进行网页规划的时分，最好的办法便是先要搞清楚项目最根本的意图是什么，然后再依据经典的规划思想和准则决议怎么规划。

从许多优异网站事例中咱们能够看出，版面简练，简单阅览而且全体规划风格一致是它们的共性。一旦咱们把网站的根本结构规划完之后，就能够将当下盛行的规划元素交融到版式傍边。运用这些版式布局的办法辅导规划，会帮你创立一个经得起时刻检测的时尚的网站。