自上次參加完回音分享會后膝藕，我下定決心要洗心革面乖乖打基礎(chǔ)妨退，于是開啟了這個part浓镜，爭取兩個月不間斷更新目木，寫完Material Design與iOS中的組件（順便學(xué)學(xué)英語）换途，以便今后在使用的時(shí)候完全不虛

提示框（ Dialogs）

Material Design鏈接：提示框

提示框

提示框告知用戶特定的任務(wù)懊渡，并可能包含重要信息，需要用戶做出決定或使其參與多項(xiàng)任務(wù)军拟。

對話框包含文本和UI控件剃执。 他們保持視覺焦點(diǎn)直到被關(guān)閉或被完成了其中需要的行動。 謹(jǐn)慎使用對話懈息，因?yàn)樗鼈兪谴驍_用戶的肾档。

分類

·警告（Alerts）是緊急中斷，通知有關(guān)情況并要求確認(rèn)辫继。

·簡單菜單（Simple Menus）顯示列表項(xiàng)的選項(xiàng)怒见，而簡單提示框（Simple Dialogs）可以提供有關(guān)列表項(xiàng)的詳細(xì)信息或操作。

·確認(rèn)提示框（Confirmation dialogs）要求用戶明確確認(rèn)選擇姑宽。

行為

對話框不應(yīng)該被其他元素或屏幕邊緣遮擋遣耍。 提示框始終保持視覺聚焦，直到被關(guān)閉或被完成了其中需要的行動炮车。

全屏提示框（僅限手機(jī)）

全屏對話框最適合于復(fù)雜的任務(wù)舵变，或需要輸入法編輯器，因?yàn)樗梢栽诒４嬷皩⒁幌盗腥蝿?wù)組合在一起瘦穆。

行為

提示框的前身

提示框是模態(tài)窗口的子類型纪隙，這里所涉及的示例用于標(biāo)準(zhǔn)材質(zhì)的系統(tǒng)提示框。 （其他模態(tài)窗口結(jié)構(gòu)在這里沒有涉及扛或，因?yàn)樗鼈冇刑嗟淖兓嘣郏缳徺I流程的品牌按鈕，非標(biāo)準(zhǔn)的UI表單元素或獨(dú)特的布局熙兔。）

減少打擾

謹(jǐn)慎使用提示框麸拄，因?yàn)樗鼈兪侵袛嘈缘摹?他們的突然出現(xiàn)迫使用戶停止當(dāng)前的任務(wù)并專注于提示框內(nèi)容。 并非所有的選擇黔姜，設(shè)置或細(xì)節(jié)都準(zhǔn)許這種中斷拢切。 提示框的替代選項(xiàng)包括Menus與內(nèi)聯(lián)擴(kuò)展，這兩個都能保持當(dāng)前的環(huán)境秆吵。

全屏幕提示框例外

全屏對話框可能會打開其他對話框淮椰，例如選擇器，因?yàn)樗鼈兊脑O(shè)計(jì)可以容納額外的材料層纳寂，而不會顯著增加app深度的感知與視覺干擾主穗。

左：提示框內(nèi)容 ? ?右：全屏提示框

可滾動內(nèi)容例外

一些提示框內(nèi)容需要滾動，例如鈴聲列表毙芜。

對于可滾動的選項(xiàng)列表忽媒，提示標(biāo)題仍固定在頂部。 這可保證了無論項(xiàng)目在列表中什么位置腋粥，被選項(xiàng)與標(biāo)題均保持可見晦雨。

否則架曹，標(biāo)題會隨內(nèi)容一起滾動離開視野。 內(nèi)容滾動時(shí)闹瞧，操作始終保持原位绑雄。

提示框與底層父級材料是分開的，不會隨其滾動奥邮。

標(biāo)題與被選操作均保持可見

顯示額外內(nèi)容

要在提示框中展示額外內(nèi)容万牺，請?jiān)趦?nèi)容區(qū)域內(nèi)使用內(nèi)聯(lián)展開。 或者考慮能對大量的內(nèi)容進(jìn)行優(yōu)化的可替代的組件洽腺。

關(guān)閉提示框

提示框可以通過點(diǎn)擊提示框外部或點(diǎn)擊系統(tǒng)后退按鈕（在Android上）來關(guān)閉脚粟。 有時(shí)候，用戶必須做出選擇動作后才能關(guān)閉提示框蘸朋。

警告（Alerts）

警報(bào)是緊急中斷核无，需要確認(rèn)，通知用戶有關(guān)情況度液。

Snackbars消除歧義：Snackbars在行動后提供可選信息厕宗，例如確認(rèn)放棄草稿画舌。 他們經(jīng)常允許用戶撤消剛剛采取的操作堕担。

警告沒有標(biāo)題欄

大多數(shù)警告不需要標(biāo)題。

他們用以下的方式以一兩句話來總結(jié)一個決定曲聂，例如：

·提出問題（例如“刪除此對話霹购？”）

·做出與操作按鈕有關(guān)的聲明

按鈕文案要明確說明接下來將發(fā)生的操作

帶有標(biāo)題的警告

僅對高風(fēng)險(xiǎn)情況使用帶標(biāo)題的警告，例如連接可能丟失朋腋。 用戶應(yīng)該能夠僅根據(jù)標(biāo)題和按鈕文本來理解選擇齐疙。

如果需要標(biāo)題：

·在內(nèi)容區(qū)域使用明確的問題或陳述，例如“擦除USB存儲器旭咽？”

·避免道歉贞奋，模棱兩可或提問，例如“警告穷绵！”或“你確定嗎轿塔？”

標(biāo)題要明確告知結(jié)果

簡單菜單

僅限手機(jī)和平板電腦

消除歧義：簡單提示框顯示列表項(xiàng)目的詳細(xì)選項(xiàng)或提供相關(guān)操作。 簡單提示框可以顯示與簡單菜單相同的內(nèi)容仲墨。 但是勾缭，簡單菜單是首選，因?yàn)樗鼈儗τ脩舢?dāng)前的上下文影響較小目养。

簡單菜單的樣式

簡單提示框（用于選擇）

簡單的提示框可以提供有關(guān)列表項(xiàng)的額外詳細(xì)信息或操作俩由。 例如，他們可以顯示頭像癌蚁，圖標(biāo)幻梯，提示語或正交行為（例如添加帳戶）兜畸。

操作機(jī)制：

·立即選擇一個選項(xiàng)，提交選項(xiàng)并關(guān)閉菜單礼旅；

·觸摸提示框外部或按下后退鍵膳叨，取消操作并關(guān)閉對話框。

減少打擾

簡單提示框比簡單菜單更具中斷性痘系，應(yīng)該謹(jǐn)慎使用菲嘴。

簡單提示框樣式

沒有明確的取消按鈕

簡單提示框沒有明確的按鈕來接受或取消操作。

不該有明確的取消按鈕

明確說明

·在簡單提示框中汰翠，行高可以變化龄坪；

·簡單的對話框在屏幕上垂直和水平都居中顯示；

·提示框與屏幕左右邊緣的距離應(yīng)該至少為40dp复唤，距離頂部和底部至少為24dp健田；

·該對話框的內(nèi)容距離提示框邊緣為24dp。

允許文字換行

如果簡單菜單中的文本需要換行佛纫，則使用簡單提示框妓局。

文案要換行時(shí)使用簡單提示框

確認(rèn)提示框（Confirmation dialogs）

確認(rèn)提示框要求用戶在提交選項(xiàng)之前明確確認(rèn)他們的選擇。 例如呈宇，用戶可以聆聽多個鈴聲好爬，但只能在觸摸“ok”時(shí)進(jìn)行最終選擇。

點(diǎn)擊確認(rèn)對話框中的“取消”甥啄，或按Android的“后退”存炮，取消操作，放棄所有更改并關(guān)閉對話框蜈漓。

左圖為帶選擇控件的提示框

避免使用提示框啟動提示框

確認(rèn)提示框應(yīng)避免啟動其他簡單提示框或簡單菜單穆桂，因?yàn)樗鼈冊黾恿隧撁鎻?fù)雜性并會增加了app的海拔。 如果需要完成任務(wù)融虽，可以使用全屏提示框享完。

確認(rèn)單個值

確認(rèn)提示框可以使用列表以外的布局，例如日期選擇器有额，但仍然專注于選定單個值（選擇日期般又，但不選擇時(shí)間和日期）。

左：選擇日期 ? ?右：選擇時(shí)間

取消與確定按鈕

確認(rèn)提示框需要提供明確的確認(rèn)按鈕和明確的取消按鈕谆吴。 點(diǎn)擊取消按鈕倒源、返回按鈕或離開確認(rèn)提示框?qū)⒎艞壷暗母摹?/p>

要提供明確的“取消”與“確定”按鈕

全屏提示框（Full-screen Dialogs）

僅限手機(jī)：由于空間有限，全屏幕對話框可能更適合使用在手機(jī)句狼，而不是屏幕較大的設(shè)備上笋熬。

用法

全屏幕提示框在一系列任務(wù)（例如創(chuàng)建日歷入口）被提交或取消之前分組，并在點(diǎn)擊“保存”后保存選擇腻菇。 觸摸“X”會放棄所有更改并退出提示框胳螟。

全屏對話框可實(shí)現(xiàn)復(fù)雜的布局昔馋，將多個材料堆積的情況簡化（提示框上層的提示框），并暫時(shí)將app可感知的海拔重置為更高糖耸。 全屏對話框允許任務(wù)在復(fù)雜操作時(shí)開啟簡單菜單或簡單提示框秘遏。

全屏提示框可用于滿足以下標(biāo)準(zhǔn)的內(nèi)容或任務(wù)：

·該提示框包含需要輸入編輯器（IME）的組件（如選擇器或form fields），例如鍵盤

·當(dāng)沒有實(shí)時(shí)保存更改時(shí)

·當(dāng)app中沒有草稿功能時(shí)（無法自動存到草稿）

·在提交之前執(zhí)行批量處理操作或排隊(duì)更改時(shí)

全屏提示框支持日期選擇器

操作

在屏幕頂部放置全屏對話框的確認(rèn)和離開操作嘉竟。

確認(rèn)

屏幕右上角的確認(rèn)按鈕使用描述性動詞邦危，例如：保存，發(fā)送舍扰，分享倦蚪，更新或創(chuàng)建。 不要使用模糊的動作來確認(rèn)動作边苹，如：完成陵且，確定或關(guān)閉。

確認(rèn)按鈕將被禁用个束，直到滿足對話框中的所有必填字段都完成時(shí)慕购，確認(rèn)操作才會被激活

丟棄（離開）

丟棄操作（屏幕左上角的“X”）和后退按鈕均會關(guān)閉全屏對話框并放棄之前所做的更改。

·如果沒有更改茬底，對話框關(guān)閉沪悲，不需要丟棄確認(rèn)

·如果用戶進(jìn)行了任何更改，則會提示他們確認(rèn)放棄操作

左：不要用“關(guān)閉”這樣的詞作為確認(rèn) ? ?右：離開時(shí)進(jìn)行提示

導(dǎo)航

全屏幕對話框中使用的“X”不同于向返回箭頭桩警，箭頭能表示視圖的狀態(tài)實(shí)時(shí)被保存袋毙。 例如才菠，設(shè)置中使用的返回箭頭表示所有更改立即提交廓鞠，無需明確的確認(rèn)或取消操作绢馍。

兩種形式：返回箭頭十减；“X”+確認(rèn)按鈕

標(biāo)題

全屏提示框的標(biāo)題不使用動態(tài)類型钝诚。

標(biāo)題應(yīng)該簡潔隘截。 如有必要铲咨，他們可以換行到第二行固歪，若長于第二行應(yīng)該加上省略號蒜鸡。

如果全屏對話框使用長度可變的標(biāo)題或預(yù)期到可能會有長標(biāo)題（例如，因?yàn)槟承﹩卧~在不同的語言中較長）牢裳，請將標(biāo)題文本置于對話框的內(nèi)容區(qū)域而不是最上面的導(dǎo)航欄逢防。

不該在導(dǎo)航欄中使用長標(biāo)題