確認(rèn)框中的“取消/確定”要如何設(shè)計(jì)呢?

【確認(rèn)框】屬于模態(tài)框其中一種重量級(jí)反饋,一般用于用戶(hù)進(jìn)行一項(xiàng)很重要或者有風(fēng)險(xiǎn)的操作比如:刪除/退出,展現(xiàn)的形式是以彈框的形式來(lái)給用戶(hù)提示信息,一般會(huì)出現(xiàn)屏幕中間并且遮擋部分內(nèi)容,用戶(hù)根據(jù)提示來(lái)進(jìn)行判斷操作,確認(rèn)框?yàn)閺?qiáng)制用戶(hù)操作,如不操作其余功能無(wú)法使用。并且確認(rèn)框上的“取消”/”確定”操作是對(duì)用戶(hù)關(guān)鍵行為的一個(gè)確認(rèn),如在移動(dòng)端網(wǎng)盤(pán)中,刪除某個(gè)文件并且此操作行為會(huì)導(dǎo)致當(dāng)前文件不可恢復(fù)時(shí),都會(huì)詢(xún)問(wèn)“確定要?jiǎng)h除嗎?”,用戶(hù)可以選擇“取消”或“確定”。

作為重量級(jí)反饋我們可以看出來(lái)模態(tài)彈框的優(yōu)點(diǎn)是可以讓用戶(hù)迅速的獲取視覺(jué)焦點(diǎn),缺點(diǎn)是打斷了用戶(hù)的當(dāng)前的操作流程。

確認(rèn)框「確定」按鈕究竟在左還是右?

有沒(méi)有發(fā)現(xiàn)我們?cè)谧鼋换ピO(shè)計(jì)的道路上即使自己已經(jīng)研究數(shù)年,深知一些高大上的理論,但是有一些很細(xì)小的細(xì)節(jié)是我們平常沒(méi)去深思甚至關(guān)注的,因?yàn)槲覀兏嗳耸钦驹诰奕说募绨蛏献鲈O(shè)計(jì),別人怎么做我們就怎么做,何曾問(wèn)過(guò)自己一個(gè)為什么呢?比如確認(rèn)框「確定」和「取消」按鈕的位置,究竟是「確定」在左邊還是取消在左邊

其實(shí)這個(gè)問(wèn)題目前仍舊沒(méi)有確切的答案。

各大平臺(tái)系統(tǒng)確認(rèn)框怎么做?

操作系統(tǒng)中的幾大陣營(yíng)主要為微軟的windows,蘋(píng)果mac、ios,那下來(lái)我們分別來(lái)看主要針對(duì)存在歧義的微軟和蘋(píng)果系統(tǒng)來(lái)看下有什么區(qū)別。

----蘋(píng)果----

1.OS X用戶(hù)預(yù)期所有的按鍵位于dialog的右底部,啟動(dòng)一個(gè)操作的按鍵總是位于最右側(cè)。該按鍵稱(chēng)之為「Action button」,以確認(rèn)當(dāng)前dialog最重要的操作。取消按鍵位于「Action button」的左側(cè)。 OS X Interface Guidelines,傳送門(mén)(參見(jiàn)Dialog章節(jié)):http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Windows/Windows.html#//apple_ref/doc/uid/20000961-TP10

·蘋(píng)果的mac

·蘋(píng)果的ios

----微軟----

2.dialog內(nèi)操作按鍵稱(chēng)之為「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。傳送門(mén):http://msdn.microsoft.com/en-us/library/aa511268.aspx#commitButtons

我們可以看到不同的操作系統(tǒng)都遵循著自己的操作規(guī)范,那究竟哪種更加符合用戶(hù)的操作邏輯呢?我們來(lái)做一個(gè)實(shí)驗(yàn)

我們暫且忘掉windows多年培養(yǎng)的用戶(hù)習(xí)慣,確認(rèn)在左,取消在右?;蛘咛O(píng)果的mac確認(rèn)在右取消在左邊。首先我們想一下設(shè)計(jì)的初衷是什么?我們?yōu)槭裁慈俗鲈O(shè)計(jì)?我們應(yīng)該遵循一種什么樣的原則?

設(shè)計(jì)是商業(yè)的一部分,我們的設(shè)計(jì)應(yīng)該要避免用戶(hù)去思考也就是我們要為潛意識(shí)做設(shè)計(jì)

我們?nèi)祟?lèi)在進(jìn)行反應(yīng)進(jìn)行每項(xiàng)操作的時(shí)候如開(kāi)門(mén),行走等,你有想過(guò)我們的大腦真的會(huì)精心的調(diào)配每個(gè)肌肉應(yīng)該怎么去做嗎? 不是的,你大腦沒(méi)有考慮這些問(wèn)題,這都是你潛意識(shí)的行為,人類(lèi)潛意識(shí)控制了人類(lèi)大部分的行為模式,通常來(lái)說(shuō)相應(yīng)的行為動(dòng)作發(fā)生之后,大腦上層才響應(yīng)起來(lái)原來(lái)剛才我們干了什么一件事情,我們平常的動(dòng)作都是潛意識(shí)的行為,上層意識(shí)是對(duì)行為的一種解釋。我們做的應(yīng)該是為潛意識(shí)做設(shè)計(jì),避免用戶(hù)去做思考。

舉個(gè)例子

①這是一個(gè)付款界面有一個(gè)9.99 美元的需要你付款?你覺(jué)得哪個(gè)是確定呢?我沒(méi)有標(biāo)明哪個(gè)按鈕是確認(rèn)哦。

解釋?zhuān)捍_定在右取消在左依據(jù)為

1.視線流依據(jù):

如果左邊是確定右邊是取消用戶(hù)出于謹(jǐn)慎會(huì)閱讀完所有可操作的選項(xiàng),這意味著用戶(hù)的視線不會(huì)停留在左邊的按鈕上面,它將繼續(xù)向后進(jìn)行掃視,在查看完所有可選項(xiàng)后,再返回左邊的按鈕執(zhí)行相應(yīng)操作(如下圖第二個(gè)視線流)。如采用左邊取消右邊確定順序,用戶(hù)的視線流將會(huì)更平滑,視線最終停留的位置也是右邊②的確定位置。確定放在右邊相對(duì)于左邊視線流更加的流暢視線流不用折返

2.古騰堡法則:

來(lái)說(shuō)用戶(hù)的瀏覽順序是從左到右從上到下,我們認(rèn)為左上是我們閱讀的開(kāi)始位置右下是落腳位置,所以右邊位置放確認(rèn)來(lái)說(shuō)更加合理(如下圖)

3.上一步下一步依據(jù):

因?yàn)榇蟛糠值膰?guó)家的閱讀順序都是從左到右的,我們意識(shí)中左邊是上一步而右邊是下一步按鈕,我們認(rèn)為最右邊的按鈕是一個(gè)積極的方向,所以確定放在右邊更加的合理

②我只是把一個(gè)顏色加深了一點(diǎn)點(diǎn),現(xiàn)在哪邊是確認(rèn)呢?

解釋?zhuān)鹤筮叺纳罨野粹o和背景對(duì)比反差更大一點(diǎn),在我們看來(lái)他明暗的對(duì)比更加強(qiáng)烈積極所以我們會(huì)認(rèn)為他更加適合作為確認(rèn)按鈕

③我只是把其中一個(gè)按鈕加入橙色,現(xiàn)在哪邊是確認(rèn)呢?

解釋?zhuān)何覀兘o其中一個(gè)按鈕色彩,在我們看來(lái)橙色和背景的對(duì)比更加強(qiáng)烈在我們看來(lái)他更加積極一點(diǎn),所以我們覺(jué)得他是一個(gè)確認(rèn)按鈕

④我們分別給兩個(gè)按鈕綠色和橙色,現(xiàn)在您覺(jué)得哪個(gè)是確認(rèn)按鈕呢?

解釋?zhuān)捍蠖鄶?shù)的人會(huì)認(rèn)為左邊是一個(gè)確認(rèn)按鈕,因?yàn)槲覀兩钪薪o我們的顏色屬性就是綠色代表通過(guò)前進(jìn),橙色代表警示,綠色給我們的反饋更加的積極,所以當(dāng)前我們覺(jué)得綠色是一個(gè)確定按鈕

我們看了這么多的案例,我們的思維也改變了多次,總結(jié)一點(diǎn)為我們要為潛意識(shí)做設(shè)計(jì),不要讓用戶(hù)去思考

但是左邊取消右邊確定并不是一成不變的

正常情況確定按鈕放右,取消按鈕放左。但是有些情況是比較特殊的破壞性操作或存在風(fēng)險(xiǎn)時(shí)反之,以避免用戶(hù)誤操作。例如:

1.ofo的退押金確認(rèn)框

2.網(wǎng)易云音樂(lè)清空確認(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ù)視線流方式來(lái)判斷最右邊的按鈕是一個(gè)積極的方向置因?yàn)槲覀円暰€流不用折返

3.根據(jù)古騰堡法則來(lái)說(shuō)用戶(hù)在顯示屏的瀏覽順序是從左到右從上到下,我們認(rèn)為左上是我們閱讀的開(kāi)始位置右下是落腳位置,所以右邊位置放確認(rèn)來(lái)說(shuō)更加合理

注:如果需要達(dá)到一個(gè)特定的目標(biāo)如避免用戶(hù)退出應(yīng)用,我們作為設(shè)計(jì)師可以使用反向設(shè)計(jì)來(lái)達(dá)到我們的商業(yè)目的。

確認(rèn)在左取消在右(用戶(hù)習(xí)慣依據(jù))

如果在微軟平臺(tái)我們還是建議使用確認(rèn)在左取消在右的,因?yàn)闊o(wú)論您遵循哪種設(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è)嬰兒沒(méi)有受到各種環(huán)境的影響來(lái)做對(duì)比統(tǒng)計(jì)了。究竟是確定在左還是右,無(wú)論哪種都應(yīng)該遵循各家的規(guī)范,以及全局的統(tǒng)一性,以商業(yè)目標(biāo)去做設(shè)計(jì),也就是我們所說(shuō)的目標(biāo)導(dǎo)向設(shè)計(jì)。


每天更新,
全站高品質(zhì)素材免費(fèi)下載!