摘要：最為常見的【彈窗】反而是最“捉摸不定”的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應(yīng)該用哪種彈窗编矾。尤其是遇到“二次確認”等場景…… 因此碘菜，打算從頭整理移動彈窗的基礎(chǔ)知識仰坦，以iOS彈窗體系為切入點静尼，從定義出發(fā)眷细，對移動彈窗進行分類普舆，然后分別分析每一類彈窗的應(yīng)用場景歉秫，以及在使用過程中需要注意的點。
云小妹導(dǎo)讀：作為設(shè)計童鞋的經(jīng)常打交道的移動組件谎碍，反而是最捉摸不定的東西澡匪，各種類型的彈窗傻傻分不清楚笋敞，不知道在什么場景下應(yīng)該用哪種彈窗。尤其是遇到“二次確認”等場景
今天的Work Like Alibaba實踐分享喷兼，我們邀請阿里巴巴TXD體驗中心的交互設(shè)計師夏天為我們帶來IOS彈窗體系分享。
1 前言
前段時間整理移動組件藕筋，發(fā)現(xiàn)最為常見的【彈窗】反而是最“捉摸不定”的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應(yīng)該用哪種彈窗盐碱。尤其是遇到“二次確認”等場景……
因此，打算從頭整理移動彈窗的基礎(chǔ)知識聘惦，從定義出發(fā)黔漂，對移動彈窗進行分類剂跟，然后分別分析每一類彈窗的應(yīng)用場景辽剧，以及在使用過程中需要注意的點辟拷。
本想一次性全部整理完诀紊，但是發(fā)現(xiàn)iOS和Material Design兩大體系下的彈窗類目繁多考赛，相互之間又有千絲萬縷的關(guān)聯(lián)唧喉，因此決定拆分成四篇來仔細整理：
移動彈窗基礎(chǔ)知識淺析系列一：iPhone彈窗體系
移動彈窗基礎(chǔ)知識淺析系列二：安卓手機彈窗體系（Material Design）
移動彈窗基礎(chǔ)知識淺析系列三：iPhone與安卓兩大手機彈窗體系之間的關(guān)系與差異
移動彈窗基礎(chǔ)知識淺析系列四：手機鸠项、平板牧抽、手表端的彈窗體系之間的關(guān)系與差異
2 名詞解釋
彈窗：
彈框是人機交互中常見的方式阐肤，常常出現(xiàn)于詢問诊赊、警示以及完成某個插入任務(wù)，常見于網(wǎng)頁端及移動端。彈框能使用戶有效聚焦于當前最緊急的信息四濒，也可以在不用離開當前頁面的前提下职辨，完成一些輕量的任務(wù)。
移動彈窗：
運用在移動端的彈窗喳资，包括了手機仆邓、平板伴鳖、手表等移動端設(shè)備榜聂。本文整理學(xué)習(xí)對象的是【iPhone】的彈窗體系。
模態(tài)：
模態(tài)（Modality）是一種視圖贴汪，在當前的iOS 10的人機交互指南（Human Interface Guidelines）中有如下定義：
模態(tài)視圖突出焦點，因為用戶只有在完成當前的任務(wù)或關(guān)閉一個信息或視圖之后才能去做其它事情。
當屏幕上出現(xiàn)一個模態(tài)視圖時赡盘，用戶必須采取一個決定（點擊按鈕或是其它）才能退出模態(tài)化體驗。一個模態(tài)視圖可以占據(jù)整個屏幕蔬啡、整個父視圖（比如浮出層）或者屏幕的一部分。一個模態(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)在所有元素的頂部稀轨，且會阻塞所有底部元素的操作。
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.
簡單理解起來，模態(tài)視圖任柜，就是在原始視圖上秽梅，疊加一層蒙版，用以隔離原始視圖中的所有操作薄扁，然后在蒙版上展示一層新視圖诈铛，讓用戶更專注于完成新視圖中的任務(wù)循签。
模態(tài)彈窗：
運用模態(tài)視圖的彈窗。
非模態(tài)彈窗
運用非模態(tài)視圖的彈窗。
3 移動彈窗的分類
根據(jù)是否運用模態(tài)視圖，我把收集到的所有iOS的彈窗類型進行如下分類：
4 模態(tài)彈窗
4.1 對話框（Alerts吞获，System Rating and Review Prompts）
4.1.1 定義
對話框筝闹，是我們最為常見的【彈窗】類型。
對話框 -Alerts：
對話框承載與當前狀態(tài)有關(guān)的重要信息欢际，常需要用戶進行響應(yīng)。對話框由標題观腊、信息內(nèi)容（可選）州邢、一個或多個按鈕琅拌、文本輸入框（可選）四部分組成。除了上述可選元素以外，對話框的外觀是固定的不可修改的。
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 常見的使用方式
常用于信息提示亚隅、操作二次確認煮纵、邀請評分偏螺、授權(quán)等場景套像。
——百度網(wǎng)盤凉夯，微信采幌，蝸牛睡眠休傍，Worktile
除了定義中提到的【文本輸入框】之外，iOS還提供了默認打分的組件【System Rating and Review Prompts】：
4.1.3 使用過程中需要注意的點
標題：簡短能說明問題的標題。
信息內(nèi)容：根據(jù)需要可不填寫凫岖。
按鈕：
一般數(shù)量控制在3個以內(nèi)逢净，若需要更多的按鈕爹土，建議使用【操作列表】。
可使用加粗社露、顏色等方式琼娘，引導(dǎo)用戶作出選擇横殴。
文案要具體精準敞掘，讓用戶明白選擇之后會發(fā)生什么纯丸。而不要使用“是”“否”等語意不明的詞谎柄。
符合用戶預(yù)期的按鈕放在右側(cè)，【取消】按鈕固定在左側(cè)鸿摇。
當有破壞性的操作的時候拙吉，一方面要突出顯示具有潛在破壞性的操作按鈕揪荣，另一方面要確保有【取消】按鈕仗颈，保證用戶能夠安全地取消破壞性操作挨决。（例如刪除等。）
支持Home鍵關(guān)閉彈窗肆捕。
擴展組件：特殊情況下撒犀，可使用定義的擴展組件或舞。例如文本輸入框映凳、打分組件等。
操作方式：由于必須要獲取用戶明確的響應(yīng)仆救，因此只有選擇按鈕才能關(guān)閉彈窗彤蔽。（點擊蒙版無法關(guān)閉彈窗）
4.2 操作列表（Action Sheets，Action Views）
4.2.1 定義
操作列表 -Action Sheet
操作列表是一種特殊的對話框镊辕，是對操作動作的響應(yīng)征懈，顯示當前操作場景下相關(guān)聯(lián)的多個選項揩悄。用于讓用戶開始任務(wù)删性，或者在執(zhí)行潛在的破壞性操作前蹬挺，進行二次確認。
An action sheet isa specific style of alertthat 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, orto request confirmation before performing a potentially destructive operation.
操作視圖 -Activity View
操作視圖是app快捷任務(wù)的展示面板。用戶點擊面板上的任務(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 常見的使用方式
操作列表常被用于單選操作只恨，以及刪除操作的二次確認抬虽。(單一操作)
——嗶哩嗶哩阐污，teambition，照片功氨，微信（未使用原生彈窗）
操作視圖常被用于分享操作捷凄。
——Safari跺涤，釘釘钦铁，微信，UC
4.2.3 使用過程中需要注意的點
確保有一個【取消】的按鈕。
突出顯示具有潛在破壞性的操作按鈕黎比。
盡量避免列表的滾動阅虫，如選項過多颓帝，則需要留出視覺線索。
對于【操作視圖】吕座，需要明確的應(yīng)用圖標和操作名稱吴趴，用于清晰地描述任務(wù)侮攀。
4.3 浮出層（Popover兰英，Edit Menus畦贸，Home Screen Quick Action Menus）
4.3.1 定義
浮出層 -Popovers
浮出層是一種暫時性的視圖，他出現(xiàn)在用戶點擊區(qū)域的頂層正林。典型的浮出層包括一個箭頭觅廓，指向浮出層出現(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)頁写妥、圖片等地方审姓，使用長按魔吐、雙擊的手勢喚起【編輯菜單】酬姆。他包含了一些相關(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 常見的使用方式
嚴格意義上的浮出層针贬，能夠包含【導(dǎo)航欄拢蛋、工具欄谆棱、標簽欄垃瞧、表格、收藏脉幢、圖片鸵隧、地圖】等各種元素意推，所以由于展示空間的問題菊值，只能使用在iPad端腻窒，在手機端對應(yīng)的是【全屏模態(tài)視圖（Full-Screen Modal Views）】儿子。
但是，浮出層的明確指向性和便捷性柔逼，依舊非常適合用于手機端的菜單選擇愉适，因此很多app都自己設(shè)計了小型的Popovers：
——微信维咸，釘釘剂买，手機淘寶惠爽，支付寶
編輯菜單，常用于對文本和聊天記錄的編輯瞬哼。
——微信婚肆，釘釘，備忘錄倒槐，UC
主屏快捷操作菜單旬痹，是iOS獨有的交互形式，只在主屏中使用两残，用于快速執(zhí)行應(yīng)用的常用任務(wù)。
——iOS主屏
4.3.3 使用過程中需要注意的點
顯示符合上下文情景的操作選項把跨，并用通用的文案描述人弓。
盡可能地減少選項數(shù)量，只顯示最有意義的操作着逐。
使用標準手勢喚起菜單崔赌。
根據(jù)喚起的位置，自動調(diào)整菜單的位置耸别。
對于【編輯菜單】：
自動選擇相關(guān)聯(lián)的詞組健芭。
不要加入【編輯】按鈕。
支持【撤銷/重做】操作秀姐。
4.4 模態(tài)視圖（Modal View）
4.4.1 定義
一個模態(tài)視圖可以占據(jù)整個屏幕慈迈、整個父視圖（比如浮出層）或者屏幕的一部分。
A modal view can occupy the entire screen, an entire parent view, or a portion of the screen.
這里分析的【模態(tài)視圖】省有，區(qū)別于【對話框】痒留，占據(jù)了更大范圍的屏幕，內(nèi)部包含更多的操作蠢沿。
4.4.2 常見的使用方式
根據(jù)占據(jù)屏幕的方式及范圍伸头，可以分為【全屏、半屏舷蟀、中央】三種類型恤磷，其中【全屏、半屏】常包含復(fù)雜表單：
全屏野宜，常見于“新建后發(fā)送扫步、選擇后下載”等場景。
——網(wǎng)易郵箱-寫郵件速缨，釘釘-DING，微信-轉(zhuǎn)發(fā)消息代乃，騰訊視頻-緩存
半屏旬牲，常見于“側(cè)邊導(dǎo)航仿粹、選擇器”等場景。
——滴滴出行原茅，大眾點評吭历，手機淘寶，支付寶
中央擂橘，常見于“宣傳晌区、引導(dǎo)用戶”等場景。
——百度糯米通贞，滴滴出行朗若，美團，teambition
4.4.3 使用過程中需要注意的點
確保模態(tài)視圖中的任務(wù)是簡練嚴謹?shù)牟郑層脩裟軌蚓劢垢咝У赝瓿扇蝿?wù)哭懈。
提供明顯且安全的退出模態(tài)視圖的方式。
對于【全屏/半屏】：
未點擊【保存/確認/完成】等明確的按鈕之前茎用，所有的修改都不會生效遣总。
模態(tài)視圖多從邊緣進入。
點擊蒙版即可關(guān)閉模態(tài)視圖轨功。
5 非模態(tài)彈窗
5.1 透明指示層（UIProgressHUD）
具體的定義沒有找到旭斥，對應(yīng)的是安卓獨有的的Toast，據(jù)說iOS稱之為HUD（head up display）古涧。目前未開放接口垂券，只應(yīng)用在原生系統(tǒng)的音量鍵。
但是在很多APP中蒿褂，大家已經(jīng)習(xí)慣將廣義上的Toast用于狀態(tài)的提示：
——iOS音量鍵圆米，手機淘寶，大眾點評啄栓，騰訊視頻
5.2 通知（Notifications）
5.2.1 定義
無論手機是鎖屏狀態(tài)還是使用狀態(tài)娄帖，app應(yīng)用都能通過通知，第一時間傳遞給用戶重要信息昙楚。
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 使用過程中需要注意的點
提供精煉有價值的信息堪旧。
注意通知發(fā)送的頻率和時機削葱。
考慮3D Touch重按之后的展示細節(jié)內(nèi)容，以及相關(guān)的操作按鈕淳梦。
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
幾種彈窗設(shè)計模式（iOS端)，http://www.reibang.com/p/63eb8fad9329
實用干貨弦疮！UI設(shè)計師需要了解的 APP彈窗體系夹攒，http://www.uisdc.com/app-popup-ui-system
注1：本文是基于iOS 11的人機交互指南（Human Interface Guidelines）、網(wǎng)上大神們的文章胁塞、個人經(jīng)驗總結(jié)梳理而成咏尝，還望大家不吝賜教，提出寶貴的意見或建議啸罢。
注2：若內(nèi)容涉及侵權(quán)编检，請聯(lián)系管理員，我們將第一時間刪除相關(guān)內(nèi)容伺糠。
