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