網(wǎng)頁按鈕的功能與表現(xiàn)_網(wǎng)頁設計教程
推薦:按鈕上的內(nèi)容作者:http://www.esunweb.com/最近UCDChina以“注重界面上的文字”為主題寫了一系列的文章,使我在界面文字上的使用受益匪淺。之后,我對按鈕上的內(nèi)容的
目前在網(wǎng)頁中普遍出現(xiàn)的按鈕可以分為兩類:一種是有提交功能的按鈕---真正意義上的按鈕;另一類是僅僅表示鏈接的按鈕,在這里將其稱為“偽按鈕”。
真正的按鈕
真正的按鈕有兩個作用:
1.實現(xiàn)提交功能;
2.標明當前操作的目的。
說明:
無疑按鈕實現(xiàn)著提交功能。當用戶輸入了要害字后會點擊“搜索”按鈕,網(wǎng)頁中將出現(xiàn)搜索結果;當用戶填寫了用戶名和密碼后,點擊“登錄”按鈕,系統(tǒng)將打開自己的郵箱頁面。
按鈕上的文字說明了整個表單區(qū)的內(nèi)容,比如,有“搜索”按鈕的區(qū)域顯然標明這一區(qū)域內(nèi)的文本輸入框和按鈕都是為搜索功能服務的,不需要在另外添加標題進行說明了,這也是設計師為提高網(wǎng)頁可用性而普遍采用的一種方式―――逐字斟酌按鈕文字。
按鈕的表現(xiàn)形式可以大致總結為兩種:
1.系統(tǒng)標準按鈕
2.使用圖片自制的按鈕
對于真正的按鈕應當使用系統(tǒng)標準按鈕還是自制的圖片按鈕?
筆者認為應當使用系統(tǒng)標準按鈕。系統(tǒng)標準按鈕的設計起源是模擬真實的按鈕,無論是真實生活中的按鈕還是網(wǎng)頁上的系統(tǒng)標準按鈕都具有良好的用戶反饋。
標準按鈕的優(yōu)勢:
1.易識別。與各式各樣的圖片按鈕相比,在網(wǎng)頁中標準按鈕更輕易被用戶識別出的按鈕。網(wǎng)頁中的標準按鈕與用戶電腦的操作系統(tǒng)中的按鈕表現(xiàn)上是一致的,這降低了用戶識別上的負擔。
2.操作反饋好。標準按鈕具備多種狀態(tài),“正常狀態(tài)”“被選中狀態(tài)”“點擊時狀態(tài)”,多種狀態(tài)使標準按鈕能夠傳達更豐富的信息,而制作圖片按鈕的設計師通常沒這種耐心為一個按鈕制作多種狀態(tài),因為使用圖片按鈕多數(shù)時候是因為圖片按鈕更好看,而設計師并不太在意用用戶的使用效率問題。使用圖片制作出好看的頁面是本能水平上的設計,而使用標準按鈕制作易于使用的頁面是行為水平上的設計(關于“本能水平上的設計”和“行為水平上的設計”理論請參見Donald A. Norman的《Emotional Design》),我認為針對按鈕這個問題應該優(yōu)先考慮行為水平設計的需要,究竟按鈕是網(wǎng)頁”行為”部分(web標準將網(wǎng)頁分成三部分:結構、表現(xiàn)和行為)的一個重要元素,何況在我看來系統(tǒng)標準按鈕并不難看。
系統(tǒng)標準按鈕也存在自己的問題:樣式過于呆板,尤其是windows2000風格的按鈕甚至被一些網(wǎng)頁設計師認為是無法接受的丑陋,相比之下windowsXP式樣的按鈕更輕易被接受,無疑多數(shù)網(wǎng)頁設計師以及公司boss還是更關注本能水平上的設計―――好看的設計。
css可以對按鈕式樣進行一些個性化設置,可以改變按鈕顏色、立體效果、文字大小、文字顏色。具體方法可以很輕易的在互聯(lián)網(wǎng)上找到,這里不多說了。我認為對于按鈕這種程度的變化已經(jīng)足夠了。
我的觀點:對于真正的按鈕應該使用按鈕這種表現(xiàn)形式,并且應該使用系統(tǒng)標準按鈕。
偽按鈕
在網(wǎng)頁中大量存在這樣的按鈕,從表現(xiàn)上看是一個按鈕而實際上只提供了一個鏈接。
起源:最初網(wǎng)頁上隨處可見文字鏈接,設計師為了突出其中的某些非凡重要的鏈接,將其設計成了類似按鈕的樣子,使得這些鏈接更為突出,引導用戶點擊。這也從側面說明了在網(wǎng)頁上按鈕是很醒目的元素。
現(xiàn)在在網(wǎng)頁上使用偽按鈕的原因更為多樣,讓我們來看看“民意調(diào)查”這個例子:
在很多網(wǎng)頁中“提交”和“查看結果”被設計成相同系統(tǒng)標準按鈕,然而“提交”是將用戶的選擇提交給網(wǎng)站的系統(tǒng),存入數(shù)據(jù)庫,而“查看結果”是打開一個小窗口顯示目前的投票結果,顯然將“查看結果”設計成文字鏈接是更合理的,設計成按鈕的原因通常是為了樣式上的美觀:最下面一行并排放置兩個按鈕,都有點擊的功能,看上去更和諧,但是這卻破壞了用戶的可操作性。
上面這個例子是由于視覺設計上的需要,而錯誤的使用了按鈕。當然廣告中故意使用偽按鈕誤導用戶也是使用偽按鈕的一個重要原因。造成偽按鈕泛濫的最根本原因還在于相當多的網(wǎng)頁設計師還沒能意識到偽按鈕與真正按鈕的區(qū)別,在設計過程中隨意的使用按鈕這種表現(xiàn)形式。
偽按鈕的負面效果是:使用戶難以辨別哪些是真正的按鈕。用戶在使用一個濫用按鈕的網(wǎng)站時,會花費很多心思來區(qū)分一個文字鏈接和一個偽按鈕的區(qū)別,而實際上區(qū)別僅僅在于偽按鈕更為重要,設計師希望偽按鈕的鏈接能引起用戶更多的注重。
從網(wǎng)頁可用性角度考慮有必要將鏈接與按鈕區(qū)別開來,因為點擊按鈕代表提交一個表單,這不僅僅是網(wǎng)頁的技術模型,同時也是用戶的心理模型。
我的觀點:偽按鈕不應該使用按鈕表現(xiàn)形式,更不應該制作成系統(tǒng)標準按鈕。因為這將給用戶造成誤解,降低用戶的使用效率。假如要使鏈接更為突出,網(wǎng)頁設計師完全有義務花費更多的心思進行設計,更出色的表現(xiàn)這個鏈接,而不是偷梁換柱的模擬按鈕,這種帶有欺騙性的做法除了給用戶造成誤會還會使用戶產(chǎn)生被愚弄的感覺,激怒用戶顯然是不明智的。
分享:60種分頁案例和好的實踐作者:http://dancewithnet.com/結構和層次降低了復雜性并提高了可讀性。你的文章或站點組織的越深入,用戶就越輕易理解你觀點和得到你想傳達的信息。在網(wǎng)頁
- 中國互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬 5分鐘1起網(wǎng)絡入侵
- 馬云最后的發(fā)布會:打假,打出阿里的新未來
- 實踐分享:ACCESS數(shù)據(jù)庫導入mysql數(shù)據(jù)庫
- ACCESS數(shù)據(jù)庫轉ORACLE數(shù)據(jù)庫分享
- CDN.net免費CDN申請使用教程:100GB流量香港日本新加坡節(jié)點
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺教程(二) 消息管理與群發(fā)
- 中國IPv4地址今年將告罄 IPv6期待打破政策局
- 移動廣告野蠻成長:75%投放在iOS平臺
- 災難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬部iPhone遭蘋果退貨 損失10億元
- 相關鏈接:
- 教程說明:
網(wǎng)頁設計教程-網(wǎng)頁按鈕的功能與表現(xiàn)
。
