【確認(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ì)。