一篇文章搞懂如何做好對話框設(shè)計(jì)

一篇文章搞懂如何做好對話框設(shè)計(jì)篇關(guān)于對話框的深度解讀，希望對大家有所幫助。對話框是一種重要的交互方式，主要用于完成信息傳遞。對話框很常見，但并不見得每一個(gè)設(shè)計(jì)師都可以百分百地弄明白對話框這個(gè)概念。這篇文章是對「對話框」的一個(gè)簡單梳理和總結(jié)，希望可以解決大家心中的一些疑惑。一、了解對話框1.對話框定義對話框是疊加在應(yīng)用主窗口上的彈出式的窗口。對話框以對話的方式讓用戶參與進(jìn)來，在對話中它給出消息或要求輸入。當(dāng)用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對話框，之后，這個(gè)對話框便消失了，把應(yīng)用的主窗口交還給用戶。關(guān)于對話框的概念，以下是百度百科的解釋：對話框越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個(gè)特定的操作。2.對話框分類按照對話框的交互方式，可將其分為「模態(tài)[1]對話框」和「非模態(tài)對話框」。我們可以把他們看作是兩個(gè)小家族，模態(tài)家族的人比較強(qiáng)硬，而非模態(tài)家族的人相對溫柔一點(diǎn)。兩個(gè)家族的主要區(qū)別：是否強(qiáng)制用戶對其進(jìn)行回應(yīng)。1）模態(tài)對話框是位于瀏覽器的主頁面核心區(qū)域，需要用戶對它做出相應(yīng)交互，模態(tài)才會消失。而對話框會因?yàn)樽陨淼奈潭?、停留時(shí)間、信息量承載多少被劃分為多種對話框類型進(jìn)行區(qū)分，常見的對話框分別為：普通對話框、內(nèi)嵌表單對話框、分步表單對話框、文件選擇對話框、復(fù)雜信息展示對話框。何時(shí)使用模態(tài)對話框？①在重要的警告時(shí)使用，避免出現(xiàn)嚴(yán)重問題、或修正已出現(xiàn)的問題。例如：用戶錄入信息后未保存就要關(guān)閉時(shí)，彈出模態(tài)對話框提示用戶保存。②在需要用戶輸入信息或進(jìn)行某操作，才能繼續(xù)當(dāng)前流程的時(shí)候使用。例如：在使用Canva資源網(wǎng)站時(shí)，點(diǎn)擊“上傳”會彈出模態(tài)化的登錄/注冊窗口，引導(dǎo)登錄/注冊后使用。③用來將復(fù)雜流程拆分成簡單步驟。例如：Teambition-分步驟的模態(tài)對話框式創(chuàng)建項(xiàng)目。④用來獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。例如：在轉(zhuǎn)賬場景中，如果先復(fù)制一個(gè)賬號，打開手機(jī)銀行APP（以招商銀行或平安口袋銀行為例），系統(tǒng)會通過模式對話框詢問用戶是否向這個(gè)賬號轉(zhuǎn)賬，這樣的設(shè)計(jì)做到了預(yù)判用戶行為，節(jié)省用戶后面的操作成本。2）非模態(tài)對話框與模態(tài)完全相反，它更加溫和，不會強(qiáng)制打斷用戶正在進(jìn)行的現(xiàn)有流程，對用戶的干擾比較小。通常這類對話框只會在屏幕上短暫停留，幾秒就會消失，也因此用戶容易忽略它們的存在。因此非模態(tài)對話框不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。何時(shí)使用非模態(tài)對話框？①在獲取與當(dāng)前流程不必要信息的時(shí)候使用。例如：平安口袋銀行和平安數(shù)字口袋采用氣泡卡片展示更多功能或引導(dǎo)用戶登錄。②不打斷重要流程中使用。例如：在平安口袋銀行APP中購買理財(cái)時(shí)，如果遇到疑問的話，不會彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購買。簡單來說，兩者的優(yōu)缺點(diǎn)見下表：二、對話框常見應(yīng)用場景從前面講到的定義來看，對話框最主要的目的是：傳遞信息。那么從目標(biāo)導(dǎo)向的角度來看對話框，對話框要傳遞的信息的常見應(yīng)用場景主要有以下五種：1.屬性對話框?qū)傩詫υ捒蚴窍蛴脩舫尸F(xiàn)或讓用戶改變所選對象的屬性或者設(shè)置。一般來說，在屬性對話框中，用戶可以修改當(dāng)前的選擇，也可以設(shè)置應(yīng)用程序的全局屬性。該對話框適用于非頻繁操作和或僅需要設(shè)置一次的屬性，屬性對話框常見在一些設(shè)置、詳情中。例如：Windows11系統(tǒng)的設(shè)置界面，可設(shè)置系統(tǒng)的全局屬性。2.功能對話框功能對話框通常從菜單中打開，是最常見的模態(tài)對話框，只控制單一功能，如打印、文件上傳/導(dǎo)入、插入對象或拼寫檢查。該對話框不僅允許用戶啟動一個(gè)動作，而且也允許用戶設(shè)置動作的細(xì)節(jié)，屬于模態(tài)對話框。例如：瀏覽器的打印功能，會彈出模態(tài)化的打印窗口，用戶可設(shè)置打印的細(xì)節(jié)。例如：飛書的文檔導(dǎo)入功能，使用模態(tài)化對話框，引導(dǎo)用戶選擇文件類型或進(jìn)行批量導(dǎo)入操作。3.進(jìn)度對話框進(jìn)度對話框是由應(yīng)用程序啟動的，而不是由用戶請求而啟動的。它們向用戶表明當(dāng)前應(yīng)用正在忙于某些內(nèi)部功能，其他功能的處理能力可能會降低。每個(gè)進(jìn)度對話框都應(yīng)該向用戶清晰地展現(xiàn)如下信息：一個(gè)耗時(shí)的進(jìn)程正在進(jìn)行現(xiàn)在一切正常該進(jìn)行還有多長時(shí)間才能完成還有多少事情或項(xiàng)目沒有做完用戶如何才能取消該操作，或重獲控制權(quán)例如：使用Axure軟件導(dǎo)出html文件時(shí)的進(jìn)度提示，既提醒用戶當(dāng)前Axure正在運(yùn)行，又告知用戶當(dāng)前文件導(dǎo)出進(jìn)度。例如：使用Sketch軟件導(dǎo)出文件時(shí)的進(jìn)度提示。4.通知對話框通知對話框?qū)⒁恍┲匾畔?bào)告給用戶。來源可以是一些觸發(fā)的事件，也可以是其他用戶的通知。常見的有通知中心對話框，處理完成某個(gè)操作的告知等等。例如：花瓣的通知提醒。例如：脈脈的隱私政策閱讀提示和汽車之家的開啟通知提示，均采用模態(tài)對話框方式。5.公告對話框公告對話框，和進(jìn)度對話框一樣，由應(yīng)用程序直接啟動，不是由用戶請求發(fā)起的。公告對話框有三種：錯誤、警告、確認(rèn)。這種對話框通常不會要求用戶填寫什么，只會詢問你“真的要進(jìn)行嗎？”或者告訴你一件事情。所以在這種對話框上，一般只會有只有[取消]和[確認(rèn)]，或者[OK]。屬性、功能、進(jìn)度對話框，是用戶主動請求的–它們?yōu)橛脩舴?wù)。但是，應(yīng)用程序發(fā)起的公告對話框–它們?yōu)閼?yīng)用程序服務(wù)，常常會犧牲用戶利益。由于公告對話框比較常見且常常犧牲用戶利益，那么我們怎么把這些討厭且無用的公告對話框直接鏟除掉，換成更加友好、能給用戶帶來真正幫助的交互方式呢？接下來我們來一起看看怎么讓公告對話框“名聲鵲起”。三、怎么讓公告對話框“名聲鵲起”我們可以從應(yīng)用本身和對話框本身著手提供友好的交互方式，減少公告對話框的出現(xiàn)頻率。1.應(yīng)用方面解決用戶錯誤的方法不是指責(zé)用戶，讓用戶再認(rèn)真一些，或者給他們更多的指導(dǎo)練習(xí)，而應(yīng)該優(yōu)化應(yīng)用設(shè)計(jì)，讓犯錯變得困難。1）讓應(yīng)用變“聰明”，減少用戶犯錯①使用有界控件比如驗(yàn)證碼輸入框、數(shù)字鍵盤等。示例：登錄藍(lán)湖時(shí)的短信驗(yàn)證碼輸入框。示例：轉(zhuǎn)賬時(shí)輸入金額的數(shù)字鍵盤，金額大小的位數(shù)提示；平安口袋銀行的身份證號專屬鍵盤。②提高可見性，用戶可自主糾錯示例：輸錯密碼是一個(gè)很難避免的錯誤場景，語雀密碼登錄支持可見密碼，一來是考慮安全問題，二來在用戶輸錯的場景下可以打開眼睛，即可見密碼，減少出現(xiàn)錯誤頻率。③具備預(yù)判思維，在容易出錯的地方提供更方便的功能示例：在支付寶聊天窗輸入一串?dāng)?shù)字，支付寶發(fā)現(xiàn)這個(gè)問題后，提供了識別后直接轉(zhuǎn)賬的功能，預(yù)判了用戶的慣性，減少錯誤發(fā)生。Zoom–拉會前預(yù)設(shè)值在加入會議室的界面，提前選擇是否在進(jìn)入會議房間后“不自動連接語音”和“保持?jǐn)z像頭關(guān)閉”，有效避免忘記閉麥或者忘記關(guān)攝像頭就直接加入了線上會議的意外尷尬。2）讓操作可“復(fù)原”，提供撤銷功能在很多破壞性的操作都會二次進(jìn)行提醒，讓用戶確認(rèn)操作，比如說刪除操作。在刪除之前都會詢問用戶“你真的要刪除嗎？”想一想……你在看到這些提示的時(shí)候，是不是眼疾手快地按下那個(gè)「確認(rèn)」按鈕？這種對話框在沒有容錯處理時(shí)，非常容易被我們這種無腦按「確認(rèn)」的用戶釀成大錯。比如我只是想試試這個(gè)刪除，然后就把某個(gè)表幾千條辛苦寫了一個(gè)月的數(shù)據(jù)刪掉了，由此可見系統(tǒng)的容錯處理有多么重要。示例：Windows系統(tǒng)在早期的時(shí)候，刪除文件時(shí)會讓用戶進(jìn)行二次確認(rèn)，但這是完全沒必要的，因?yàn)閯h除文件不是真正的刪除，還會在回收站里面。Mac系統(tǒng)：在回收站刪除文件將是永久性刪除，此時(shí)的確認(rèn)對話框才是對用戶有用的。2.對話框設(shè)計(jì)方面從對話框本身的設(shè)計(jì)優(yōu)化出發(fā)，我們可以對話框的使用場景和文案方面著手進(jìn)行優(yōu)化設(shè)計(jì)。1）對話框使用場景其實(shí)什么時(shí)候使用對話框、是否使用取決于你要給用戶展示的信息是否重要。例如你在手機(jī)上買了一張電影票，支付失敗的結(jié)果如果用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發(fā)現(xiàn)自己購買失敗，那么用戶極有可能當(dāng)場卸載你的產(chǎn)品。模態(tài)彈框會打斷用戶當(dāng)前操作流程，所以「使用對話框要克制」?？傇瓌t是：能在界面展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框?？傊?，重要的信息優(yōu)先考慮使用對話框。具體的使用原則有：彈框使用盡量克制文字需要精簡，使用行為召喚動詞注意區(qū)分復(fù)雜任務(wù)和輕量任務(wù)，選擇對應(yīng)的彈框類型反饋要及時(shí)可使用引導(dǎo)幫助選擇2）清晰且友好的文案如果非要使用對話框，那么請使用友好尊重用戶的方式。當(dāng)我們說到人與人之間的交流時(shí)，語言是重要的媒介，而用戶與產(chǎn)品之間同樣如此。在設(shè)計(jì)過程中應(yīng)始終努力設(shè)計(jì)出有效的提示性文案，但是,一定是有比沒有要好嗎？個(gè)人認(rèn)為也是不必要的，糟糕的提示性文案甚至?xí)茐漠a(chǎn)品中最好的用戶體驗(yàn)。例如以下幾種情況：含糊不清過于啰嗦無意義，產(chǎn)生誤導(dǎo)無同理心因此糟糕的提示文案設(shè)計(jì)會誤導(dǎo)用戶在產(chǎn)品中采取不必要的操作,從而使他們感到生氣和困惑，甚至可能會破壞品牌對用戶的忠誠度，產(chǎn)生本末倒置的結(jié)果，也給用戶帶來不佳體驗(yàn)。所以，語言是使產(chǎn)品更加人性化的主要因素。產(chǎn)品的文案則充當(dāng)了語言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機(jī)的功能性關(guān)系轉(zhuǎn)化成人類的個(gè)人情感體驗(yàn)。而這種用戶的情感體驗(yàn)才能夠真正的彰顯品牌個(gè)性，從而與其他產(chǎn)品區(qū)分開來。錯誤提示設(shè)計(jì)三步法：盡可能準(zhǔn)確地描述問題和哪里出錯了，簡明易懂。提出建設(shè)性意見，解