今天分享的內容是app 的「對話框」如何影響我們使用（甚至流氓軟體如何利用它來阻止我們下載），希望能為你帶來啟發。
在使用移動產品時，經常會遇到一個經典界面——對話框。優秀的對話框有助用戶理解產品，並在關鍵節點幫助用戶作出正確選擇。而糟糕的對話框則會「幫倒忙」。
本文將重點談談我對「對話框」的觀察，並告訴大家它將如何影響我們日常使用。
目錄：
對話框如何影響我們的使用？（親身經歷）影響對話框的 3 個因素如何避免和利用「失誤」一、「心驚膽寒」的選擇春節與友相聚。他是海量，我知其酒後不可開車，就用某個代駕服務來幫他開車。此前我用過該服務，但因為很少喝酒，早就卸載了 app 改用微信服務號。對其操作不太熟悉，也因此出現了這麼一段經歷：
春節約代駕不易，搶了數次才成，司機電話打來確認定位，曰等半刻便至。
與朋友在車邊等候時，一個不慎，誤觸「取消」。彈出一個界面問：是否取消？
我當然不要取消了！
但是，此時卻遇到一個難題。竟將我們幾人酒意嚇得半醒——
界面畫風如下：
此時的界面，宛如一道充滿哲學智慧的兩難選擇題。
這個選擇不僅關乎我們能否保住辛苦搶來的代駕，也關乎我們能否在寒冬順利回家，更關乎我作為一個互動設計師的尊嚴……
通常來說，在互動設計邏輯中，二選一是最簡單的，無非是 Yes or No。但此時的情況卻很複雜：
推測 a
如果按「彈窗標題」與「選擇的答案」關聯來看：
結論：
但是經驗告訴我，產品設計者的意思也可能是：
推測 b
如果按彈窗的一般原則來說，這個「繼續」應該指「Yes」，而「取消」應該指「No」，而 Yes 和 No 的描述對象應該是指「是否取消訂單？」。
結論：
繼續 = Yes，是的，取消（約司機）取消 = No，不要取消，繼續（約司機）你這樣講，好像也很有道理的樣子呀？
等等！繼續 = 取消？取消 = 不要取消？為什麼感覺到哪裡不太對？
來，我們一起再看看這個神奇的界面，你能肯定地說出它就代表哪個意思嗎？
朋友們都笑了，說你丫想太多了！我們不能取消訂單！小明以迅雷不及掩耳盜鈴之勢，果斷出手，將「繼續」點了下去。
……
界面顯示：我們的訂單被取消了。
取消了……
誤操作在用戶交互過程中是很常見的，如何將誤操作的損失降低至最小，是我們應該思考的問題。長久以來其實我們常常會遇到這些「小問題」，不過一笑而過罷了。
但有時間，它不是一個小問題：
二、發生了什麼？對話框的幾個小問題本文中提到的這個「彈窗」，標準名稱是「對話框」，是人機互動中的重要概念。在 Wiki 中的定義是：
……對話框是圖形用戶界面中一種特殊的視窗, 用來向用戶顯示信息以獲得用戶的響應，使計算機和用戶之間構成了一個對話——以提供警告、通知、請求用戶授權操作、或請求用戶的輸入等。
早期的 Windows 圖形界面中，對話框一般長這個樣子：
圖：Windows 對話框 via UCDC 163
1. 文字描述的問題選擇性對話框通常是由一個肯定事件 一個否定事件（即與肯定的事件對立）共同組成，通過選擇點擊按鈕來實現事件執行。
肯定事件不一定是積極的，也可能是消極的，或者破壞性的，比如刪除、格式化等。以 Windows 為例，通常用「是」/「否」（Yes / No）來表示肯定和否定，如上圖。
但有時候也用「確定」/「取消」（OK / Cancel）來表示，如下圖。
如果一直就用「是」/「否」兩選一，估計出錯反而低一些，比如：
你確定刪除是這個文件嗎？
是 | 否
你確定要退出？
確定 | 取消
你確定要移動這個文件嗎？
是 | 否
看上去沒有問題，對嗎？
以上例子中：
是 = 確定（肯定事件，繼續當前動作）否 = 取消（否定事件，中止當前動作）接下來這個對話框中，新的情況出現了：
原本「是」對應「否」，「確定」對應「取消」，現在卻變成了三個同時出現，而且分別代表不同的意思：
是 = 保存否 = 不保存取消 = 中止當前動作（等同於右上角的紅叉）這種由簡單的「是」或「否」式的按鈕文字表述，不能精確指向操作動作，需要用戶在腦中理解翻譯。於是，在圖形界面的發展過程中逐漸出現了「用事件本身」來描述按鈕。比如這樣：
伴隨著移動網際網路的來臨，人們要在小小的屏幕上完成一系列複雜操作，這對互動設計和產品體驗提出了更高的要求，而上文中所用的「用事件本身」描述的原則被逐漸保留下來。
下圖是移動界面中的一些對話框示範。
進而又變化出更多的形式（下圖），但無論如何，都是以「描述得更精準」為目標。
但究竟如何才算「描述得更精準」呢？難道取決於設計人員或者開發人員的文字功底嗎？
Google 的 Material Design 原則中有非常優秀的定義，這也是我近年看到最好的設計指導。
圖源：Google Design
在這個官方的例子中，明確地定義了什麼是「好的描述」：
The affirmative action text 「Discard」 clearly indicates the outcome of the decision.
合理的文字描述應該呈現是的選擇所帶來的結果（而不僅僅是描述選擇本身）。
同時，文檔中還對標題的提出了明確的要求：必須描述清楚這個行為，以及行為所帶來的影響。
界面中的文字，絕不是修辭問題，而是事關信息傳遞是否正確的問題。
據以上的內容，我們可以定義出按鈕文字的正確原則：「能描述行為本身，以及行為將帶來的結果」。要避免 UI 界面的文字描述失誤，最重要的是遵照正確的原則。
2. 按鈕布局排序問題你可能注意到了，Windows 的「肯定」行為在左，「否定」在右。
而 macOS 的布局排序似乎與此相反？
我沒有找到 Windows 按鈕布局排序的原因說明，也無法解釋為是什麼 Windows 的對話框的「肯定」行為是在左邊。
但就江湖故事來推理的話，早年 Windows 大量抄襲了 macOS 的系統界面，但又不好意思全盤抄襲，於是來了個全盤大鏡像，這也就是為什麼它們的窗口關閉/最小化這些按鈕一家在左上角，一家在右上角的原因……
而考慮到 macOS 的界面又來源於 Xerox，所以這事也沒法細說……
圖：Xerox 8100 的界面 via COOLSHELL
為什麼我要這樣在意布局排序的問題？
這涉及到交互的一致性原則，我認為一致性是產品設計中最重要的原則之一：人的認知是有慣性的，在同一套系統裡，相關屬性應該保持一致，能大大降低用戶的學習成本，減輕記憶負擔。（相關屬性包括但不限於顏色、尺寸、形狀、位置、層級關係、形式等）
比如：家裡所有的冷熱水龍頭，都應該保持左熱右冷的方向一致原則，我們使用起來就會很方便。試想一下，家裡所有的冷熱水管都接反了——其實還好，稍為適應一下就會習慣。
最糟糕的情況是，只有部分龍頭的冷熱水管被裝反了——這將嚴重的破壞方向一致原則，使我們無法無法習慣操作所有的龍頭。
同理，當我們使用 app 時，這種一致性會幫助我們快速反應。
圖：iOS、Android 也繼承 Unix 系的布局原則：肯定行為在右，否定行為在左。
Material Design 裡也對布局做了進一步規範：
Affirmative actions are placed on the right side and continue the process.
當然，移動系統的早期階段，也經歷了一段時間的混亂期 —— 不同的系統的按鈕布局排序時而在左，時而在右。
下圖分別是 Windows Phone、黑莓、iOS 8，針對同一問題的對話框界面。
Windows Phone 保持了 Windows 的一致性習慣，「肯定」行為在右側；黑莓繼承了 Unix 系的布局原則，「肯定」行為在右。
而 iOS 竟然採用了採取了「肯定」行為在左，與 macOS 相反。後來這個問題在 iOS 10 的更新修正了：將「肯定」行為操作用改至右側，並將「破壞」行為使用了紅色警示。如下圖所示：
圖：iOS 8 與 iOS 10 的對話框按鈕布局改變
當我們學習和使用這些原則時，應該理解原則背後的精髓，而不是表象。從設計和體驗的創新來講，形式可以千變萬化，但是在同一系統內，這些變化應該遵守同樣的原則。
比如在這個設計中，「取消」沒有採用「按鈕」而是使用了「X」形的圖標——但只要整個 app 中保持統一的範式，同樣符合一致性原則，並不會造成用戶的困擾。
圖：水滴清單的草稿版本
如果突然破壞了這種位置一致性，就很容易造成操作失誤。一般常見於新手互動設計師，在排放按鈕時很容易出現這種問題。
有時候，破壞一致性原則的問題不僅是新手會犯，在一些成熟產品中偶爾也會遇到。比如在微信中就有這樣的矛盾：
微信朋友圈的「刪除已發表消息」不符合「肯定行為放右側」的原則，與「微信電話本刪除聯繫人」和「群成員刪除」的對話框布局也是相反的。
圖：微信對話框中的一致性矛盾
進一步查看的話，會發現「通訊錄」Tag 編輯的放棄界面，以及「收藏」的編輯放棄界面中，「肯定」行為在右，與「朋友圈」消息刪除的「肯定」行為在左也是不一致的。如下圖：
同時，在「微信」產品內部，各個子功能所採用的刪除界面，與聊天內容的刪除界面形式不一致，提問標題與選項的文字描述也不一致，如下圖：
而在 Android 版微信中，上圖的兩個界面風格卻是一致的，按鈕布局也是一致的。在此不再列舉圖例。
定義具有一致性的原則的好處就是：在交互的細節優化和查錯過程中，僅靠「細心」肯定是不夠的，一定是通過「原則」來排查。
當定義了控制項和布局的規範，就能避免按鈕排布的失誤。
3. 按鈕聚焦的問題這個世界有許多人是選擇困難症——特別是在今天這樣一個物質豐富，信息過載的時代。要確保用戶少犯錯的另一種方法就是：永遠不要將用戶置於並列選擇的困境之中。
圖：並列選擇帶來的困擾
因此，在對話框或者選擇界面中，不要給用戶提供形式、色彩、灰度相似的選項。而是引導用戶注意到目標選項。這裡有些典型的例子。
用線框差異聚焦目標元素：
用色塊差異聚焦目標元素：
用字重差異聚焦目標元素：
用按鈕形式差異聚焦目標元素：
用色彩差異聚焦目標元素：
通過具有差異性的按鈕，突出用戶「應該做」的行為，引導用戶按產品設計邏輯進行處理，同時也能減少誤操作。讓用戶在使用過程中按預設流程流暢操作，避免不必要的辨認和理解。
三、如何避免和創造差錯？設計領域最有影響力的心理學家諾曼提到「差錯」最重要的兩種形式是「錯誤」(mistake) 和「失誤」(slip)，並將失誤細分為 7 種情況，有興趣的朋友閱讀其經典著作《the Design of Everyday Things》（設計心理學）。
我們在交互過程中的差錯通常都是由「失誤」引起的，即目標正確，但執行過程出錯。（錯誤則相反），而失誤通常都是由下意識、誤操作引起。
在第 2 部分，我歸納了 3 個問題，分別是「文字描述」、「布局排序」、「選項聚焦」，如果能將這 3 個層級的一致性處理好，在交互過程中將能有效改善對話框引發失誤的情況。
下面，來點刺激的：
如果我們將這三種形式組合，反向思考，就能「創造」出各種失誤——比如在連續操作環節中，將一直在右邊的「確定」突然換到左邊（布局排序），或者將用戶不想操作的按鈕故意強調（按鈕聚焦），故意使用混淆的文字等。
是否感覺到很熟悉？很多流氓軟體都用這些方法來阻止你卸載。
打亂布局一致性創造失誤：
利於聚焦創造失誤：
描述混淆，再加上讓我永生難忘的「臨門一腳」：
註：現在很少使用 Win 系統所以沒找到上文所述的無恥界面，因此繪製線稿說明。如果你能電腦有類似的誤導操作界面，歡迎截屏分享，直接發到我的微信公眾號「田飛」。
最後最後，讓我們回到一開始的「慘痛代駕故事」。事後，我終於反應了過來——當時最好的選擇就是：什麼也不做。
交互的難處就在於它所服務的人，具有分類太複雜，多樣化的特點——很難有一種真正適合所有人的原則，最終決定都是針對自己的產品和目標人群，趨利避害，做出最優選擇。
回到當時的場景，你覺得這個對話框應該如何設計呢？
PS：原本想寫「失誤」這個話題的，但這個概念太廣了，於是縮焦到「對話框失誤」這個更小的命題上。我想做的是儘量避免術語名詞，用自己的理解來解釋和重現觀察。
文中所提到的定義和問題，部分屬於推薦和猜想，不具學術考據的標準。而文末提到的幾個反例所涉及的設計道德問題，則又是另一個話題了。
作者：田飛，MindStore 周榜冠軍「水滴清單」創始人，其作品「方片收集」被評為蘋果 2016 年度精選應用。
來源：http://www.ifanr.com/app/786607
本文來源於人人都是產品經理合作媒體@愛範兒，作者@田飛