网页设计中的界面的借鉴与创新

网页设计中的界面的借鉴与创新

来源：/wywz/index.html ---------------------------------------------------------------------------------------------------------------------------------------------------------

1网页设计师应具备的素质

打开一个网站，首先展现在浏览者面前的是该网站的版面设计，如文本、图片、色彩以及整个网页的栏目设置与结构等，这些都是网页设计师的工作任务。这就要求网页设计师具备多方面的素质，包括艺术素质、综合技能素质、文化素质、与时俱进与不断创新等。网页设计师应为复合型的专业人才，所以网页设计师应有以下能力：

1.良好的艺术鉴赏力和一定的美术功底

作为一名网页设计师，首先要具备一定的审美能力。网页设计就相当于平面设计的延伸，网页设计师可以将平面设计中的审美观点套用到这上面来，所以平面设计上的审美的观点在网页设计上非常实用。如对比、均衡、重复、比例、近似、渐变以及节奏美、韵律美等等，以及色彩的搭配等显示出的轻快活泼的美，这些都能在网页上显示出来，反映设计师高超的审美能力。但网页设计师不能局限于平面设计的思路，在某些方面，网页设计师要比平面设计师更需要设计师具备良好的审美能力，如动态网页的设计是平面设计所不能达到的。

2.熟练应用网页设计的相关软件与专业技术能力

软件尤其是绘图应用软件以及网页设计软件的不断升级，为网页设计师带来了极大的方便，所以作为一名好的设计师掌握相关的应用软件的使用以及关注软件的发展，不断掌握其新功能，以提高工作效率。在掌握网页设计软件的同时也应该对相关技术进行关注，例如CSS、Html、Asp、SQL等技术。

3.丰富的网络经验，了解最新的网络技术与发展动态

丰富的网络经验可以帮助设计师减少很多不必要的麻烦，因为网页最终要放到互联网上，网页制作的过程中难免遇到一些网络方面的问题。网络技术一日千里，网页设计师更要了解网络技术的发展动态，学会使用各种软件的新增功能。

2网页素材的收集

1．资源搜索

在日常上网过程中，多搜集一些好的网站为以后网页设计做一些铺垫或准备。同时平时要多在搜索引擎中搜索一些关键词例如：“优秀网站界面”，“超级设计联盟”、“网站界面设计”等，然后就能更进一步地搜索搜到一些优秀的网页素材，并会得到一些优秀网页素材的网站地址。

例如，以下网址有一些好的素材与创意：

http://

http://

http://

http://

http://

2．归类整理

搜索完成后，要注意对好的界面与素材以及网址进行归类与整理，归类的方法是根据搜集的素材类型创建不同的文件夹，将素材分类进行存放。遇到搜集的好界面采用“抓图法”（点击键盘上的键,进行截屏），然后归类整理，如图1所示。

图 1 网页界面的分类与积累

3网页界面分析

现在以“淮安旅行社”网站的后台登录界面为例，具体谈一谈网页界面借鉴的分析方法。

方法1，从平面构成入手，分析现有界面的平面构成原理与布局方式。

方法2：从色彩构成入手，分析现有界面的色彩构成原理。

现在大家利用收集的“导游实务系统”的导航页为原型（如图2所示），现在如何改造成为“淮安旅行社”网站的后台登录界面。

图 2 “导游实务系统”的导航页效果

分析本图的平面构成结构如图3所示，背景层是五个矩形，中间是圆角矩形，上层是圆环形，同时在色块之间添加了一些线条来完成分割。

图3 “导游实务系统”的平面结构

分析本图的色彩主要是以蓝色配上银灰色。

经过分析与借鉴并进行一些简单的制作，效果如图4所示。

图4 经过分析后制作的效果

4网页界面的创新处理

制作过程中应注意的几个问题，首先是新制作的效果图应与原效果文件尺寸保持一致，其次是尽量保持最初的构成设计，最后是保证色彩的一致性。

现在大家再进行一点的创新，仍然是从平面构成与色彩构成上下功夫，修改后的效果如图5所示。

a）b）

c）d）

图5简单对界面进行构成创新后的效果

a）创新处理方案1 b）创新处理方案2 c）创新处理方案3 d）创新处理方案4

5后期修饰

前面完成了网页在效果图阶段的创新，现在将其输出成网页后的效果如图6所示。

图6 网页输出后在IE浏览器中的预览效果

现在完成网页的细加工，网页的后期具体的修饰与创新方法通常考虑以下四个方面；

（1）位置的调整

通过对图6的分析网页主体在浏览器中的位置偏左，从而使网页失去了平衡感，所以将网页在水平与垂直方向居中，如图7所示。

（2）添加合适的背景色

通过对图6与图7的分析网页缺少背景衬托，添加背景色后如图8示。

图 7 位置修饰的预览效果

图 8 背景色修饰的预览效果

（3）细节修饰

通过对图8的分析网页还可以做一些描边或者平滑的细节的修饰，添加了描边和平滑后如图9示。（4）满屏处理

通过对图7和图8的分析网页还可以做满屏处理的修饰，添加了满屏处理后如图10示。

图 4-9 细节修饰的预览效果图 4-10 满屏处理的预览效果