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

作為重量級反饋我們可以看出來模態(tài)彈框的優(yōu)點是可以讓用戶迅速的獲取視覺焦點，缺點是打斷了用戶的當前的操作流程。

確認框「確定」按鈕究竟在左還是右？

有沒有發(fā)現(xiàn)我們在做交互設(shè)計的道路上即使自己已經(jīng)研究數(shù)年，深知一些高大上的理論，但是有一些很細小的細節(jié)是我們平常沒去深思甚至關(guān)注的，因為我們更多人是站在巨人的肩膀上做設(shè)計，別人怎么做我們就怎么做，何曾問過自己一個為什么呢？比如確認框「確定」和「取消」按鈕的位置，究竟是「確定」在左邊還是取消在左邊

其實這個問題目前仍舊沒有確切的答案。

各大平臺系統(tǒng)確認框怎么做？

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

----蘋果----

1.OS X用戶預(yù)期所有的按鍵位于dialog的右底部，啟動一個操作的按鍵總是位于最右側(cè)。該按鍵稱之為「Action button」，以確認當前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平臺定義了具體的用法與順序：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ī)范，那究竟哪種更加符合用戶的操作邏輯呢？我們來做一個實驗

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

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

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

舉個例子

①這是一個付款界面有一個9.99 美元的需要你付款？你覺得哪個是確定呢？我沒有標明哪個按鈕是確認哦。

解釋：確定在右取消在左依據(jù)為

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

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

2.古騰堡法則：

來說用戶的瀏覽順序是從左到右從上到下，我們認為左上是我們閱讀的開始位置右下是落腳位置，所以右邊位置放確認來說更加合理(如下圖)

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

因為大部分的國家的閱讀順序都是從左到右的，我們意識中左邊是上一步而右邊是下一步按鈕，我們認為最右邊的按鈕是一個積極的方向，所以確定放在右邊更加的合理

②我只是把一個顏色加深了一點點，現(xiàn)在哪邊是確認呢？

解釋：左邊的深灰按鈕和背景對比反差更大一點，在我們看來他明暗的對比更加強烈積極所以我們會認為他更加適合作為確認按鈕

③我只是把其中一個按鈕加入橙色，現(xiàn)在哪邊是確認呢？

解釋：我們給其中一個按鈕色彩，在我們看來橙色和背景的對比更加強烈在我們看來他更加積極一點，所以我們覺得他是一個確認按鈕

④我們分別給兩個按鈕綠色和橙色，現(xiàn)在您覺得哪個是確認按鈕呢？

解釋：大多數(shù)的人會認為左邊是一個確認按鈕，因為我們生活中給我們的顏色屬性就是綠色代表通過前進，橙色代表警示，綠色給我們的反饋更加的積極，所以當前我們覺得綠色是一個確定按鈕

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

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

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

1.ofo的退押金確認框

2.網(wǎng)易云音樂清空確認框

3.知乎跳出當前app

4.ios刪除應(yīng)用

總結(jié)：

確認在右取消在左（交互體驗依據(jù)）

1.因為大部分的國家的閱讀順序都是從左到右的，我們意識中左邊是上一步而右邊是下一步按鈕，我們認為最右邊的按鈕是一個積極的方向

2.我們根據(jù)視線流方式來判斷最右邊的按鈕是一個積極的方向置因為我們視線流不用折返

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

注：如果需要達到一個特定的目標如避免用戶退出應(yīng)用，我們作為設(shè)計師可以使用反向設(shè)計來達到我們的商業(yè)目的。

確認在左取消在右（用戶習(xí)慣依據(jù)）

如果在微軟平臺我們還是建議使用確認在左取消在右的，因為無論您遵循哪種設(shè)計規(guī)范都需要遵循統(tǒng)一的設(shè)計原則，如果全局都用的是確定在左取消在右，那么全局都應(yīng)該統(tǒng)一（除為了達到商業(yè)目的的反向設(shè)計）。

微軟培養(yǎng)的強大的使用習(xí)慣和交互體驗方面肯定是相沖的，如果非要糾結(jié)一個對錯，也只能找一個嬰兒沒有受到各種環(huán)境的影響來做對比統(tǒng)計了。究竟是確定在左還是右，無論哪種都應(yīng)該遵循各家的規(guī)范，以及全局的統(tǒng)一性，以商業(yè)目標去做設(shè)計，也就是我們所說的目標導(dǎo)向設(shè)計。