作者：ZYUN（20191018）
预计阅读时长：8 分钟（2110 字；15 图）
温馨提示：文中部分配图可能有点模糊，如有需要可点击「移动端交互控件规范总结：弹窗」查看大图（第一次加载可能会有点慢～）。

了解现状

学习查阅了国内外的部分相关资料之后，我发现，对于常用的交互控件，目前好像没有、而且也很难建立完全统一的规范，原因可能有以下几点：

1. 国外相似的术语非常多，本身就存在很多混用、借用的情况。这些概念被引进国内时，缺乏一致、规范的翻译。
2. 从 PC 端向移动端转变的过程中，基于设备特点、使用场景等因素演化出了新的控件规范，导致即使是命名相同的控件，在 PC 端和移动端的交互方式也可能完全不一样。
3. 随着技术升级、用户行为和需求等因素的变化，控件的定义和用途也会随之更迭，而且这些更新往往无法在所有应用开发中同步。
4. 各大平台和系统基于各自的特点有针对性地创建了不同的控件分类方法、命名方式、视觉样式和交互规范。但国内的很多应用开发者在开发时都未遵循相应的规范，混用系统控件的现象很常见。
5. 为适应用户习惯或业务需要，国内的应用开发者常常在原生控件的基础上改造控件，形成新的控件样式和交互方式。此外，还有一些开发者对控件不熟悉，错误使用、滥用控件，导致同一控件的应用五花八门。

因此，很多基础控件的定义都越来越模糊，视觉样式、交互方式和使用场景也各不相同，各有说法，有些规则甚至是互相违背的。

确定整理范围及原则

基于以上现状，此次 “弹窗” 规范的整理主要针对 iOS 平台，并遵循以下几点原则：

1. 尽可能遵循设计标准，减少不必要、不确定的创新。遵循 GUI 标准有利于提高用户预知控件功能与操作方式的能力，保证可用性，尤其是在没有条件进行实际用户测试的情况下。
2. 优先参考官方设计指南，毕竟这些原则已经经过了大量充分的用户研究、实践运用、测试迭代。
3. 对于官方指南中未提及、不明确的控件规范，优先采用国内更多人采用的原则，确保规范尽可能通用。
4. 整理、制定控件规范的最终目标是保证一致性和可用性，不必过于纠结术语本身，更重要的是理解规范背后的可用性原理，将其合理运用在设计中。

了解相关术语

在整理组件规范之前，我们先大致了解一下相关的常见术语。

1. 模态（modal）和非模态（nonmodal/modeless）
   这两个概念的理解基本没有什么异议。可以简单地理解为：

• 模态（modal）
  (1) 用户可以在不脱离主任务（不离开当前主窗口）的情况下完成其他任务或获取信息。
  (2) 模态情境会打断用户的操作，用户必须通过点击按钮或其他方式来退出模态情境，之后才能进行其他操作。
  (3) 通常在需要获取用户的注意力，让用户完成独立的任务或做出明确选择的情况下使用。
• 非模态（nonmodal/modeless）
  (1) 不会阻断用户的操作，用户可以继续之前的交互操作，不对其进行回应。
  (2) 通常，用户可以点击非模态窗口之外的其他位置来关闭它或等它自动消失。

2. 弹窗 / 弹框 / 弹出层 / 弹出式窗口 / 浮层 / 对话框 / 警告框（Popup / Popover / Dialog / Alert）
   在很多的规范、文章里，这几个概念都是混着用的，并没有明确的、统一的概念定义。「弹窗」这个概念也逐渐泛化，在很多文章中被用作一个统称，指代所有从界面中弹出、临时存在的窗口。

学习官方指南

查阅了以上术语的相关资料后，我发现这些术语也没有标准定义，并且中英文版本很难对应上，去细究这些术语和分类反倒可能导致混乱、不易理解。
于是决定以 iOS 官方设计指南为主要依据，并参考 Material Design 和其他相关规范，对 “弹窗” 相关的控件进行梳理分类。

1. iOS Human Interface Guidelines 相关简介

• Apple 的 Human Interface Guidelines 目前有 macOS、iOS、watchOS、tvOS 四个平台的设计指南，iOS 是由之前的 iPadOS 和 iOS 合并而来的。

• 以前， iOS UIKit 提供的界⾯元素分为 4 种类型：
  (1) 栏（Bars）：包含可以告诉用户他们当前所处位置的信息，以及帮助用户导航或触发动作的控件。
  (2) 内容视图（Content Views）：包含应用的详细内容，并且支持进行滚动、插入、删除和元件重布局等交互行为。
  (3) 控件（Controls）：执行动作或者展示信息。
  (4) 临时视图（Temporary views）：短暂地出现以告诉用户重要的信息或额外的选项和功能。

• 后来，iOS UIKit 提供的界⾯元素更新为 3 种，将「临时视图」和「内容视图」合并为「视图」：
  (1) 栏（Bars）：告知⽤户当前在应用中所处的位置，提供导航，也可包含按钮或者其它用于触发动作和获取信息的元素。
  (2) 视图（Views）：包含⽤户在应用内看到的重要内容，例如⽂本、图形、动画和交互元素。视图允许使⽤诸如滚动、插入、删除和排列之类的交互行为。
  (3) 控件（Controls）：触发动作和传递信息。包括按钮、开关、输入框和进度指示器等控件。

2. iOS Human Interface Guidelines 中与 “弹窗” 相关的 UI 元素

3. Google Material Design 中与 “弹窗” 相关的 UI 元素

4. iOS 和 Android 的部分异同

规范总结

1. 归纳分类，编写规范
   大部分的文章都按照 “模态” 和 “非模态” 来对 “弹窗” 相关的控件进行分类，但是，其中部分控件并不只有其中某一种模式，例如，Popovers 和 Toasts 都既有模态的，也有非模态的。
   所以，为了方便规范的整理，这里不按 “模态” 和 “非模态” 进行分类，具体分类如下（点击「 移动端交互控件规范总结：弹窗 」可查看大图）。
   详细规范可在《移动端交互控件规范总结：弹窗（二）》中查看。

2. 界面清查，记录问题
   对控件进行分类、整理规范之后，就开始对当前应用中的相关控件进行清查，并记录存在的问题，以便在下次迭代中优化完善。

3. 制作组件，实际应用，测试迭代
   除了对当前应用中的交互控件进行清查、优化，还可根据规范制作 UI 组件，以便在之后的设计中运用。同时，在实际运用中发现规范和组件存在的不足，不断迭代完善。
   
   
   

---

1. 以上内容均为个人思考与理解，如有错误，欢迎指正啊，非常感谢～
2. 此次规范梳理的过程中，我在网上查阅及参考了以下官方指南与文章，感谢这些平台和作者～

iOS：Human Interface Guidelines（Apple Developer）
Material Design（Google）
Android：Documentation for app developers（Google Developers）
Ant Design Mobile（蚂蚁金服）
支付宝开放平台文档（蚂蚁金服）
支付宝小程序设计文档（来源：书栈网）

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；来源：人人都是产品经理）
移动弹窗基础知识浅析——iOS弹窗体系（作者：常天；来源： TXD技术体验设计公众号）
各种「弹窗」有学名，从此不再分不清（来源：掘金）
实用干货！UI设计师需要了解的 APP弹窗体系（来源：优设网）
iOS：自定义模态（译文）（作者：半木zxy；来源：知乎）
弹窗、模态、提示、浮层，这几位是什么关系？（来源：知乎）
模态是一个大多数设计师不能完全理解的UX概念（作者：花火圆桌；来源：知乎）
CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的区别（作者：Jeff；来源：腾讯云云+社区）
terminology - What’s the difference between a Modal, Popup, Popover and Lightbox? （来源：Stack Exchange）
这个控件叫什么（作者：龙爪槐守望者；来源：知乎）
正确使用控件 - 确认弹框、全屏弹框和模态视图（作者：沐风与体验设计；来源：简书）
3分钟带你掌握11个最常用的交互控件（作者：沐风与体验设计；来源：简书）
iOS和Android规范解析——简易菜单、简易对话框和弹出框（作者：沐风与体验设计；来源：简书）

5000字，总结App加载设计（作者：一点优秀；来源：人人都是产品经理）
toast 吐司提示放在屏幕哪个区域比较好？（来源：知乎）
Can an Android Toast be longer than Toast.LENGTH_LONG?（来源：Stack Overflow）
Designing Toast Messages for Accessibility（作者：Sheri Byrne-Haber；来源：Medium）
人机工程学在交互设计中的运用（作者：XUE.百度；来源：人人都是产品经理）