网站效果图设计:布局与步骤

一、网站效果图设计的定义

网站制作人员在了解客户需求之后，要根据客户需求起草网站策划书，客户同意策划方案后，网站美工要根据客户要求进行网站效果图设计并制作出若干张“网页效果图”，图片格式多为.jpg .psd .png，用户选取一张或多张用来做模型，设计师或者根据用户意见再次修改效果图，直到用户满意。

网站效果图设计是网站项目开发中非常重要的一环。通过效果图，客户可以把自己想展示的内容以图像的方式表现出来，因此效果图设计阶段是网站开发中最繁杂、最漫长的阶段，往往要占据项目开发时间的三分之一甚至三分之二。网站前台人员以效果图为模型，使用Dreamweaver等网页制作软件搭建成真正的网站。

二、网站效果图设计的步骤

我想这是很多人关心的话题。其实网站效果图设计的方法以及过程均不相同，但以下设计思路可以借鉴！

1、客户需求：主要是听取客户关于项目的具体要求。

2、 网站策划：明确网站建设目标，收集客户资料，分析网站类型，确定网站风格。前面这2步是网站效果图设计之前应该了解的，不然不明的客户需求与风格就盲目制作，肯定是事倍功半的效果。下面就是我们正式的步骤了。

3、创建辅助线

在进行具体网站效果图设计之前，应当考虑到网页的布局形式，可以根据策划阶段确定下来的网页布局草图，在Fireworks的画布中添加辅助线，这样做的目的是为了明确页面的布局形式和面积。需要注意的是，对于布局结构比较复杂的页面，辅助线不是一次就能够全部创建好的，而是一部分内容创建一部分否则辅助线过多会使页面混乱。

4、绘制结构底图

根据创建好的辅助线，使用Fireworks的工具或者是矩形选取框工具，把网站效果图设计好的网页中带有底色的“矩形块”依次绘制出来，形成一个整体的布局效果。　这里的“矩形块‘只是一个统称，可以使任意的形状。除了得到形状以外，还可以直接对这些”矩形块“配色，或添加纹理、滤镜，从而在整体上对页面的方案进行控制。

5、添加内容

结构底图绘制完毕后，就可以开始在网页效果图中添加实际的内容了，包括文字和图像，从而完成最终的效果图方案。添加图像的时候，如何选择最合适的图像素材，如何对图像素材进行处理是非常重要的，可以说网页中图像设计的好坏，直接影响到整体的页面效果。这是网站效果图设计的重要环节，需要设计师门对此多下功夫。

6、切片、优化导出

效果图制作完毕后，首先需要进行切片。把网页比喻成一幅图，而切片就像是剪刀，使用切片软件可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。因为浏览器是多线程的，同一时间可以下载3幅图像。
切片的另外一个目的，也是最主要的目的是为了布局的需要。很多人不知道该如何对网站效果图设计好的效果图进行切片，这是因为对布局技术不了解。同一个网页效果图，按不同的方式布局就会得到不同的切片，并没有说哪一个才是”标准”的，所以要想灵活运用切片，必须熟悉流行的布局技术。

7、客户审核

在效果图设计过程中，一定与客户保持良好的联系，最终达到一致这是网站效果图设计的最终目的，即达到客户的满意与认可。

8、 网页技术整合阶段，利用HTML+CSS+JAVASCRIP及相应用的后台编码技术完成整个网站的开发。

三、网站效果图设计的布局原则

网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版，这是网站效果图设计着重注意的地方。网页布局设计最重要的就是传达信息，且使它们组成一个有机的整体，展现给广大的观众。可以依据如下几条来做：

1．主次分明，中心突出

在一个页面上，必然考虑视觉中心，这个中心一般在屏幕的中央，或者在左上的视觉优势位置。因此一些重要的文章和图片一般可以安排在这些部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次分明。

2．大小搭配，相互呼应。

较长的文章或标题不要编排在一起，要有一定的距离，同样，较短的文章也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。

3．图文并茂，相得益彰。

网站效果图设计时候还需要注意文字和图片的搭配。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。