雲小妹導讀：作為設計童鞋的經常打交道的移動元件，反而是最捉摸不定的東西，各種類型的彈窗傻傻分不清楚，不知道在什麼場景下應該用哪種彈窗。尤其是遇到“二次确認”等場景
今天的Work Like Alibaba實踐分享，我們邀請阿裡巴巴TXD體驗中心的互動設計師夏天為我們帶來IOS彈窗體系分享。
1 前言
前段時間整理移動元件，發現最為常見的【彈窗】反而是最“捉摸不定”的東西。各種類型的彈窗傻傻分不清楚，不知道在什麼場景下應該用哪種彈窗。尤其是遇到“二次确認”等場景……
是以，打算從頭整理移動彈窗的基礎知識，從定義出發，對移動彈窗進行分類，然後分别分析每一類彈窗的應用場景，以及在使用過程中需要注意的點。
本想一次性全部整理完，但是發現iOS和Material Design兩大體系下的彈窗類目繁多，互相之間又有千絲萬縷的關聯，是以決定拆分成四篇來仔細整理：
- 移動彈窗基礎知識淺析系列一：iPhone彈窗體系
- 移動彈窗基礎知識淺析系列二：安卓手機彈窗體系（Material Design）
- 移動彈窗基礎知識淺析系列三：iPhone與安卓兩大手機彈窗體系之間的關系與差異
- 移動彈窗基礎知識淺析系列四：手機、平闆、手表端的彈窗體系之間的關系與差異
https://www.atatech.org/articles/85141#1 2 名詞解釋
-
彈窗：
彈框是人機互動中常見的方式，常常出現于詢問、警示以及完成某個插入任務，常見于網頁端及移動端。彈框能使使用者有效聚焦于目前最緊急的資訊，也可以在不用離開目前頁面的前提下，完成一些輕量的任務。
-
移動彈窗：
運用在移動端的彈窗，包括了手機、平闆、手表等移動端裝置。本文整理學習對象的是【iPhone】的彈窗體系。
- 模态： 模态（Modality） 是一種視圖，在目前的iOS 10的人機互動指南（Human Interface Guidelines）中有如下定義：
早在iOS 7的HIG中，模态是歸屬于【Temporary View】類目下，且在定義上更加直白地指出：模态視圖突出焦點，因為使用者隻有在完成目前的任務或關閉一個資訊或視圖之後才能去做其它事情。
當螢幕上出現一個模态視圖時，使用者必須采取一個決定（點選按鈕或是其它）才能退出模态化體驗。一個模态視圖可以占據整個螢幕、整個父視圖（比如浮出層）或者螢幕的一部分。一個模态視圖一般都含有“完成”和“取消”按鈕來退出視圖。
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.
簡單了解起來，模态視圖，就是在原始視圖上，疊加一層蒙版，用以隔離原始視圖中的所有操作，然後在蒙版上展示一層新視圖，讓使用者更專注于完成新視圖中的任務。模态視圖是完成一系列任務的有效視圖。他出現在所有元素的頂部，且會阻塞所有底部元素的操作。
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.
-
模态彈窗：
運用模态視圖的彈窗。
-
非模态彈窗
運用非模态視圖的彈窗。
https://www.atatech.org/articles/85141#2 3 移動彈窗的分類
根據是否運用模态視圖，我把收集到的所有iOS的彈窗類型進行如下分類：
https://www.atatech.org/articles/85141#3 4 模态彈窗
https://www.atatech.org/articles/85141#4 4.1 對話框（Alerts，System Rating and Review Prompts）
https://www.atatech.org/articles/85141#5 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.
https://www.atatech.org/articles/85141#6 4.1.2 常見的使用方式
常用于資訊提示、操作二次确認、邀請評分、授權等場景。
——百度網盤，微信，蝸牛睡眠，Worktile
https://gw.alicdn.com/tfscom/TB1T1wIRVXXXXbpaXXXXXXXXXXX.png除了定義中提到的【文本輸入框】之外，iOS還提供了預設打分的元件【System Rating and Review Prompts】：
https://gw.alicdn.com/tfscom/TB1kXUMRVXXXXXfaXXXXXXXXXXX.pnghttps://www.atatech.org/articles/85141#7 4.1.3 使用過程中需要注意的點
- 标題：簡短能說明問題的标題。
- 資訊内容：根據需要可不填寫。
- 按鈕：
- 一般數量控制在3個以内，若需要更多的按鈕，建議使用【操作清單】。
- 可使用加粗、顔色等方式，引導使用者作出選擇。
- 文案要具體精準，讓使用者明白選擇之後會發生什麼。而不要使用“是”“否”等語意不明的詞。
- 符合使用者預期的按鈕放在右側，【取消】按鈕固定在左側。
- 當有破壞性的操作的時候，一方面要突出顯示具有潛在破壞性的操作按鈕，另一方面要確定有【取消】按鈕，保證使用者能夠安全地取消破壞性操作。（例如删除等。）
- 支援Home鍵關閉彈窗。
- 擴充元件：特殊情況下，可使用定義的擴充元件。例如文本輸入框、打分元件等。
- 操作方式：由于必須要擷取使用者明确的響應，是以隻有選擇按鈕才能關閉彈窗。（點選蒙版無法關閉彈窗）
https://www.atatech.org/articles/85141#8 4.2 操作清單（Action Sheets，Action Views）
https://www.atatech.org/articles/85141#9 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.
https://www.atatech.org/articles/85141#10 4.2.2 常見的使用方式
操作清單常被用于單選操作，以及删除操作的二次确認。(單一操作)
——哔哩哔哩，teambition，照片，微信（未使用原生彈窗）
操作視圖常被用于分享操作。
——Safari，釘釘，微信，UC
https://www.atatech.org/articles/85141#11 4.2.3 使用過程中需要注意的點
- 確定有一個【取消】的按鈕。
- 突出顯示具有潛在破壞性的操作按鈕。
- 盡量避免清單的滾動，如選項過多，則需要留出視覺線索。
- 對于【操作視圖】，需要明确的應用圖示和操作名稱，用于清晰地描述任務。
https://www.atatech.org/articles/85141#12 4.3 浮出層（Popover，Edit Menus，Home Screen Quick Action Menus）
https://www.atatech.org/articles/85141#13 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.
https://www.atatech.org/articles/85141#14 4.3.2 常見的使用方式
嚴格意義上的浮出層，能夠包含【導航欄、工具欄、标簽欄、表格、收藏、圖檔、地圖】等各種元素，是以由于展示空間的問題，隻能使用在iPad端，在手機端對應的是【全屏模态視圖（Full-Screen Modal Views）】。
但是，浮出層的明确指向性和便捷性，依舊非常适合用于手機端的菜單選擇，是以很多app都自己設計了小型的Popovers：
——微信，釘釘，手機淘寶，支付寶
編輯菜單，常用于對文本和聊天記錄的編輯。
——微信，釘釘，備忘錄，UC
主屏快捷操作菜單，是iOS獨有的互動形式，隻在主屏中使用，用于快速執行應用的常用任務。
——iOS主屏
https://www.atatech.org/articles/85141#15 4.3.3 使用過程中需要注意的點
- 顯示符合上下文情景的操作選項，并用通用的文案描述。
- 盡可能地減少選項數量，隻顯示最有意義的操作。
- 使用标準手勢喚起菜單。
- 根據喚起的位置，自動調整菜單的位置。
- 對于【編輯菜單】：
- 自動選擇相關聯的詞組。
- 不要加入【編輯】按鈕。
- 支援【撤銷/重做】操作。
https://www.atatech.org/articles/85141#16 4.4 模态視圖（Modal View）
https://www.atatech.org/articles/85141#17 4.4.1 定義
一個模态視圖可以占據整個螢幕、整個父視圖（比如浮出層）或者螢幕的一部分。
A modal view can occupy the entire screen, an entire parent view, or a portion of the screen.
這裡分析的【模态視圖】，差別于【對話框】，占據了更大範圍的螢幕，内部包含更多的操作。
https://www.atatech.org/articles/85141#18 4.4.2 常見的使用方式
根據占據螢幕的方式及範圍，可以分為【全屏、半屏、中央】三種類型，其中【全屏、半屏】常包含複雜表單：
全屏，常見于“建立後發送、選擇後下載下傳”等場景。
——網易郵箱-寫郵件，釘釘-DING，微信-轉發消息，騰訊視訊-緩存
半屏，常見于“側邊導航、選擇器”等場景。
——滴滴出行，大衆點評，手機淘寶，支付寶
中央，常見于“宣傳、引導使用者”等場景。
——百度糯米，滴滴出行，美團，teambition
https://www.atatech.org/articles/85141#19 4.4.3 使用過程中需要注意的點
- 確定模态視圖中的任務是簡練嚴謹的，讓使用者能夠聚焦高效地完成任務。
- 提供明顯且安全的退出模态視圖的方式。
- 對于【全屏/半屏】：
- 未點選【儲存/确認/完成】等明确的按鈕之前，所有的修改都不會生效。
- 模态視圖多從邊緣進入。
- 點選蒙版即可關閉模态視圖。
https://www.atatech.org/articles/85141#20 5 非模态彈窗
https://www.atatech.org/articles/85141#21 5.1 透明訓示層（UIProgressHUD）
具體的定義沒有找到，對應的是安卓獨有的的Toast，據說iOS稱之為
HUD（head up display）。目前未開放接口，隻應用在原生系統的音量鍵。
但是在很多APP中，大家已經習慣将廣義上的Toast用于狀态的提示：
——iOS音量鍵，手機淘寶，大衆點評，騰訊視訊
https://www.atatech.org/articles/85141#22 5.2 通知（Notifications）
https://www.atatech.org/articles/85141#23 5.2.1 定義
無論手機是鎖屏狀态還是使用狀态，app應用都能通過通知，第一時間傳遞給使用者重要資訊。
Apps can use notifications to provide timely and important information anytime, whether the device is locked or in use.
https://www.atatech.org/articles/85141#24 5.2.2 常見的使用方式
運作中的頂部banner,重按之後，會展開并呼出【操作清單 Action Sheet】。
https://www.atatech.org/articles/85141#25 5.2.3 使用過程中需要注意的點
- 提供精煉有價值的資訊。
- 注意通知發送的頻率和時機。
- 考慮3D Touch重按之後的展示細節内容，以及相關的操作按鈕。
https://www.atatech.org/articles/85141#26 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：若内容涉及侵權，請聯系管理者，我們将第一時間删除相關内容。
上
雲效，一起Work Like Alibaba，你也可以像阿裡巴巴一樣高效工作！