建站常識
確認(rèn)頁的設(shè)計(jì)(二)——形式的抉擇
2009-05-13 08:30:00
你會(huì)看到很多種二次確認(rèn)的形式。
本文或許不會(huì)涵蓋到所有,只有最常見的(歡迎你隨時(shí)提供案例哦)。
接下來的內(nèi)容會(huì)按照以下目錄組織:
1. 二次確認(rèn)頁有哪些形式(兩個(gè)劃分維度:設(shè)計(jì)角度與內(nèi)容和功能維度)
2. 二次確認(rèn)頁的替代方案有哪些?
3. 如何選擇不同的形式?
二次確認(rèn)頁的形式:
從設(shè)計(jì)角度劃分:
1. 系統(tǒng)彈出框
2. lightbox(浮出層)
解釋:Lightbox的效果類似于WinXP操作系統(tǒng)的注銷/關(guān)機(jī)對話框,除去屏幕中心位置的對話框,其他的區(qū)域都以淡出的效果逐漸變?yōu)殂y灰色以增加對比度,此時(shí)除了對話框內(nèi)的表單控件,沒有其他區(qū)域可以點(diǎn)擊。
3. 郵箱驗(yàn)證及手機(jī)驗(yàn)證碼等替代形式
比如,偶要?jiǎng)h除開心網(wǎng)帳號時(shí),開心網(wǎng)給我發(fā)了一封郵件,讓我點(diǎn)擊郵箱里的鏈接來確認(rèn)一定要?jiǎng)h除。這種形式適用于比較重要的不可恢復(fù)的場合。
手機(jī)驗(yàn)證碼確認(rèn)的形式一般和資金相關(guān),也用于比較重要的操作。
從內(nèi)容和功能角度劃分
這段資料來自于《windows vista UX guide》,為避免偶英文翻譯有誤,保留原文名稱:
1.Routine confirmations(常規(guī)確認(rèn))
Confirm that the user wants to proceed with a routine, low risk action.
確認(rèn)用戶想要繼續(xù)一個(gè)常規(guī)的,低風(fēng)險(xiǎn)的操作。
如圖:
2.Risky action confirmations(風(fēng)險(xiǎn)操作確認(rèn))
Confirm that the user wants to proceed with an action that has some risk and can’t be easily undone.
確認(rèn)用戶想要繼續(xù)一個(gè)有風(fēng)險(xiǎn)并且不容易撤銷的操作。
圖:
3.Unintended consequence confirmations(未預(yù)期的確認(rèn))
Confirm that the user wants to proceed with an action that has unexpected or unintended
consequences.
確認(rèn)用戶想要繼續(xù)一個(gè)可能會(huì)導(dǎo)致意料外的結(jié)果的動(dòng)作。
很多時(shí)候,確認(rèn)頁是建立在用戶有明確的操作意向的時(shí)候,這種情況下,也許用戶對后果是有預(yù)期判斷的:刪除就意味著后果就是刪除。而若刪除命令同時(shí)會(huì)導(dǎo)致別的意料之外的結(jié)果產(chǎn)生,那就是unintended consequence confirmation。
典型的例子:在多標(biāo)簽瀏覽器環(huán)境中,關(guān)閉瀏覽器,一般就會(huì)彈出一個(gè)確認(rèn)框。
圖:
4.Clarifications(澄清式確認(rèn)、探詢式確認(rèn))
Clarify how the user wants to proceed with an action that has potentially ambiguous or unexpected
consequences.
搞清楚用戶想如何繼續(xù)一個(gè)行為,而這個(gè)行為可能會(huì)導(dǎo)致預(yù)期外結(jié)果。
就好像在岔路口,導(dǎo)游說:好,我們繼續(xù)走吧。你可能想反問一下:怎么走呢?向左還是向右?因?yàn)槟銚?dān)心右邊可能會(huì)有打劫的埋伏。
UX guide建議除非確實(shí)認(rèn)為這個(gè)行為可能會(huì)出現(xiàn)的多種結(jié)果中,不然就不需要這種澄清式的確認(rèn)。
5. Security confirmations(安全確認(rèn))
Confirm that the user wants to proceed with an action with security consequences.
確認(rèn)用戶想繼續(xù)執(zhí)行一個(gè)會(huì)出現(xiàn)安全問題的動(dòng)作。
這個(gè)大家很常見了吧:
6. Ulterior motive confirmations(別有用心的確認(rèn)——汗,翻譯成這樣好像不太好吧)
我們需要記住如此多的形式嗎?對我們的實(shí)際設(shè)計(jì)有什么指導(dǎo)意義?
其實(shí)這些形式也說明了一些使用場合,接下來會(huì)有一些注意事項(xiàng),也是和這些形式緊密關(guān)聯(lián)的。
二次確認(rèn)頁的替代方案:
我不喜歡二次確認(rèn)頁?有別的方法可以取代嗎?
1. 防止出錯(cuò)——設(shè)置任務(wù),用戶在進(jìn)行破壞性的操作前有前置任務(wù)需要完成。
比如,在我們最近的一個(gè)項(xiàng)目中,用戶在點(diǎn)擊某個(gè)button時(shí),那個(gè)命令是需要被確認(rèn)的,否則一旦誤點(diǎn)擊會(huì)造成不可恢復(fù)的后果。但是在點(diǎn)擊下這個(gè)button后,用戶是需要填寫一個(gè)表單的。在提交表單時(shí),我們就發(fā)現(xiàn)沒有必要再用一個(gè)二次確認(rèn)。因?yàn)橛脩粼谔顚懕韱蔚倪^程中是可以思考和反悔的,他既然愿意花時(shí)間和精力去填寫表單,證明他確實(shí)想明白了。
2. 提供撤銷操作(Undo)——gmail的undo
圖:
3. 提供反饋,讓不期望的結(jié)果顯著化。
圖:在支付寶的直接付款頁面,點(diǎn)擊radio button后已經(jīng)使用提示告知了后果,因此點(diǎn)擊下一步就不需要再次確認(rèn)了。
4. 消除選擇——往往需要被確認(rèn)的是因?yàn)橛袃蓚€(gè)或多個(gè)response(后續(xù)動(dòng)作),可以認(rèn)真想一下,是否一定有多個(gè)選擇,如果僅僅剩下唯一一個(gè)了,那么就不需要詢問了。
如果需要被confirm的選項(xiàng)不是很重要,干脆拿掉它。我特討厭有些網(wǎng)站給你一個(gè)長長的表單,下面有兩個(gè)button,一個(gè)提交一個(gè)清空。往往會(huì)不小心點(diǎn)擊了清空,結(jié)果剛才忙活了半天的東西都沒有了。要避免這種情況,當(dāng)然你可以在我點(diǎn)擊清空時(shí)給我一個(gè)確認(rèn),不過我更加期望把這個(gè)button拿掉。
設(shè)計(jì)形式的選擇:
寫這種文章真累。所以我想趕快結(jié)束掉這種苦差事,這里僅僅談一下如何選擇使用系統(tǒng)彈出框還是浮出層吧。
我發(fā)現(xiàn)自從有了浮出層,越來越多的web 2.0的網(wǎng)站拋棄了系統(tǒng)彈出框。開始使用lightbox(浮出層),當(dāng)然,他們各有優(yōu)劣,不能一概而論。
比如以下這種情況:
系統(tǒng)彈出層可以允許我挪開確認(rèn)窗口以閱讀“需要被確認(rèn)的內(nèi)容”。
而如果使用浮出層,會(huì)出現(xiàn)這樣的效果:
挪都挪不開,怎么確認(rèn)嘛?當(dāng)然你可以把需要被確認(rèn)的內(nèi)容放到浮出層上,前提是有足夠的信息承受量。
做了一張兩者的優(yōu)劣點(diǎn)表,供參考(直接截ppt的圖了……):
原文:http://heidixie.blog.sohu.com/115770463.html
近期更新
- [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ì)都有哪些新的趨勢?
延伸閱讀
- [2009-05-04 08:19:00] 確認(rèn)頁的設(shè)計(jì)(confirmation alert)(一)
- [2009-05-13 08:34:00] 確認(rèn)頁的設(shè)計(jì)(三)——一些注意事項(xià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)鍵字
青島開發(fā)區(qū)建站公司 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)絡(luò)公司 H5 互聯(lián)網(wǎng) 網(wǎng)站開發(fā) 青島網(wǎng)站建設(shè)公司哪家好 網(wǎng)站的速度 搜索引擎蜘蛛 企業(yè)網(wǎng)站設(shè)計(jì) 青島網(wǎng)頁設(shè)計(jì) 網(wǎng)站推廣 青島高端網(wǎng)站建設(shè) 青島SEO 扁平化設(shè)計(jì) robots 微信營銷的優(yōu)勢 良好的導(dǎo)航 青島做網(wǎng)站多少錢 網(wǎng)站制作 微信小程序 H5定制設(shè)計(jì) SEO優(yōu)化 官網(wǎng)網(wǎng)站建設(shè) 青島網(wǎng)站設(shè)計(jì)哪家好 視覺靈感 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 css 青島輪胎網(wǎng)站設(shè)計(jì)