【转载】浅谈五种网页版式设计

浅谈五种网页版式设计

我在进行网站设计时，总会纠结这样一个问题：我应该从哪开始做起呢？总是想着创造一些特别的样式但是结果往往又与易用性和可测试性相违背。经过对其它网站的借鉴，发现有些网站的版式从来都没有过时，它们已经被用户普遍的接受而且几乎适用于任何类型的网站，这些版式不仅框架紧密，逻辑清晰，而且版式简约时尚，充满现代感；今天我就以下面的五个案例展开，一起来看看如何充分的利用它们。

1.广告主图搭配简洁的格栅

工作原理：每一个视觉元素与对应的文字内容都有属于自己的位置，并且按照重要等级及逻辑流顺序整齐排列；主图作为用户进入网站第一眼看到的画面应该具有强烈的视觉冲击力，其他的辅助信息则需具有激起用户点击的冲动的作用。这种布局方式简约时尚，不仅为用户建立了强烈的视觉秩序，并且它自身的代码结构非常适合响应式网站设计。

设计趋势：在排列整齐的信息元素上添加明度较高的彩色图标，或者为矩形图片添加描边，除此之外，在整个设计中可采用扁平化的设计语言来统筹用户界面。

2.一页，一列

当网站的内容比较少或纯文字的时候，把所有的内容合理分布在一个页面是最好的布局方式；信息简单，没有复杂的逻辑关系，适当的留白，就会层次分明。

工作原理：单页的网页排版适用于小型网站和个人网站，它能够充实内容匮乏或者结构简单的网页；

3. 网格版式

整齐简洁的网格排布从一开始就清晰的为你展示了网站的内容框架，它们经过了高度的总结概括，开门见山的让你看到了网站的大体轮廓，从而发现自己感兴趣的板块。

工作原理：一个功能良好的网格版式是无与伦比的，它能够让用户不费吹灰之力便能找到并且深入了解自己感兴趣的内容，同时整个页面在视觉上也会更加的和谐统一。

设计趋势：在网格中使用简单的交互动画，当鼠标滑过或者点击的时候，网格翻转显示辅助信息。

4.经典的F模式

人们在查看一个网站的时候眼睛滚动的区域呈现出特定的F模式。首先会查看网站顶部的导航，然后从左到右的阅读，之后垂直向下移动，直到底部的辅助信息。

根据F模式我们就可以把用户感兴趣的内容放到最合适的位置。同时，根据这个概念就可以把内容的顺序有序的排列下来。

工作原理：人们是习惯性的生物，这个测试显示出人们的思维方式以及浏览网站的习惯。把这种习惯充分应用到网站设计中，就能够设计出很棒的作品。

这种方式重点是突出最小分层的内容区域，纯色的大背景让用户感到很放松，这样所有的精力都会集中对焦点信息浏览上了。大空间中排列着看似简单整齐的图层，但是这些图层集合的信息却并不简单，它们可能比你想象更加复杂，而它的样式也相对更加的精致。例如Apple官网就是一个很好地例子。

工作原理：分层布局可以按照视觉元素的重要等级依次排列，图层上非常精炼的把商品的特点用文字描述出来，再配合精致的图片，极大的促进了用户的购买欲望。谷歌的Material Design就是把现实的真实体验带入二唯空间的最好的例子。

总结

当我们在纠结使用哪种风格进行网页设计的时候，最好的方法就是先要搞清楚项目最基本的目的是什么，然后再根据经典的设计思维和原则决定如何设计。从诸多优秀网站案例中我们可以看出，版面简洁，容易阅读并且整体设计风格统一是它们的共性。一旦我们把网站的基本框架设计完之后，就可以将当下流行的设计元素融合到版式当中。