百度智能小程序 模態(tài)對話框

模態(tài)對話框

提示框用于同步用戶重要信息，并要求用戶對此進(jìn)行確認(rèn)，或執(zhí)行特定操作以決策下一步驟。作為模態(tài)組件，提示框出現(xiàn)時，蒙層覆蓋原界面，以聚焦用戶注意力于提示框上，原頁面功能均無法使用；除非用戶對其進(jìn)行操作，提示框并不會自動消失。綜上，請謹(jǐn)慎使用提示框，因?yàn)樗鼈儠稚⒂脩舻淖⒁饬?，并且打斷用戶的任?wù)路徑。

開發(fā)文檔說明詳見 showModal 。

元素解構(gòu)

智能小程序提供統(tǒng)一提示框，開發(fā)者可以配置其標(biāo)題、內(nèi)容及操作按鈕的數(shù)量（1-2 個）和按鈕文字顏色。

1.容器

2.標(biāo)題（可選，可配）

3.內(nèi)容（可配）

4.操作按鈕（可配）

5.蒙層

標(biāo)題

提示框的標(biāo)題默認(rèn)存在，用于明確提示的類型或主題，建議精簡表達(dá)，控制在 8 個中文字符內(nèi)。如提示的內(nèi)容簡單，開發(fā)者可以選擇去掉標(biāo)題。

內(nèi)容

內(nèi)容通常作為標(biāo)題的補(bǔ)充信息，旨在告知狀態(tài)、信息和解決方法，表達(dá)精簡。當(dāng)表達(dá)為陳述詞，且只有一句時，句尾不必以句號結(jié)尾；措辭時，不可使用強(qiáng)硬語氣和標(biāo)點(diǎn)符號“！”，減少壓迫感。

對話框內(nèi)容應(yīng)精簡，并控制在50漢字以內(nèi)，但當(dāng)內(nèi)容說明不可避免需要詳細(xì)說明時，提示框支持用戶在內(nèi)容區(qū)內(nèi)上下滑動查看詳細(xì)信息。此時。提示框標(biāo)題、底部按鈕，蒙層及背后的頁面元素不會跟隨滑動。

用戶可以在此區(qū)域（1）內(nèi)上下滑動查看更多內(nèi)容。

操作區(qū)

支持 1-2 項(xiàng)操作，默認(rèn)情況下為雙操作按鈕，左側(cè)為“取消”（可選），右側(cè)為“確定”。按鈕文案文字顏色和內(nèi)容均可配，最多支持 4 個中文字符。

1.雙操作按鈕（默認(rèn)）

2.單操作按鈕

雙操作按鈕

對話框提供 2 種操作按鈕時，必須一個是確定性操作，另一個是取消性或關(guān)閉性操作。要關(guān)閉對話框，需選擇其中一個操作。操作文案使用規(guī)范請參見措辭章節(jié)。用戶應(yīng)該通過標(biāo)題和按鈕就能大致明白提示框的含義，最好在用詞上有所呼應(yīng)，如標(biāo)題為“新版內(nèi)測邀請”，確認(rèn)按鈕為“立即體驗(yàn)”。

單操作按鈕

提示框用于同步用戶重要信息時并僅要求其確認(rèn)知曉，其操作區(qū)通常為單操作按鈕。根據(jù)場景不同，我們建議整體考慮按鈕文案，最多可支持 4 個中文字符。

個性定制

提示框中，可個性定制樣式的只有操作區(qū)的按鈕文案顏色。如默認(rèn)樣式所示，我們將“確認(rèn)”按鈕使用更高調(diào)的藍(lán)色，“取消”按鈕使用黑色，以在視覺展現(xiàn)上有主次之分，引導(dǎo)用戶操作。若兩個按鈕都同等重要，也可以使用同一顏色，此時沒有主次之分。

對于不可逆的重要操作，建議其按鈕使用紅色，警告用戶此操作的重要性。

開發(fā)者還可以在按鈕文字顏色上適合使用品牌色。但請注意，過多顏色并存，可能會影響用戶判斷。

用色上除了注意按鈕主次展現(xiàn)、品牌外，還需要考慮是否與行業(yè)常用于特殊狀態(tài)的顏色沖突，如紅色、淺灰色等。