很多組件功能有重疊，使用的規(guī)則邊界不甚明顯，有些可替換使用。具體使用何種形式，需要結(jié)合自己的產(chǎn)品和業(yè)務(wù)目的決定。

臨時(shí)層是什么

《支付寶體驗(yàn)設(shè)計(jì)精髓》中根據(jù)頁面元素的穩(wěn)定性，將頁面元素歸納為5個(gè)不同的層級，臨時(shí)層指那些在頁面中默認(rèn)隱藏，需要時(shí)再展示的元素。

臨時(shí)層包含彈窗、Toast提示、浮層彈窗、操作列表、全屏彈窗等，每種組件都有其適用的使用場景，合理的使用，能提高用戶效率和使用體驗(yàn)。作為新接觸 app 端設(shè)計(jì)的小白，為了規(guī)范自己的設(shè)計(jì)，總結(jié)了部分自己的理解，與大家交流。錯(cuò)誤之處還請指正。因?yàn)楣ぷ饕?iOS 端為主，故本文僅梳理了部分iOS應(yīng)用中常用的臨時(shí)層，并不僅限于iOS的規(guī)范組件。

彈窗（Alerts）

Alerts 屬于模態(tài)彈窗，用戶必須處理后才可以繼續(xù)原操作。彈窗是一種比較強(qiáng)的反饋形式，彈出時(shí)會阻斷用戶原操作，對用戶任務(wù)的打斷性很強(qiáng)。但頻繁的打斷用戶會帶給用戶挫敗感，同時(shí)也影響用戶完成任務(wù)的效率，所以需要慎重使用。

彈窗由標(biāo)題、內(nèi)容、操作組成。內(nèi)容描述文字并非必要，可以省略。一個(gè)好的彈窗要告知用戶當(dāng)前發(fā)生了什么及怎么解決。

使用情景

1.告知信息：彈窗用于告知用戶一些會影響到他們使用 應(yīng)用的重要信息，比如當(dāng)使用掃一掃功能時(shí)，告知用戶“沒有開啟相機(jī)權(quán)限”。關(guān)于重要信息的定義，不同產(chǎn)品可能有不同的理解，我認(rèn)為大概需要滿足 必要、重要、與當(dāng)前任務(wù)相關(guān)這幾個(gè)條件。

• ? ?必要：當(dāng)任務(wù)有前提條件需要滿足時(shí)。比如使用掃一掃需要開啟手機(jī)相機(jī)權(quán)限。
• ? ?重要：當(dāng)有重要信息需要告知用戶，會對用戶任務(wù)造成影響時(shí)。比如用戶掃描失效二維碼時(shí)，系統(tǒng)告知二維碼已經(jīng)失效，需要更換二維碼。
• 與當(dāng)前任務(wù)相關(guān)：即在合理的時(shí)間展示，不要顯示與當(dāng)前任務(wù)無關(guān)的提示，保證用戶專注于當(dāng)前任務(wù)。

2.快速操作：彈窗也用戶執(zhí)行一些可以快速執(zhí)行的小任務(wù)，比如撥打電話。

限制

• 彈窗最多承載三個(gè)操作，當(dāng)大于三個(gè)操作時(shí)，使用操作列表.
• 當(dāng)操作命令文本較長時(shí)，使用單列排列命令。
• 只適合讓用戶完成簡單任務(wù)，如錄入驗(yàn)證碼、撥打電話、確認(rèn)刪除操作等。
• 按鈕順序。關(guān)于確定取消按鈕的擺放位置，iOS規(guī)范里設(shè)定了較復(fù)雜的設(shè)計(jì)策略，在設(shè)計(jì)時(shí)，為了保持界面一致性，我將所有確認(rèn)類操作放在右側(cè)。
• 其他關(guān)于Alerts的設(shè)計(jì)要求，在iOS規(guī)范里有完善的描述，這里不再贅述了。

操作列表（Action Sheets）

操作列表展示了與用戶觸發(fā)操作直接相關(guān)的一系列選項(xiàng)。和彈窗相比操作列表對用戶的干擾性稍弱，并支持點(diǎn)擊頁面空白區(qū)域關(guān)閉，一般是由用戶主動操作觸發(fā)。

使用情景

在承載操作方便，和彈窗功能有重合，當(dāng)操作大于3個(gè)時(shí)，改用操作列表。關(guān)于Alerts和操作列表的關(guān)系，可以理解成：嚴(yán)重且操作較少時(shí)使用alert，其他情況使用操作列表。

限制

操作列表不支持滾動，需控制操作總數(shù)量,當(dāng)操作過多時(shí)，可以使用網(wǎng)格式等其他自定義樣式。

浮層彈窗

從頁面底部彈出的浮層，覆蓋部分頁面。彈出層相較于打開新頁面，更輕量，用戶可以更快速的完成任務(wù)，更快的返回修改。浮層里支持滾動操作。

關(guān)于浮層的收起，浮層應(yīng)該有單獨(dú)的關(guān)閉按鈕，也支持點(diǎn)擊浮層外區(qū)域收起。

當(dāng)允許用戶點(diǎn)擊浮層外區(qū)域收起時(shí)，可以使用戶快速切換浮層狀態(tài)，但也會帶來誤觸問題。所以，當(dāng)浮層內(nèi)有用戶耗費(fèi)精力完成的內(nèi)容時(shí)，收起時(shí)要記錄用戶完成的工作，方便用戶再次打開浮層時(shí)可以繼續(xù)。

有時(shí)，比如支付環(huán)節(jié)，我們不希望用戶輕易跳出，或用戶退出后不保存浮層內(nèi)結(jié)果時(shí)，可以僅允許用戶點(diǎn)擊關(guān)閉按鈕才能退出。

使用情景

• 和當(dāng)前內(nèi)容相關(guān)的小體量的任務(wù)：如選擇支付寶付款碼頁，選擇付款方式。
• 任務(wù)和當(dāng)前頁面需要頻繁切換以便校驗(yàn)或修改信息時(shí)：如淘寶的添加購物車浮層、查看物流信息等

限制

浮層空間較小，不適合承載復(fù)雜任務(wù)。

全屏彈窗

在MATERIAL DESIGN 中被稱為全屏彈窗，在iOS規(guī)范中被稱為模態(tài)視圖。和浮層彈窗相比，面積更大，可以完成更復(fù)雜的任務(wù)。全屏彈窗由頁面底部向上彈出，退出時(shí)，向下收起。

使用全屏彈窗和新頁面執(zhí)行任務(wù)，一個(gè)明顯區(qū)別是回到原頁面的方式，全屏彈窗通過點(diǎn)擊左上角的關(guān)閉，子級新頁面通過點(diǎn)擊左上角的“返回”。在iOS應(yīng)用中，關(guān)于全屏彈窗的使用，似乎沒有統(tǒng)一規(guī)范可循，比如同樣是切換城市，美團(tuán)使用全屏彈窗，支付寶使用子頁面。

使用情景

• 完成主任務(wù)的一個(gè)分支任務(wù)時(shí)。完成后，返回主任務(wù)流程。如郵箱中從通訊錄選擇收件人。
• 完成一個(gè)新增類的獨(dú)立任務(wù)，任務(wù)完成后切換回上級頁面（類似目錄）。比如寫郵件、咸魚發(fā)布寶貝等。但同樣是新增，但百度貼吧的發(fā)帖用的卻是子級頁面。

限制

必須點(diǎn)擊“保存”，頁面內(nèi)容才能生效。

Toasts

Toasts 是一種干擾性更弱的信息反饋方式，短暫出現(xiàn)后會自動消失，不會打斷用戶任務(wù)流程。

使用場景

和 Alerts 相比，toasts適用于一些不嚴(yán)重的信息的反饋，比如發(fā)送成功、表單項(xiàng)校驗(yàn)等

總結(jié)

綜上分析，很多組件功能有重疊，使用的規(guī)則邊界不甚明顯，有些可替換使用。具體使用何種形式，需要結(jié)合自己的產(chǎn)品和業(yè)務(wù)目的決定。從任務(wù)情景出發(fā)，我將上面的內(nèi)容歸于下面的圖，方便判斷該使用何種形式。

本文由 @m. 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。