5 分鐘交互設計指南:對話框

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

模態 (modality) 會阻止用戶完成當前視圖上的任務,使用戶專註於模態視圖 (modal views) 里的新任務;只有當模態視圖被終止後,用戶才能繼續完成之前的任務。

在下面的例子中,提示框阻止用戶繼續查看地圖,使用戶專註於提示;只有當用戶輕點 OK 後,用戶才能繼續查看地圖。提示框是 iOS 中常見的模態視圖之一。


對話框一般由什麼組成?

大部分對話框都由標題、按鈕和說明文本組成。如果對話框允許用戶輸入或選擇,則還需相關控制項。

  • 標題:對話框的標題應該簡潔易懂、一目了然。
  • 按鈕:模態對話框上一般有兩個按鈕,一個是默認按鈕(比如,「確認」、「列印」、「清空回收站」),另一個是取消按鈕。它們應當給用戶清晰的選項。當用戶點擊任何一個按鈕後,模態對話框就會關閉。為了提高熟練用戶的效率,我們應該允許用戶按 Esc 鍵終止對話框(效果和取消按鈕相同)。
  • 說明文本:說明文本可以向用戶解釋對話框里的任務,它應該清晰、避免重複信息。

什麼是模態對話框?

當模態對話框打開後,用戶不能繼續之前的任務,除非模態對話框被終止。

在設計交互界面時,我們應該重視模態對話框的設計。設計良好的模態對話框可以幫助用戶更好的完成任務,而糟糕的模態對話框則會讓用戶感到沮喪。Alan Cooper 將模態對話框比作界面設計中的」配角「。因為模態對話框會打斷用戶的心流 (flow),所以主要的內容和相關控制項應該放在主視圖中,而不是散布在不同的模態對話框中。此外,當一個對話框層疊在另外一個對話框之上時,它們往往讓人摸不著頭腦。

級聯對話框 (Cascading Dialogs) 往往令人困惑


為什麼使用模態對話框?

如果使用得當,模態對話框可以幫助用戶完成任務,創造良好的用戶體驗。當你有以下需求時,可以考慮使用模態對話框:

1. 獲取用戶的注意力

當你希望用戶專註在一項重要的任務上時,你可能需要使用到模態對話框。儘管一定會打斷用戶,但很少有其他組件能像模態對話框一樣獲取用戶的全部注意力。模態對話框一般處於界面的最頂層的中間位置。用戶必須先處理模態對話框里的任務,然後才能去處理其他任務。因此,用戶不太可能錯過它們。

在下圖的例子中,當用戶刪除項目時,應用啟動了一個模態對話框向用戶確認刪除操作。

2. 顯示次要內容

本質上,應用都是為了幫助用戶訪問特定的內容。比如,Evernote 的內容是筆記,而 Spotify 的內容是音樂。儘管有時很難對主要和次要內容作出清晰劃分,但我們可以認為用戶最感興趣、最關心、最頻繁訪問的是主要內容,其他內容則是次要內容。

用戶為內容而來。因此,主要內容及相關的控制項不應當出現在模態對話框中。對於桌面應用而言,它們屬於應用的主窗口 (main windows);對於移動應用而言,它們屬於應用的屏幕 (screens),對於 Web 應用而言,它們屬於應用的頁面 (pages)。在設計良好的信息架構中,用戶總是能輕鬆地找到他們關心的內容。

在屏幕大小有限的情況下,次要的內容可以出現在模態對話框中。在特定語境 (context) 下,用戶將有機會打開這些對話框。比如,用戶在 AWS EC2 的實例列表中選中實例、通過右鍵菜單點擊 「添加/編輯標籤」 後會打開一個模態對話框。用戶可以在這個對話框里查看、編輯實例的標籤。如果用戶不想繼續查看、編輯標籤,可以隨時關閉對話框並回到之前的界面。

有時,用戶需要在多個語境下打開同一個模態對話框。比如,除了上文中提到的右鍵菜單,用戶還可以點擊底部標籤面板上的 「添加/編輯標籤」 按鈕打開同一個的模態對話框。不管通過哪種方式,用戶都可以快速地回到他們關心的主要內容 —— AWS EC2 的實例列表。

3. 隱藏複雜性

我們希望為用戶創造簡單、強大的應用。在設計應用時,我們需要小心謹慎地平衡這兩個目標。相比移動用戶,桌面用戶往往更習慣使用功能繁多的專業應用,比如,PowerPoint、Photoshop、SourceTree。但除非他們已經是有經驗的老用戶;否則,充斥著按鈕和專業辭彙的應用界面就像是布滿地雷的戰場,會令新手們望而卻步。如果我們希望新用戶能更快上手、掌握基本功能,我們就必須想辦法把平時不常使用的的高級功能隱藏起來,幫助新用戶把注意力先放在主要內容上。

我們可以把這些高級功能藏在模態對話框中。對於新用戶而言,模態對話框的好處主要體現在:

  1. 容易理解。模態對話框往往簡短易懂,新用戶可以快速完成對話框里的任務。
  2. 容易撤銷。如果新用戶一不小心通過按鈕或菜單打開了模態對話框,他們可以隨時點擊 「取消」。
  3. 容易導航。因為用戶仍可看到模態對話框下面的部分主視圖,他不會搞不清楚他在哪裡。如果他不想繼續,可以隨時關閉對話框並回到之前的視圖。

什麼是非模態對話框?

當非模態對話框打開後,用戶可以專註於對話框里的次要任務,也可以繼續完成主視圖裡的主要任務。

如果用戶需要頻繁地在主視圖和對話框、主要任務和次要任務之間切換,非模態對話框會比模態對話框更合適。但是,非模態對話框可能會令用戶困惑。這是因為,儘管二者看起來非常相似,它們的行為卻不一樣,並難以預測。

舉個例子,在模態對話框中,當用戶點擊了下方的按鈕後,對話框就會關閉;但是在非模態對話框中,當用戶點擊了按鈕後,對話框不會立刻關閉。(除非用戶主動點擊非模態對話框上的關閉控制項。)

此外,因為非模態對話框不會隨著次要任務的結束而自動關閉,未及時關掉的非模態對話框可能浪費屏幕空間。在 Page 中,用戶可以用一個非模態對話框在當前打開的文檔里查找內容。如果用戶不主動關閉它,哪怕他不想繼續查找,這個對話框仍會出現在屏幕上。(當用戶打開第二個文檔時,Page 會關閉這個非模態對話框。用戶可以再次打開它。此時,這個非模態對話框的搜索範圍是當前活躍窗口裡的內容。)

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


參考資料

  1. Alan Cooper, About Face (4th edn, Wiley 2014)
  2. Human Interface Guidelines
  3. 通用 Windows 平台 (UWP) 應用的內容設計基礎知識
  4. Dialogs - Components - Material Design

推薦閱讀:

矽谷之路 56:產品經理之路(三)
產品經理的面試,是不是一定要刻意強調目標用戶、需求等等這樣的字眼?
產品經理的周報都有哪些內容?
工作辛苦,你還開心嗎?

TAG:交互设计 | 产品经理 | 用户体验设计 |