【確認(rèn)框】屬于模態(tài)框其中一種重量級(jí)反饋,一般用于用戶進(jìn)行一項(xiàng)很重要或者有風(fēng)險(xiǎn)的操作比如:刪除/退出,展現(xiàn)的形式是以彈框的形式來給用戶提示信息,一般會(huì)出現(xiàn)屏幕中間并且遮擋部分內(nèi)容,用戶根據(jù)提示來進(jìn)行判斷操作,確認(rèn)框?yàn)閺?qiáng)制用戶操作,如不操作其余功能無法使用。并且確認(rèn)框上的“取消”/”確定”操作是對(duì)用戶關(guān)鍵行為的一個(gè)確認(rèn),如在移動(dòng)端網(wǎng)盤中,刪除某個(gè)文件并且此操作行為會(huì)導(dǎo)致當(dāng)前文件不可恢復(fù)時(shí),都會(huì)詢問“確定要?jiǎng)h除嗎?”,用戶可以選擇“取消”或“確定”。
作為重量級(jí)反饋我們可以看出來模態(tài)彈框的優(yōu)點(diǎn)是可以讓用戶迅速的獲取視覺焦點(diǎn),缺點(diǎn)是打斷了用戶的當(dāng)前的操作流程。
確認(rèn)框「確定」按鈕究竟在左還是右?
有沒有發(fā)現(xiàn)我們?cè)谧鼋换ピO(shè)計(jì)的道路上即使自己已經(jīng)研究數(shù)年,深知一些高大上的理論,但是有一些很細(xì)小的細(xì)節(jié)是我們平常沒去深思甚至關(guān)注的,因?yàn)槲覀兏嗳耸钦驹诰奕说募绨蛏献鲈O(shè)計(jì),別人怎么做我們就怎么做,何曾問過自己一個(gè)為什么呢?比如確認(rèn)框「確定」和「取消」按鈕的位置,究竟是「確定」在左邊還是取消在左邊
其實(shí)這個(gè)問題目前仍舊沒有確切的答案。
各大平臺(tái)系統(tǒng)確認(rèn)框怎么做?
操作系統(tǒng)中的幾大陣營(yíng)主要為微軟的windows,蘋果mac、ios,那下來我們分別來看主要針對(duì)存在歧義的微軟和蘋果系統(tǒng)來看下有什么區(qū)別。
----蘋果----
1.OS X用戶預(yù)期所有的按鍵位于dialog的右底部,啟動(dòng)一個(gè)操作的按鍵總是位于最右側(cè)。該按鍵稱之為「Action button」,以確認(rèn)當(dāng)前dialog最重要的操作。取消按鍵位于「Action button」的左側(cè)。 OS X Interface Guidelines,傳送門(參見Dialog章節(jié)):http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Windows/Windows.html#//apple_ref/doc/uid/20000961-TP10
·蘋果的mac
·蘋果的ios
----微軟----
2.dialog內(nèi)操作按鍵稱之為「Commit button」,肯定性操作位于左邊,否定性操作位于最右邊。Win平臺(tái)定義了具體的用法與順序:Yes/No, Yes/No/Cancel, [Do it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel。傳送門:http://msdn.microsoft.com/en-us/library/aa511268.aspx#commitButtons
我們可以看到不同的操作系統(tǒng)都遵循著自己的操作規(guī)范,那究竟哪種更加符合用戶的操作邏輯呢?我們來做一個(gè)實(shí)驗(yàn)
我們暫且忘掉windows多年培養(yǎng)的用戶習(xí)慣,確認(rèn)在左,取消在右?;蛘咛O果的mac確認(rèn)在右取消在左邊。首先我們想一下設(shè)計(jì)的初衷是什么?我們?yōu)槭裁慈俗鲈O(shè)計(jì)?我們應(yīng)該遵循一種什么樣的原則?
設(shè)計(jì)是商業(yè)的一部分,我們的設(shè)計(jì)應(yīng)該要避免用戶去思考也就是我們要為潛意識(shí)做設(shè)計(jì)
我們?nèi)祟愒谶M(jìn)行反應(yīng)進(jìn)行每項(xiàng)操作的時(shí)候如開門,行走等,你有想過我們的大腦真的會(huì)精心的調(diào)配每個(gè)肌肉應(yīng)該怎么去做嗎? 不是的,你大腦沒有考慮這些問題,這都是你潛意識(shí)的行為,人類潛意識(shí)控制了人類大部分的行為模式,通常來說相應(yīng)的行為動(dòng)作發(fā)生之后,大腦上層才響應(yīng)起來原來剛才我們干了什么一件事情,我們平常的動(dòng)作都是潛意識(shí)的行為,上層意識(shí)是對(duì)行為的一種解釋。我們做的應(yīng)該是為潛意識(shí)做設(shè)計(jì),避免用戶去做思考。
舉個(gè)例子
①這是一個(gè)付款界面有一個(gè)9.99 美元的需要你付款?你覺得哪個(gè)是確定呢?我沒有標(biāo)明哪個(gè)按鈕是確認(rèn)哦。
解釋:確定在右取消在左依據(jù)為
1.視線流依據(jù):
如果左邊是確定右邊是取消用戶出于謹(jǐn)慎會(huì)閱讀完所有可操作的選項(xiàng),這意味著用戶的視線不會(huì)停留在左邊的按鈕上面,它將繼續(xù)向后進(jìn)行掃視,在查看完所有可選項(xiàng)后,再返回左邊的按鈕執(zhí)行相應(yīng)操作(如下圖第二個(gè)視線流)。如采用左邊取消右邊確定順序,用戶的視線流將會(huì)更平滑,視線最終停留的位置也是右邊②的確定位置。確定放在右邊相對(duì)于左邊視線流更加的流暢視線流不用折返
2.古騰堡法則:
來說用戶的瀏覽順序是從左到右從上到下,我們認(rèn)為左上是我們閱讀的開始位置右下是落腳位置,所以右邊位置放確認(rèn)來說更加合理(如下圖)
3.上一步下一步依據(jù):
因?yàn)榇蟛糠值膰?guó)家的閱讀順序都是從左到右的,我們意識(shí)中左邊是上一步而右邊是下一步按鈕,我們認(rèn)為最右邊的按鈕是一個(gè)積極的方向,所以確定放在右邊更加的合理
②我只是把一個(gè)顏色加深了一點(diǎn)點(diǎn),現(xiàn)在哪邊是確認(rèn)呢?
解釋:左邊的深灰按鈕和背景對(duì)比反差更大一點(diǎn),在我們看來他明暗的對(duì)比更加強(qiáng)烈積極所以我們會(huì)認(rèn)為他更加適合作為確認(rèn)按鈕
③我只是把其中一個(gè)按鈕加入橙色,現(xiàn)在哪邊是確認(rèn)呢?
解釋:我們給其中一個(gè)按鈕色彩,在我們看來橙色和背景的對(duì)比更加強(qiáng)烈在我們看來他更加積極一點(diǎn),所以我們覺得他是一個(gè)確認(rèn)按鈕
④我們分別給兩個(gè)按鈕綠色和橙色,現(xiàn)在您覺得哪個(gè)是確認(rèn)按鈕呢?
解釋:大多數(shù)的人會(huì)認(rèn)為左邊是一個(gè)確認(rèn)按鈕,因?yàn)槲覀兩钪薪o我們的顏色屬性就是綠色代表通過前進(jìn),橙色代表警示,綠色給我們的反饋更加的積極,所以當(dāng)前我們覺得綠色是一個(gè)確定按鈕
我們看了這么多的案例,我們的思維也改變了多次,總結(jié)一點(diǎn)為我們要為潛意識(shí)做設(shè)計(jì),不要讓用戶去思考
但是左邊取消右邊確定并不是一成不變的
正常情況確定按鈕放右,取消按鈕放左。但是有些情況是比較特殊的破壞性操作或存在風(fēng)險(xiǎn)時(shí)反之,以避免用戶誤操作。例如:
1.ofo的退押金確認(rèn)框
2.網(wǎng)易云音樂清空確認(rèn)框
3.知乎跳出當(dāng)前app
4.ios刪除應(yīng)用
總結(jié):
確認(rèn)在右取消在左(交互體驗(yàn)依據(jù))
1.因?yàn)榇蟛糠值膰?guó)家的閱讀順序都是從左到右的,我們意識(shí)中左邊是上一步而右邊是下一步按鈕,我們認(rèn)為最右邊的按鈕是一個(gè)積極的方向
2.我們根據(jù)視線流方式來判斷最右邊的按鈕是一個(gè)積極的方向置因?yàn)槲覀円暰€流不用折返
3.根據(jù)古騰堡法則來說用戶在顯示屏的瀏覽順序是從左到右從上到下,我們認(rèn)為左上是我們閱讀的開始位置右下是落腳位置,所以右邊位置放確認(rèn)來說更加合理
注:如果需要達(dá)到一個(gè)特定的目標(biāo)如避免用戶退出應(yīng)用,我們作為設(shè)計(jì)師可以使用反向設(shè)計(jì)來達(dá)到我們的商業(yè)目的。
確認(rèn)在左取消在右(用戶習(xí)慣依據(jù))
如果在微軟平臺(tái)我們還是建議使用確認(rèn)在左取消在右的,因?yàn)闊o論您遵循哪種設(shè)計(jì)規(guī)范都需要遵循統(tǒng)一的設(shè)計(jì)原則,如果全局都用的是確定在左取消在右,那么全局都應(yīng)該統(tǒng)一(除為了達(dá)到商業(yè)目的的反向設(shè)計(jì))。
微軟培養(yǎng)的強(qiáng)大的使用習(xí)慣和交互體驗(yàn)方面肯定是相沖的,如果非要糾結(jié)一個(gè)對(duì)錯(cuò),也只能找一個(gè)嬰兒沒有受到各種環(huán)境的影響來做對(duì)比統(tǒng)計(jì)了。究竟是確定在左還是右,無論哪種都應(yīng)該遵循各家的規(guī)范,以及全局的統(tǒng)一性,以商業(yè)目標(biāo)去做設(shè)計(jì),也就是我們所說的目標(biāo)導(dǎo)向設(shè)計(jì)。
全站高品質(zhì)素材免費(fèi)下載!