作者：ZYUN（20191018）
預(yù)計(jì)閱讀時(shí)長：8 分鐘（2110 字；15 圖）
溫馨提示：文中部分配圖可能有點(diǎn)模糊弥奸，如有需要可點(diǎn)擊「移動(dòng)端交互控件規(guī)范總結(jié)：彈窗」查看大圖（第一次加載可能會有點(diǎn)慢～）榨惠。

了解現(xiàn)狀

學(xué)習(xí)查閱了國內(nèi)外的部分相關(guān)資料之后，我發(fā)現(xiàn)，對于常用的交互控件冒冬，目前好像沒有伸蚯、而且也很難建立完全統(tǒng)一的規(guī)范，原因可能有以下幾點(diǎn)：

1. 國外相似的術(shù)語非常多简烤，本身就存在很多混用、借用的情況摇幻。這些概念被引進(jìn)國內(nèi)時(shí)横侦，缺乏一致、規(guī)范的翻譯绰姻。
2. 從 PC 端向移動(dòng)端轉(zhuǎn)變的過程中枉侧，基于設(shè)備特點(diǎn)、使用場景等因素演化出了新的控件規(guī)范狂芋，導(dǎo)致即使是命名相同的控件榨馁，在 PC 端和移動(dòng)端的交互方式也可能完全不一樣。
3. 隨著技術(shù)升級帜矾、用戶行為和需求等因素的變化翼虫，控件的定義和用途也會隨之更迭，而且這些更新往往無法在所有應(yīng)用開發(fā)中同步屡萤。
4. 各大平臺和系統(tǒng)基于各自的特點(diǎn)有針對性地創(chuàng)建了不同的控件分類方法珍剑、命名方式、視覺樣式和交互規(guī)范死陆。但國內(nèi)的很多應(yīng)用開發(fā)者在開發(fā)時(shí)都未遵循相應(yīng)的規(guī)范招拙，混用系統(tǒng)控件的現(xiàn)象很常見。
5. 為適應(yīng)用戶習(xí)慣或業(yè)務(wù)需要措译，國內(nèi)的應(yīng)用開發(fā)者常常在原生控件的基礎(chǔ)上改造控件别凤，形成新的控件樣式和交互方式。此外领虹，還有一些開發(fā)者對控件不熟悉规哪，錯(cuò)誤使用、濫用控件掠械，導(dǎo)致同一控件的應(yīng)用五花八門由缆。

因此，很多基礎(chǔ)控件的定義都越來越模糊猾蒂，視覺樣式均唉、交互方式和使用場景也各不相同，各有說法肚菠，有些規(guī)則甚至是互相違背的舔箭。

確定整理范圍及原則

基于以上現(xiàn)狀，此次 “彈窗” 規(guī)范的整理主要針對 iOS 平臺，并遵循以下幾點(diǎn)原則：

1. 盡可能遵循設(shè)計(jì)標(biāo)準(zhǔn)层扶，減少不必要箫章、不確定的創(chuàng)新。遵循 GUI 標(biāo)準(zhǔn)有利于提高用戶預(yù)知控件功能與操作方式的能力镜会，保證可用性檬寂，尤其是在沒有條件進(jìn)行實(shí)際用戶測試的情況下。
2. 優(yōu)先參考官方設(shè)計(jì)指南戳表，畢竟這些原則已經(jīng)經(jīng)過了大量充分的用戶研究桶至、實(shí)踐運(yùn)用、測試迭代匾旭。
3. 對于官方指南中未提及镣屹、不明確的控件規(guī)范，優(yōu)先采用國內(nèi)更多人采用的原則价涝，確保規(guī)范盡可能通用女蜈。
4. 整理、制定控件規(guī)范的最終目標(biāo)是保證一致性和可用性色瘩，不必過于糾結(jié)術(shù)語本身伪窖，更重要的是理解規(guī)范背后的可用性原理，將其合理運(yùn)用在設(shè)計(jì)中泞遗。

了解相關(guān)術(shù)語

在整理組件規(guī)范之前惰许，我們先大致了解一下相關(guān)的常見術(shù)語。

1. 模態(tài)（modal）和非模態(tài)（nonmodal/modeless）
   這兩個(gè)概念的理解基本沒有什么異議史辙⌒诼颍可以簡單地理解為：

• 模態(tài)（modal）
  (1) 用戶可以在不脫離主任務(wù)（不離開當(dāng)前主窗口）的情況下完成其他任務(wù)或獲取信息。
  (2) 模態(tài)情境會打斷用戶的操作聊倔，用戶必須通過點(diǎn)擊按鈕或其他方式來退出模態(tài)情境晦毙，之后才能進(jìn)行其他操作。
  (3) 通常在需要獲取用戶的注意力耙蔑，讓用戶完成獨(dú)立的任務(wù)或做出明確選擇的情況下使用见妒。
• 非模態(tài)（nonmodal/modeless）
  (1) 不會阻斷用戶的操作，用戶可以繼續(xù)之前的交互操作甸陌，不對其進(jìn)行回應(yīng)须揣。
  (2) 通常，用戶可以點(diǎn)擊非模態(tài)窗口之外的其他位置來關(guān)閉它或等它自動(dòng)消失钱豁。

2. 彈窗 / 彈框 / 彈出層 / 彈出式窗口 / 浮層 / 對話框 / 警告框（Popup / Popover / Dialog / Alert）
   在很多的規(guī)范耻卡、文章里，這幾個(gè)概念都是混著用的牲尺，并沒有明確的卵酪、統(tǒng)一的概念定義幌蚊。「彈窗」這個(gè)概念也逐漸泛化溃卡，在很多文章中被用作一個(gè)統(tǒng)稱溢豆，指代所有從界面中彈出、臨時(shí)存在的窗口瘸羡。

學(xué)習(xí)官方指南

查閱了以上術(shù)語的相關(guān)資料后漩仙，我發(fā)現(xiàn)這些術(shù)語也沒有標(biāo)準(zhǔn)定義，并且中英文版本很難對應(yīng)上犹赖，去細(xì)究這些術(shù)語和分類反倒可能導(dǎo)致混亂讯赏、不易理解。
于是決定以 iOS 官方設(shè)計(jì)指南為主要依據(jù)冷尉，并參考 Material Design 和其他相關(guān)規(guī)范，對 “彈窗” 相關(guān)的控件進(jìn)行梳理分類系枪。

1. iOS Human Interface Guidelines 相關(guān)簡介

• Apple 的 Human Interface Guidelines 目前有 macOS雀哨、iOS、watchOS私爷、tvOS 四個(gè)平臺的設(shè)計(jì)指南雾棺，iOS 是由之前的 iPadOS 和 iOS 合并而來的。

• 以前衬浑， iOS UIKit 提供的界?元素分為 4 種類型：
  (1) 欄（Bars）：包含可以告訴用戶他們當(dāng)前所處位置的信息捌浩，以及幫助用戶導(dǎo)航或觸發(fā)動(dòng)作的控件。
  (2) 內(nèi)容視圖（Content Views）：包含應(yīng)用的詳細(xì)內(nèi)容工秩，并且支持進(jìn)行滾動(dòng)尸饺、插入、刪除和元件重布局等交互行為助币。
  (3) 控件（Controls）：執(zhí)行動(dòng)作或者展示信息浪听。
  (4) 臨時(shí)視圖（Temporary views）：短暫地出現(xiàn)以告訴用戶重要的信息或額外的選項(xiàng)和功能。

• 后來眉菱，iOS UIKit 提供的界?元素更新為 3 種迹栓，將「臨時(shí)視圖」和「內(nèi)容視圖」合并為「視圖」：
  (1) 欄（Bars）：告知?戶當(dāng)前在應(yīng)用中所處的位置，提供導(dǎo)航俭缓，也可包含按鈕或者其它用于觸發(fā)動(dòng)作和獲取信息的元素克伊。
  (2) 視圖（Views）：包含?戶在應(yīng)用內(nèi)看到的重要內(nèi)容，例如?本华坦、圖形愿吹、動(dòng)畫和交互元素。視圖允許使?諸如滾動(dòng)季春、插入洗搂、刪除和排列之類的交互行為。
  (3) 控件（Controls）：觸發(fā)動(dòng)作和傳遞信息。包括按鈕耘拇、開關(guān)撵颊、輸入框和進(jìn)度指示器等控件。

2. iOS Human Interface Guidelines 中與 “彈窗” 相關(guān)的 UI 元素

3. Google Material Design 中與 “彈窗” 相關(guān)的 UI 元素

4. iOS 和 Android 的部分異同

規(guī)范總結(jié)

1. 歸納分類惫叛，編寫規(guī)范
   大部分的文章都按照 “模態(tài)” 和 “非模態(tài)” 來對 “彈窗” 相關(guān)的控件進(jìn)行分類倡勇，但是，其中部分控件并不只有其中某一種模式嘉涌，例如妻熊，Popovers 和 Toasts 都既有模態(tài)的，也有非模態(tài)的仑最。
   所以扔役，為了方便規(guī)范的整理，這里不按 “模態(tài)” 和 “非模態(tài)” 進(jìn)行分類警医，具體分類如下（點(diǎn)擊「 移動(dòng)端交互控件規(guī)范總結(jié)：彈窗 」可查看大圖）亿胸。
   詳細(xì)規(guī)范可在《移動(dòng)端交互控件規(guī)范總結(jié)：彈窗（二）》中查看。

2. 界面清查预皇，記錄問題
   對控件進(jìn)行分類侈玄、整理規(guī)范之后，就開始對當(dāng)前應(yīng)用中的相關(guān)控件進(jìn)行清查吟温，并記錄存在的問題序仙，以便在下次迭代中優(yōu)化完善。

3. 制作組件鲁豪，實(shí)際應(yīng)用潘悼，測試迭代
   除了對當(dāng)前應(yīng)用中的交互控件進(jìn)行清查、優(yōu)化呈昔，還可根據(jù)規(guī)范制作 UI 組件挥等，以便在之后的設(shè)計(jì)中運(yùn)用。同時(shí)堤尾，在實(shí)際運(yùn)用中發(fā)現(xiàn)規(guī)范和組件存在的不足肝劲，不斷迭代完善。
   
   
   

1. 以上內(nèi)容均為個(gè)人思考與理解，如有錯(cuò)誤，歡迎指正啊廷支，非常感謝～
2. 此次規(guī)范梳理的過程中，我在網(wǎng)上查閱及參考了以下官方指南與文章榄檬，感謝這些平臺和作者～

iOS：Human Interface Guidelines（Apple Developer）
Material Design（Google）
Android：Documentation for app developers（Google Developers）
Ant Design Mobile（螞蟻金服）
支付寶開放平臺文檔（螞蟻金服）
支付寶小程序設(shè)計(jì)文檔（來源：書棧網(wǎng)）

MBProgressHUD（作者：Jonathan George；來源：Github）
iphone - What is HUD VIEW?（來源：Stack Overflow）
UIProgressHUD（作者：Dustin Howett衔统；來源：iPhone Development Wiki

Modal & Nonmodal Dialogs: When (& When Not) to Use Them（作者：Therese Fessenden鹿榜；來源：NN/g）
你真的了解這些交互控件嗎海雪？（作者：johnnylhj；來源：人人都是產(chǎn)品經(jīng)理）
移動(dòng)彈窗基礎(chǔ)知識淺析——iOS彈窗體系（作者：常天舱殿；來源： TXD技術(shù)體驗(yàn)設(shè)計(jì)公眾號）
各種「彈窗」有學(xué)名奥裸，從此不再分不清（來源：掘金）
實(shí)用干貨！UI設(shè)計(jì)師需要了解的 APP彈窗體系（來源：優(yōu)設(shè)網(wǎng)）
iOS：自定義模態(tài)（譯文）（作者：半木zxy沪袭；來源：知乎）
彈窗湾宙、模態(tài)、提示冈绊、浮層侠鳄，這幾位是什么關(guān)系？（來源：知乎）
模態(tài)是一個(gè)大多數(shù)設(shè)計(jì)師不能完全理解的UX概念（作者：花火圓桌死宣；來源：知乎）
CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的區(qū)別（作者：Jeff伟恶；來源：騰訊云云+社區(qū)）
terminology - What’s the difference between a Modal, Popup, Popover and Lightbox? （來源：Stack Exchange）
這個(gè)控件叫什么（作者：龍爪槐守望者；來源：知乎）
正確使用控件 - 確認(rèn)彈框毅该、全屏彈框和模態(tài)視圖（作者：沐風(fēng)與體驗(yàn)設(shè)計(jì)知押；來源：簡書）
3分鐘帶你掌握11個(gè)最常用的交互控件（作者：沐風(fēng)與體驗(yàn)設(shè)計(jì)；來源：簡書）
iOS和Android規(guī)范解析——簡易菜單鹃骂、簡易對話框和彈出框（作者：沐風(fēng)與體驗(yàn)設(shè)計(jì)；來源：簡書）

5000字罢绽，總結(jié)App加載設(shè)計(jì)（作者：一點(diǎn)優(yōu)秀畏线；來源：人人都是產(chǎn)品經(jīng)理）
toast 吐司提示放在屏幕哪個(gè)區(qū)域比較好？（來源：知乎）
Can an Android Toast be longer than Toast.LENGTH_LONG?（來源：Stack Overflow）
Designing Toast Messages for Accessibility（作者：Sheri Byrne-Haber良价；來源：Medium）
人機(jī)工程學(xué)在交互設(shè)計(jì)中的運(yùn)用（作者：XUE.百度寝殴；來源：人人都是產(chǎn)品經(jīng)理）