2021-1-11 資深UI設(shè)計者
模態(tài)和非模態(tài)對話框是一種非常常用的用戶界面元素，將用戶的注意力轉(zhuǎn)移到子任務上。那么何時使用，二者又有哪些區(qū)別呢？
模態(tài)對話框會打斷用戶并要求采取措施。當需要將用戶的注意力轉(zhuǎn)移到重要信息上時，它們很合適。
為了更好地理解模態(tài)對話框和非模態(tài)對話框之間的區(qū)別，讓我們看看術(shù)語“對話”和“模態(tài)”的含義。
一個對話框（或對話）是指兩個人之間的對話。在用戶界面中，對話框是系統(tǒng)與用戶之間的“對話”，通常會向用戶請求信息或采取措施。
用戶界面模式是特殊狀態(tài)，其中同一系統(tǒng)具有一些不同的用戶界面。每種模式可能帶有不同的命令，或者相同的命令（或操作）可能會產(chǎn)生不同的結(jié)果，具體取決于系統(tǒng)的模式。換句話說，在不同的模式下，相同的輸入將具有不同的結(jié)果。例如，打開Caps Lock的計算機處于特殊模式：所有鍵入的字母都將顯示為大寫字母。打開或關(guān)閉大寫鎖定時，鍵入字母會有不同的效果?；蛘?，在Microsoft Word的“跟蹤更改”模式下，所有以前進行的編輯和注釋都是可見的（而在正常的默認模式下，不會對其進行跟蹤或顯示）。
通過對“模式”和“對話框”的了解，我們可以輕松定義模式對話框。
定義：一個模式對話框是一個對話框，在主要內(nèi)容和移動系統(tǒng)到需要用戶互動的一種特殊模式的頂部顯示。在用戶與模態(tài)對話框明確交互之前，此對話框?qū)⒔弥饕獌?nèi)容。
相反，非模式（或無模式）對話框和窗口不會禁用主要內(nèi)容：顯示對話框不會更改用戶界面的功能。對話框打開時，用戶可以繼續(xù)與主要內(nèi)容進行交互（甚至移動窗口，最小化窗口等）。
模態(tài)對話框最初旨在警告用戶錯誤或需要立即采取措施的其他系統(tǒng)狀態(tài)。在這些情況下，必須先中斷用戶才能解決錯誤。因此，將對話框放置在屏幕中間作為界面的焦點，使其非常有效。這種模式對話框的最大優(yōu)點是它們引起了用戶的注意，并允許他們認識到問題并迅速進行了糾正。
但是，這種原始用法已經(jīng)發(fā)展起來，現(xiàn)在出于合法或不太合法的原因，有說服力地使用了模態(tài)對話框和窗口來吸引用戶的注意。
這是模式對話框引起的一些常見問題：
他們需要立即關(guān)注。本質(zhì)上，模態(tài)窗口是強制性的，需要用戶立即采取行動。由于對話框?qū)⑾到y(tǒng)置于不同的模式，因此用戶只有在確認對話框后才能繼續(xù)進行操作。
它們中斷了用戶的工作流程。模態(tài)對話框迫使用戶擺脫他們最初正在處理的任務。每次中斷都會浪費時間和精力，這不僅是因為用戶必須對對話框進行尋址，而且還因為一旦他們恢復了原始任務，人們將不得不花費一些時間來恢復上下文。
它們使用戶忘記他們在做什么。一旦上下文切換到其他任務，由于模態(tài)對話框帶來的額外認知負擔，人們可能會忘記與原始任務相關(guān)的一些細節(jié)。在這種情況下，恢復原始任務的上下文可能會更加困難。
它們使用戶創(chuàng)建并解決了一個額外的目標-關(guān)閉對話框。出現(xiàn)對話框時，將向用戶的工作流程添加額外的步驟：讀取和理解對話框，然后對該對話框做出決定。除非對話理由充分并且確實包含重要信息，否則交互成本的這種增加可能會使用戶推遲。稍后我們將詳細說明這一點。
它們在后臺阻止內(nèi)容。當對話框出現(xiàn)在當前窗口的頂部時，它可以覆蓋重要內(nèi)容并刪除上下文。結(jié)果，當對話框詢問與剛剛被遮蓋的信息有關(guān)的問題時，對對話框的響應可能會變得更加困難。
由于這些缺點，模態(tài)對話框在用于非關(guān)鍵性活動時會出現(xiàn)問題。
什么時候使用模式對話框合適？以下是一些指南，可幫助您確定是否確實需要模式對話框。
1.使用模式對話框顯示重要警告，以防止或糾正嚴重錯誤。
只要有可能丟失用戶的工作或某個動作可能造成破壞性且不可逆轉(zhuǎn)的后果，請中斷用戶以避免災難。
要確定什么錯誤嚴重到足以引起模式對話框，請考慮以下事項：
如果將用戶的注意力從任務上移開，這個問題會更容易或更難解決嗎？如果可能的話，最好避免人為錯誤。但是，一旦發(fā)生錯誤，如果錯誤消息顯示在主要內(nèi)容中而不是模式對話框中，則可能更容易修復錯誤。例如，表單中的錯誤應在發(fā)生錯誤的頁面上報告，以便用戶在解決問題時可以參考錯誤消息。但是可以在模式對話框中顯示通知用戶她的計算機將在10秒后重新啟動，以確保用戶注意到該消息。
錯誤是不可逆的嗎？不可逆的錯誤通常會導致信息丟失，這對于復雜且耗時的任務尤其有害。例如，對于電子商務企業(yè)而言，未能將項目添加到購物車可能是一個不幸的錯誤，但如果用戶沒有注意到微妙的通知，則它不是不可逆的（如果他們確實想要該項目，他們可以重做其操作）。另一方面，覆蓋文件或無法保存對數(shù)百張幻燈片的更改都是不可逆的操作，因此非常需要中斷，并且經(jīng)常受到干擾。
Microsoft Powerpoint使用模式對話框來防止不可逆的錯誤或意外的用戶操作，例如在不保存工作的情況下退出應用程序。
Google Mail桌面應用程序：當用戶在郵件中包含“我已附加”或“請參閱附件”等關(guān)鍵短語后忘記附加文件時，將出現(xiàn)此模式對話框。此對話框可防止用戶錯誤（以及笨拙的后續(xù)電子郵件）。
當缺少信息會阻止系統(tǒng)繼續(xù)用戶啟動的過程時，模式對話框可以提示用戶輸入該信息。
如下所示，Etsy使用模態(tài)窗口中斷用戶的登錄信息（當該用戶試圖將某項保存到收藏夾列表中時）。
每當用戶嘗試執(zhí)行需要進一步步驟才能執(zhí)行的任務時，Etsy都會使用模式對話框。例如，當用戶嘗試將某個項目標記為“收藏夾”而用戶未登錄時，將出現(xiàn)一個對話框，以獲取執(zhí)行所需操作所需的信息。
對于工作流，更快并不總是更好。對于耗時且涉及精神（和情感）的任務，一次要索要大量信息可能是不堪重負的。在這些情況下，模態(tài)對話框可用于將復雜的信息分解為更簡單，更易消化的塊。向?qū)鞘褂媚B(tài)對話框的常見實例。
但是，必須注意的是，具有多個步驟的模式只會延長花費在主要任務上的時間，從而使用戶更有可能一開始就忘記自己在做什么。因此，如果您必須執(zhí)行多步驟模態(tài)，請讓用戶了解他們的進度，這樣他們就不會立即放棄。就是說，如果開始需要多個步驟，則可能有理由為其分配整頁。
當所請求或提供的信息相關(guān)時，模態(tài)可以有效地工作，或者可以簡化當前任務的完成。
就房地產(chǎn)網(wǎng)站Zillow.com而言，用戶無需帳戶或房地產(chǎn)經(jīng)紀人即可瀏覽物業(yè)列表。但是，當他們嘗試與代理商聯(lián)系以獲取列表時，站點將顯示一個模式對話框，詢問他們是否已經(jīng)有代理商。該信息對于立即進行下一步（聯(lián)系上市代理）并不重要，但在簡化未來的交互過程中仍然很有價值。該對話框使用漸進分析，并一次提出一個易于回答的問題。這些問題的承諾度很低，只關(guān)注相關(guān)細節(jié)。
Zillow.com在用戶提交有關(guān)特定列表的查詢后，要求用戶提供更多信息。詢問用戶此時是否有房地產(chǎn)經(jīng)紀人是有意義的點， 因為它減少了將來與其他代理進行冗余對話的機會。
漸進分析的關(guān)鍵在于它們遵循用戶對工作流程的期望-中斷僅在它們與當前任務相關(guān)或有幫助時才有幫助。
如上所述，模態(tài)對話框?qū)τ脩艟哂性S多缺點和成本。為了使這些費用合理，與任務和重要性的相關(guān)性應該很高。與用戶目標沒有直接關(guān)系的模態(tài)對話框被認為是令人討厭的，并且會減少對公司的信任。
此外，當非優(yōu)先信息以高優(yōu)先級格式（如模式對話框）顯示時，用戶將拒絕關(guān)注此格式的其他實例。這就像伊索寓言中的“哭狼的男孩”一樣-反復誤導他人將使他們在真正需要時不會給予您信任。
與普遍看法相反，郵件列表注冊雖然對于產(chǎn)生業(yè)務線索至關(guān)重要，但對用戶而言并不重要。在最近的一項網(wǎng)絡可用性研究中，我們聽到了與電子郵件通訊注冊有關(guān)的模態(tài)對話框的內(nèi)在鄙視。
GoodHousekeeping.com通過模式化的郵件列表對話框發(fā)揮了更大的作用-不僅停用了背景，而且還用全屏照片完全替換了背景，從而刪除了用戶在網(wǎng)站上的所有上下文。它也出現(xiàn)在用戶首次登陸網(wǎng)站首頁后的前3秒鐘內(nèi)，使用戶沒有時間從該頁面上收集任何值。該對話框要求的信息對于用戶或其工作流程而言并非必不可少，并且?guī)缀醪惶峁┥舷挛幕蚋兄膬r值。
Wayfair使用模式對話框來請求用戶指定應將該項目固定在哪個板上。另一個UI元素（例如主要內(nèi)容中的一個選項）將更適合于輸入此信息。底部：選定木板后，Wayfair使用模式對話框來要求用戶邀請朋友加入他們的木板-這對用戶來說不是必不可少的操作，并且會增加固定項目的交互成本。
結(jié)帳對用戶和企業(yè)都是高風險的過程：用戶希望確保該過程是安全和無錯誤的，而企業(yè)希望確保用戶遵循其購買決定。模態(tài)對話框（如果不需要的話）充其量會分散用戶的注意力，最壞的情況是削弱用戶的信心。
較早的Walmart.com版本使用模式對話框提示用戶在結(jié)帳期間登錄。最好的情況是，這種模式可能會分散用戶的注意力，并引導他們進行全面的搜索以查找Walmart.com密碼，而不僅僅是以訪客身份完成結(jié)帳。在最壞的情況下，用戶可能會感到他們被迫開設(shè)一個帳戶，而這又會影響購買決定。此后，沃爾瑪重新設(shè)計了其網(wǎng)站以刪除該模式對話框（但重新設(shè)計也完全刪除了訪客結(jié)帳，現(xiàn)在要求用戶擁有一個結(jié)帳帳戶-坦白地說，這令人反感）。
模態(tài)對話框應用于與用戶的簡短直接對話。如果模態(tài)要求用戶進行復雜的研究或咨詢其他信息源（可能被模態(tài)阻止），則該交互不是正確的UI元素。
邊境航空公司使用模式對話框促進基本航班的加價銷售。該對話框要求用戶決定花更多的錢，但是不允許他們訪問做出該決定所需的其他信息（例如，是否還有剩余的體面座位）。
在任務不是很關(guān)鍵的情況下，非模式對話框可能是合適的。非模式對話框的攻擊性不如模式對話框，因為它們允許用戶繼續(xù)其活動并在不相關(guān)時忽略它們。但是，它們?nèi)匀豢赡苁瞧茐男缘?，特別是如果它們使屏幕上的重要信息模糊不清或需要太復雜的交互。
此外，某些非模式對話框不能在設(shè)備和瀏覽器之間很好地轉(zhuǎn)換-例如，臺式機上的Chrome中的非模式窗口可能會在iPhone上的Safari中變?yōu)槟Ｊ酱翱?，例如下面的Meowbox.com。
在Meowbox.com桌面網(wǎng)站（左）上，主頁右下角顯示了用于時事通訊注冊的定時非模式對話框。但是，在網(wǎng)站的移動渲染（右）上，非模式窗口變?yōu)槿聊Ｊ酱翱?，迫使用戶在向前移動之前提供輸入。桌面版本允許輕松消除提示，而移動版本則不允許。
當用戶需要在模式之間快速切換以訪問某些信息時，非模式窗口非常有用。例如，Google Mail使用非模式窗口作為編寫新電子郵件的默認方法。用戶可以繼續(xù)打開此窗口，在不丟失電子郵件的情況下最小化編寫的電子郵件（或選擇將其最大化到模式窗口）。該單獨的視圖使用戶可以查找較舊的電子郵件或其他信息，這些信息可能有助于撰寫當前電子郵件。
Google Mail的非模式窗口使您可以輕松地在寫入和讀取信息之間進行切換。
涉及模式對話框時，請考慮以下問題：沒有人喜歡被打擾，但如果必須的話，請確保值得這樣做。
在使用對話框時，還有哪些需要注意的點呢？
謹慎使用對話框，因為它們會打斷他們。它們的突然出現(xiàn)迫使用戶停止其當前任務，并專注于對話框內(nèi)容。對于模式對話框，用戶必須先進行對話操作，然后才能繼續(xù)訪問下面的頁面。有時這是一件好事，例如，當用戶必須確認一項重要操作時（例如“您要刪除您的帳戶嗎？”），但是對于許多任務而言，這是不必要的，而且通常很煩人。
在需要用戶在繼續(xù)操作之前進行交互的情況下，或者當錯誤的代價可能很高時，使用對話框是最有意義的。
在用戶未做任何事情的情況下突然打開對話框是一個非常糟糕的主意。不幸的是，許多網(wǎng)站都用下面的示例用訂閱框轟炸了訪客。
用戶在頁面上執(zhí)行某項操作時，應該始終打開一個對話框。那可能是單擊按鈕，跟隨鏈接或選擇一個選項。
并非一切都值得中斷。
對話框的替代方法是內(nèi)聯(lián)擴展，可以幫助維護當前上下文。
不要只是彈出對話框。
對話框應該說出用戶的語言（使用用戶熟悉的單詞，短語和概念），而不是特殊的系統(tǒng)術(shù)語。
您應該使用清晰的語言寫問題。例如，當您要求用戶刪除她的文件時，而不是說“釋放存儲空間？” 問“您要刪除文件嗎？” 通常，您應該避免道歉，模棱兩可或諸如“警告！”之類的問題?；颉澳_定嗎？” 因為它們會帶來額外的視覺混亂。
避免為用戶提供含糊不清或不清楚的選項。您應該只使用清除選項。在大多數(shù)情況下，用戶應該能夠僅根據(jù)標題和按鈕文本來理解選擇。
錯誤的示例：在此示例中，輕蔑的操作文本“否”回答了問題，但沒有建議之后會發(fā)生什么。
很好的例子：平等權(quán)利行動文本“放棄”清楚地表明了決定的結(jié)果。
對話框不要遮蓋可能對用戶有用的信息，這一點很重要。例如，一個對話框，要求用戶確認某些項目的刪除，應列出要刪除的項目。
處理完成后，請記住顯示通知消息（或視覺反饋）。讓用戶知道她已經(jīng)完成了所有需要的工作。
在對話框中使用明確的問題和選項。
設(shè)計對話框以產(chǎn)生閉合。
操作后通知用戶。
您不應該試圖過多地塞入對話框。保持其干凈簡潔（遵循KISS原則）。但是極簡主義并不意味著有限。所有信息都應該是有價值的和相關(guān)的。
對話框永遠不應部分出現(xiàn)在屏幕上。您不應該使用包含滾動內(nèi)容的對話框。
錯誤的例子： 巴克萊銀行的付款處理對話框中有很多選項和元素，其中的一部分選項僅可通過滾動來使用（尤其是對于通常具有相對較小的屏幕區(qū)域的移動設(shè)備）。
很好的例子： Stripe使用簡單而智能的對話框，僅包含基本信息，這些信息在臺式機和移動屏幕上都看起來不錯。
對話框不應包含兩個以上的動作。第三項操作（例如“了解更多信息”）通常用于使用戶離開對話框，這增加了未完成任務的風險。
將復雜的任務劃分為多個步驟是一個好主意，但這通常也表明某些事情太復雜而無法要求用戶在對話框中完成。
如果交互足夠復雜，需要多個步驟（如下面的示例所示），那么它就足夠復雜，可以保證擁有自己的頁面。
通過刪除不需要的元素或不支持用戶任務的內(nèi)容來簡化對話框。
嘗試避免對話框包含多個步驟。
正如上面所介紹的，對話框有兩種主要類型。第一類是尋求注意力的模態(tài)對話框，它迫使用戶在繼續(xù)之前與他們進行交互。模態(tài)對話框通常用于離散的阻塞過程，需要顯式的“接受”或“取消”操作才能將其關(guān)閉。單擊其外部區(qū)域時，它不會關(guān)閉。第二種類型是非模式對話框，允許用戶在其外部單擊或點擊以將其關(guān)閉。
您僅應將模式對話框（第一種類型）用于非常重要的交互（例如，刪除帳戶，同意條款和條件）。
系統(tǒng)對話框也是模態(tài)對話框，通常具有以下基本元素-內(nèi)容，操作和標題。
打開對話框時，重要的一點是要使后面的頁面稍微變暗。這有兩個工作。首先，它通過對話框吸引人們關(guān)注疊加層；其次，它使用戶知道該頁面當前未處于活動狀態(tài)。
但是要注意著色。如果您將其設(shè)置得太暗，則用戶將無法再在后臺看到頁面。如果將其設(shè)置得太淺，則用戶可能會認為該頁面仍處于活動狀態(tài)，甚至可能根本沒有注意到對話框。
右上角的對話框應該有關(guān)閉選項。許多對話框在窗口的一角都有一個“ x”按鈕，用戶可用來退出該窗口。但是，對于普通用戶而言，此“ x”按鈕并不是一個容易的逃生路線。單擊“ x”通常會花費更多的時間和精力，因為它的尺寸較小，用戶必須發(fā)現(xiàn)并單擊（點擊）它。
允許用戶單擊非模式窗口時，可以退出非模式窗口，這是一個好主意。
對話框應避免啟動其他對話框，因為它們增加了視覺上的復雜性。
大多數(shù)情況下，允許用戶單擊（或點擊）以關(guān)閉對話框（模態(tài)對話框除外）。
對話框應避免啟動其他簡單對話框。
模態(tài)和非模態(tài)對話框都非常有用，可以請求或鼓勵用戶參與。在決定這兩種類型的對話框時，請考慮用戶上下文和工作流程。避免不必要地打擾用戶并中斷他們的工作流程。使用戶更容易解決問題并實現(xiàn)目標。如果公司希望朝著業(yè)務目標持續(xù)發(fā)展，則在這些設(shè)計決策中必須優(yōu)先考慮用戶目標。
涉及模式對話框時，請考慮以下問題：沒有人喜歡被打擾，但如果必須的話，請值得確保這樣做。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務
藍藍設(shè)計的小編 http://sillybuy.com