网页布局设计.docVIP

网页布局设计：

用户的视觉路径一般是：从上到下，从左到右。

好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。

对用户引导的关键就在于怎么处理主次关系。就是比照，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。

从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。

从局部来看，也要把握信息呈现的节奏，比方yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。

下面是几种常见的网页布局结构：

1骨骼型结构。即类似于人体的骨骼结构。分为上中下，内容局部分为两、三栏的设计。

这就是一个web2.0风格的页面，骨骼型结构，上面主要是logo,导航banner,内容局部三成两栏，页脚版权，典型的骨骼型结构。

2对称型结构，对称型结构就是网站有一个对称轴，称左右或者上下对称。这种网页在阅读上很明明确给出用户重要和次要区域的划分，根据于都习惯往往在比拟大的位置上安排主要内容。

这个网页就是一个对称结构，左边是网站的一些导航和产品信息以及版权信息以及练习方式等等。右边是网站的主要信息。最大的特点是板我们骨骼型的top和foot放到了左边，body放到了右边，形成一个对称结构。

3满版型的结构。其实这种网页结构随着现在显示器尺寸的增大和分辨率的提高逐渐再做一个过度，即以前的整个图片满版到后面的背景满版，到现在的局部满版。这种版式给人的感受是内容紧凑，气氛表达充分，适合温馨和暖性思维的表达。

这个早期的满版多见于韩版网页?。

4焦点型，这类网页多见于围绕一个中心点，真个页面围绕中心，多见于销售类网站或者品牌产品网站。其特点是中心明确，表达信息集中，传达信息清楚。

占据网页面积最大的图片吸引了大局部焦点，展现了个性。

5分割型，把整个页面分成上下或左右两局部，分别安排图片和文案。两个局部形成比照：有图片的局部感性而具活力，文案局部那么理性而平静。可以调整图片和文案所占的面积，来调节比照的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，那么造成视觉心理的不平衡，显得生硬。倘假设通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。

分割型将网页进行层次清楚的重新排序，使得网页看起来富有新鲜感和创意。

6中轴型，沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

中轴型的布局看起来比拟呆板，似乎无法跟上现在时代的脚步，但其实运用得当的话可以塑造出一种典雅的美感。

7曲线型，图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。

不规那么的网页构造往往能够突出个人的兴趣爱好，以及自我对时尚的追求，这种类型的网页布局非常具有个性化。

8倾斜型，页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。

倾斜的设计使得网页的画面具有动感、灵气十足，再搭以良好的色彩和吸引人图片将会得到意想不到的惊人效果！

9三角型，网页各视觉元素呈三角形排列。正三角形〔金字塔型〕最具稳定性，倒三角形那么产生动感。侧三角形构成一种均衡版式，既安定又有动感。

这种布局的网页往往简洁明了，一般不会过多的注重丰富的内容，而更在意与独特的风格制造，将制作者心中的天地展现在浏览者面前。

10自由型，不拘一格，根据个人喜好和网页要求自由搭配，能将创作者的灵感完全发挥。