提高网页界面设计艺术效果

开篇：润墨网以专业的文秘视角，为您筛选了一篇提高网页界面设计艺术效果范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要：网页界面艺术设计是伴随着计算机互联网的产生而形成的艺术设计新课题。随着人们审美需求的不断提高，网页界面设计开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，越来越多的设计师也开始投入到追求网页界面形式美的行列中来。表面上看，网页界面设计不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。

关键词：界面；艺术；网页

中图分类号：TP393文献标识码：A文章编号：1009-3044(2011)14-3292-02

人们对美的追求是不断深入的，网页设计也是如此。网页界面设计不是对各种图像和文字的堆积，也不是对网页模板的套用。而是需要在网站艺术效果上下功夫，使网站尽可能的做的美观、合理，让用户更有效的获取信息，对网页的视觉呈现留下深刻的印象。并在浏览网页时轻松、愉快的心情，接收信息也更容易，同时在无形中塑造出了网站的良好形象。

1 何谓界面

界面，字典上解释为两者间的界限、接点、共用（连接）的领域，进一步说就是个体间相互联系的通路或者空间。界面设计最重要的两点是让浏览者使用的便利性和美观性。作为网页界面设计者，就要理解人们通过网络交换信息时所需要的相互关联的问题和特性，使用户能够在良好的环境下更便利的应用网络。

2 网页界面设计的特性和必要性

网页设计不是简单的在显示器上看到的漂亮的装饰性的画面。一些设计地比较好的网站，就是考虑了多媒体的特性、色彩搭配和信息排列的一定次序，能更有效地向用户传达内容。比起许多华丽的画面装饰，网页设计应该在更有效地传达信息方面多下些功夫。这必须有对布局设计和色彩的正确理解和相关知识，要熟知网页系统的特性。

在网页界面设计方面，应同时考虑的是使用的便利性和视觉效果这两方面。首先，网站内各个页面应保持一贯性，不能给用户带来混乱感；在使用方面，尽可能的遵循普遍规律，这能让用户很容易适应。在界面设计方面，重要的一点就是要站在用户的立场上去进行设计。既能给用户带来方便，又兼备视觉的冲击力，这样的网页界面才是每个网页设计人员应思考并追求的东西。一个不为用户考虑的界面，无论这个网站有多么好的内容，这个好内容也是无用之物。兼具实用性与便利性的界面当然是重要的，但能够唤起用户的好奇心与兴趣，使用户停留网站，给人留下深刻印象的界面也是很重要的。

3 网页界面艺术效果的构成要素

3.1 页面结构

布局是内容组织的必然结果，它往往是自己逐渐形成的。一旦周全考虑了页面的所有需求，并且确定了每一块的内容，工作就变成了看着所想要的布局自己展现在你的眼前。这个过程类似拼图游戏，只不过没有最终完成的提示图，但是每个部分都可以改变大小位置。网页设计中，设计者要注意到网页排版的“最佳视域”这一细节会引导用户去观看整个页面，并且能够创造出一种别称之为“Diagonal Balance（对角线平衡）”的和谐状态。人们在浏览页面或布局的时候，视线往往趋向于从左上角移动到右下角，因为人们通常都是从左至右、又伤往下地阅读，久而久之视线自然会沿着这一路径移动。

其中，企业网站的页面结构通常为比较简单的上下结构式，可以说几乎是统一的风格，顶部的左边是网站的logo，右边就是它的导航栏。门户网站通常为上左右结构式，商业图片往往很满。通常会在页面结构上也显示出主次不够突出、内容拖沓、繁琐等不足。如果处理得不好，很容易会显得呆板而无趣，但是如果使用大量的和整个网站颜色风格统一的图标和图片，网站看起来会显得很生动。

3.2 色彩运用

网页界面艺术设计离不开色彩的应用，当打开一个网站的时候，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的布局，而是网站的色彩。尤其是在体现界面的时候，色彩对人的视觉效果非常明显，一个网站设计的成功与否，在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。

国内外一些优秀的网页界面设计师，他们可以对色彩运用的非常得当。在我们看来有些非常难看的颜色到了他们的手里很轻易的就搭配出一种很另类或和谐的美感，给人的感觉要么淡雅迷人，要么另类大胆，让人觉得欣赏他们的网站是一个非常愉悦的过程。他们通常都比较喜欢采用不同的色调来表达不同栏目的主题，灰色是他们最爱用的颜色，因为灰色比较中庸，能和任何色彩搭配，大大的改变色彩的韵味，使对比更强烈，正文文字也大都采用灰色。而局部则喜欢用色彩绚丽的色条或色块来区分不同的栏目。比如，要制作一个圣诞主题的网站，要求颜色运用对比强烈，我们可以选择红色和绿色的配色方案。在很多人看来红色和绿色搭配就是“红配绿，很俗气”，其实相反色系两色相配，即所谓红配绿、蓝配黄、橙配紫，这种搭配如果处理得好，出来的效果会很抢眼。使网页看起来显得很生动活波，使得红显得更红，很符合网站的主题。

不同网页的主题可以用不同的色彩来表现，以下为几种常用色系：

第一，蓝色。蓝色是商业宣传用色，在商业设计中强调科技、商务的企业形象时，大多选用蓝色当标准色。一般用于企业宣传类网站的设计中，往往给人以专业、科技的感觉。因此，蓝色被普遍应用到企业网站和专业网站当中。

第二，绿色。绿色是自然色，有黄色和蓝色两种成分，绿色的性格最为平和、安稳，是一种柔顺、恬静、满足及优美的色彩。给人以清新自然的感觉，可以大大舒缓视觉上的压力。在商业网页设计中，绿色所传递的是清爽、理想、希望和生长的意象，较符合服务业、卫生保健业、教育行业、农业类网页设计的要求。绿色也可以用于与环保相关的主题，如旅游风景区网站。

第三，红色。红色是比较热烈和强有力的颜色，在网页颜色的应用中，单纯以红色为主色调的网站相对较少，多用作辅助色、点睛色，以达到陪衬、醒目的效果，会使网页变的生机勃勃。红色与黑色的搭配在商业设计中被誉为商业成功色，在网页设计中也比较常见。红黑搭配常被用于较前卫时尚、个性的娱乐休闲区网页中，有很强的视觉感染力和号召力。

第四，黄色。黄色也是宣传色中的一种，具有快乐，希望，智慧和轻快的个性。黄色给人轻松随意的生活气息，能够体现出一种友善亲近的效果，同时又容易引起味觉上的条件反射，给人以甜美和香酥感，在很多设计作品中黄色都被用来表现喜庆的气氛和华丽的商品。同时黄色又是一种非常鲜明的色彩，它可以与许多种颜色搭配起来使用。

第五，橙色。是欢快活泼的光辉色彩，是暖色系中最温暖的色，是一种富足、快乐而幸福的颜色。橙色稍稍混入黑色或白色，会变成一种稳重、含蓄又明快的暖色，但混入较多的黑色，就成为一种烧焦的色，橙色中加入较多的白色会带来一种甜腻的感觉。橙色与浅绿色和浅蓝色相配，可以构成最响亮、最欢乐的色彩。橙色与淡黄色相配有一种很舒服的过渡感。而橙色一般不能与紫色或深蓝色相配，这将给人一种不干净、晦涩的感觉。

另外，色彩之间的平衡与呼应也是十分重要的。色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是LOGO图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系的色彩以呼应，这样可以弱化这种视觉的冲击。

通常在一个页面中尽量不要超过四种色彩，色彩太多会找不到主题色，会显得没有主次，令人眼花缭乱。同时还要注意文字的颜色与背景颜色的区分，太强或太弱都会印象浏览者得阅读。同时，我们还可以适当的运用一些黑、白、灰的颜色搭配使用，可以产生意想不到的效果。在色彩的设计上，即要符合网站整体特征，又要适合所渲染信息的特征。一般采用同色系或相邻色系对网站基础信息进行渲染，对于突现主题的信息采用基础信息色彩的补色或对比色进行渲染，从视觉上体现信息的权重与逻辑关系，达到突出重要、弱化次要地目的。

3.3 Flas及图片的运用

国外一些网页的flash banner大都以横幅广告条出现在页面的导航栏下面，特别是韩国的网页采用的都是精美的图片或者是手绘风格的矢量插图。国内很多网站也采用大幅的flash广告条，但是通常都是着眼于如何去表现flas的酷、炫的感觉，使得浏览者过于关注flash而忽视了页面的其他内容。而韩国的flash则更好的服务于网站的主题，和整个页面搭配起来看得很舒服而不抢眼，他们的关键就在于整个flash不是全部变化，而只是局部在动，以及文字和背景的巧妙配合。韩国网页设计师的手绘能力很强，页面中大量采用手绘的矢量图片，使得整个网站显得精致而与众不同，这点是我们值得借鉴的。

最近在杂志界开始吹起了复古风，六、七十年代的手绘插图又开始流行，杂志书籍中大量使用矢量时尚插图取代以前的照片，这股流行势力很快也蔓延到了网络上，特别是在时尚站点和儿童站点中大量运用手绘的插图，会有很好的效果。

3.4 文字排版

在网页界面中，众多构成要素中文字是具有最佳的直观传达作用以及最高的明确性，文字包括标题、文字信息、文字链接。文字作为图形符号，在处理文字造型时也适用图形设计的基本原理，这些原理在文字的形态构成、空间排布、色彩配置等多方面都具有指导性的作用。通过设计与编排，文字的存在价值在界面中应体现为提高信息的明确程度与可读性，加强界面的艺术性与视觉感染力，从而获得良好的视觉传达效果。

网站的内容排版因为要考虑到可读性，很多栏目的文字编排都比较简单，利于阅读，而在一些内容较少的页面如网站的广告或宣传页上排版则富于变化，更类似于杂志内页的排版。在文字排版时大部分人会觉的在文字排版时英文会比中文更美观，那是因为形状上中文字比英文字略高，并且文字的行间距往往比英文网站小，缺乏节奏感，容易给人拥挤杂乱和字块堆积的感觉。这就需要我们在设计时，尽量避免在首页放置大量的文字信息，尽量做到图文穿插，以免大量文字给人造成视觉疲劳。

另外，文字的风格和编排应符合网页主题。不同网页主题需要不同的文字风格来配合，不同的文字编排也极大地影响这网页的风格倾向。因此，不能孤立地进行网页文字设计，而是讲文字的设计和编排与网页的主题结合起来。

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人一目了然。文字和背景的颜色搭配要合理、醒目、易读。

当然，有些网站为了让浏览者对网站留有深刻的印象，他在背景上作文章。比如一个空白页的某一个部分用了很亮的一个大色块，此时它为了吸引浏览者的视线，突出的是背景，所以文字就要显得暗一些，这样文字才能跟背景分离开来，便于浏览者阅读文字。

3.5 页面的立体感及细节处理

视觉层次非常重要，很多做出来的界面太过平淡、平面、平常，就是因为画面没有层次感。一个十分优秀的网站往往看起来都很有层次感，而这种层次感不是靠做几个立体字来体现的，靠的是添加简单的图片或文字阴影效果和巧妙的利用构图来形成视觉上的差异，或者通过加深减淡工具来改变元素的高光暗面等。或是应用透明的效果来烘托页面的层次感和动态感觉，通过阴影，凹陷，透明来实现立体的网页也是很不错的。就是这种设计上的不拘泥于形式使网站的立体效果呼之欲出。我们应该学习韩国设计师做事的认真态度，他们的每一个按钮、图片的处理都及其讲究，其实一些细微的部分不仔细看还不一定容易发现，但是如果少了这些细节的地方，整个网站的整体形象就要大打折扣了。

“细节决定成败”，在设计领域了这句话更显得重要。但细节是建立在一个整体基础上的，在保持页面协调统一的前提下，细节的刻画能给页面润色不少。细节包括色彩上的打破，或者形态上的变化，文字的排版处理，还有图标的应用等方面，甚至要做到精确到1个像素。一个成功的页面设计者，至少会在做出页面前已经把整个页面构思好了，而且绝对不会很宽容地对待图片中1个像素的差别。很多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等。另外，只有看得多了，比较得多了，才能看得出这些细节。很多人会觉得这些细节没有什么大碍，但多个不良的细节组合在一起就会让人觉得不舒服。

4 结束语

网页作为一种新的视觉表现形式，它的发展虽然没有太长时间，但它兼容了传统平面设计的特征，又具有其所没有的优势，成为今后信息交流的一个非常有效的途径。作为一种综合性的设计，对于网页界面的设计来说，不仅要兼顾用户的便利，同时也要把这个公司引人注目的地方一起展现出来。有个性、能够给人留下深刻的印象是最好的。大部分的界面设计以上两方面的内容都要考虑。 要考虑用户的便利性还要使用人印象深刻，这似乎是矛盾的两方向，但作为一个网页的设计者，需要有调和这两方面的能力。这就要求设计师具备全面的专业素质，懂得如何处理好内容与形式的关系，多途径去探索网页的风格。对随时涌现的想法，要勇于付诸实践，以锻炼自己的创造性思维能力。如果具备了深厚的专业功底，又具有独特的创造精神，并勇于尝试不同的艺术风格，必能设计出让浏览者过目不忘的优秀设计网页，使人产生共鸣。

参考文献：

[1] 鲁道夫・阿恩海姆. 艺术与视知觉（新编）[M].长沙:湖南美术出版社,2008.

[2] (韩)崔美善. 设计师谈网页视觉效果[M].北京:电子工业出版社,2006.

[3] (韩)I.R.I色彩研究所.Web Color Design――设计师谈网页配色[M].北京:电子工业出版社,2002.