淺析網頁界面按鈕的藝術設計

田紀君 (浙江農林大學研究生院 浙江臨安市 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）.