网页版面设计的问题

网页版面设计的问题

网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计，所以，内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计下面介绍网页版面设计的问题，希望对您有所帮助。

网站的颜色不要过多，最好使用3种颜色最好。

网站设计中少用点FLASH动画、js程序、视频、图片文件，这样会导致网站速度过慢，影响用户的体验度。

网站的布局要清晰明了不要过于复杂，简单大方的设计可以使用户第一时间找打他想要的东西。

网站首页设计时需要放上一些文章更新的版块，这样保持每天更新后，可以提高网站的排名。

选择合适的布局

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

1.“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多是最多的一种结构类型。

2.拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3.标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4.左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

5.上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。

6.综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7.封面型：这种类型基本上是出现在一些网站的首页，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8. Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

9.变化型：即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计，所以，不能单独考虑网页的内容的排版，内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计，所以，不能单独考虑网页的内容的排版，以为只要能够把具体内容清晰流畅的放到网站上就行了，造成整个页面的形式感很差，这样严重影响使用者的心情。

网页版面设计步骤

首先我认为是“过程注定了结果”，重视你所做的每一步并把它尽量的做到最好，相信结果也不会偏离轨道。下面先让我们来了解一些版面设计的步骤：

一、构思(结构的搭建)

当然在构思之前我们总需要了解很多，如：客户的需求、网站的定位、受众群等很多方面的事情，也就是说需要了解策划方案。如果我们连这些问题都还不清楚的话，请先不要去想着设计，因为在不了解客户需求的情况下，盲目的去把页面设计达到某种视觉效果是很难的、也会很容易被客户推翻的，即使客户不懂，过关了，但是如果没有真正为客户带来价值，它还是失败的。

当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的"构思"画上去(用笔和纸或者软件都可以，根据自己的习惯而定)，这是属于一个构思的过程，不讲究细腻工整，也不必考虑到一些细节的部分，只要用几条粗陋的线条勾画出创意的轮廓即可。尽可能的多构思一些，以便选择一个最适合的进行搭建。

二、粗略布局

这个阶段是个试用期，我们只要把重要的元素和网页结构相结合，看看框架是否合理、适合客户的需求，如果都不适合你该知道怎么做了!

三、完善布局

当我们已经有一个很好的框架时，我们需要根据客户的要求将其所需的内容有条理的融入于整个的框架中，这里就进入了网页布局的阶段了，我们需要通过我对图片的处理、空间的合理利用进行编排了，这一点我在“行业网站设计心得”里就已经提到过了，在此就不一一罗列了。下面是广告大师樊志育在《广告制作》中所提到的，希望对大家在布局的理论上面有所帮助。

1、正常平衡---亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。.

2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。

3、对比---所谓对比，不仅利用色彩、色调等技巧来做表现，在内容上也可涉及古与今、新与旧、贫与富等对比。

4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。

5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。

6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。

四、深入优化

这个阶段主要是针对些细节的更改和优化了，比如说一些颜色饱和度、一些字体、间距的调整呀。最后客户反馈过来的东西根据现有的界面进行适当的调整，直至客户满意。

网页布局技巧

最开始，网页呈现在你面前的时侯，它就好像一张白纸，需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你就可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。

1.页面尺寸：页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围就变得越来越小。一般，分辨率在1024×768的情况下，页面的显示尺寸为1007×600;分辨率在800×600的情况下，页面的显示尺寸为780×428个象素;分辨率在640×480的情况下，页面的显示尺寸则为620×311个象素。从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家，除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，以方便访问者浏览。

2.整体造型：什么是造型，造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型;圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形则代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个形状加以设计，其中又以某种形状为主。

3.页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。

4.文本：文本在页面中多数以“行”或者“块”(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

5.页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚则是放置制作者或者公司信息的地方。你能看到，许多此类信息都是放置在页脚的。

6.图片：图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

7.多媒体：除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也变得更重要起来。

网页的版式设计与平面设计的异同

两者共同点：

1、都需要良好的视觉表现;

2、设计师需要有良好的审美能力;

3、基本都是用同一类软件;

其实网页设计应该属于多媒体设计的范畴，多媒体设计是从属于平面设计规律而又有很多不同的一个领域，网页除了注重设计外，更多的是考虑浏览的使用体验，打工速度，程序逻辑，SEO优化各方面的知识，知识面和侧重点跟平面设计有很大的不一样。一个好的平面设计师不一定就能做好网页设计，网页注重交互性、操作性跟浏览性。如果细分出来主要差别有一下几点：

1、设计核心的差别

平面设计的核心是品牌。它要以品牌为出发点去设计，要在视觉上100%体现品牌的魅力。

网页设计的核心是用户。要以用户的操作习惯为出发点去设计，换句话说也就是要设计得人性化，让用户浏览和操作要方便。

2、字体使用有限制

平面设计的字体一般不受限制，为了表现效果，相关的字体中以任意使用。

网页设计的字体则受到很多的限制，一般中文字体只能用宋体、微软雅黑。

3、颜色运用的区别

平面设计可以使用成千上万种颜色，换句话说可以使用所有颜色，但是网页设计不行!网页设计中规定相关安全色。

4、处理与制作方面的差别问题

传统平面设计的作品大多是以印刷的平面形式表现。

网页设计作品则是透过显示器表现，并且在传输的过程中受到网路频宽的限制。网页设计不仅仅是在做设计，更多的是要考虑网页的打开速度、兼容性等问题。所以有时候不得不为了照顾这些特殊的要求而牺牲美观。

5、图片格式和像素的差别

平面设计需要的图片格式一般为 PSD CDR AI EPS 等比较大的源文件格式 或导出的JPG 一般像素(分辨率)大于300的高清晰图片。

网站设计 一般为GIF 或PNG 或JPG 一般像素(分辨率)小于72的)。

6、目的差异

传统平面的设计作品是以向人们传达某种资讯或诉求为目的。

网站制作的设计必须是配合网站的内容设计，而不是单纯地只为表现艺术而设计。除了拥有平面设计作品的功能以外，还有重要的引导和连接功能，也就是网页具有很强的可操作性和互动性。