Material Design——Dialogs

#我是一個可愛的搬磚工系列# 嘗試對照英文翻譯學(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)鍵信息

△ 類型

Alert dialog:警報對話框會中斷用戶的緊急信息肋联,詳細(xì)信息或操作;Simple dialog:簡單對話框顯示選中后立即生效的項目列表镀脂。
Confirmation dialog:確認(rèn)對話框要求用戶在解除對話框之前確認(rèn)選擇牺蹄;Full-screen dialog:全屏對話框填滿整個屏幕,其中包含需要完成一系列任務(wù)的操作薄翅。


二、分析

△ 對話框與屏幕

對話框是一種模態(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)該:

· 包含簡短明了的陳述或問題

· 避免道歉(“抱歉打擾”)、警報(“警告南蓬!”)或歧義(“您確定嗎纺非?”)

Right:這個對話框標(biāo)題提出了一個特定的問題,簡明地解釋了請求中涉及的內(nèi)容赘方,并提供了明確的操作烧颖;Wrong:不要使用會產(chǎn)生模糊問題的對話框標(biāo)題。

△ 按鈕

· 并排按鈕(推薦)

并排按鈕顯示兩個彼此相鄰的文本按鈕窄陡。

這些并排按鈕顯示按鈕提供“不同意”和“同意”作為選項的操作炕淮。

· 堆疊全寬按鈕

堆疊按鈕可以容納較長的按鈕文本,用來選擇取消操作跳夭。

△ 高度

對話框顯示在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來傳遞這種類型的信息兔甘。

禁用確認(rèn)操作(1)谎碍,直到作出選擇。忽視操作永遠(yuǎn)不會被禁用洞焙。
忽視操作(1)放置在確認(rèn)操作的左邊蟆淀。
避免向用戶提供不明確的選擇拯啦,“取消”在這里沒有意義,因為沒有提出明確的行動建議扳碍。

△ 行動數(shù)量

對話框應(yīng)該包含兩個動作的最大值

· 如果提供了單個操作提岔,則必須是確認(rèn)操作

· 如果提供了兩個行動,一個必須是確認(rèn)行動笋敞,另一個是取消行動

· 不建議提供第三個操作碱蒙,如“了解更多”,因為它會引導(dǎo)用戶遠(yuǎn)離對話框夯巷,使對話框任務(wù)未完成

內(nèi)聯(lián)擴展可以顯示更多信息赛惩,而不是添加第三個操作。如果要拓展等多的信息趁餐,請在進入對話框之前提供它喷兼。

“學(xué)習(xí)更多”操作(1)從此對話框中導(dǎo)航,可能使其處于不確定狀態(tài)后雷。


五季惯、警告對話框

△? 用法

警報對話框會中斷用戶的緊急信息,詳細(xì)信息或操作臀突。

△? 行為

若要關(guān)閉警報對話框勉抓,必須選擇其操作之一。

Right:“放棄”行為表明了決定的結(jié)果候学;Wrong:不要使用無法指示所選內(nèi)容的操作文本藕筋。“取消”和“刪除”更好地表示將在此對話框中發(fā)生什么梳码。


六隐圾、簡單對話框

△ 用法

簡單對話框可以顯示在選擇時立即可操作的項。他們沒有文本按鈕掰茶。

由于簡單的對話框是可中斷的暇藏,所以應(yīng)該謹(jǐn)慎使用》遥或者叨咖,下拉菜單以一種非模式的、較少干擾的方式提供選項啊胶。

△ 行為

一個簡單的對話框允許以下交互:

· 點擊一個操作來選擇它并關(guān)閉對話框

· 點擊對話框外部關(guān)閉對話框甸各,而不采取任何行動

沒有動作的簡單對話框

簡單對話框允許用戶對選定的元素進行操作,而無需操作文本焰坪。例如趣倾,用戶只需選擇一個列表項就可以對其采取行動。

不要在簡單的對話框中顯示文本按鈕某饰,點擊選擇項就是觸發(fā)相應(yīng)操作儒恋。
不要在簡單的對話框中包括“取消”這樣的忽視動作善绎,用戶可以點擊對話框之外的任何地方來關(guān)閉它。


七诫尽、確認(rèn)對話框

△ 用法

確認(rèn)對話框使用戶能夠在做出選擇之前提供最終的確認(rèn)禀酱,因此如果有必要,他們有機會改變主意牧嫉。

如果用戶確認(rèn)了一個選擇剂跟,就會執(zhí)行。否則酣藻,用戶可以關(guān)閉對話框曹洽。例如,用戶可以收聽多個鈴聲辽剧,但只能在觸摸“OK”時做出最后選擇送淆。

△ 行為

要確認(rèn)選擇,用戶點擊確認(rèn)操作怕轿。若要取消偷崩,用戶將點擊一個忽視操作。

在繼續(xù)之前撞羽,用戶必須確認(rèn)一個選項或關(guān)閉對話框环凿。

△ 按鈕

確認(rèn)對話框提供確認(rèn)和取消按鈕。在點擊確認(rèn)按鈕后放吩,將確認(rèn)所選內(nèi)容。如果單擊“取消”按鈕或?qū)υ捒蛲獾膮^(qū)域羽杰,則此操作將被取消渡紫。


提供確認(rèn)和拒絕按鈕。
不要提供一個動作考赛,因為它不清楚如何拒絕對話惕澎。


八、全屏對話框

△ 用法

全屏對話框?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)丟棄操作鲸郊。

“關(guān)閉”按鈕(1)是模糊的丰榴,因為它不能指示更改是保存還是丟棄。

△ 對話框窗口

啟動一個全屏對話框暫時重置應(yīng)用程序的感知高度秆撮,允許簡單的菜單或?qū)υ捒虺霈F(xiàn)在全屏對話框之上四濒。

一個日歷應(yīng)用程序啟動全屏對話框,啟動確認(rèn)對話框和警報對話框职辨。

△ 布局

全屏對話框覆蓋屏幕盗蟆,不顯示為浮動模式窗口。

· 操作

在頂部的應(yīng)用程序欄中放置確認(rèn)和取消操作

· 導(dǎo)航

因為全屏對話框只能完成舒裤、排除或關(guān)閉喳资,所以只能使用關(guān)閉“X”導(dǎo)航按鈕

避免除“X”以外的任何導(dǎo)航圖標(biāo)。向上箭頭(1)表示視圖的狀態(tài)正在保存腾供,而在全屏對話框中則不是這樣仆邓。

△ 標(biāo)題

標(biāo)題應(yīng)該簡潔。伴鳖,如果有必要节值,它們可以換到第二行,并被截斷黎侈。如果有長標(biāo)題或可變長度的標(biāo)題(如翻譯)察署,則將它們放在內(nèi)容區(qū)域而不是應(yīng)用程序欄中。

Caution:避免將長標(biāo)題放置在對話框的頂部應(yīng)用程序欄(1)中贴汪,因為截短的文本可能會導(dǎo)致誤解。
找到縮短應(yīng)用程序欄文本的方法扳埂,并在全屏對話框的內(nèi)容區(qū)域(1)放置較長的標(biāo)題业簿。



END.THANKS FOR YOUR READING~

如有不當(dāng),還請多多指教~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末阳懂,一起剝皮案震驚了整個濱河市梅尤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌岩调,老刑警劉巖巷燥,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機拆挥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門业舍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挽绩,“玉大人,你說我怎么就攤上這事。” “怎么了艳狐?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長皿桑。 經(jīng)常有香客問我毫目,道長,這世上最難降的妖魔是什么诲侮? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任蒜茴,我火速辦了婚禮,結(jié)果婚禮上顽腾,老公的妹妹穿的比我還像新娘。我一直安慰自己久信,他們只是感情好裙士,可當(dāng)我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布桌硫。 她就那樣靜靜地躺著,像睡著了一般膀钠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上雳窟,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天耸采,我揣著相機與錄音搓彻,去河邊找鬼。 笑死稀轨,一個胖子當(dāng)著我的面吹牛奋刽,可吹牛的內(nèi)容都是我干的方妖。 我是一名探鬼主播雌澄,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼卒废!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起参袱,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤企垦,失蹤者是張志新(化名)和其女友劉穎郑现,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辛友,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡随夸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年诈铛,在試婚紗的時候發(fā)現(xiàn)自己被綠了耳峦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡疙咸,死狀恐怖乞旦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情亲桦,我是刑警寧澤,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏流昏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦筝闹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伍纫。三九已至宗雇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間莹规,已是汗流浹背赔蒲。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留良漱,地道東北人舞虱。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓配并,卻偏偏與公主長得像算行,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子琅拌,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,077評論 2 355