网站版面设计步骤与技巧

【摘 要】随着社会、科技的发展，网络越来越走近我们的生活。而网站则越来越成为我们了解世界、学习知识的平台。浏览网页，首先映入我们眼帘的是它的版面设计。一个好的版面设计可以使我们浏览轻松，身心愉悦，没有疲惫感。这就对我们现在网站版面审计人员提出了新的要求。版面设计也可以理解为布局设计，就是我们在浏览器上说看的一个完整的页面。设计师们如何将所有要体现的内容有机的整合和分布，达到某种视觉效果，这就叫做版面布局。在长期的工作实践中，我自己总结了一点心得，与大家交流一下。

【关键词】版面；模块；设计；构思；沟通；定位

Abstract：With the development of society，science and technology，the network is more and more closer to our daily life.The website is more and more become our understanding of the world，the study knowledge platform.Browse the webpage，the first thing we saw is the layout of the.A good layout design can enable us to browse easily，mental and physical pleasure，not fatigue.This is our website auditor puts forward new requirements.Layout design can also be understood as layout design，is what we in the browser that a complete page see.How designers will all should reflect the content and distribution of organic integration，achieve a visual effect，which is called the page layout.In the long-term practice，I summarized a little experience，to share with you what.

Key word：Layout design module communication positioning

1.构思（结构的搭建）

当然在构思之前需要我们做很多工作：

（1）客户的需求

与客户沟通是非常重要的。好的沟通可以深入了解作品的构架内容。就可以很准确的吧架构搭建起来。因为在不了解客户需求的情况下，盲目的去把页面设计达到某种视觉效果是很难的、也会很容易被客户的，即使客户不懂，过关了，但是如果没有真正为客户带来价值，它还是失败的。当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的"构思"画上去（用笔和纸或者软件都可以，根据自己的习惯而定），这是属于一个构思的过程，不讲究细腻工整，也不必考虑到一些细节的部分，只要用几条粗陋的线条勾画出创意的轮廓即可。尽可能的多构思一些，以便选择一个最适合的进行搭建。

（2）网站的定位

这一部分也很重要，主要是设计者根据客户的需求给网站的定位标准。它决定了网页设计的难度和布局思路。定位高的网站对页面架构、模块划分、色彩搭配要求就比较高。反之，就相对简单。这些和设计者的理解程度、作品的价格定位有直接的联系。

2.粗略布局（画草图）

这个阶段是个试用期，我们只要把重要的元素和网页结构相结合，看看框架是否合理、适合客户的需求，如果都不适合你该知道怎么做了！在这一阶段，我们先不要考虑细节问题，主要是要把客户的需求在网页设计上基本都得以体现。模块划分比较准确。先把架构搭建起来。

3.完善布局（美化）

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

（1）平衡性：指上下文对照形式，主要强调作品顺序，要求达到平和、诚信的效果。

（2）异步平衡——整体性：要平衡合一，当然不都是不均匀的，这种布局能达到重点突出、提高注目性的效果。

（3）色彩对比：就是利用色彩、色调等技巧做对比。内容上可涉及古与今、新与旧、贫与富等对比。

4.重点强调

（1）对其他网站表示突出。

（2）表示网页品位的品味，这种表现方法强调网页的格调。

（3）图片解说：语言无法表达的情感，图片解说的内容，可以传达给浏览者的更多的信息。

5.深入优化（细化）

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

在网上有许多人问我什么样的版面布局是最好的，其实我不觉的某个版面是最好的，我们也不能说的这么绝对，我认为在现阶段现有的资源下最适合客户需求的才是“最好”的。

网页设计特别讲究编排和布局，网页主页设计与平面设计不一样，但它们有许多相近之处。网页设计通过图形、文字的空间组合，表达出和谐美。在网页设计里，设计师依据平和、重点突出的原则，将不同的色彩进行分类组合.根据不同的组合构成美丽的页面。配合色彩对人们心理的影响，合理地加以运用。

再设计中，我们要注意的几点问题：

（1）确定网页设计形式并与内容相统一

1）确定主题（创作前的准备工作）

2）与客户有效的沟通

3）分析行业资料

4）寻访相关网站

5）汇总目标用户群的特征

6）新网站的优势和特色

7）网站导航（信息方面）

8）形象口号（文化方面）

9）构思进行创作

（2）界面弱化

一个好的界面设计它的界面是弱化的，它突出的是功能，着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。要让访客在很短的时间就知道该从哪个地方开始使用这个网站，能点一次的，绝不点第二次。当然上面说的是大多数功能性网站，对于宣传展示性网站，诸如加特效的或Flash网站，可能就不得不花哨一些，但不能太过分。网站不是动画片，在效率越来越高，社会心理越来越浮躁的中国，人们的耐心越来越小，心理承受能力越来越低。效果可以体现意境，点到为止。

（3）模块化和可修改性强

模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。

模块可以布局模块和功能模块等，比如：

按功能分的功能模块：

1）日志模块：日志列表，日志详细，日志评论（引用评论模块等等），日志（引用表单模块等等），日志管理等等

2）评论模块：评论列表，发表评论（引用表单模块等等），评论管理等等

3）相册模块：展示图片、动画效果。

4）工具条模块：组合功能区条目

5）……等等；

按布局分的布局模块：比如栅格化中的一堆布局组合这里就涉及一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。

（4）风格保持一致——内页设计技巧

1）使用相同色系，保持整体性：网页上各部分色彩都有自己的角色，主色、辅色、点睛色、背景色一起组成和谐统一的色彩关系。主要从色相、色性、明度、纯度等的相互搭配来看。结合网页实例讲解，主色、辅色、点睛色、背景色组合成有节奏韵律，和谐统一的色彩关系。使网页主题明确，重点突出、风格统一，给浏览者留下深刻印象。

从功能上来看，首页能够表现出公司的概貌，能够显示出与竞争对手相比或与物理世界相比的优势，并通过栏目来表现，比如各栏目内部主要内容的介绍，都可以在框架页中体现再进入普通页，供浏览者迅速择其需要浏览。而普通页是主要的信息页面，也是最终传达给读者的最终页面，大型网站由于信息量大，使用这种结构非常必要，而对于中小网站，就不是显得很必要，很多信息可以在首页、框架页得以体现。

2）合理使用过渡色：过渡色的作用是能够把几种不协调的色彩统一起来。巧妙地使用过渡色能够使你的网页色彩搭配锦上添花。

3）色彩的独特性：根据网站类型选择合适的色彩，使内容与形式相统一，符合人们固有的认知习惯。，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。在色彩的独特性中，我们强调的企业有自身的形象，最好能在互联网中沿袭这个形象，给观者独特的感觉，有利于企业形象的树立。一个建议是选取一两种主要色彩，几种辅助色彩。

4）网页背景统一：网页背景包括背景色和背景图像两种，一般来说，设计上并不提倡使用背景图像，而使用背景色或色块。第一，读取速度不同，背景色块下载速度可以忽略不计，而背景图像就不能。它是根据图像字节大小下载的。如果你的背景图像比较深，那么最好将背景色置为深色调（默认是白色），那样浏览器显示文字就会很容易阅读，如果二者都有，先下载背景色，再下载背景图片；第二，显示效果，经常看到国内一些网站设有背景图像，不必要的背景图片影响浏览的效果.比如公司的厂房、学校操场、某产品图片、人物的照片等。

总之，设计之中技巧还有很多。我们设计人员应该不断学习，由知识型向能力型和应用型转化，“以能力为本位”。

参考文献：

[1]周杰.网站美工设计基础[M].中央广播电视大学出版社.

[2]张勇强.网页美工[M].化学工业出版社.

[3]网站美工项目化教程[M].国防工业出版社.