浅析网页界面按钮的艺术设计

田纪君 (浙江农林大学研究生院 浙江临安市 311300)

1946年，第一台计算机诞生。经过60多年的发展，从最初庞大的形体和简单的功能到现在轻便小巧的外形和强大的智能运用，如今的计算机已经经历翻天覆地的变化并彻底的改变了人们的生活。早期的计算机技术只掌握在少数的专业人员手中，人们需要特别培训才能对计算机进行操作。而现代社会从教学老师，到家庭主妇他们每天都与计算机打交道，智能化的交互界面、人性化的设计，让人们能够轻松自如地操作这些计算机及其产品。

70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。伴随着互联网的高速发展，网页设计也得到了迅速的提高。网页是承载信息的平台，如果将网页比作是“门”，那么，按钮就是“窗”。

一、网页按钮

按钮，最初是指一种常用的控制电器元件，常用来接通或断开“控制电路”，从而达到控制电动机或其他电气设备运行目的的一种开关。而本文的按钮指的是网页中的按钮。网页按钮是人工生成、接收指令、传达信息、完成人机交互的控件。按钮是网页中最常见的元素之一，无论是简单的个人网站还是复杂的商业网站，我们都能够看到各式各样的按钮。在网站中越来越多使用图像按钮、JavaScript交互按钮或Flash动态按钮等。与传统的文本链接相比，精美的按钮能能吸引浏览者的目光，增强网页的互动性。

网页界面按钮的作用主要有两个：

1.提示性作用，通过提示性的图形和文本让浏览者明白点击之后会有什么作用；2.动态响应作用，指浏览者在进行不同操作时，按钮能呈现出不同的效果，响应不同的鼠标事件。这样的动态网页按钮有4个响应状态：Up（释放）、Over（滑过）、Down（按下）、Over While Down（按下时滑过）。从功能角度讲，按钮和文本链接都是引导浏览者访问网页中的内容。

网页按钮的特点：

1.易用性

在网页中，图像按钮是最通俗的表达形式，比文本链接更容易让浏览者识别。网页中的图像按钮可以使网页设计师充分发挥创意和想法，使图像按钮跃然与网页界面上，使浏览者更方便地操作和使用。

2.可操作性

在网页设计过程中，为了能够强调页面中比较重要的功能或链接，通常会将该部分的内容制作成按钮的形式，例如“登陆”“搜索”按钮，或是制作成一些具有特别功能的链接。这些按钮不管是静态图片还是动态Flash的，在网页中都需要实现某些功能或作用，而不只是作为一个装饰，所以这就需要网页中的按钮具有可操作性。

3.动态效果

静态图像按钮的表现形式比较单一，已经不能够满足人们的审美需求，同时也不能引起浏览者的兴趣和注意。而JavaScript交互按钮和Flash按钮属于的动态按钮，不仅能够增强网页界面的动感，传达更丰富的信息，而且能够在普通按钮中脱颖而出，突显其内容。

二、网页界面按钮的分类

按照制作按钮的技术来分，网站按钮主要分为三类即，静态图片按钮、JavaScript反转图片按钮以及Flash按钮。

1.静态图片按钮

静态图片按钮，顾名思义就是用静态图形或图像语言直观的展示按钮功能。是一种明了的信息传达方式。“图形是超越地域、超时空的信息传播工具。它不受国界、种族的限制。可以预见，在人类不断拓展的星际探索中，图形讲发挥光更加重要的传播、交流功能。” 言简意赅的图形或图像构成的按钮，让浏览者很容易辨识出，并和很快做出下一步操作决定。图像在内容上丰富多彩，图形在造型上变化多端，所以，建立在此基础上的静态图片按钮形式极为丰富。

1.JavaScript反转图片按钮

这种形式的按钮一般通过JavaScript语言实现。JavaScript反转图片按钮是JavaScript动态按钮最为常见的形式，按钮在正常的状态下是一副图片，当鼠标指针移动到按钮上的时候，该按钮变更为另一幅图片。由于JavaScript反转图片按钮不如Flash按钮的动态效果好，所以在现在的网页设计中运用的越来越少了。

2.Flash按钮

利用Flash特效制作的各种具有动态效果的按钮。Flash动画在网页设计中得到广泛的应用。网页设计师们将Flash动画与按钮相结合，制作出别具特色的Flash按钮。Flash按钮与普通按钮相比较，表现效果更醒目、更具动感、更具新鲜感，也更能满足人们越来越高的审美水平，吸引浏览者的注意。

三、网页界面按钮的表现形式

当用户输入关键字之后，单击“搜索”按钮，网页即会弹出搜索结果；当用户输入用户名和密码，单击“登陆”按钮，网页将会显示用户的相关信息。实现提交功能的按钮上的文字说明了整个表单区域的内容。例如，有“搜索”按钮的区域，表明这一区域的文本框和按钮都是为了搜索功能服务的，不需要再另外添加说明了。这也是网页设计师为提高网页可用性而普遍采用的一种方式。

实现提交功能的按钮，有以下两种表现形式：

1.系统标准按钮

系统标准按钮是网页中默认的实现提交功能的按钮。相比较各式各样的图片按钮，网页中使用的系统按钮能容易被用户识别，不过系统标准按钮也存在一些缺点：样式过于单一呆板，在多数情况之下与网页的整体风格不符。尤其是windows2000风格的按钮甚至被一些网页设计师认为是无法接受的丑陋，相比之下windowsXP式样的按钮更容易被接受，到如今的windows7风格按钮更赢得广大用户的喜爱。

2.使用图片制作的按钮

由于系统标准按钮多数情况下很难融于网页整体风格，所以，多数网页设计师会选择与网页整体风格相符的图片按钮来替代系统标准按钮，并且这些按钮同样可以实现提交功能。用图片制作的按钮精巧美观、形式多样，但是图片按钮的缺点在于：用户很难将这些按钮同网页中其他一些普通链接图片按钮相区别。在网页上除了包含现实提交功能的按钮之外，还包含许多的“伪按钮”这些“伪按钮”从外观上看与普通的按钮无异，而实际上它只是一个链接。网页设计师们为了突出某些链接的重要性，并使之与普通的文本链接区分开来，于是将其设计为按钮的样子，引导用户去单击该链接。不过“伪按钮”同样会给浏览者造成麻烦：浏览者难以辨别这些按钮的真伪。用户在浏览一个滥用按钮的网站时，需要花费许多精力来区分文字链接和“伪按钮”，而实际上“伪按钮”更为重要，设计师希望“伪按钮”的链接能引起浏览者更多的注意。

“伪按钮”不应该使用按钮表现形式，更不应该制作成系统标准按钮。因为这将给用户造成误解，降低用户的使用效率。网页设计师们应该运用自己的设计才能精心设计，用更好的形式来表现想要突出的链接。而制作“伪按钮”这种带有欺骗性的做法除了给用户造成误会还会使用户产生被愚弄的感觉，激怒用户显然是不明智的。

四、网页界面的艺术设计

一般情况下，网页界面中的按钮其颜色和形状要与整个网页的风格相统一。网页按钮不需要十分繁杂的设计，但是一定要突出主题并于整个网页风格想统一。

1.网页按钮的色彩

网页按钮的色彩搭配应以大众的欣赏习惯为标准，同时要兼顾网页的特点和艺术规律。网页按钮色彩要漂亮、醒目，同时还要兼顾人眼的生理特征，不要过度使用高纯度色相，它容易使人眼产生疲劳。要有与众不同的的色彩搭配，并且与行业特征相结合，以衬托出网页的个性。网页按钮的色彩应当服务于网页的内容，和网页的气氛相适应。

2.网页按钮的尺寸

网页中的按钮并没有严格的尺寸大小的标准，通常情况下，一个页面中的按钮的大小与它的重要程度成正比。不过并不代表着按钮越大越好。网页按钮大到一定的程度，让人感觉像是一块区域，从而丧失了浏览者想点击的欲望。

3.网页按钮的位置

网页按钮的位置需要仔细的考究，并不是随意根据网页设计师的摆放。最基本的原则就是让浏览者容易找到。最好不要摆放的过偏，比如靠近顶部、底部、左边界或者右边界处等这些地方不宜摆放按钮，网页按钮需要根据网页界面的布局内容摆放在较为醒目的位置，特别重要的按钮应该摆放在画面的中心位置。

4.网页按钮上的文字表述

在按钮上使用什么文字传递给用户非常重要。需要言简意赅、直接明了，如:注册、下载、创建、免费试玩等，过于繁杂或者含义较深的文字只会让浏览者失去耐心而放弃下一步的操作。

5.注意鼠标滑过按钮的效果

对于比较重要的按钮适当加一些鼠标滑过的效果，会有力的增强按钮的点击感，给用户带来良好的用户体验，起到画龙点睛的作用。这里要注意的是，这种效果不太适合按钮集中的地方，如果网页中的每个按钮都增加高亮的鼠标滑过的效果的话，这样会造成浏览者视觉上的混乱，影响用户浏览的舒适度，所以网页设计师需要根据页面的整体风格“恰当”地添加鼠标滑过的效果。

6.网页按钮的视觉表现

在众多的网页之中，可以看到各式各样的按钮，为了满足人们越来越高的审美要求，网页设计师们开始追求按钮在质感上面的表现，比如金属、石头、玻璃、木头、塑胶、皮革、布料、陶瓷等等，这种很具特色的质感按钮，总能吸引浏览者点击。

结语

按钮是网页中必不可少的基本控制部件，在各种网页中都少不了按钮的参与。因此在网页设计中按钮的设计也是十分重要的，通过它可以完成很多任务。本文探讨了网页界面按钮的一些类别及表现形式，并总结归纳了网页界面按钮的设计原则和方法。给网页设计师们提供了一些理论指导。网页界面按钮是技术和艺术相结合的产物，今后的网页界面按钮设计工作不仅可以从艺术设计的角度，还可以从技术的角度进行探索。在当今社会，人们对于“美”的要求越来越高，这就要求网页设计师用心去观察、感受用户体验，加强设计情感，完善网页交互设计，网页界面按钮将会有更好的设计空间期待设计师们的发掘。

[1] 胖鸟工作室.网页设计师就业施展大揭秘[M]科学出版社.2009.P112.

[2] 李乐山.人机界面设计[M].科学出版社，2004.P214.

[3] 周苏.左伍衡.王文.许新爱等.人机界面设计[M].科学出版社.2007.P144.

[4] 朱晓菊 邢艳茹.按钮——网页交互界面的“邮局”[J]，大众文艺，2010（01）.