摘要：尤其是遇到二次確認(rèn)等場(chǎng)景因此，打算從頭整理移動(dòng)彈窗的基礎(chǔ)知識(shí)，以彈窗體系為切入點(diǎn)，從定義出發(fā)，對(duì)移動(dòng)彈窗進(jìn)行分類，然后分別分析每一類彈窗的應(yīng)用場(chǎng)景，以及在使用過程中需要注意的點(diǎn)。

摘要： 最為常見的【彈窗】反而是最“捉摸不定”的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場(chǎng)景下應(yīng)該用哪種彈窗。尤其是遇到“二次確認(rèn)”等場(chǎng)景…… 因此，打算從頭整理移動(dòng)彈窗的基礎(chǔ)知識(shí)，以iOS彈窗體系為切入點(diǎn)，從定義出發(fā)，對(duì)移動(dòng)彈窗進(jìn)行分類，然后分別分析每一類彈窗的應(yīng)用場(chǎng)景，以及在使用過程中需要注意的點(diǎn)。

云小妹導(dǎo)讀：作為設(shè)計(jì)童鞋的經(jīng)常打交道的移動(dòng)組件，反而是最捉摸不定的東西，各種類型的彈窗傻傻分不清楚，不知道在什么場(chǎng)景下應(yīng)該用哪種彈窗。尤其是遇到“二次確認(rèn)”等場(chǎng)景
今天的Work Like Alibaba實(shí)踐分享，我們邀請(qǐng)阿里巴巴TXD體驗(yàn)中心的交互設(shè)計(jì)師夏天為我們帶來IOS彈窗體系分享。
1 前言
前段時(shí)間整理移動(dòng)組件，發(fā)現(xiàn)最為常見的【彈窗】反而是最“捉摸不定”的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場(chǎng)景下應(yīng)該用哪種彈窗。尤其是遇到“二次確認(rèn)”等場(chǎng)景……
因此，打算從頭整理移動(dòng)彈窗的基礎(chǔ)知識(shí)，從定義出發(fā)，對(duì)移動(dòng)彈窗進(jìn)行分類，然后分別分析每一類彈窗的應(yīng)用場(chǎng)景，以及在使用過程中需要注意的點(diǎn)。
本想一次性全部整理完，但是發(fā)現(xiàn)iOS和Material Design兩大體系下的彈窗類目繁多，相互之間又有千絲萬縷的關(guān)聯(lián)，因此決定拆分成四篇來仔細(xì)整理：

移動(dòng)彈窗基礎(chǔ)知識(shí)淺析系列一：iPhone彈窗體系
移動(dòng)彈窗基礎(chǔ)知識(shí)淺析系列二：安卓手機(jī)彈窗體系（Material Design）
移動(dòng)彈窗基礎(chǔ)知識(shí)淺析系列三：iPhone與安卓?jī)纱笫謾C(jī)彈窗體系之間的關(guān)系與差異
移動(dòng)彈窗基礎(chǔ)知識(shí)淺析系列四：手機(jī)、平板、手表端的彈窗體系之間的關(guān)系與差異
2 名詞解釋
彈窗：
彈框是人機(jī)交互中常見的方式，常常出現(xiàn)于詢問、警示以及完成某個(gè)插入任務(wù)，常見于網(wǎng)頁端及移動(dòng)端。彈框能使用戶有效聚焦于當(dāng)前最緊急的信息，也可以在不用離開當(dāng)前頁面的前提下，完成一些輕量的任務(wù)。

移動(dòng)彈窗：
運(yùn)用在移動(dòng)端的彈窗，包括了手機(jī)、平板、手表等移動(dòng)端設(shè)備。本文整理學(xué)習(xí)對(duì)象的是【iPhone】的彈窗體系。

模態(tài)：
模態(tài)（Modality）是一種視圖，在當(dāng)前的iOS 10的人機(jī)交互指南（Human Interface Guidelines）中有如下定義：

模態(tài)視圖突出焦點(diǎn)，因?yàn)橛脩糁挥性谕瓿僧?dāng)前的任務(wù)或關(guān)閉一個(gè)信息或視圖之后才能去做其它事情。
當(dāng)屏幕上出現(xiàn)一個(gè)模態(tài)視圖時(shí)，用戶必須采取一個(gè)決定（點(diǎn)擊按鈕或是其它）才能退出模態(tài)化體驗(yàn)。一個(gè)模態(tài)視圖可以占據(jù)整個(gè)屏幕、整個(gè)父視圖（比如浮出層）或者屏幕的一部分。一個(gè)模態(tài)視圖一般都含有“完成”和“取消”按鈕來退出視圖。
Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view. When a modal view appears onscreen, the user must make a choice by tapping a button or otherwise exiting the modal experience. A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen. A modal view typically includes completion and cancel buttons that exit the view.

早在iOS 7的HIG中，模態(tài)是歸屬于【Temporary View】類目下，且在定義上更加直白地指出：

模態(tài)視圖是完成一系列任務(wù)的有效視圖。他出現(xiàn)在所有元素的頂部，且會(huì)阻塞所有底部元素的操作。
Modals are a useful view for tasks that require multiple commands or inputs by the user. They appear on top of everything else, and, while open, block interaction with any other interactive elements underneath.

簡(jiǎn)單理解起來，模態(tài)視圖，就是在原始視圖上，疊加一層蒙版，用以隔離原始視圖中的所有操作，然后在蒙版上展示一層新視圖，讓用戶更專注于完成新視圖中的任務(wù)。

模態(tài)彈窗：
運(yùn)用模態(tài)視圖的彈窗。

非模態(tài)彈窗
運(yùn)用非模態(tài)視圖的彈窗。

3 移動(dòng)彈窗的分類
根據(jù)是否運(yùn)用模態(tài)視圖，我把收集到的所有iOS的彈窗類型進(jìn)行如下分類：

4 模態(tài)彈窗
4.1 對(duì)話框（Alerts，System Rating and Review Prompts）
4.1.1 定義
對(duì)話框，是我們最為常見的【彈窗】類型。
對(duì)話框 - Alerts：

對(duì)話框承載與當(dāng)前狀態(tài)有關(guān)的重要信息，常需要用戶進(jìn)行響應(yīng)。對(duì)話框由標(biāo)題、信息內(nèi)容（可選）、一個(gè)或多個(gè)按鈕、文本輸入框（可選）四部分組成。除了上述可選元素以外，對(duì)話框的外觀是固定的不可修改的。
Alerts convey important information related to the state of your app or the device, and often request feedback. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

4.1.2 常見的使用方式
常用于信息提示、操作二次確認(rèn)、邀請(qǐng)?jiān)u分、授權(quán)等場(chǎng)景。

——百度網(wǎng)盤，微信，蝸牛睡眠，Worktile

除了定義中提到的【文本輸入框】之外，iOS還提供了默認(rèn)打分的組件【System Rating and Review Prompts】：

4.1.3 使用過程中需要注意的點(diǎn)
標(biāo)題：簡(jiǎn)短能說明問題的標(biāo)題。
信息內(nèi)容：根據(jù)需要可不填寫。
按鈕：
一般數(shù)量控制在3個(gè)以內(nèi)，若需要更多的按鈕，建議使用【操作列表】。
可使用加粗、顏色等方式，引導(dǎo)用戶作出選擇。
文案要具體精準(zhǔn)，讓用戶明白選擇之后會(huì)發(fā)生什么。而不要使用“是”“否”等語意不明的詞。
符合用戶預(yù)期的按鈕放在右側(cè)，【取消】按鈕固定在左側(cè)。
當(dāng)有破壞性的操作的時(shí)候，一方面要突出顯示具有潛在破壞性的操作按鈕，另一方面要確保有【取消】按鈕，保證用戶能夠安全地取消破壞性操作。（例如刪除等。）
支持Home鍵關(guān)閉彈窗。
擴(kuò)展組件：特殊情況下，可使用定義的擴(kuò)展組件。例如文本輸入框、打分組件等。
操作方式：由于必須要獲取用戶明確的響應(yīng)，因此只有選擇按鈕才能關(guān)閉彈窗。（點(diǎn)擊蒙版無法關(guān)閉彈窗）
4.2 操作列表（Action Sheets，Action Views）
4.2.1 定義
操作列表 - Action Sheet

操作列表是一種特殊的對(duì)話框，是對(duì)操作動(dòng)作的響應(yīng)，顯示當(dāng)前操作場(chǎng)景下相關(guān)聯(lián)的多個(gè)選項(xiàng)。用于讓用戶開始任務(wù)，或者在執(zhí)行潛在的破壞性操作前，進(jìn)行二次確認(rèn)。
An action sheet is a specific style of alert that appears in response to a control or action, and presents a set of two or more choices related to the current context. Use an action sheet to let people initiate tasks, or to request confirmation before performing a potentially destructive operation.

操作視圖 - Activity View

操作視圖是app快捷任務(wù)的展示面板。用戶點(diǎn)擊面板上的任務(wù)，可以直接執(zhí)行相應(yīng)的任務(wù)。
An activity is a task, such as Copy, Favorite, or Find, that’s useful in the current context. Once initiated, an activity can perform a task immediately, or ask for more information before proceeding. Activities are managed by an activity view, which appears as a sheet or popover, depending on the device and orientation.

4.2.2 常見的使用方式
操作列表常被用于單選操作，以及刪除操作的二次確認(rèn)。(單一操作)

——嗶哩嗶哩，teambition，照片，微信（未使用原生彈窗）

操作視圖常被用于分享操作。
——Safari，釘釘，微信，UC

4.2.3 使用過程中需要注意的點(diǎn)
確保有一個(gè)【取消】的按鈕。
突出顯示具有潛在破壞性的操作按鈕。
盡量避免列表的滾動(dòng)，如選項(xiàng)過多，則需要留出視覺線索。
對(duì)于【操作視圖】，需要明確的應(yīng)用圖標(biāo)和操作名稱，用于清晰地描述任務(wù)。
4.3 浮出層（Popover，Edit Menus，Home Screen Quick Action Menus）
4.3.1 定義
浮出層 - Popovers

浮出層是一種暫時(shí)性的視圖，他出現(xiàn)在用戶點(diǎn)擊區(qū)域的頂層。典型的浮出層包括一個(gè)箭頭，指向浮出層出現(xiàn)的位置。浮出層可以是模態(tài)的，也可以是非模態(tài)的。
A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal.

編輯菜單 - Edit Menus

用戶可以在文本、網(wǎng)頁、圖片等地方，使用長(zhǎng)按、雙擊的手勢(shì)喚起【編輯菜單】。他包含了一些相關(guān)聯(lián)的編輯操作，比如復(fù)制、粘貼等。
People can touch and hold or double-tap an element in a text field, a text view, a web view, or an image view to select content and reveal edit options, such as Copy and Paste.

主屏快捷操作菜單 - Home Screen Quick Action Menus

快捷主屏操作菜單，是通過3D Touch喚起的快捷菜單。
Home screen quick actions are a convenient way to perform useful, app-specific actions right from the Home screen, using 3D Touch.

4.3.2 常見的使用方式
嚴(yán)格意義上的浮出層，能夠包含【導(dǎo)航欄、工具欄、標(biāo)簽欄、表格、收藏、圖片、地圖】等各種元素，所以由于展示空間的問題，只能使用在iPad端，在手機(jī)端對(duì)應(yīng)的是【全屏模態(tài)視圖（Full-Screen Modal Views）】。
但是，浮出層的明確指向性和便捷性，依舊非常適合用于手機(jī)端的菜單選擇，因此很多app都自己設(shè)計(jì)了小型的Popovers：
——微信，釘釘，手機(jī)淘寶，支付寶

編輯菜單，常用于對(duì)文本和聊天記錄的編輯。
——微信，釘釘，備忘錄，UC

主屏快捷操作菜單，是iOS獨(dú)有的交互形式，只在主屏中使用，用于快速執(zhí)行應(yīng)用的常用任務(wù)。
——iOS主屏

4.3.3 使用過程中需要注意的點(diǎn)
顯示符合上下文情景的操作選項(xiàng)，并用通用的文案描述。
盡可能地減少選項(xiàng)數(shù)量，只顯示最有意義的操作。
使用標(biāo)準(zhǔn)手勢(shì)喚起菜單。
根據(jù)喚起的位置，自動(dòng)調(diào)整菜單的位置。
對(duì)于【編輯菜單】：
自動(dòng)選擇相關(guān)聯(lián)的詞組。
不要加入【編輯】按鈕。
支持【撤銷/重做】操作。
4.4 模態(tài)視圖（Modal View）
4.4.1 定義
一個(gè)模態(tài)視圖可以占據(jù)整個(gè)屏幕、整個(gè)父視圖（比如浮出層）或者屏幕的一部分。
A modal view can occupy the entire screen, an entire parent view, or a portion of the screen.

這里分析的【模態(tài)視圖】，區(qū)別于【對(duì)話框】，占據(jù)了更大范圍的屏幕，內(nèi)部包含更多的操作。

4.4.2 常見的使用方式
根據(jù)占據(jù)屏幕的方式及范圍，可以分為【全屏、半屏、中央】三種類型，其中【全屏、半屏】常包含復(fù)雜表單：

全屏，常見于“新建后發(fā)送、選擇后下載”等場(chǎng)景。
——網(wǎng)易郵箱-寫郵件，釘釘-DING，微信-轉(zhuǎn)發(fā)消息，騰訊視頻-緩存

半屏，常見于“側(cè)邊導(dǎo)航、選擇器”等場(chǎng)景。
——滴滴出行，大眾點(diǎn)評(píng)，手機(jī)淘寶，支付寶

中央，常見于“宣傳、引導(dǎo)用戶”等場(chǎng)景。
——百度糯米，滴滴出行，美團(tuán)，teambition

4.4.3 使用過程中需要注意的點(diǎn)
確保模態(tài)視圖中的任務(wù)是簡(jiǎn)練嚴(yán)謹(jǐn)?shù)?，讓用戶能夠聚焦高效地完成任?wù)。
提供明顯且安全的退出模態(tài)視圖的方式。
對(duì)于【全屏/半屏】：
未點(diǎn)擊【保存/確認(rèn)/完成】等明確的按鈕之前，所有的修改都不會(huì)生效。
模態(tài)視圖多從邊緣進(jìn)入。
點(diǎn)擊蒙版即可關(guān)閉模態(tài)視圖。
5 非模態(tài)彈窗
5.1 透明指示層（UIProgressHUD）
具體的定義沒有找到，對(duì)應(yīng)的是安卓獨(dú)有的的Toast，據(jù)說iOS稱之為HUD（head up display）。目前未開放接口，只應(yīng)用在原生系統(tǒng)的音量鍵。
但是在很多APP中，大家已經(jīng)習(xí)慣將廣義上的Toast用于狀態(tài)的提示：
——iOS音量鍵，手機(jī)淘寶，大眾點(diǎn)評(píng)，騰訊視頻

5.2 通知（Notifications）
5.2.1 定義
無論手機(jī)是鎖屏狀態(tài)還是使用狀態(tài)，app應(yīng)用都能通過通知，第一時(shí)間傳遞給用戶重要信息。
Apps can use notifications to provide timely and important information anytime, whether the device is locked or in use.

5.2.2 常見的使用方式
運(yùn)行中的頂部banner,重按之后，會(huì)展開并呼出【操作列表 Action Sheet】。

5.2.3 使用過程中需要注意的點(diǎn)
提供精煉有價(jià)值的信息。
注意通知發(fā)送的頻率和時(shí)機(jī)。
考慮3D Touch重按之后的展示細(xì)節(jié)內(nèi)容，以及相關(guān)的操作按鈕。
6 參考文獻(xiàn)
認(rèn)識(shí)移動(dòng)端彈框，https://mp.weixin.qq.com/s/9X...
Human Interface Guidelines（iOS 10，2017.06），https://developer.apple.com/i...
The iOS Design Guidelines（iOS 7，2015.9.28），http://ivomynttinen.com/blog/...
幾種彈窗設(shè)計(jì)模式（iOS端)，http://www.jianshu.com/p/63eb...
實(shí)用干貨！UI設(shè)計(jì)師需要了解的 APP彈窗體系，http://www.uisdc.com/app-popu...

注1：本文是基于iOS 11的人機(jī)交互指南（Human Interface Guidelines）、網(wǎng)上大神們的文章、個(gè)人經(jīng)驗(yàn)總結(jié)梳理而成，還望大家不吝賜教，提出寶貴的意見或建議。

注2：若內(nèi)容涉及侵權(quán)，請(qǐng)聯(lián)系管理員，我們將第一時(shí)間刪除相關(guān)內(nèi)容。
原文鏈接