建站常識
確定?沒法確定!
2009-09-27 21:52:00
“確定”與“取消”按鈕應(yīng)該可以算是Web應(yīng)用里最無敵的組合了,你可以隨處看到他們以及他們的姊妹組合“完成”/“取消”、“是”/“否”….當(dāng)然,他們也不是每次都表述的是同一個(gè)交互動(dòng)作,但是我們總會(huì)遇到。
為什么會(huì)有“確定”與“取消”的組合?
這個(gè)問題似乎是個(gè)廢話。因?yàn)?,Web應(yīng)用中幾乎你所有的動(dòng)作都是可以取消的,這也是為什么每個(gè)瀏覽器都會(huì)有“后退”按鈕的原因。
當(dāng)然,有的時(shí)候我們也會(huì)只看到“確定”在單飛。比如,波希米亞同學(xué)收集了國內(nèi)30個(gè)著名網(wǎng)站的注冊表單,我們看到只有雅虎中國、MSN中國、TOM和優(yōu)酷的注冊表單中有“取消”/“重置”按鈕。
也許是處于商業(yè)因素的考慮,他們只給用戶單一方向的指引,系統(tǒng)限制用戶回頭;也許是產(chǎn)品人員認(rèn)為用戶完全可以在一頁長的表單里手動(dòng)清除掉填寫錯(cuò)誤的信息或者借助瀏覽器的“后退”按鈕來解決自己遇到的麻煩。
但是,在基本都是一頁長的表單里沒有“取消”或“重置”按鈕顯然是不夠友好的。用戶有權(quán)利結(jié)束自己的操作同時(shí)也有權(quán)利被允許重新開始自己的操作。一個(gè)“取消”按鈕顯然會(huì)比使用瀏覽器的“后退”按鈕或者是“F5”刷新瀏覽器成本小的多。
所以,從這點(diǎn)來看這30個(gè)表單中給我體驗(yàn)最好的無疑是優(yōu)酷的注冊表單。雖然雅虎中國提供了取消按鈕,但是在點(diǎn)擊取消的時(shí)候出現(xiàn)了下面尷尬的一幕….
什么時(shí)候才會(huì)同時(shí)出現(xiàn) 確定、取消
確實(shí),有的時(shí)候我們不需要取消按鈕。比如評論框的表單里,我們只需要一個(gè)“提交評論”就足夠了,因?yàn)槲覀儧]有可以取消的東西,你可以選擇關(guān)閉頁面停止瀏覽,你也可以選擇點(diǎn)擊鏈接進(jìn)入下一篇文章的閱讀。
取消,主要用在對用戶進(jìn)行警示、詢問用戶操作這2個(gè)場景中。比如用戶選擇了進(jìn)行了某項(xiàng)不可逆的操作的時(shí)候,我們需要警示用戶是否確定要進(jìn)行這項(xiàng)操作;用戶選擇了我們其實(shí)并不想讓他進(jìn)行的操作,比如刪除帳戶,我們希望用戶三思。
確定與取消不是萬能的,需要更完美
“確定”與“取消”按鈕在大多數(shù)情況下都可以正常工作,但是意義更明顯的按鈕標(biāo)記能更好的幫助用戶建立對點(diǎn)擊結(jié)果的期望。
比如QQ郵箱的注冊表單,單擊這個(gè)“確定”按鈕會(huì)發(fā)生什么呢?保存了我填寫的信息還是把我注冊為新的QQ郵箱用戶?很明顯,對于用戶而言這個(gè)期望是模糊的。
當(dāng)然,我們很高興的看到大多數(shù)網(wǎng)站的注冊表單上都把“確定”按鈕換成了一個(gè)更加明顯的提示了,比如“注冊”、“現(xiàn)在就加入”、….不過在軟件領(lǐng)域里似乎這種令人生厭的做法已經(jīng)持續(xù)了很久且一直沒有改觀,典型代表就是我們的瀏覽器彈窗提示…..
直接使用“確定”與“取消”,是一個(gè)懶惰的設(shè)計(jì)師的表現(xiàn)與設(shè)計(jì)手法。這是一個(gè)值得注意與琢磨的細(xì)節(jié),因?yàn)槟愕囊粋€(gè)錯(cuò)誤的提示可能會(huì)誘發(fā)N多用戶錯(cuò)誤的點(diǎn)擊。
沒法確定的確定按鈕
比如下面的這個(gè)界面提示,我是點(diǎn)確定呢還是取消呢?我沒法確定…..
比如,某博客網(wǎng)站在發(fā)布文章的時(shí)候可以選擇全屏編輯器,他們會(huì)在屏幕的右下角設(shè)置一個(gè)“取消”按鈕,這個(gè)取消是怎么個(gè)意思呢?取消本次的編輯退回到我的博客首頁還是退出本次的全屏編輯進(jìn)入到普通的編輯狀態(tài)?我沒法確定……
關(guān)于確定與取消的按鈕擺放
目前流行的做法是遵照“費(fèi)茨法則”,一個(gè)人在使用鼠標(biāo)移動(dòng)指針時(shí),屏幕上目標(biāo)的某些特征會(huì)使得點(diǎn)擊變得輕松或者困難。目標(biāo)離得越遠(yuǎn),到達(dá)就越費(fèi)勁;目標(biāo)越小,就越難點(diǎn)中。設(shè)計(jì)成一個(gè)大的“確定”與一個(gè)小的“取消”組合或者一個(gè)大的“確定”按鈕與一個(gè)超鏈接的“取消”組合。
另外,關(guān)于是“確定”在左還是“取消”在左,mac系統(tǒng)與Win系統(tǒng)是個(gè)相反的做法,這是另外一個(gè)話題,有興趣的同學(xué)可以研究一下。
這里,UCDchina翻譯小組的一篇文章中說到了這個(gè)問題:“確定”與“取消”按鈕如何正確排序?
最后,在尋找本文的例證的時(shí)候?yàn)g覽幾個(gè)網(wǎng)站后編的一個(gè)小段子
問:一個(gè)網(wǎng)站如果彈出“是”、“否”、“取消”,你該選哪個(gè)?答:右上角的×。因?yàn)?,他才懶的管你選的是哪個(gè),他判斷有鼠標(biāo)點(diǎn)擊動(dòng)作就給你強(qiáng)奸了,所以先×它才是正確的!
原文:http://www.ikent.me/blog/1946
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢?
延伸閱讀
- [2006-06-29 10:50:00] Google學(xué)堂:如何確定網(wǎng)頁和查詢的相關(guān)性
- [2006-06-17 15:40:00] 網(wǎng)頁設(shè)計(jì):如何確定網(wǎng)站欄目
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
css 微網(wǎng)站 青島抖音小程序開發(fā) 青島網(wǎng)頁制作 搜索引擎 html和css 企業(yè)建站 IT資訊 網(wǎng)站交互設(shè)計(jì) 企業(yè)網(wǎng)站設(shè)計(jì) php程序 蘋果系統(tǒng) 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 青島海洋投資集團(tuán) 青島輪胎網(wǎng)站設(shè)計(jì)公司 微官網(wǎng)帶來的好處 空白和簡潔的設(shè)計(jì) 青島IT資訊 外貿(mào)網(wǎng)站設(shè)計(jì) 頁面設(shè)計(jì) 青島網(wǎng)站建設(shè)公司哪家好 青島網(wǎng)站建設(shè) 響應(yīng)式設(shè)計(jì) 微信營銷的優(yōu)勢 力圖 營銷策略 搜索引擎蜘蛛 H5專題頁面 網(wǎng)站推廣 視覺靈感