摘要： 最為常見的【彈窗】反而是最“捉摸不定”的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應該用哪種彈窗。尤其是遇到“二次確認”等場景…… 因此，打算從頭整理移動彈窗的基礎知識，以iOS彈窗體系為切入點，從定義出發，對移動彈窗進行分類，然后分別分析每一類彈窗的應用場景，以及在使用過程中需要注意的點。
云小妹導讀：作為設計童鞋的經常打交道的移動組件，反而是最捉摸不定的東西，各種類型的彈窗傻傻分不清楚，不知道在什么場景下應該用哪種彈窗。尤其是遇到“二次確認”等場景
今天的Work Like Alibaba實踐分享，我們邀請 阿里巴巴TXD體驗中心 的交互設計師夏天 為我們帶來IOS彈窗體系分享。
1 前言
前段時間整理移動組件，發現最為常見的【彈窗】反而是最“捉摸不定”的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應該用哪種彈窗。尤其是遇到“二次確認”等場景……
因此，打算從頭整理移動彈窗的基礎知識，從定義出發，對移動彈窗進行分類，然后分別分析每一類彈窗的應用場景，以及在使用過程中需要注意的點。
本想一次性全部整理完，但是發現iOS和Material Design兩大體系下的彈窗類目繁多，相互之間又有千絲萬縷的關聯，因此決定拆分成四篇來仔細整理： 移動彈窗基礎知識淺析系列一：iPhone彈窗體系 移動彈窗基礎知識淺析系列二：安卓手機彈窗體系（Material Design） 移動彈窗基礎知識淺析系列三：iPhone與安卓兩大手機彈窗體系之間的關系與差異 移動彈窗基礎知識淺析系列四：手機、平板、手表端的彈窗體系之間的關系與差異
2 名詞解釋 彈窗：
彈框是人機交互中常見的方式，常常出現于詢問、警示以及完成某個插入任務，常見于網頁端及移動端。彈框能使用戶有效聚焦于當前最緊急的信息，也可以在不用離開當前頁面的前提下，完成一些輕量的任務。 移動彈窗：
運用在移動端的彈窗，包括了手機、平板、手表等移動端設備。本文整理學習對象的是【iPhone】的彈窗體系。 模態：
模態（Modality） 是一種視圖，在當前的iOS 10的人機交互指南（Human Interface Guidelines）中有如下定義： 模態視圖突出焦點，因為用戶只有在完成當前的任務或關閉一個信息或視圖之后才能去做其它事情。
當屏幕上出現一個模態視圖時，用戶必須采取一個決定（點擊按鈕或是其它）才能退出模態化體驗。一個模態視圖可以占據整個屏幕、整個父視圖（比如浮出層）或者屏幕的一部分。一個模態視圖一般都含有“完成”和“取消”按鈕來退出視圖。
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中，模態是歸屬于【Temporary View】類目下，且在定義上更加直白地指出： 模態視圖是完成一系列任務的有效視圖。他出現在所有元素的頂部，且會阻塞所有底部元素的操作。
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.
簡單理解起來，模態視圖，就是在原始視圖上，疊加一層蒙版，用以隔離原始視圖中的所有操作，然后在蒙版上展示一層新視圖，讓用戶更專注于完成新視圖中的任務。

模態彈窗：
運用模態視圖的彈窗。 非模態彈窗
運用非模態視圖的彈窗。

3 移動彈窗的分類
根據是否運用模態視圖，我把收集到的所有iOS的彈窗類型進行如下分類：

4 模態彈窗
4.1 對話框（Alerts，System Rating and Review Prompts）
4.1.1 定義
對話框，是我們最為常見的【彈窗】類型。
對話框 - Alerts ： 對話框承載與當前狀態有關的重要信息，常需要用戶進行響應。對話框由標題、信息內容（可選）、一個或多個按鈕、文本輸入框（可選）四部分組成。除了上述可選元素以外，對話框的外觀是固定的不可修改的。
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 常見的使用方式
常用于信息提示、操作二次確認、邀請評分、授權等場景。
——百度網盤，微信，蝸牛睡眠，Worktile


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


4.1.3 使用過程中需要注意的點
標題：簡短能說明問題的標題。 信息內容：根據需要可不填寫。 按鈕： 一般數量控制在3個以內，若需要更多的按鈕，建議使用【操作列表】。 可使用加粗、顏色等方式，引導用戶作出選擇。 文案要具體精準，讓用戶明白選擇之后會發生什么。而不要使用“是”“否”等語意不明的詞。 符合用戶預期的按鈕放在右側，【取消】按鈕固定在左側。 當有破壞性的操作的時候，一方面要突出顯示具有潛在破壞性的操作按鈕，另一方面要確保有【取消】按鈕，保證用戶能夠安全地取消破壞性操作。（例如刪除等。） 支持Home鍵關閉彈窗。 擴展組件：特殊情況下，可使用定義的擴展組件。例如文本輸入框、打分組件等。 操作方式：由于必須要獲取用戶明確的響應，因此只有選擇按鈕才能關閉彈窗。（點擊蒙版無法關閉彈窗）
4.2 操作列表（Action Sheets，Action Views）
4.2.1 定義
操作列表 - Action Sheet 操作列表是一種特殊的對話框，是對操作動作的響應，顯示當前操作場景下相關聯的多個選項。用于讓用戶開始任務，或者在執行潛在的破壞性操作前，進行二次確認。
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快捷任務的展示面板。用戶點擊面板上的任務，可以直接執行相應的任務。
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 常見的使用方式
操作列表常被用于單選操作，以及 刪除操作的二次確認。 (單一操作)
——嗶哩嗶哩，teambition，照片，微信（未使用原生彈窗）

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

4.2.3 使用過程中需要注意的點 確保有一個【取消】的按鈕。 突出顯示具有潛在破壞性的操作按鈕。 盡量避免列表的滾動，如選項過多，則需要留出視覺線索。 對于【操作視圖】，需要明確的應用圖標和操作名稱，用于清晰地描述任務。
4.3 浮出層（Popover，Edit Menus，Home Screen Quick Action Menus）
4.3.1 定義
浮出層 - Popovers 浮出層是一種暫時性的視圖，他出現在用戶點擊區域的頂層。典型的浮出層包括一個箭頭，指向浮出層出現的位置。浮出層可以是模態的，也可以是非模態的。
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 用戶可以在文本、網頁、圖片等地方，使用長按、雙擊的手勢喚起【編輯菜單】。他包含了一些相關聯的編輯操作，比如復制、粘貼等。
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 常見的使用方式
嚴格意義上的浮出層，能夠包含【導航欄、工具欄、標簽欄、表格、收藏、圖片、地圖】等各種元素，所以由于展示空間的問題，只能使用在iPad端，在手機端對應的是【全屏模態視圖（Full-Screen Modal Views）】。
但是，浮出層的明確指向性和便捷性，依舊非常適合用于手機端的菜單選擇，因此很多app都自己設計了小型的Popovers：
——微信，釘釘，手機淘寶，支付寶

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

主屏快捷操作菜單，是iOS獨有的交互形式，只在主屏中使用，用于快速執行應用的常用任務。
——iOS主屏


4.3.3 使用過程中需要注意的點
顯示符合上下文情景的操作選項，并用通用的文案描述。 盡可能地減少選項數量，只顯示最有意義的操作。 使用標準手勢喚起菜單。 根據喚起的位置，自動調整菜單的位置。 對于【編輯菜單】： 自動選擇相關聯的詞組。 不要加入【編輯】按鈕。 支持【撤銷/重做】操作。
4.4 模態視圖（Modal View）
4.4.1 定義 一個模態視圖可以占據整個屏幕、整個父視圖（比如浮出層）或者屏幕的一部分。
A modal view can occupy the entire screen, an entire parent view, or a portion of the screen.
這里分析的【模態視圖】，區別于【對話框】，占據了更大范圍的屏幕，內部包含更多的操作。
4.4.2 常見的使用方式
根據占據屏幕的方式及范圍，可以分為【全屏、半屏、中央】三種類型，其中【全屏、半屏】常包含復雜表單：
全屏，常見于“新建后發送、選擇后下載”等場景。
——網易郵箱-寫郵件，釘釘-DING，微信-轉發消息，騰訊視頻-緩存

半屏，常見于“側邊導航、選擇器”等場景。
——滴滴出行，大眾點評，手機淘寶，支付寶

中央，常見于“宣傳、引導用戶”等場景。
——百度糯米，滴滴出行，美團，teambition

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

5.2 通知（Notifications）
5.2.1 定義 無論手機是鎖屏狀態還是使用狀態，app應用都能通過通知，第一時間傳遞給用戶重要信息。
Apps can use notifications to provide timely and important information anytime, whether the device is locked or in use.
5.2.2 常見的使用方式
運行中的頂部banner,重按之后，會展開并呼出【操作列表 Action Sheet】。

5.2.3 使用過程中需要注意的點 提供精煉有價值的信息。 注意通知發送的頻率和時機。 考慮3D Touch重按之后的展示細節內容，以及相關的操作按鈕。
6 參考文獻 認識移動端彈框， https://mp.weixin.qq.com/s/9XyiKTiXYaIHcFHDbpvLEg Human Interface Guidelines（iOS 10，2017.06）， https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/ The iOS Design Guidelines（iOS 7，2015.9.28）， http://ivomynttinen.com/blog/ios-design-guidelines 幾種彈窗設計模式（iOS端)， http://www.jianshu.com/p/63eb8fad9329 實用干貨！UI設計師需要了解的 APP彈窗體系， http://www.uisdc.com/app-popup-ui-system

注1：本文是基于iOS 11的人機交互指南（Human Interface Guidelines）、網上大神們的文章、個人經驗總結梳理而成，還望大家不吝賜教，提出寶貴的意見或建議。
注2：若內容涉及侵權，請聯系管理員，我們將第一時間刪除相關內容。
原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。