接受偽按鈕(2)_網(wǎng)頁(yè)設(shè)計(jì)教程
推薦:網(wǎng)頁(yè)按鈕的功能與表現(xiàn)作者:http://www.chouyu.com.cn/目前在網(wǎng)頁(yè)中普遍出現(xiàn)的按鈕可以分為兩類:一種是有提交功能的按鈕---真正意義上的按鈕;另一類是僅僅表示鏈接的按鈕,在
嘗試著區(qū)分真、偽按鈕
“設(shè)計(jì)兩類不同樣式的按鈕”---這似乎是個(gè)好辦法。然而,卻并不輕易做到。首先,需要設(shè)計(jì)出兩個(gè)樣子不同的圖像,讓用戶知道這些東西是可點(diǎn)擊的,是按鈕。它們應(yīng)該是有立體感的,上面還要能足夠清楚的顯示文字。
除了看上去像是能點(diǎn)擊的,他們兩個(gè)還要表達(dá)出文字鏈接與按鈕的區(qū)別:文字鏈接指向另外一個(gè)界面,點(diǎn)擊后不會(huì)出現(xiàn)什么嚴(yán)重的后果,假如您后悔了,那就點(diǎn)擊一下瀏覽器上的“后退”按鈕。而按鈕就比較恐怖了,點(diǎn)擊后,郵件將發(fā)送到對(duì)方的郵箱中,文章將被成千上萬(wàn)的人看到……兩個(gè)這么抽象的概念,要想通過(guò)兩個(gè)方寸大小的圖像表達(dá)出來(lái)是很困難的,yahoo進(jìn)行了償試:
在鼠標(biāo)經(jīng)過(guò)“My Yahoo!”的時(shí)候,會(huì)出現(xiàn)下劃線,與這個(gè)頁(yè)面上的其他文字鏈接的樣式一樣�?瓷先ナ且粋(gè)按鈕,但是不失時(shí)機(jī)的告訴用戶這個(gè)“按鈕”和頁(yè)面上的其他文字鏈接有某些相似的地方。而“Web Search”這個(gè)真按鈕就沒(méi)有類似文字鏈接的表現(xiàn)。設(shè)計(jì)者用這個(gè)下劃線來(lái)區(qū)別真按鈕與偽按鈕。
另外一種相似的做法是,按鈕的文字上始終顯示下劃線。雖然具體的形式上有些不同,但是思路是一樣的:讓偽按鈕既有文字鏈接的樣子又有按鈕的樣子。
然而這樣的設(shè)計(jì)恐怕還不足夠好,多數(shù)用戶首先會(huì)看到那是一個(gè)按鈕,假如有耐心仔細(xì)研究一下,恐怕也只會(huì)覺(jué)得那是個(gè)有點(diǎn)兒希奇的按鈕,即便確實(shí)分辨出了這個(gè)“My Yahoo!”與“Web Search”有所不同,又有幾個(gè)人能明白這樣的區(qū)別意味著什么呢。
這樣的償試目前為止并不成功。
還有一個(gè)辦法!
“不區(qū)分真按鈕與偽按鈕,把他們都做成一樣的按鈕。”這是amazon.com給我們提供的解決辦法。
既然那些重要的文字鏈接需要看上去象個(gè)按鈕,我們又很難讓用戶理解一個(gè)頁(yè)面上有兩種不同性質(zhì)的按鈕。那么,就不要區(qū)分了。給用戶看到的只是文字鏈接和按鈕兩種元素。而點(diǎn)擊按鈕將出現(xiàn)的后果由按鈕上的文字來(lái)說(shuō)明。
這樣做雖然不符合widow圖形用戶界面的設(shè)計(jì)原則,但是在很大程度上卻是符合用戶使專心理的。我們不可能幻想著用戶在瀏覽一個(gè)網(wǎng)頁(yè)的時(shí)候知道什么叫<form>,用戶也不會(huì)去判定一個(gè)按鈕是否會(huì)把一些數(shù)據(jù)寫(xiě)入數(shù)據(jù)庫(kù)。用戶面對(duì)一個(gè)頁(yè)面的時(shí)候,會(huì)被頁(yè)面上的按鈕吸引,閱讀上面的文字,確定那個(gè)按鈕是自己想要做的事后,就點(diǎn)擊了。那么,不管是“進(jìn)入結(jié)算流程”還是“登錄到我們的安全服務(wù)”只要在點(diǎn)擊前清楚的交代了點(diǎn)擊后的效果就夠了。樣子并非一定要不同,也并非一定要相同。而相同的好處在于減小了用戶的學(xué)習(xí)成本。不同的網(wǎng)站上的按鈕樣子往往是不一樣的。用戶面對(duì)一個(gè)頁(yè)面的時(shí)候先要學(xué)習(xí),認(rèn)清什么樣子的東西是按鈕。假如整個(gè)網(wǎng)站上的按鈕全是一個(gè)樣子,顯然會(huì)更輕易學(xué)習(xí)。(amazon.com上實(shí)際有不止一種的按鈕,為的是區(qū)別重要性,與是否提交表單無(wú)關(guān)。)
使用這種設(shè)計(jì)方法,不用再?gòu)?qiáng)迫圖形設(shè)計(jì)師畫(huà)出兩種幾乎不可能畫(huà)出來(lái)的按鈕樣式了,更重要的是,用戶看到的頁(yè)面更簡(jiǎn)單了。
不區(qū)分真、偽按鈕的做法需要我們花更多的心思判定哪些文字鏈接是可以被“升級(jí)”為按鈕的。因?yàn)榘盐淖宙溄印吧?jí)”為按鈕意味著他很重要,而一個(gè)頁(yè)面上不應(yīng)該有很多重要的內(nèi)容。同時(shí),按鈕上的文字表述也是需要花很大精力的,尤其是對(duì)于我們。我相信,在中國(guó)多數(shù)的網(wǎng)頁(yè)設(shè)計(jì)師,象我一樣,并不具備很強(qiáng)的文字表達(dá)能力。在按鈕上顯然又不可以長(zhǎng)篇大論,要用幾個(gè)字描述清楚點(diǎn)擊后的效果并不簡(jiǎn)單。但是,卻很必要。
需要強(qiáng)調(diào)的是,這整潔劃一的一個(gè)按鈕樣式不應(yīng)該是系統(tǒng)標(biāo)準(zhǔn)按鈕,因?yàn)橄到y(tǒng)按鈕是“真按鈕”的標(biāo)準(zhǔn)造型。想象一下,把“了解更多”弄成一個(gè)系統(tǒng)標(biāo)準(zhǔn)按鈕的樣子,絕對(duì)會(huì)比阿扁現(xiàn)在的言行更可笑。
總結(jié)一下
要解決真、偽按鈕的問(wèn)題有兩個(gè)辦法,方法一.是象google那樣,文字鏈接就是文字鏈接,再重要的文字鏈接最多也就是顯示的稍微大一點(diǎn)兒。這種方法通常不會(huì)通過(guò)評(píng)審的,那么,可以試試第二種方法,不區(qū)分真、偽按鈕,只使用一種按鈕樣式,斟酌適用范圍,確保頁(yè)面上重點(diǎn)突出,而不是重點(diǎn)泛濫。推敲文字表述,確保清楚的描述點(diǎn)擊的后果。
我不得不承認(rèn),這種辦法是與《誰(shuí)》一文中相悖的。但是,我仍然認(rèn)為,對(duì)于目前的大多數(shù)網(wǎng)站,這種不區(qū)分真、偽按鈕的方法是最好的。
分享:按鈕上的內(nèi)容作者:http://www.esunweb.com/最近UCDChina以“注重界面上的文字”為主題寫(xiě)了一系列的文章,使我在界面文字上的使用受益匪淺。之后,我對(duì)按鈕上的內(nèi)容的
- 中國(guó)互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬(wàn) 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會(huì):打假,打出阿里的新未來(lái)
- 實(shí)踐分享:ACCESS數(shù)據(jù)庫(kù)導(dǎo)入mysql數(shù)據(jù)庫(kù)
- ACCESS數(shù)據(jù)庫(kù)轉(zhuǎn)ORACLE數(shù)據(jù)庫(kù)分享
- CDN.net免費(fèi)CDN申請(qǐng)使用教程:100GB流量香港日本新加坡節(jié)點(diǎn)
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺(tái)教程(二) 消息管理與群發(fā)
- 中國(guó)IPv4地址今年將告罄 IPv6期待打破政策局
- 移動(dòng)廣告野蠻成長(zhǎng):75%投放在iOS平臺(tái)
- 災(zāi)難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬(wàn)部iPhone遭蘋(píng)果退貨 損失10億元
網(wǎng)頁(yè)設(shè)計(jì)教程Rss訂閱網(wǎng)站制作教程搜索
網(wǎng)頁(yè)設(shè)計(jì)教程推薦
猜你也喜歡看這些
- 從GMail認(rèn)識(shí)的W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)和Ajax
- 網(wǎng)站重構(gòu)CSS的優(yōu)化技巧
- 第8天:CSS布局入門(mén)
- 第5天:head區(qū)的其他設(shè)置
- 深入CSS結(jié)構(gòu):div再議以及對(duì)span的迷惑
- 使用web標(biāo)準(zhǔn)能帶來(lái)什么商業(yè)價(jià)值?
- CSS中expression使用簡(jiǎn)介
- 深入CSS結(jié)構(gòu):合理運(yùn)用div和span
- 第6天:XHTML代碼規(guī)范
- 第12天:校驗(yàn)及常見(jiàn)錯(cuò)誤
- 相關(guān)鏈接:
- 教程說(shuō)明:
網(wǎng)頁(yè)設(shè)計(jì)教程-接受偽按鈕(2)
。

