5分鐘交互設(shè)計(jì)指南系列對話框
框 (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)視圖被停止后,用戶才能繼承完成之前的義務(wù)。
在下面的例子中,提醒框阻止用戶繼承查看地圖,使用戶專注于提醒;只有當(dāng)用戶輕點(diǎn) OK 后,用戶才能繼承查看地圖。提醒框是 iOS 中常見的模態(tài)視圖之一。
對話框一樣平常由什么組成?
大部分對話框都由題目、按鈕和說明文本組成。假如對話框許可用戶輸入或選擇,則還需相干控件。
- 題目:對話框的題目應(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)閉。為了進(jìn)步諳練用戶的服從,我們應(yīng)該許可用戶按 Esc 鍵停止對話框(結(jié)果和取消按鈕雷同)。
- 說明文本:說明文本可以向用戶詮釋對話框里的義務(wù),它應(yīng)該清晰、避免重復(fù)信息。
什么是模態(tài)對話框?
當(dāng)模態(tài)對話框打開后,用戶不能繼承之前的義務(wù),除非模態(tài)對話框被停止。
在設(shè)計(jì)交互界面時(shí),我們應(yīng)該正視模態(tài)對話框的設(shè)計(jì)。設(shè)計(jì)優(yōu)秀的模態(tài)對話框可以幫助用戶更好的完成義務(wù),而糟糕的模態(tài)對話框則會(huì)讓用戶感到沮喪。Alan Cooper 將模態(tài)對話框比作界面設(shè)計(jì)中的”配角“。由于模態(tài)對話框會(huì)打斷用戶的心流 (flow),所以重要的內(nèi)容和相干控件應(yīng)該放在主視圖中,而不是散布在不同的模態(tài)對話框中。此外,當(dāng)一個(gè)對話框?qū)盈B在另外一個(gè)對話框之上時(shí),它們每每讓人摸不著頭腦。
△ 級(jí)聯(lián)對話框 (Cascading Dialogs) 每每令人疑心
為什么使用模態(tài)對話框?
假如使用得當(dāng),模態(tài)對話框可以幫助用戶完成義務(wù),創(chuàng)造優(yōu)秀的用戶體驗(yàn)。當(dāng)你有以下需求時(shí),可以考慮使用模態(tài)對話框:
1. 獲取用戶的細(xì)致力
當(dāng)你盼望用戶專注在一項(xiàng)緊張的義務(wù)上時(shí),你可能必要使用到模態(tài)對話框。盡管肯定會(huì)打斷用戶,但很少有其他組件能像模態(tài)對話框一樣獲取用戶的悉數(shù)細(xì)致力。模態(tài)對話框一樣平常處于界面的最頂層的中心位置。用戶必須先處理模態(tài)對話框里的義務(wù),然后才能行止理其他義務(wù)。因此,用戶不太可能錯(cuò)過它們。
在下圖的例子中,當(dāng)用戶刪除項(xiàng)目時(shí),應(yīng)用啟動(dòng)了一個(gè)模態(tài)對話框向用戶確認(rèn)刪除操作。
2. 表現(xiàn)次要內(nèi)容
本質(zhì)上,應(yīng)用都是為了幫助用戶訪問特定的內(nèi)容。比如,Evernote 的內(nèi)容是筆記,而 Spotify 的內(nèi)容是音樂。盡管偶然很難對重要和次要內(nèi)容作出清晰劃分,但我們可以認(rèn)為用戶最感愛好、最關(guān)心、最頻繁訪問的是重要內(nèi)容,其他內(nèi)容則是次要內(nèi)容。
用戶為內(nèi)容而來。因此,重要內(nèi)容及相干的控件不應(yīng)當(dāng)出如今模態(tài)對話框中。對于桌面應(yīng)用而言,它們屬于應(yīng)用的主窗口 (main windows);對于移動(dòng)應(yīng)用而言,它們屬于應(yīng)用的屏幕 (screens);對于 Web 應(yīng)用而言,它們屬于應(yīng)用的網(wǎng)頁 (pages)。在設(shè)計(jì)優(yōu)秀的信息架構(gòu)中,用戶總是能輕松地找到他們關(guān)心的內(nèi)容。
在屏幕大小有限的情況下,次要的內(nèi)容可以出如今模態(tài)對話框中。在特定語境 (context) 下,用戶將有機(jī)會(huì)打開這些對話框。比如,用戶在 AWS EC2 的實(shí)例列表中選中實(shí)例、通過右鍵菜單點(diǎn)擊 「添加/編輯標(biāo)簽」后會(huì)打開一個(gè)模態(tài)對話框。用戶可以在這個(gè)對話框里查看、編輯實(shí)例的標(biāo)簽。假如用戶不想繼承查看、編輯標(biāo)簽,可以隨時(shí)關(guān)閉對話框并回到之前的界面。
偶然,用戶必要在多個(gè)語境下打開統(tǒng)一個(gè)模態(tài)對話框。比如,除了上文中提到的右鍵菜單,用戶還可以點(diǎn)擊底部標(biāo)簽面板上的 「添加/編輯標(biāo)簽」按鈕打開統(tǒng)一個(gè)的模態(tài)對話框。不管通過哪種體例,用戶都可以快速地回到他們關(guān)心的重要內(nèi)容 —— AWS EC2 的實(shí)例列表。
3. 隱蔽復(fù)雜性
我們盼望為用戶創(chuàng)造簡單、壯大的應(yīng)用。在設(shè)計(jì)應(yīng)用時(shí),我們必要警惕鄭重地平衡這兩個(gè)目標(biāo)。相比移動(dòng)用戶,桌面用戶每每更風(fēng)俗使勤奮能繁多的專業(yè)應(yīng)用,比如,PowerPoint、Photoshop、SourceTree。但除非他們已經(jīng)是有經(jīng)驗(yàn)的老用戶;否則,充斥著按鈕和專業(yè)詞匯的應(yīng)用界面就像是布滿地雷的戰(zhàn)場,會(huì)令新手們望而生畏。假如我們盼望新用戶能更快上手、掌握基本功能,我們就必須想辦法把平時(shí)不常使用的的高級(jí)功能隱蔽起來,幫助新用戶把細(xì)致力先放在重要內(nèi)容上。
我們可以把這些高級(jí)功能藏在模態(tài)對話框中。對于新用戶而言,模態(tài)對話框的益處重要表現(xiàn)在:
- 容易理解。模態(tài)對話框每每簡短易懂,新用戶可以快速完成對話框里的義務(wù)。
- 容易撤銷。假如新用戶一不警惕通過按鈕或菜單打開了模態(tài)對話框,他們可以隨時(shí)點(diǎn)擊「取消」。
- 容易導(dǎo)航。由于用戶仍可看到模態(tài)對話框下面的部分主視圖,他不會(huì)搞不清楚他在哪里。假如他不想繼承,可以隨時(shí)關(guān)閉對話框并回到之前的視圖。
什么是非模態(tài)對話框?
當(dāng)非模態(tài)對話框打開后,用戶可以專注于對話框里的次要義務(wù),也可以繼承完成主視圖里的重要義務(wù)。
假如用戶必要頻繁地在主視圖和對話框、重要義務(wù)和次要義務(wù)之間切換,非模態(tài)對話框會(huì)比模態(tài)對話框更合適。但是,非模態(tài)對話框可能會(huì)令用戶疑心。這是由于,盡管二者看起來特別很是相似,它們的舉動(dòng)卻不一樣,并難以展望。
舉個(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)閉控件。)
此外,由于非模態(tài)對話框不會(huì)隨著次要義務(wù)的結(jié)束而主動(dòng)關(guān)閉,未及時(shí)關(guān)掉的非模態(tài)對話框可能虛耗屏幕空間。在 Page 中,用戶可以用一個(gè)非模態(tài)對話框在當(dāng)前打開的文檔里查找內(nèi)容。假如用戶不自動(dòng)關(guān)閉它,哪怕他不想繼承查找,這個(gè)對話框仍會(huì)出如今屏幕上。(當(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)對話框。
迎接關(guān)注微信公眾號(hào):非科班設(shè)計(jì)
「趨勢!對話式交互好文合集」
- 《總監(jiān)有話說!2017年大熱的對話式交互會(huì)成為將來嗎?》
- 《聊聊將來可能會(huì)流行的「對話式交互」》
- 《谷歌對話式交互規(guī)范指南系列:對話式界面的概念和機(jī)制》
- 《超周全!聊天機(jī)器人的界面交互設(shè)計(jì)實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)》
原文地址:zhihu
本文地址:http://pkvc.cn/tutorial/wd3824.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏