1 网页设计的概念和要素

作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。下面介绍网页设计的概念和要素，希望可以帮助到大家。

网页设计的概念

网页设计(web design，又称为Web UI design，WUI design，WUI)，是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

网页设计主要以Adobe产品为主，常见的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代码工具，其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。

网页设计的要素

在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素:文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。

1.图片要素

要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容;相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等，

2.排列方法要素

主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，又有图片;文字有大有小，还有标题和正文之分;图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。

3.色彩要素

色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。

 2 网页中的各构成要素

一、风格定位

对于设计某个网站来说，要做的第一步工作就是确定网站整体的风格，不同的网站需要有不同的风格，其风格要与主题内容相统一。目前，网页的种类很多，较为常见的有：新闻机构类、政府机关类、科教文化类、娱乐艺术类、电子商务类、个性化网页类。这些不同性质的网页应体现不同的风格，比如，娱乐类网页风格应体现活泼生动一些，政府机关类网页应体现出比较庄重、严肃的感觉。在统一的风格页面中，添加图片、文字、动画等元素，来丰富页面内容，在添加这些元素的过程中也要注意色调的统一，这就需要设计师具备良好的美术修养。

二、版面排版

网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。当我们确定了网页总体风格之后，我们要根据现有的图片、文字等素材进行页面划分，文字作为最原始、最有力的信息传递方式，在网页设计中也是至关重要的。

三、色彩的运用

在网页设计中，好的色彩搭配是网页设计成功的一半。在一个色彩搭配具备专业水平的网站，即使只使用很少的图形，仍会带给浏览者深刻的印象和舒适的视觉感受。一般来说，色彩，在一个页面不应超过三个，其中择一为主色调;应恰当使用颜色蕴含的文化心理信息。色彩的运用遵循“总体协调，局部对比”的原则，也就是主页的整体色彩应该是和谐统一的，只有局部运用一些强烈的色彩对比。

 3 能吸引用户的网站设计都具备哪些要素

第一、注重用户体验。

所有的网站设计都离不开用户的体验，可以说网站建设的成功与否与用户体验有着千丝万缕的关系。网站的用户体验就是把网站的建设针对于用户的体验来优化，包括面对用户层面的内容性优化。

用户体验比如有良好的视觉体验，强大的网站功能设计，以及快速便捷的网站响应速度，通过提高用户的体验来提高网站的转化率，用户来到网站，只有获得良好的体验，用户才能为网站的产品和服务买单。

第二、网站的整体布局。

对于企业网站设计来说，在保证网站好看的同时也需要注意网站的整体布局，需要把公司最重要的信息的设置在用户祖先能浏览的地方，网站的整体布局需要重点突出，主次分明。

假如网站的外观设计的很好看，但是网站的栏目结构布局混乱，用户来到网站半天，没有找到网站的重点内容和信息。用户就会关闭网页离开网站。一般而言，优秀的网站都会给人这样的感觉，那就是干净整洁，条理清楚，专业的水准等。

第三、图片和文字的搭配合理。

好的网站设计对于图片和文字都是比较平衡的，图片和文字合理协调搭配，多些图片可以增加网站的整体美感，适当的配上我简明扼要的文字说明。不能在图片上增加网站的链接或者是导航，因为目前为止，搜索引擎只能识别文字而无法识别图片。

第四、图形和版面的设计。

图形和版面是用户来到网站后的第一印象，图片是影响网页下载速度的重要原因，所以如果能把每页全部的内容都控制在30k左右，图像则在6-8K之间最为合适;颜色是对网站影响也很大，不同的颜色对人的感觉有着不同的影响。

第五、网站导航。

网站的导航是根据用户的浏览行为和浏览习惯来确定的，用户的浏览习惯一般都是从上到下，然后从左到右。网站的导航设置让用户知道自己所处的位置，上一页去哪里，然后夏夜又会到什么地方。

第六、有价值的信息。

用户来到网站，浏览时间有限，用户是不会去每个栏目每个标题去仔细浏览，而是迅速去捕捉自己需要或者是对自己有价值的信息，如果网站没有任何用户想要的信息，那么网站用户的跳出率是相当高的。

 4 网页设计的技巧

一张完美的主页设计需要积累丰富的知识和掌握大量的技巧，笔者在这里主要从框架和CCS样式的运用这两个方面来介绍网页设计的技巧。

(一)框架的使用

框架(FRAME)是Web上经常看到的页面结构，其最主要的功能就是导航，一组框架通常包括一个含有导航条和另一个要显示主要内容页面的框架。

框架的使用具有以下优点：浏览器不需要为每个页面重新加载与导航相关的图形;每个框架都有自己独有的滚动条。在使用框架时有以下的缺点：难以实现不同框架中各元素的精确图形对齐;对导航进行测试可能耗费时间很长。

对于网站是否使用框架，我们要进行仔细的筛选，有些网站如果使用框架的效果不佳或没必要使用，那就不需使用，否则可能会影响网站的发展。如果框架对某些网站有用，那么则可以使用，还是可以取得不错的效果的。

(二)CSS样式的使用

CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”，它定义如何显示HTML元素，用于控制Web页面的外观。在网页设计中使用CSS，可以通过它实现页面的内容与表现形式分离，极大地提高了工作效率。在网页设计中使用CSS有以下几点优势：

1.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2.提高页面浏览速度。对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3.易于维护和改版。你只要简单地修改几个CSS文件就可以重新设计整个网站的页面。