淺析網(wǎng)頁(yè)界面按鈕的藝術(shù)設(shè)計(jì)

田紀(jì)君 (浙江農(nóng)林大學(xué)研究生院 浙江臨安市 311300)

1946年，第一臺(tái)計(jì)算機(jī)誕生。經(jīng)過(guò)60多年的發(fā)展，從最初龐大的形體和簡(jiǎn)單的功能到現(xiàn)在輕便小巧的外形和強(qiáng)大的智能運(yùn)用，如今的計(jì)算機(jī)已經(jīng)經(jīng)歷翻天覆地的變化并徹底的改變了人們的生活。早期的計(jì)算機(jī)技術(shù)只掌握在少數(shù)的專業(yè)人員手中，人們需要特別培訓(xùn)才能對(duì)計(jì)算機(jī)進(jìn)行操作。而現(xiàn)代社會(huì)從教學(xué)老師，到家庭主婦他們每天都與計(jì)算機(jī)打交道，智能化的交互界面、人性化的設(shè)計(jì)，讓人們能夠輕松自如地操作這些計(jì)算機(jī)及其產(chǎn)品。

70年代末到80年代初，計(jì)算機(jī)網(wǎng)絡(luò)蓬勃發(fā)展，各種各樣的計(jì)算機(jī)網(wǎng)絡(luò)應(yīng)運(yùn)而生，如MILNET、USENET、BITNET、CSNET等，在網(wǎng)絡(luò)的規(guī)模和數(shù)量上都得到了很大的發(fā)展。伴隨著互聯(lián)網(wǎng)的高速發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)也得到了迅速的提高。網(wǎng)頁(yè)是承載信息的平臺(tái)，如果將網(wǎng)頁(yè)比作是“門”，那么，按鈕就是“窗”。

一、網(wǎng)頁(yè)按鈕

按鈕，最初是指一種常用的控制電器元件，常用來(lái)接通或斷開“控制電路”，從而達(dá)到控制電動(dòng)機(jī)或其他電氣設(shè)備運(yùn)行目的的一種開關(guān)。而本文的按鈕指的是網(wǎng)頁(yè)中的按鈕。網(wǎng)頁(yè)按鈕是人工生成、接收指令、傳達(dá)信息、完成人機(jī)交互的控件。按鈕是網(wǎng)頁(yè)中最常見(jiàn)的元素之一，無(wú)論是簡(jiǎn)單的個(gè)人網(wǎng)站還是復(fù)雜的商業(yè)網(wǎng)站，我們都能夠看到各式各樣的按鈕。在網(wǎng)站中越來(lái)越多使用圖像按鈕、JavaScript交互按鈕或Flash動(dòng)態(tài)按鈕等。與傳統(tǒng)的文本鏈接相比，精美的按鈕能能吸引瀏覽者的目光，增強(qiáng)網(wǎng)頁(yè)的互動(dòng)性。

網(wǎng)頁(yè)界面按鈕的作用主要有兩個(gè)：

1.提示性作用，通過(guò)提示性的圖形和文本讓瀏覽者明白點(diǎn)擊之后會(huì)有什么作用；2.動(dòng)態(tài)響應(yīng)作用，指瀏覽者在進(jìn)行不同操作時(shí)，按鈕能呈現(xiàn)出不同的效果，響應(yīng)不同的鼠標(biāo)事件。這樣的動(dòng)態(tài)網(wǎng)頁(yè)按鈕有4個(gè)響應(yīng)狀態(tài)：Up（釋放）、Over（滑過(guò)）、Down（按下）、Over While Down（按下時(shí)滑過(guò)）。從功能角度講，按鈕和文本鏈接都是引導(dǎo)瀏覽者訪問(wèn)網(wǎng)頁(yè)中的內(nèi)容。

網(wǎng)頁(yè)按鈕的特點(diǎn)：

1.易用性

在網(wǎng)頁(yè)中，圖像按鈕是最通俗的表達(dá)形式，比文本鏈接更容易讓瀏覽者識(shí)別。網(wǎng)頁(yè)中的圖像按鈕可以使網(wǎng)頁(yè)設(shè)計(jì)師充分發(fā)揮創(chuàng)意和想法，使圖像按鈕躍然與網(wǎng)頁(yè)界面上，使瀏覽者更方便地操作和使用。

2.可操作性

在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，為了能夠強(qiáng)調(diào)頁(yè)面中比較重要的功能或鏈接，通常會(huì)將該部分的內(nèi)容制作成按鈕的形式，例如“登陸”“搜索”按鈕，或是制作成一些具有特別功能的鏈接。這些按鈕不管是靜態(tài)圖片還是動(dòng)態(tài)Flash的，在網(wǎng)頁(yè)中都需要實(shí)現(xiàn)某些功能或作用，而不只是作為一個(gè)裝飾，所以這就需要網(wǎng)頁(yè)中的按鈕具有可操作性。

3.動(dòng)態(tài)效果

靜態(tài)圖像按鈕的表現(xiàn)形式比較單一，已經(jīng)不能夠滿足人們的審美需求，同時(shí)也不能引起瀏覽者的興趣和注意。而JavaScript交互按鈕和Flash按鈕屬于的動(dòng)態(tài)按鈕，不僅能夠增強(qiáng)網(wǎng)頁(yè)界面的動(dòng)感，傳達(dá)更豐富的信息，而且能夠在普通按鈕中脫穎而出，突顯其內(nèi)容。

二、網(wǎng)頁(yè)界面按鈕的分類

按照制作按鈕的技術(shù)來(lái)分，網(wǎng)站按鈕主要分為三類即，靜態(tài)圖片按鈕、JavaScript反轉(zhuǎn)圖片按鈕以及Flash按鈕。

1.靜態(tài)圖片按鈕

靜態(tài)圖片按鈕，顧名思義就是用靜態(tài)圖形或圖像語(yǔ)言直觀的展示按鈕功能。是一種明了的信息傳達(dá)方式?！皥D形是超越地域、超時(shí)空的信息傳播工具。它不受國(guó)界、種族的限制?？梢灶A(yù)見(jiàn)，在人類不斷拓展的星際探索中，圖形講發(fā)揮光更加重要的傳播、交流功能?！?言簡(jiǎn)意賅的圖形或圖像構(gòu)成的按鈕，讓瀏覽者很容易辨識(shí)出，并和很快做出下一步操作決定。圖像在內(nèi)容上豐富多彩，圖形在造型上變化多端，所以，建立在此基礎(chǔ)上的靜態(tài)圖片按鈕形式極為豐富。

1.JavaScript反轉(zhuǎn)圖片按鈕

這種形式的按鈕一般通過(guò)JavaScript語(yǔ)言實(shí)現(xiàn)。JavaScript反轉(zhuǎn)圖片按鈕是JavaScript動(dòng)態(tài)按鈕最為常見(jiàn)的形式，按鈕在正常的狀態(tài)下是一副圖片，當(dāng)鼠標(biāo)指針移動(dòng)到按鈕上的時(shí)候，該按鈕變更為另一幅圖片。由于JavaScript反轉(zhuǎn)圖片按鈕不如Flash按鈕的動(dòng)態(tài)效果好，所以在現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用的越來(lái)越少了。

2.Flash按鈕

利用Flash特效制作的各種具有動(dòng)態(tài)效果的按鈕。Flash動(dòng)畫在網(wǎng)頁(yè)設(shè)計(jì)中得到廣泛的應(yīng)用。網(wǎng)頁(yè)設(shè)計(jì)師們將Flash動(dòng)畫與按鈕相結(jié)合，制作出別具特色的Flash按鈕。Flash按鈕與普通按鈕相比較，表現(xiàn)效果更醒目、更具動(dòng)感、更具新鮮感，也更能滿足人們?cè)絹?lái)越高的審美水平，吸引瀏覽者的注意。

三、網(wǎng)頁(yè)界面按鈕的表現(xiàn)形式

當(dāng)用戶輸入關(guān)鍵字之后，單擊“搜索”按鈕，網(wǎng)頁(yè)即會(huì)彈出搜索結(jié)果；當(dāng)用戶輸入用戶名和密碼，單擊“登陸”按鈕，網(wǎng)頁(yè)將會(huì)顯示用戶的相關(guān)信息。實(shí)現(xiàn)提交功能的按鈕上的文字說(shuō)明了整個(gè)表單區(qū)域的內(nèi)容。例如，有“搜索”按鈕的區(qū)域，表明這一區(qū)域的文本框和按鈕都是為了搜索功能服務(wù)的，不需要再另外添加說(shuō)明了。這也是網(wǎng)頁(yè)設(shè)計(jì)師為提高網(wǎng)頁(yè)可用性而普遍采用的一種方式。

實(shí)現(xiàn)提交功能的按鈕，有以下兩種表現(xiàn)形式：

1.系統(tǒng)標(biāo)準(zhǔn)按鈕

系統(tǒng)標(biāo)準(zhǔn)按鈕是網(wǎng)頁(yè)中默認(rèn)的實(shí)現(xiàn)提交功能的按鈕。相比較各式各樣的圖片按鈕，網(wǎng)頁(yè)中使用的系統(tǒng)按鈕能容易被用戶識(shí)別，不過(guò)系統(tǒng)標(biāo)準(zhǔn)按鈕也存在一些缺點(diǎn)：樣式過(guò)于單一呆板，在多數(shù)情況之下與網(wǎng)頁(yè)的整體風(fēng)格不符。尤其是windows2000風(fēng)格的按鈕甚至被一些網(wǎng)頁(yè)設(shè)計(jì)師認(rèn)為是無(wú)法接受的丑陋，相比之下windowsXP式樣的按鈕更容易被接受，到如今的windows7風(fēng)格按鈕更贏得廣大用戶的喜愛(ài)。

2.使用圖片制作的按鈕

由于系統(tǒng)標(biāo)準(zhǔn)按鈕多數(shù)情況下很難融于網(wǎng)頁(yè)整體風(fēng)格，所以，多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師會(huì)選擇與網(wǎng)頁(yè)整體風(fēng)格相符的圖片按鈕來(lái)替代系統(tǒng)標(biāo)準(zhǔn)按鈕，并且這些按鈕同樣可以實(shí)現(xiàn)提交功能。用圖片制作的按鈕精巧美觀、形式多樣，但是圖片按鈕的缺點(diǎn)在于：用戶很難將這些按鈕同網(wǎng)頁(yè)中其他一些普通鏈接圖片按鈕相區(qū)別。在網(wǎng)頁(yè)上除了包含現(xiàn)實(shí)提交功能的按鈕之外，還包含許多的“偽按鈕”這些“偽按鈕”從外觀上看與普通的按鈕無(wú)異，而實(shí)際上它只是一個(gè)鏈接。網(wǎng)頁(yè)設(shè)計(jì)師們?yōu)榱送怀瞿承╂溄拥闹匾裕⑹怪c普通的文本鏈接區(qū)分開來(lái)，于是將其設(shè)計(jì)為按鈕的樣子，引導(dǎo)用戶去單擊該鏈接。不過(guò)“偽按鈕”同樣會(huì)給瀏覽者造成麻煩：瀏覽者難以辨別這些按鈕的真?zhèn)?。用戶在瀏覽一個(gè)濫用按鈕的網(wǎng)站時(shí)，需要花費(fèi)許多精力來(lái)區(qū)分文字鏈接和“偽按鈕”，而實(shí)際上“偽按鈕”更為重要，設(shè)計(jì)師希望“偽按鈕”的鏈接能引起瀏覽者更多的注意。

“偽按鈕”不應(yīng)該使用按鈕表現(xiàn)形式，更不應(yīng)該制作成系統(tǒng)標(biāo)準(zhǔn)按鈕。因?yàn)檫@將給用戶造成誤解，降低用戶的使用效率。網(wǎng)頁(yè)設(shè)計(jì)師們應(yīng)該運(yùn)用自己的設(shè)計(jì)才能精心設(shè)計(jì)，用更好的形式來(lái)表現(xiàn)想要突出的鏈接。而制作“偽按鈕”這種帶有欺騙性的做法除了給用戶造成誤會(huì)還會(huì)使用戶產(chǎn)生被愚弄的感覺(jué)，激怒用戶顯然是不明智的。

四、網(wǎng)頁(yè)界面的藝術(shù)設(shè)計(jì)

一般情況下，網(wǎng)頁(yè)界面中的按鈕其顏色和形狀要與整個(gè)網(wǎng)頁(yè)的風(fēng)格相統(tǒng)一。網(wǎng)頁(yè)按鈕不需要十分繁雜的設(shè)計(jì)，但是一定要突出主題并于整個(gè)網(wǎng)頁(yè)風(fēng)格想統(tǒng)一。

1.網(wǎng)頁(yè)按鈕的色彩

網(wǎng)頁(yè)按鈕的色彩搭配應(yīng)以大眾的欣賞習(xí)慣為標(biāo)準(zhǔn)，同時(shí)要兼顧網(wǎng)頁(yè)的特點(diǎn)和藝術(shù)規(guī)律。網(wǎng)頁(yè)按鈕色彩要漂亮、醒目，同時(shí)還要兼顧人眼的生理特征，不要過(guò)度使用高純度色相，它容易使人眼產(chǎn)生疲勞。要有與眾不同的的色彩搭配，并且與行業(yè)特征相結(jié)合，以襯托出網(wǎng)頁(yè)的個(gè)性。網(wǎng)頁(yè)按鈕的色彩應(yīng)當(dāng)服務(wù)于網(wǎng)頁(yè)的內(nèi)容，和網(wǎng)頁(yè)的氣氛相適應(yīng)。

2.網(wǎng)頁(yè)按鈕的尺寸

網(wǎng)頁(yè)中的按鈕并沒(méi)有嚴(yán)格的尺寸大小的標(biāo)準(zhǔn)，通常情況下，一個(gè)頁(yè)面中的按鈕的大小與它的重要程度成正比。不過(guò)并不代表著按鈕越大越好。網(wǎng)頁(yè)按鈕大到一定的程度，讓人感覺(jué)像是一塊區(qū)域，從而喪失了瀏覽者想點(diǎn)擊的欲望。

3.網(wǎng)頁(yè)按鈕的位置

網(wǎng)頁(yè)按鈕的位置需要仔細(xì)的考究，并不是隨意根據(jù)網(wǎng)頁(yè)設(shè)計(jì)師的擺放。最基本的原則就是讓瀏覽者容易找到。最好不要擺放的過(guò)偏，比如靠近頂部、底部、左邊界或者右邊界處等這些地方不宜擺放按鈕，網(wǎng)頁(yè)按鈕需要根據(jù)網(wǎng)頁(yè)界面的布局內(nèi)容擺放在較為醒目的位置，特別重要的按鈕應(yīng)該擺放在畫面的中心位置。

4.網(wǎng)頁(yè)按鈕上的文字表述

在按鈕上使用什么文字傳遞給用戶非常重要。需要言簡(jiǎn)意賅、直接明了，如:注冊(cè)、下載、創(chuàng)建、免費(fèi)試玩等，過(guò)于繁雜或者含義較深的文字只會(huì)讓瀏覽者失去耐心而放棄下一步的操作。

5.注意鼠標(biāo)滑過(guò)按鈕的效果

對(duì)于比較重要的按鈕適當(dāng)加一些鼠標(biāo)滑過(guò)的效果，會(huì)有力的增強(qiáng)按鈕的點(diǎn)擊感，給用戶帶來(lái)良好的用戶體驗(yàn)，起到畫龍點(diǎn)睛的作用。這里要注意的是，這種效果不太適合按鈕集中的地方，如果網(wǎng)頁(yè)中的每個(gè)按鈕都增加高亮的鼠標(biāo)滑過(guò)的效果的話，這樣會(huì)造成瀏覽者視覺(jué)上的混亂，影響用戶瀏覽的舒適度，所以網(wǎng)頁(yè)設(shè)計(jì)師需要根據(jù)頁(yè)面的整體風(fēng)格“恰當(dāng)”地添加鼠標(biāo)滑過(guò)的效果。

6.網(wǎng)頁(yè)按鈕的視覺(jué)表現(xiàn)

在眾多的網(wǎng)頁(yè)之中，可以看到各式各樣的按鈕，為了滿足人們?cè)絹?lái)越高的審美要求，網(wǎng)頁(yè)設(shè)計(jì)師們開始追求按鈕在質(zhì)感上面的表現(xiàn)，比如金屬、石頭、玻璃、木頭、塑膠、皮革、布料、陶瓷等等，這種很具特色的質(zhì)感按鈕，總能吸引瀏覽者點(diǎn)擊。

結(jié)語(yǔ)

按鈕是網(wǎng)頁(yè)中必不可少的基本控制部件，在各種網(wǎng)頁(yè)中都少不了按鈕的參與。因此在網(wǎng)頁(yè)設(shè)計(jì)中按鈕的設(shè)計(jì)也是十分重要的，通過(guò)它可以完成很多任務(wù)。本文探討了網(wǎng)頁(yè)界面按鈕的一些類別及表現(xiàn)形式，并總結(jié)歸納了網(wǎng)頁(yè)界面按鈕的設(shè)計(jì)原則和方法。給網(wǎng)頁(yè)設(shè)計(jì)師們提供了一些理論指導(dǎo)。網(wǎng)頁(yè)界面按鈕是技術(shù)和藝術(shù)相結(jié)合的產(chǎn)物，今后的網(wǎng)頁(yè)界面按鈕設(shè)計(jì)工作不僅可以從藝術(shù)設(shè)計(jì)的角度，還可以從技術(shù)的角度進(jìn)行探索。在當(dāng)今社會(huì)，人們對(duì)于“美”的要求越來(lái)越高，這就要求網(wǎng)頁(yè)設(shè)計(jì)師用心去觀察、感受用戶體驗(yàn)，加強(qiáng)設(shè)計(jì)情感，完善網(wǎng)頁(yè)交互設(shè)計(jì)，網(wǎng)頁(yè)界面按鈕將會(huì)有更好的設(shè)計(jì)空間期待設(shè)計(jì)師們的發(fā)掘。

[1] 胖鳥工作室.網(wǎng)頁(yè)設(shè)計(jì)師就業(yè)施展大揭秘[M]科學(xué)出版社.2009.P112.

[2] 李樂(lè)山.人機(jī)界面設(shè)計(jì)[M].科學(xué)出版社，2004.P214.

[3] 周蘇.左伍衡.王文.許新愛(ài)等.人機(jī)界面設(shè)計(jì)[M].科學(xué)出版社.2007.P144.

[4] 朱曉菊 邢艷茹.按鈕——網(wǎng)頁(yè)交互界面的“郵局”[J]，大眾文藝，2010（01）.