网站设计中的网页排版布局

一：网页分辨率

网页的整体宽度可分为三种设置形式，百分比、像素、像素+百分比。一般在网页设计中以象素形式为常用，行业网站也不列外。我们在设计网页的时候必定会考虑到分辨率的问题，以前常用的是1024*768和800*600的分辨率，现在因为显示器越来越大，分辨率也越来越大，所以，现在通常用的宽度是1200*1080，网络上很多以前的网页会给人一种很窄小，很小气的感觉。而现在随着移动端的流行，很多的网站更偏向于响应式的设计，就是在不同大小的显示器上，所显示的百度比状态是相同的，不会像固定宽那种的，越大的显示器留白越多。当然，无论哪种大小，让客户网站可以达到比较的视觉效果是目的。

二：网页布局

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

无论显示器分辨率有多大，这种布局都能够满足用户展示充足内容的需求，供用户浏览和探索。这种布局随着屏幕大小不同、设备不同在效果上有所差异，但很多时候这才能给用户更自然真实的感觉。有的设计师会倾向于设计成固定宽或者横跨整个页面的布局，但是总体的模式都大同小异。一般顺序都是导航栏、顶部大图（图片上叠有文字标题）、页面上有2-4个分栏，填充不同类别的信息、主要的内容区域、页脚等，这种布局设计干净清爽，有足够强的视觉表现力，并且常常采用的响应式设计，断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。

2、单页设计，单栏布局

单页式（也称为广告页）设计这几年比较流行，它很适合于展现极简的内容，或者专注展示一个主题。当网站的主题比较明确，内容也比较单一固定的时候，无需复杂的布局来实现，单页单列式的布局足以应付搞定一切。导航、主要内容区域（文字+图片为主）、页脚。采用这种布局模式的时，非常考验设计师设计留白和排版能力。版块之间的连接设计是需要设计师反复推敲的，如果空间控制不合理会给用户一种混乱的感觉，如果过于紧密则会产生局促感。和单页设计结合紧密的应该是动效设计和视差滚动，他们可以让单页式设计更加生动有趣，淡化单调的设计，赋予页面更强的生命力。

3、经典的F式布局

研究表明，用户在浏览网页的时候，习惯于沿着F式的阅读轨迹来浏览信息，也就是说，用户喜欢从左到右阅读，然后向下移动，再继续从左到右阅读。这种F式的阅读模式对应的网页布局就是F式布局，关键的信息靠左显示，从上到下尽量保持在一条线上。页头和导航，靠左的一栏相对较宽，展示主要的内容；靠右常为侧边栏，展示相关链接等内容；页脚；研究也证实了人思考、行为确实是模式化的。从左到右，自上而下，人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性，便于用户理解和交互。

三：合理广告

在一些网站的广告(弹出广告、浮动广告、大广告、banner广告、通栏广告等等……)让人觉得很烦琐，根本就不愿意来看，有时连你这个网站都不上了，这样一来网站受到了严重的影响、广告也没达到广告的目的。这些问题都是我们在设计网站之前需要考虑、需要规划的内容之一。浮动广告有两种，第一种是在网页两边空余的地方可以上下浮动的广告，第二种是满屏幕到处随机移动的广告。建议能使用第一种的情况下尽量使用第一种，不可避免第二种情况时尽量在数量上控制多一个就好。如果数量过多会直接影响到用户的心理、妨碍到用户浏览信息，适得其反。首页广告不宜过多适中即可。如在注册或者某个购买步骤的页面上不要出现过多的其他无关的内容让用户分心，避免客户流失等……

四：空间的合理利用

很多的网页都具有一个特点，用一个字来形容，那就是"塞"，它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范，导致浏览时会遇到很多的不方便，主要就是页面主次不分，喧宾夺主，要不就是没有要点，没有很好的归类，整体就像个大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡，也可以用个"散"字来形容。