本文作者將來(lái)總結(jié)一下各個(gè)控件的特點(diǎn)，方便各位更好的理解這些控件。

之前的一系列文章，為大家介紹了iOS和Android規(guī)范中，各種彈出物（不要亂聯(lián)想~~）的用法，羅列如下：

警告框（Alerts）彈出框（Popovers，iOS獨(dú)有）簡(jiǎn)易菜單（Simple Menus，MD獨(dú)有）模態(tài)視圖（Modal Views，iOS獨(dú)有）確認(rèn)彈框（Confirmation Dialogs，MD獨(dú)有）全屏彈框（Full-screen Dialogs，MD獨(dú)有）上拉菜單（Action Sheets，iOS獨(dú)有）簡(jiǎn)易彈框（Simple Dialogs，MD獨(dú)有）活動(dòng)視圖（Activity Views，iOS獨(dú)有）底板（Bottom Sheets，MD獨(dú)有）提示框（Toasts）

既然各個(gè)控件都出過(guò)場(chǎng)了，也是時(shí)候讓它們合個(gè)體了！

彈出類控件比較表格（工具欄不是彈出類控件，之前沒(méi)有介紹）

模態(tài)

觀察上表，左邊iOS這一欄，從警告框到活動(dòng)視圖，它們構(gòu)成了一個(gè)聽(tīng)起來(lái)很高大上的詞匯——模態(tài)（Modal，不是Model）。iOS設(shè)計(jì)規(guī)范對(duì)模態(tài)的定義是這樣神兒的：模態(tài)讓用戶聚焦到某一個(gè)任務(wù)、消息或者視圖上而不能做別的事情，直到用戶完成了當(dāng)前的任務(wù)。比如警告框，用戶必須必須選擇警告框里的一個(gè)選項(xiàng)，警告框才會(huì)消失，否則用戶什么也做不了。這個(gè)警告框，就創(chuàng)造了“模態(tài)”的體驗(yàn)。

模態(tài)示例1——警告框

模態(tài)示例2——模態(tài)視圖

關(guān)于如何使用模態(tài)，蘋(píng)果有以下幾點(diǎn)建議：

盡量少使用。因?yàn)橐话銇?lái)說(shuō)，人們使用應(yīng)用的時(shí)候不是線性的，不是先做A再做B這樣，是想到啥做啥。而模態(tài)是線性的，比較強(qiáng)制。蘋(píng)果建議，只在某個(gè)任務(wù)特別重要，必須引起用戶的注意、或者某個(gè)任務(wù)必須被完成才能繼續(xù)使用應(yīng)用、或者需要應(yīng)用需要保存數(shù)據(jù)時(shí)，才使用模態(tài)這種設(shè)計(jì)。使用模態(tài)時(shí)需要提供一個(gè)清楚明白的退出模態(tài)的通道。需保證用戶總能知道他們?cè)谝粋€(gè)模態(tài)中操作后的結(jié)果。保持模態(tài)里的任務(wù)簡(jiǎn)單、簡(jiǎn)短、單一。如果要在模態(tài)視圖中創(chuàng)建帶有多層級(jí)關(guān)系的任務(wù)，一定要慎重！因?yàn)橛脩艉苋菀淄浰鼈儾僮鞯膩?lái)龍去脈。只在展示很重要的提示信息時(shí)，才考慮使用警告框。最理想的情況是，警告框可以讓用戶采取行動(dòng)。警告框比較打擾用戶，所以有必要讓用戶覺(jué)得這種打擾是值得的。不要在一個(gè)彈出框上面使用模態(tài)視圖。彈出框之上唯一可以出現(xiàn)的，是警告框（警告框權(quán)限真的很大啊?。┤绻且趶棾隹蛏厦嬲故疽粋€(gè)模態(tài)視圖，那么請(qǐng)先讓彈出框關(guān)閉，再展現(xiàn)模態(tài)視圖。

在Material Design（簡(jiǎn)稱為MD，下同）中，沒(méi)有與模態(tài)相對(duì)應(yīng)的概念。但其實(shí)，對(duì)話框和底板（除了固定底板），構(gòu)成的也是模態(tài)的體驗(yàn)。

控件對(duì)比總結(jié)

不知不覺(jué)中，對(duì)比了這么多控件。下面我們來(lái)總結(jié)一下各個(gè)控件的特點(diǎn)，方便各位更好的理解這些控件。

警告框

左：iOS警告框； 右：MD警告框

左圖展示了iOS中警告框的幾種形式，右圖展示了MD中警告框的包含元素，其中標(biāo)題不是必須的。對(duì)于警告框，蘋(píng)果規(guī)范和MD都建議盡量少使用，必須是告知很重要的信息才出現(xiàn)。另外，對(duì)于警告框的按鈕，應(yīng)盡量告知用戶操作的結(jié)果，而盡量避免使用“是/否”這樣的文案。

（更具體的說(shuō)明請(qǐng)參考：iOS和Android規(guī)范解析——警告框（Alerts）對(duì)比）

彈出框 & 簡(jiǎn)易菜單

左：iOS彈出框； 中、右：MD簡(jiǎn)易菜單

對(duì)于iOS的彈出框，原本是針對(duì)iPad這樣的大屏設(shè)備設(shè)置的控件，近兩年由于手機(jī)屏幕越來(lái)越大，也開(kāi)始應(yīng)用于手機(jī)，需要注意iOS的彈出框是自帶箭頭的，箭頭指向入口。MD的簡(jiǎn)易菜單，需要注意菜單沒(méi)有箭頭，并且菜單是壓住入口的，這一點(diǎn)經(jīng)常被用錯(cuò)。

（更具體的說(shuō)明請(qǐng)參考：iOS和Android規(guī)范解析——簡(jiǎn)易菜單、簡(jiǎn)易對(duì)話框和彈出框 ）

上拉菜單 & 簡(jiǎn)易彈框

左：iOS上拉菜單； 右：MD簡(jiǎn)易彈框

上拉菜單和簡(jiǎn)易彈框，都是用于提供一些列選項(xiàng)的控件。不同的是，上拉菜單必須包含“取消”按鈕；上拉菜單可用于毀滅性操作（比如“刪除”）等的二次確認(rèn)。而簡(jiǎn)易彈框沒(méi)有“取消”按鈕，在選項(xiàng)中可加入頭像、icon等元素，另外還有如上圖中的“添加聯(lián)系人”這樣的操作按鈕。

上拉菜單 & 活動(dòng)視圖 & 模態(tài)底板

左：上拉菜單； 中：活動(dòng)視圖； 右：模態(tài)底板

細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn)了，這里又出現(xiàn)了上拉菜單。事實(shí)上，這里要跟大家總結(jié)一下，上面提到的彈出框、上拉菜單、活動(dòng)視圖、簡(jiǎn)易彈框、簡(jiǎn)易菜單、模態(tài)底板，功能上其實(shí)非常相近，都是提供當(dāng)前環(huán)境下的一系列選項(xiàng)。區(qū)別是展現(xiàn)形式的不同，還有個(gè)別控件有其獨(dú)特的功能點(diǎn)。在MD中，有這樣一句介紹：Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app（模態(tài)底板與簡(jiǎn)易彈框、簡(jiǎn)易菜單可以互相替換使用，唯一的區(qū)別就是模態(tài)底板中可以承載深層鏈接）。鐺鐺，模態(tài)底板把這一串控件都串起來(lái)了。

（更具體的說(shuō)明請(qǐng)參考： iOS和Android規(guī)范解析——簡(jiǎn)易菜單、簡(jiǎn)易對(duì)話框和彈出框 ）

（更具體的說(shuō)明請(qǐng)參考： iOS和Android規(guī)范解析——底部浮層（上））

（更具體的說(shuō)明請(qǐng)參考： iOS和Android規(guī)范解析——底部浮層（下））

確認(rèn)彈框 & 全屏彈框 & 模態(tài)視圖

左：MD確認(rèn)彈框； 中：全屏彈框； 右：模態(tài)視圖

確認(rèn)彈框用于確定一個(gè)選項(xiàng)。全屏彈框和模態(tài)視圖，可用于較為復(fù)雜的任務(wù)，它們可以調(diào)起別的控件。

（更具體的說(shuō)明請(qǐng)參考： iOS和Android規(guī)范解析——確認(rèn)彈框、全屏彈框和模態(tài)視圖）

另外，還有工具欄（下一篇會(huì)介紹）、模態(tài)底板和提示框，就不一一列舉了。感興趣的朋友還可查看以下文章：

iOS和Android規(guī)范解析——提示框（Toast）對(duì)比iOS和Android規(guī)范解析——底部浮層（上）→內(nèi)有模態(tài)底板介紹

討論使人認(rèn)識(shí)更加深刻。歡迎留言。

#關(guān)于作者#

新設(shè)計(jì)青年，微信公眾號(hào)：新設(shè)計(jì)青年。愛(ài)奇藝高級(jí)交互設(shè)計(jì)師。德國(guó)海龜一枚，曾任職于騰訊微生活、網(wǎng)易、宜信等公司。

文章作者系 @新設(shè)計(jì)青年