編輯導讀:B類產(chǎn)品設(shè)計時一定要注意產(chǎn)品細節(jié),即使是對話框這樣容易被忽略的產(chǎn)品設(shè)計細節(jié)也不要放過。本文從“對話框 vs 抽屜”的設(shè)計細節(jié)出發(fā),給出不同的設(shè)計細節(jié)及展示,一起來看看。
說在前面:對話框和抽屜都是在當前頁面之上覆蓋出現(xiàn)的組件,讓用戶在不離開主路徑的情況下,查看信息/提示/反饋,或快速執(zhí)行某些的操作。兩者的交互模式有類似之處,使用場景也有所重疊。本文對兩個組件的主要差別進行了對比,并提供方法幫助大家快速判斷應該選擇哪一個。
一、對比:對話框 vs 抽屜
1. 信息量與干擾性
2. 模態(tài)與非模態(tài)
- 模態(tài)化的(Modal):用戶將不能操作頁面層上的內(nèi)容,只能操作頁面層之上的內(nèi)容容器,直到用戶明確與內(nèi)容容器的交互結(jié)束。
- 非模態(tài)化的(Non-Modal):即使出現(xiàn)了內(nèi)容層之上的內(nèi)容容器,用戶仍然可以與背景頁面的內(nèi)容進行交互(例如,選擇某一鏈接或點擊某一按鈕)。
對話框和抽屜均可分為模態(tài)、非模態(tài),有遮罩、無遮罩;通常有遮罩的為模態(tài),無遮罩的為非模態(tài)。
3. 何時使用模態(tài)
1)在重要的警告時使用,避免出現(xiàn)嚴重問題、或修正已出現(xiàn)的問題。
例如:用戶未保存就要關(guān)閉時,彈出模態(tài)對話框提示用戶保存。
2) 在需要用戶輸入信息或進行某操作,才能繼續(xù)當前流程的時候使用。
例如:某些資源網(wǎng)站會在用戶瀏覽一段時間后彈出模態(tài)化的登錄/注冊/試用窗口,引導注冊。
3)用來將復雜流程拆分成簡單步驟。
例如:分步驟的模態(tài)對話框式的新手引導。
4)用來獲取信息,該信息可大大減輕用戶的后續(xù)操作/精力。
例如:在房地產(chǎn)網(wǎng)站 Zillow 中,用戶可以在沒有賬號或房產(chǎn)代理的情況下瀏覽房源列表,當用戶圖聯(lián)系某代理以獲取房源信息時,站點會通過一個模式對話框詢問他們是否已經(jīng)有代理。
4. 何時不能使用模態(tài)
1)不要在獲取與當前流程不相關(guān)、不必要信息的時候使用。
2)不要在會打斷高風險流程中使用。
例如:付款為高風險流程,避免在用戶付款過程中彈出模態(tài)彈窗打斷用戶,可能會讓用戶改變主意放棄購買。
3)不要讓用戶在模態(tài)組件上進行需要額外信息(這些信息不在上面)的復雜決策。
例如:Frontier Airlines 使用模態(tài)對話框來追加銷售機票之外的更多服務(wù),該對話框顯示現(xiàn)在購買可以省162 美元,但卻找不到為什么會省這個額度的錢:
二、案例對比
1. 對話框的模態(tài) vs 非模態(tài)
文檔工具語雀中的模態(tài)對話框:登錄狀態(tài)失敗提醒。
語雀中的進行關(guān)聯(lián)操作的非模態(tài)對話框,一個短小的表單:文字鏈設(shè)置(這里也可以使用氣泡卡片組件)
Gmail 中點擊「寫郵件」按鈕,在右下角打開非模態(tài)小對話框,讓用戶參考下面的郵件撰寫新郵件:
點擊上圖對話框右上角表示「放大」的 icon 后,擴展為模態(tài)大對話框,轉(zhuǎn)化為沉浸式的體驗:
2. 抽屜的模態(tài) vs 非模態(tài)
項目管理工具 Jira 的幫助文檔入口在頁面右側(cè),點開后從右側(cè)劃入非模態(tài)抽屜展示內(nèi)容,這樣便于用戶進行對照查看和操作:
搜索功能入口在頁面左側(cè)中的導航中,點開后從左側(cè)劃入模態(tài)抽屜進行交互,用戶可以更加專注于當前操作:
3. 模態(tài)抽屜 vs 非模態(tài)對話框
上一案例來自之前的 Jira,當前版本的 Jira 對導航和交互模式進行了調(diào)整,例如通知模塊由模態(tài)抽屜改為了非模態(tài)對話框,出現(xiàn)的位置均遵循就近原則,體驗上非模態(tài)對話框更加輕量。
原來由左側(cè)劃入的模態(tài)抽屜,點擊左側(cè)導航后從左側(cè)劃入:
當前版本使用非模態(tài)對話框,點擊頂部導航后在 icon 下方出現(xiàn):
4. 非模態(tài)抽屜 vs 模態(tài)對話框
研發(fā)效能工具 Aone 中用非模態(tài)抽屜來展示項目的需求/任務(wù)/bug 的具體內(nèi)容:
與上圖 Aone 的類似場景下,同類產(chǎn)品 Teambition 則采用了模態(tài)對話框:
相比之下,非模態(tài)抽屜的優(yōu)點是,用戶可以同時查看下面的父級頁面中其他任務(wù)的標題,并快速點擊切換到其他需求;而模態(tài)對話框的優(yōu)點是用戶可以完全沉浸在當前的任務(wù)中,同時頂部也增加了「上一條」、「下一條」按鈕,支持上下條快速切換。
兩者對比可以看出,兩種組件自身的優(yōu)點也是對方的不足,沒有百分百的十全十美。選擇哪一個,要看具體用戶的需求和產(chǎn)品的定位。
5. 模態(tài)抽屜 vs 氣泡卡片
文檔工具 Gitbook 中,產(chǎn)品功能和交互都很簡潔輕量,沒有出現(xiàn)對話框組件,在文檔中插入圖片或文件、編輯導航、導入文檔等稍重的操作使用抽屜,而插入表情、標簽等位置指向明確、操作很輕的使用氣泡卡片,這些氣泡卡片和非模態(tài)的對話框類似:
三、選擇:用對話框還是抽屜?
按下圖從應用場景、交互需求、信息長度三個維度來判斷使用對話框還是抽屜。
例如:為一個表單選擇組件,從應用場景來看,對話框和抽屜皆可;從交互維度,該表單的填寫需要參考表單的父級頁面中的內(nèi)容,則確定選擇非模態(tài)抽屜,不需要再從長短考慮。
- 一致性:除以上列表中的三個判斷維度,還有「一致性」原則需要考慮,例如某產(chǎn)品彈出的表單大多較長,采用抽屜組件,為了保持體驗的一致性,個別短表單也可以同樣采用抽屜。但針對不同產(chǎn)品的具體情況,一致性的優(yōu)先級有所區(qū)別,因此未放入判斷列表。
四、注釋和舉例
- 操作確認、信息提示、操作反饋場景:在需要用戶暫停當前操作、即刻閱讀/處理時,使用模態(tài)對話框,否則建議使用較輕量的組件如警告提示、全局提示、通知提醒框、氣泡確認框。本文討論對話框和抽屜的區(qū)分。
- 需要和父級頁面內(nèi)容相互參照:使用無遮罩的非模態(tài)抽屜,便于查看和操作。
- 需要在父級頁面中快速選擇切換:使用無遮罩的非模態(tài)抽屜。在下面父頁面露出的部分上進行與抽屜內(nèi)容和位置都無關(guān)的操作,且不是點擊空白區(qū)域時,抽屜不用自動消失。
- 疊放:是指在一個對話框/抽屜上面疊加放置更多對話框/抽屜。不建議對話框上疊放對話框,但抽屜組件支持多層抽屜,即在抽屜內(nèi)打開新的抽屜,用以解決多分支任務(wù)的復雜狀況。
必要的情況下,在抽屜上疊放對話框也是可以的,例如在抽屜操作過程中有非常重要的信息要即刻告知用戶,可以通過對話框展示。
- 表單長短:表單項超出 5 條時,建議采用抽屜而非彈窗。
- 內(nèi)容長短:在展示靜態(tài)信息給用戶時,如果內(nèi)容少、不超出 5 行,建議使用彈窗而非抽屜;如果信息多到超出一屏,功能上彈窗和抽屜都支持滾動條,都可以使用,如何選擇請設(shè)計師根據(jù)設(shè)計傾向和一致性決定。
參考:
- https://www.uisdc.com/pop-up-application-design
- http://www.woshipm.com/ucd/3502268.html
- https://mp.weixin.qq.com/s/xZ5UuOtlbDb8wEOd8IjYcg
- https://yuque.antfin.com/docs/share/7b3c3efd-7766-49dc-9799-09d95b3bf44e?#
- https://www.nngroup.com/articles/modal-nonmodal-dialog/
作者:林葉,螞蟻集團設(shè)計師
本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議
版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔相關(guān)法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 舉報,一經(jīng)查實,本站將立刻刪除。