框 (dialogs) 是疊加在應(yīng)用主視圖上的彈出 (pop-up) 視圖，一般會(huì)要求用戶作出反應(yīng)。對話框可以分為模態(tài)對話框 (modal dialogs) 和非模態(tài)對話框 (modeless dialogs)。

模態(tài) (modality) 會(huì)阻止用戶完成當(dāng)前視圖上的任務(wù)，使用戶專注于模態(tài)視圖 (modal views) 里的新任務(wù)；只有當(dāng)模態(tài)視圖被終止后，用戶才能繼續(xù)完成之前的任務(wù)。

在下面的例子中，提示框阻止用戶繼續(xù)查看地圖，使用戶專注于提示；只有當(dāng)用戶輕點(diǎn) ok 后，用戶才能繼續(xù)查看地圖。提示框是 ios 中常見的模態(tài)視圖之一。

對話框一般由什么組成？

大部分對話框都由標(biāo)題、按鈕和說明文本組成。如果對話框允許用戶輸入或選擇，則還需相關(guān)控件。

標(biāo)題：對話框的標(biāo)題應(yīng)該簡潔易懂、一目了然。

按鈕：模態(tài)對話框上一般有兩個(gè)按鈕，一個(gè)是默認(rèn)按鈕（比如，“確認(rèn)”、“打印”、“清空回收站”），另一個(gè)是取消按鈕。它們應(yīng)當(dāng)給用戶清晰的選項(xiàng)。當(dāng)用戶點(diǎn)擊任何一個(gè)按鈕后，模態(tài)對話框就會(huì)關(guān)閉。為了提高熟練用戶的效率，我們應(yīng)該允許用戶按 esc 鍵終止對話框（效果和取消按鈕相同）。

說明文本：說明文本可以向用戶解釋對話框里的任務(wù)，它應(yīng)該清晰、避免重復(fù)信息。

什么是模態(tài)對話框？

當(dāng)模態(tài)對話框打開后，用戶不能繼續(xù)之前的任務(wù)，除非模態(tài)對話框被終止。

在設(shè)計(jì)交互界面時(shí)，我們應(yīng)該重視模態(tài)對話框的設(shè)計(jì)。設(shè)計(jì)良好的模態(tài)對話框可以幫助用戶更好的完成任務(wù)，而糟糕的模態(tài)對話框則會(huì)讓用戶感到沮喪。alan cooper 將模態(tài)對話框比作界面設(shè)計(jì)中的”配角“。因?yàn)槟B(tài)對話框會(huì)打斷用戶的心流 (flow)，所以主要的內(nèi)容和相關(guān)控件應(yīng)該放在主視圖中，而不是散布在不同的模態(tài)對話框中。此外，當(dāng)一個(gè)對話框?qū)盈B在另外一個(gè)對話框之上時(shí)，它們往往讓人摸不著頭腦。

△ 級聯(lián)對話框 (cascading dialogs) 往往令人困惑

為什么使用模態(tài)對話框？

如果使用得當(dāng)，模態(tài)對話框可以幫助用戶完成任務(wù)，創(chuàng)造良好的用戶體驗(yàn)。當(dāng)你有以下需求時(shí)，可以考慮使用模態(tài)對話框：

1. 獲取用戶的注意力

當(dāng)你希望用戶專注在一項(xiàng)重要的任務(wù)上時(shí)，你可能需要使用到模態(tài)對話框。盡管一定會(huì)打斷用戶，但很少有其他組件能像模態(tài)對話框一樣獲取用戶的全部注意力。模態(tài)對話框一般處于界面的最頂層的中間位置。用戶必須先處理模態(tài)對話框里的任務(wù)，然后才能去處理其他任務(wù)。因此，用戶不太可能錯(cuò)過它們。

在下圖的例子中，當(dāng)用戶刪除項(xiàng)目時(shí)，應(yīng)用啟動(dòng)了一個(gè)模態(tài)對話框向用戶確認(rèn)刪除操作。

2. 顯示次要內(nèi)容

本質(zhì)上，應(yīng)用都是為了幫助用戶訪問特定的內(nèi)容。比如，evernote 的內(nèi)容是筆記，而 spotify 的內(nèi)容是音樂。盡管有時(shí)很難對主要和次要內(nèi)容作出清晰劃分，但我們可以認(rèn)為用戶最感興趣、最關(guān)心、最頻繁訪問的是主要內(nèi)容，其他內(nèi)容則是次要內(nèi)容。

用戶為內(nèi)容而來。因此，主要內(nèi)容及相關(guān)的控件不應(yīng)當(dāng)出現(xiàn)在模態(tài)對話框中。對于桌面應(yīng)用而言，它們屬于應(yīng)用的主窗口 (main windows)；對于移動(dòng)應(yīng)用而言，它們屬于應(yīng)用的屏幕 (screens)；對于 web 應(yīng)用而言，它們屬于應(yīng)用的頁面 (pages)。在設(shè)計(jì)良好的信息架構(gòu)中，用戶總是能輕松地找到他們關(guān)心的內(nèi)容。

在屏幕大小有限的情況下，次要的內(nèi)容可以出現(xiàn)在模態(tài)對話框中。在特定語境 (context) 下，用戶將有機(jī)會(huì)打開這些對話框。比如，用戶在 aws ec2 的實(shí)例列表中選中實(shí)例、通過右鍵菜單點(diǎn)擊 「添加／編輯標(biāo)簽」后會(huì)打開一個(gè)模態(tài)對話框。用戶可以在這個(gè)對話框里查看、編輯實(shí)例的標(biāo)簽。如果用戶不想繼續(xù)查看、編輯標(biāo)簽，可以隨時(shí)關(guān)閉對話框并回到之前的界面。

有時(shí)，用戶需要在多個(gè)語境下打開同一個(gè)模態(tài)對話框。比如，除了上文中提到的右鍵菜單，用戶還可以點(diǎn)擊底部標(biāo)簽面板上的 「添加／編輯標(biāo)簽」按鈕打開同一個(gè)的模態(tài)對話框。不管通過哪種方式，用戶都可以快速地回到他們關(guān)心的主要內(nèi)容 —— aws ec2 的實(shí)例列表。

3. 隱藏復(fù)雜性

我們希望為用戶創(chuàng)造簡單、強(qiáng)大的應(yīng)用。在設(shè)計(jì)應(yīng)用時(shí)，我們需要小心謹(jǐn)慎地平衡這兩個(gè)目標(biāo)。相比移動(dòng)用戶，桌面用戶往往更習(xí)慣使用功能繁多的專業(yè)應(yīng)用，比如，powerpoint、photoshop、sourcetree。但除非他們已經(jīng)是有經(jīng)驗(yàn)的老用戶；否則，充斥著按鈕和專業(yè)詞匯的應(yīng)用界面就像是布滿地雷的戰(zhàn)場，會(huì)令新手們望而卻步。如果我們希望新用戶能更快上手、掌握基本功能，我們就必須想辦法把平時(shí)不常使用的的高級功能隱藏起來，幫助新用戶把注意力先放在主要內(nèi)容上。

我們可以把這些高級功能藏在模態(tài)對話框中。對于新用戶而言，模態(tài)對話框的好處主要體現(xiàn)在：

容易理解。模態(tài)對話框往往簡短易懂，新用戶可以快速完成對話框里的任務(wù)。

容易撤銷。如果新用戶一不小心通過按鈕或菜單打開了模態(tài)對話框，他們可以隨時(shí)點(diǎn)擊「取消」。

容易導(dǎo)航。因?yàn)橛脩羧钥煽吹侥B(tài)對話框下面的部分主視圖，他不會(huì)搞不清楚他在哪里。如果他不想繼續(xù)，可以隨時(shí)關(guān)閉對話框并回到之前的視圖。

什么是非模態(tài)對話框？

當(dāng)非模態(tài)對話框打開后，用戶可以專注于對話框里的次要任務(wù)，也可以繼續(xù)完成主視圖里的主要任務(wù)。

如果用戶需要頻繁地在主視圖和對話框、主要任務(wù)和次要任務(wù)之間切換，非模態(tài)對話框會(huì)比模態(tài)對話框更合適。但是，非模態(tài)對話框可能會(huì)令用戶困惑。這是因?yàn)?，盡管二者看起來非常相似，它們的行為卻不一樣，并難以預(yù)測。

舉個(gè)例子，在模態(tài)對話框中，當(dāng)用戶點(diǎn)擊了下方的按鈕后，對話框就會(huì)關(guān)閉。但是在非模態(tài)對話框中，當(dāng)用戶點(diǎn)擊了按鈕后，對話框不會(huì)立刻關(guān)閉。（除非用戶主動(dòng)點(diǎn)擊非模態(tài)對話框上的關(guān)閉控件。）

此外，因?yàn)榉悄B(tài)對話框不會(huì)隨著次要任務(wù)的結(jié)束而自動(dòng)關(guān)閉，未及時(shí)關(guān)掉的非模態(tài)對話框可能浪費(fèi)屏幕空間。在 page 中，用戶可以用一個(gè)非模態(tài)對話框在當(dāng)前打開的文檔里查找內(nèi)容。如果用戶不主動(dòng)關(guān)閉它，哪怕他不想繼續(xù)查找，這個(gè)對話框仍會(huì)出現(xiàn)在屏幕上。（當(dāng)用戶打開第二個(gè)文檔時(shí)，page 會(huì)關(guān)閉這個(gè)非模態(tài)對話框。用戶可以再次打開它。此時(shí)，這個(gè)非模態(tài)對話框的搜索范圍是當(dāng)前活躍窗口里的內(nèi)容。）

為了避免這些問題，我們可以考慮使用其他非模態(tài)組件替代非模態(tài)對話框，比如：面板 (panel)、側(cè)邊欄 (sidebar) 和工具欄 (toolbar)。比如，ulysses 用面板取代了非模態(tài)對話框。

名稱欄目：什么是對話框，及其對話框的作用與好處有哪些？
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/news/106313.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站營銷、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)