網頁按鈕的功能與表現_網頁設計教程

推薦：按鈕上的內容
作者：http://www.esunweb.com/最近UCDChina以“注重界面上的文字”為主題寫了一系列的文章，使我在界面文字上的使用受益匪淺。之后，我對按鈕上的內容的

　　作者：http://www.chouyu.com.cn/

　　目前在網頁中普遍出現的按鈕可以分為兩類：一種是有提交功能的按鈕－－－真正意義上的按鈕；另一類是僅僅表示鏈接的按鈕，在這里將其稱為“偽按鈕”。

　　真正的按鈕

　　真正的按鈕有兩個作用：
　　1．實現提交功能；
　　2．標明當前操作的目的。

　　說明：

　　無疑按鈕實現著提交功能。當用戶輸入了要害字后會點擊“搜索”按鈕，網頁中將出現搜索結果；當用戶填寫了用戶名和密碼后，點擊“登錄”按鈕，系統將打開自己的郵箱頁面。

　　按鈕上的文字說明了整個表單區的內容，比如，有“搜索”按鈕的區域顯然標明這一區域內的文本輸入框和按鈕都是為搜索功能服務的，不需要在另外添加標題進行說明了，這也是設計師為提高網頁可用性而普遍采用的一種方式―――逐字斟酌按鈕文字。

　　按鈕的表現形式可以大致總結為兩種：

　　1．系統標準按鈕
　　2．使用圖片自制的按鈕

　　對于真正的按鈕應當使用系統標準按鈕還是自制的圖片按鈕？

　　筆者認為應當使用系統標準按鈕。系統標準按鈕的設計起源是模擬真實的按鈕，無論是真實生活中的按鈕還是網頁上的系統標準按鈕都具有良好的用戶反饋。

　　標準按鈕的優勢：

　　1．易識別。與各式各樣的圖片按鈕相比，在網頁中標準按鈕更輕易被用戶識別出的按鈕。網頁中的標準按鈕與用戶電腦的操作系統中的按鈕表現上是一致的，這降低了用戶識別上的負擔。
　　2．操作反饋好。標準按鈕具備多種狀態，“正常狀態”“被選中狀態”“點擊時狀態”，多種狀態使標準按鈕能夠傳達更豐富的信息，而制作圖片按鈕的設計師通常沒這種耐心為一個按鈕制作多種狀態，因為使用圖片按鈕多數時候是因為圖片按鈕更好看，而設計師并不太在意用用戶的使用效率問題。使用圖片制作出好看的頁面是本能水平上的設計，而使用標準按鈕制作易于使用的頁面是行為水平上的設計(關于“本能水平上的設計”和“行為水平上的設計”理論請參見Donald A. Norman的《Emotional Design》)，我認為針對按鈕這個問題應該優先考慮行為水平設計的需要，究竟按鈕是網頁”行為”部分(web標準將網頁分成三部分：結構、表現和行為)的一個重要元素，何況在我看來系統標準按鈕并不難看。

　　系統標準按鈕也存在自己的問題：樣式過于呆板，尤其是windows2000風格的按鈕甚至被一些網頁設計師認為是無法接受的丑陋，相比之下windowsXP式樣的按鈕更輕易被接受，無疑多數網頁設計師以及公司boss還是更關注本能水平上的設計―――好看的設計。

　　css可以對按鈕式樣進行一些個性化設置，可以改變按鈕顏色、立體效果、文字大小、文字顏色。具體方法可以很輕易的在互聯網上找到，這里不多說了。我認為對于按鈕這種程度的變化已經足夠了。

　　我的觀點：對于真正的按鈕應該使用按鈕這種表現形式，并且應該使用系統標準按鈕。

　　偽按鈕

　　在網頁中大量存在這樣的按鈕，從表現上看是一個按鈕而實際上只提供了一個鏈接。

　　起源：最初網頁上隨處可見文字鏈接，設計師為了突出其中的某些非凡重要的鏈接，將其設計成了類似按鈕的樣子，使得這些鏈接更為突出，引導用戶點擊。這也從側面說明了在網頁上按鈕是很醒目的元素。

　　現在在網頁上使用偽按鈕的原因更為多樣，讓我們來看看“民意調查”這個例子：

　　在很多網頁中“提交”和“查看結果”被設計成相同系統標準按鈕，然而“提交”是將用戶的選擇提交給網站的系統，存入數據庫，而“查看結果”是打開一個小窗口顯示目前的投票結果，顯然將“查看結果”設計成文字鏈接是更合理的，設計成按鈕的原因通常是為了樣式上的美觀：最下面一行并排放置兩個按鈕，都有點擊的功能，看上去更和諧，但是這卻破壞了用戶的可操作性。

　　上面這個例子是由于視覺設計上的需要，而錯誤的使用了按鈕。當然廣告中故意使用偽按鈕誤導用戶也是使用偽按鈕的一個重要原因。造成偽按鈕泛濫的最根本原因還在于相當多的網頁設計師還沒能意識到偽按鈕與真正按鈕的區別，在設計過程中隨意的使用按鈕這種表現形式。

偽按鈕的負面效果是：使用戶難以辨別哪些是真正的按鈕。用戶在使用一個濫用按鈕的網站時，會花費很多心思來區分一個文字鏈接和一個偽按鈕的區別，而實際上區別僅僅在于偽按鈕更為重要，設計師希望偽按鈕的鏈接能引起用戶更多的注重。

從網頁可用性角度考慮有必要將鏈接與按鈕區別開來，因為點擊按鈕代表提交一個表單，這不僅僅是網頁的技術模型，同時也是用戶的心理模型。

　　我的觀點：偽按鈕不應該使用按鈕表現形式，更不應該制作成系統標準按鈕。因為這將給用戶造成誤解，降低用戶的使用效率。假如要使鏈接更為突出，網頁設計師完全有義務花費更多的心思進行設計，更出色的表現這個鏈接，而不是偷梁換柱的模擬按鈕，這種帶有欺騙性的做法除了給用戶造成誤會還會使用戶產生被愚弄的感覺，激怒用戶顯然是不明智的。

分享：60種分頁案例和好的實踐
作者：http://dancewithnet.com/結構和層次降低了復雜性并提高了可讀性。你的文章或站點組織的越深入，用戶就越輕易理解你觀點和得到你想傳達的信息。在網頁