#我是一個可愛的搬磚工系列# 嘗試對照英文翻譯學(xué)習(xí)MD的組件設(shè)計熬的,借此加深各種組件的應(yīng)用~
Material Design鏈接:Material Design——Dialogs
對話框通知用戶有關(guān)任務(wù)的信息,并且可以包含關(guān)鍵信息赊级、需要決策或涉及多個任務(wù)押框。
一、用法
對話框是一種模式窗口理逊,它出現(xiàn)在應(yīng)用程序內(nèi)容前面橡伞,以提供關(guān)鍵信息或要求作出決定。對話框在出現(xiàn)時禁用所有應(yīng)用程序功能晋被,并保持在屏幕上兑徘,直到確認(rèn)、取消或采取所需的操作為止羡洛。
△ 原則
· 重點 對話集中用戶的注意力挂脑,以確保他們的內(nèi)容能夠得到解決
· 直觀 對話能夠直觀進行信息交流,并致力于完成一項任務(wù)
· 有用的 對話框應(yīng)響應(yīng)用戶任務(wù)或操作,并提供相關(guān)或上下文信息
△ 什么時候使用
對話框用于:
· 阻止應(yīng)用正常運行的錯誤
· 需要特定用戶任務(wù)崭闲,決策或確認(rèn)的關(guān)鍵信息
△ 類型
二、分析
△ 對話框與屏幕
對話框是一種模態(tài)窗口氓奈。在解決模式之前翘魄,將禁用對UI其余部分的訪問。所有模態(tài)表面都是設(shè)計中斷的——它們的目的是讓用戶專注于懸浮在頂層界面的內(nèi)容舀奶。
為了表示應(yīng)用程序的其余部分是不可訪問的暑竟,并將注意力集中在對話框上,對話框后面的界面將被弱化育勺。遮罩是一種臨時處理但荤,可應(yīng)用于底部界面上,目的是使底部界面的內(nèi)容不那么突出涧至。
△ 標(biāo)題
應(yīng)通過標(biāo)題和按鈕文本體現(xiàn)對話框的用途腹躁。
標(biāo)題應(yīng)該:
· 包含簡短明了的陳述或問題
· 避免道歉(“抱歉打擾”)、警報(“警告南蓬!”)或歧義(“您確定嗎纺非?”)
△ 按鈕
· 并排按鈕(推薦)
并排按鈕顯示兩個彼此相鄰的文本按鈕窄陡。
· 堆疊全寬按鈕
堆疊按鈕可以容納較長的按鈕文本,用來選擇取消操作跳夭。
△ 高度
對話框顯示在24 dp的高度涂圆,可以顯示陰影,它們出現(xiàn)在其他內(nèi)容之上优妙,并且通常在會有一個遮罩遮住所有的底部內(nèi)容乘综。
三、行為
△ 互動
對話框會在沒有警告的情況下出現(xiàn)套硼,要求用戶停止當(dāng)前任務(wù)卡辰。它們應(yīng)該謹(jǐn)慎使用,因為并不是每一種選擇或設(shè)置都需要中斷。
△ 位置
對話框保留焦點九妈,直到取消或采取行動,例如選擇一個設(shè)置。它們不應(yīng)被其他元素遮擋或部分顯示在屏幕上翠霍,只有全屏對話框除外锄弱。
△ 滑動
大多數(shù)對話框內(nèi)容應(yīng)該避免滾動。當(dāng)需要滾動時,對話框標(biāo)題被固定在頂部赎瞎,按鈕固定在底部敞临。這可以確保選定的內(nèi)容在標(biāo)題和按鈕旁邊仍然可見,甚至在滾動頁上也是如此蹂匹。
查看可滾動選項列表時吊骤,對話框標(biāo)題和按鈕將保持不變。
△ 取消對話
對話可通過以下方式予以取消:
· 點擊對話框外部
· 點擊“取消”按鈕
· 點擊系統(tǒng)Back按鈕(僅限Android)
如果用戶不能關(guān)閉對話框静尼,用戶必須選擇一個對話框操作來繼續(xù)。
四传泊、操作
△ 操作類型
對話框通過標(biāo)題鼠渺、內(nèi)容和操作向用戶提供了一個獨特的選擇。對話框操作表示為按鈕眷细,允許用戶確認(rèn)或取消某些內(nèi)容拦盹。
有三種類型的對話操作:
· Confirming actions(確認(rèn)操作)
若要解決觸發(fā)對話框的原因,請確認(rèn)操作確認(rèn)建議的操作溪椎。這些操作可能涉及刪除某些內(nèi)容普舆,如“Delete”或“Remove”,如果它適合上下文的話校读。它們被放置在屏幕的右側(cè)沼侣。
· Dismissive actions(忽視操作)
忽視操作拒絕建議的操作,并將用戶返回到起始屏幕或步驟歉秫,它們被直接放置在確認(rèn)行動的左邊蛾洛。
· Acknowledgement actions(確認(rèn)行動)
當(dāng)需要進行用戶確認(rèn)時,可以顯示單個操作雁芙≡欤或者,使用snackbar來傳遞這種類型的信息兔甘。
△ 行動數(shù)量
對話框應(yīng)該包含兩個動作的最大值
· 如果提供了單個操作提岔,則必須是確認(rèn)操作
· 如果提供了兩個行動,一個必須是確認(rèn)行動笋敞,另一個是取消行動
· 不建議提供第三個操作碱蒙,如“了解更多”,因為它會引導(dǎo)用戶遠(yuǎn)離對話框夯巷,使對話框任務(wù)未完成
內(nèi)聯(lián)擴展可以顯示更多信息赛惩,而不是添加第三個操作。如果要拓展等多的信息趁餐,請在進入對話框之前提供它喷兼。
五季惯、警告對話框
△? 用法
警報對話框會中斷用戶的緊急信息,詳細(xì)信息或操作臀突。
△? 行為
若要關(guān)閉警報對話框勉抓,必須選擇其操作之一。
六隐圾、簡單對話框
△ 用法
簡單對話框可以顯示在選擇時立即可操作的項。他們沒有文本按鈕掰茶。
由于簡單的對話框是可中斷的暇藏,所以應(yīng)該謹(jǐn)慎使用》遥或者叨咖,下拉菜單以一種非模式的、較少干擾的方式提供選項啊胶。
△ 行為
一個簡單的對話框允許以下交互:
· 點擊一個操作來選擇它并關(guān)閉對話框
· 點擊對話框外部關(guān)閉對話框甸各,而不采取任何行動
沒有動作的簡單對話框
簡單對話框允許用戶對選定的元素進行操作,而無需操作文本焰坪。例如趣倾,用戶只需選擇一個列表項就可以對其采取行動。
七诫尽、確認(rèn)對話框
△ 用法
確認(rèn)對話框使用戶能夠在做出選擇之前提供最終的確認(rèn)禀酱,因此如果有必要,他們有機會改變主意牧嫉。
如果用戶確認(rèn)了一個選擇剂跟,就會執(zhí)行。否則酣藻,用戶可以關(guān)閉對話框曹洽。例如,用戶可以收聽多個鈴聲辽剧,但只能在觸摸“OK”時做出最后選擇送淆。
△ 行為
要確認(rèn)選擇,用戶點擊確認(rèn)操作怕轿。若要取消偷崩,用戶將點擊一個忽視操作。
△ 按鈕
確認(rèn)對話框提供確認(rèn)和取消按鈕。在點擊確認(rèn)按鈕后放吩,將確認(rèn)所選內(nèi)容。如果單擊“取消”按鈕或?qū)υ捒蛲獾膮^(qū)域羽杰,則此操作將被取消渡紫。
八、全屏對話框
△ 用法
全屏對話框?qū)σ幌盗腥蝿?wù)進行分組颜骤,例如創(chuàng)建具有事件標(biāo)題唧喉、日期、位置和時間的日歷條目忍抽。因為它們占據(jù)了整個屏幕八孝,所以全屏對話框是其他對話框可以顯示的唯一對話框。
全屏對話框可用于滿足以下任何條件的內(nèi)容或任務(wù):
· 包括需要鍵盤輸入的組件的對話框鸠项,例如表單字段
· 當(dāng)更改沒有立即保存時
· 當(dāng)對話框中的組件打開附加對話框時
全屏對話框只適用于移動設(shè)備干跛。對于平板電腦或桌面,請使用模態(tài)對話框祟绊。
△ 行為
· 保存選擇
若要在全屏對話框中保存所選內(nèi)容楼入,用戶單擊“Save”即可哥捕。要放棄所有更改和退出,用戶點擊“X”圖標(biāo)或“后退”按鈕嘉熊。
· 確認(rèn)
確認(rèn)操作將被禁用遥赚,直到所有強制字段都被填充為止。使用描述性動詞阐肤,如“保存”凫佛、“發(fā)送”、“共享”泽腮、“更新”或“創(chuàng)建”御蒲。不要使用模糊的術(shù)語,如“完成”诊赊、“確定”或“關(guān)閉”厚满。
如果沒有進行任何更改,則對話框?qū)㈥P(guān)閉碧磅,并且不需要進行丟棄確認(rèn)碘箍。
如果用戶進行了更改,則提示用戶確認(rèn)丟棄操作鲸郊。
△ 對話框窗口
啟動一個全屏對話框暫時重置應(yīng)用程序的感知高度秆撮,允許簡單的菜單或?qū)υ捒虺霈F(xiàn)在全屏對話框之上四濒。
△ 布局
全屏對話框覆蓋屏幕盗蟆,不顯示為浮動模式窗口。
· 操作
在頂部的應(yīng)用程序欄中放置確認(rèn)和取消操作
· 導(dǎo)航
因為全屏對話框只能完成舒裤、排除或關(guān)閉喳资,所以只能使用關(guān)閉“X”導(dǎo)航按鈕
△ 標(biāo)題
標(biāo)題應(yīng)該簡潔。伴鳖,如果有必要节值,它們可以換到第二行,并被截斷黎侈。如果有長標(biāo)題或可變長度的標(biāo)題(如翻譯)察署,則將它們放在內(nèi)容區(qū)域而不是應(yīng)用程序欄中。
END.THANKS FOR YOUR READING~
如有不當(dāng),還請多多指教~