(全文共计6789字，阅读约需要13分钟)
以下内容主要以 iOS 官方设计指南和网络上的相关文章为参考，但同时也包含个人理解与思考，并非绝对、唯一的标准。如有错漏，欢迎指正呀～如有其他任何建议，也欢迎一起讨论呀～超级无敌宇宙飞船航空母舰感谢～
1.1. 简介
Toasts 原本是 Android 系统独有的控件，但我在最新的 Material Design 里已经找不到这个控件了 Android 的开发者指南中有这个控件)。
根据网上相关文章的介绍，在 Android 之前的官方设计规范里，Toasts 应该是非模态的、纯文本的、出现在屏幕底部，且不支持交互的。但随着这个概念的泛化，现在已经出现了各种打破规范的 Toasts ，比如模态的、带图标的、可交互的等等。
而 iOS 系统，一直以来都没有 Toasts 这个概念，类似于 Toasts 的组件是 UIProgressHUD，例如，调节音量时的提示(这个控件在 iOS 13 之后也有了更新)。但这个组件是系统私有的，第三方应用无法直接获取使用。所以，我们在 iOS 第三方应用中看到的很多 HUD 都是第三方控件(如 MBProgressHUD)或者是应用自定义的。
在这里，我们把所有响应用户操作而呈现，短暂显示后可自动消失的轻量级提示都统一称为 Toasts。
1.2. 特点及使用场景
(1) 对用户干扰较小，是一种轻量级的反馈提示。不适用于展示大量文案、重要信息。
(2) 主要用于通知用户操作结果或状态变化(重点在告知用户信息，而不是提供操作)。
(3) 主要类型包括：
① 普通提示(成功提示、失败提示、警告提示)：非模态，不打断用户当前的操作任务；不支持手动关闭，不支持交互，显示几秒后自动消失。
② 加载提示：有两种加载场景。
• 不需要打断用户的操作：非模态，不支持手动关闭，不支持交互，加载完成后自动消失。
常用于进入新页面时加载数据的提示。
这种加载提示一般可用其他体验更好的方式替代，例如，使用局部加载而不是全局加载、将加载提示放到导航栏、将加载提示放到触发按钮上等(见文末的「10. 模态情境的使用」部分)。
• 需要打断用户的操作：模态，一般带有「取消」按钮；加载完成自动消失；点击「取消」按钮，可取消加载，关闭提示。
如果用户只能等加载结束后才能进行其他操作，但中断时间比较短，就可以使用这种模态的加载提示，例如支付、下载、上传等。(如果中断时间比较长，一般会使用新页面展示加载进程。)
参考《5000 字，总结 App 加载设计》 ，这类场景一般有两种情况：一是用户如果执行其他操作将会打断正在进行的加载过程；二是用户当前执行的操作本身不能和其他操作同时进行。这个需要根据具体的功能、业务和开发实现技术等因素综合确定。
1.3. 设计原则
(1) 一次只显示一个 Toast。
(2) 视觉样式
可包含简单图标，也可为纯文本。
(3) 文案
① 尽量精简。参考 Ant Design ，包含图标的 Toasts 一般为 4-6 个字，纯文本的 Toasts 一般不超过 14 个字。
② 尽可能使用与触发提示的操作直接相关的动词或词组，如，评论中、刷新成功等；若是失败提示，直接指出出错原因。
③ 尽量避免使用 “你”、“你的”、“我”、“我的” 这类代词。
(4) 显示时长
Android 的开发文档中提到的两个默认时长分别为 2s 和 3.5s。但是暂时没有查到它的设计缘由，不知道是不是仅适用于英文环境。
根据网上相关的文章，中文环境下，成人的平均阅读速度为一分钟 300-500 字，按一秒钟 7 个字计算的话，6 个字以内显示 1s，7-10 个字显示 1.5s，11-14 个字，显示 2s。
此外，参考《人机工程学在交互设计中的运用》，对于加载提示：如果 1s 内加载完成，不显示加载提示；1~6s 加载完成的，显示加载提示；6s 内未加载出来的，显示加载失败。
(5) 显示位置
① 同类型 Toasts 的出现位置最好保持一致，用户会习惯于在固定的位置感知反馈信息。
② 一般在屏幕中居中。但，对于普通提示，显示在顶部更好，可减少对用户的打扰，并且不会因为键盘的出现而浮动或被挡住。
2.1. 简介
Snackbars 是 Android 平台的控件，跟 Toasts 非常相似。两者的区别在于，Snackbars 可以包含一个操作(不是「取消」这类用于关闭的按钮)。(根据网上的相关文章，在以前的规范里，Snackbars 是支持主动滑动关闭的。但是，现在 Material Design 的指南里并没有这一项。)
虽然现在的 Material Design 里已经找不到 Toasts，Snackbars 也可以取代 Toasts，但在实际运用中，还是 Toasts 用得比较多，用户可能还是对 Toasts 比较熟悉。
2.2. 官方规范
(1) 非模态。
(2) 显示在屏幕底部。
(3) 一次只展示一个 Snackbar。
(4) 只能包含一个文本按钮，且文本颜色不能与提示信息文本颜色一样。
(5) 文本按钮不能是「取消」、「忽略」等用于关闭 Snackbars 的按钮。
(6) 背景必须完全不透明，并带阴影。
(7) 显示 4~10s 后自动消失，不支持手动关闭。
2.3. 实际应用
实际运用中，有一个样式与 Snackbars 非常类似的比较常见的控件(如下图所示)，网络上一些文章将这种底部提示框也称为 Snackbars。但它跟官方定义的 Snackbars 的交互方式已经不太一样了，这种底部提示框：
(1) 非模态。
(2) 显示在屏幕底部。
(3) 大部分情况下只包含一个按钮，但有时也包含「关闭」按钮。按钮的形式可以是图标、文本按钮或填充按钮。
(4) 背景一般为半透明黑色背景。
(5) 一般不会自动消失，可手动关闭或执行相应操作后消失。
3.1. 简介
选择器展示了一组值，用户可以从中进行选择，一般是选择一个选项。通常用于表单。
3.2. 类型
3.2.1. Wheel Pickers 滑轮选择器
(1) 类型
① Native Wheel Pickers 原生滑轮选择器
• iOS 系统原生的滑轮选择器，目前比较少见。
• 显示在内容视图中，通常是嵌入表单中或出现在屏幕底部。
• 通常包括一个或多个滑轮，每个滑轮包含一组值。
• 当前选中的值在中间，以深色标识。
• 选中选项后，再次点击触发控件或界面中其他位置，关闭选择器，选择成功。
② Custom Wheel Pickers 自定义滑轮选择器
包含「取消」和「确定」按钮，选中选项后，点击「确定」按钮，选择成功，同时关闭选择器。点击遮罩层可关闭选择器，效果同点击「取消」按钮。
(2) 使用场景
① 当用户对整组值都比较熟悉(如常见的年月日、省份城市等)的时候，才使用滑轮选择器。因为当滑轮静止的时候，大部分的值会被隐藏，所以最好是在用户对所有值均有预期的情况下才使用滑轮选择器。
② 若备选项数量非常多，一般不推荐使用滑轮选择器。因为滑轮选择器的高度较小，滚动起来需要花费较长的时间。
③ 若滑轮个数较多，一般也不推荐使用滑轮。因为滑轮是横向排列的，横向屏幕空间不够时，可能无法完整显示数据，导致理解、识别困难。参考 Ant Design，最多展示 5 个滚轮，具体视情况而定。
④ 若需要展示一大组用户并不熟悉的选项，可使用下文的「5.3.2 Bottom Menus 底部菜单」。
3.2.2. Custom Pickers 自定义选择器
使用底部模态面板来承载选择器的内容，如下图的地址选择器。
4.1. 简介
气泡浮层是⽤户点击某个控件或者屏幕上某个区域后，出现在屏幕其他内容之上的临时窗⼝。通常包含一个指向触发它显示的控件或区域的箭头，具有明确的指向性。
4.2. 类型
4.2.1. Native Popovers 原生气泡浮层
(1) 系统原生的气泡浮层可以包含各种各样的元素，如导航栏、 ⼯具栏、标签栏、表格、精选窗口、 图像、地图和自定义窗⼝等。
(2) 包含「取消」按钮，点击「取消」按钮可关闭浮层。
(3) 既有模态的，也有非模态的。
① 模态的气泡浮层：打开气泡浮层后，其他操作将被中断。可通过浮层上的「取消」或其他按钮关闭浮层。
② 非模态的气泡浮层：可通过点击浮层上的按钮或屏幕中其他区域来关闭浮层。
(4) 仅在较大的屏幕上使用，如，iPad。(如果需要在手机上用浮层来承载同样的内容，可以使用下文的「8. Full-screen Modal Views 全屏模态视图」。)
4.2.2. Tooltips 文字提示
在手机端，有两种常见的小型气泡浮层。其中一种就是 Tooltips。
(1) 用于简单的信息提示或操作引导，进入特定页面、点击特定元素或满足特定条件后触发显示。
(2) 通常是非模态的。
(3) 短暂显示自动消失，或点击界面中其他区域、点击该元素、执行其他指定操作后关闭浮层。有时候也会包含一个关闭按钮，点击后可关闭浮层。
4.2.3. Pop Menus 气泡菜单
手机端另外一种常见的小型气泡浮层是 Pop Menus。详情见下文的「5.3.1. Pop Menus 气泡菜单」。
5.1. 简介
将动作或内容选项折叠收起来，通过点击、长按等手势唤起临时视图，进行菜单选择。通常是折叠次要场景的、较低频的选项。
所以，菜单常用的使用场景有：
(1) 启动任务：将操作命令收纳起来，点击选项后在当前页面执行某个操作，或导航至目标页面。(菜单项不需要选中状态。)
(2) 筛选内容：将筛选条件收纳起来，选择选项后对当前页面内容进行筛选。(菜单项有选中状态。)
① 单一筛选条件且单选：常采用列表的形式。
② 多个筛选条件或多选：常采用标签的形式。
③ 复杂的筛选条件：一般会采用顶部 tab、侧边 tab 与列表或标签结合的形式。
5.2. iOS 两种常用的特定菜单
5.2.1. Action Sheets 动作面板
(1) 简介
Action Sheets 为了响应某个控件或操作而出现，提供与当前情境相关的两个或多个选项。使用 Action Sheets 来让用户启动某项任务，或在用户执行具有潜在破坏性的操作之前向用户请求确认。
在小屏上，Action Sheets 从屏幕底部向上滑出。在大屏上，Action Sheets 以 Popovers(气泡浮层)的形式呈现。
(2) 特点及使用场景
① 由用户某个操作行为触发。
② 提供一系列在当前情境下可以完成当前任务的操作。
③ 在用户完成一项可能有风险的操作前获得用户的确认。
(3) 设计原则
① 模态。
② 从屏幕底部向上滑出。
③ 包含两个或两个以上的按钮，点击按钮即执行相应命令。
④ 提供「取消」按钮，点击「取消」按钮或遮罩层关闭 Action Sheets。
⑤ 最好使用红色文字来表示可能存在破坏性的操作。
⑥ 避免操作太多，需要进行滚动的情况。
⑦ 可在顶部对执行对象进行描述，包括图片、文本等形式。
5.2.2. Activity Views 活动视图
(1) 简介
Activity Views 用于显示用户可针对当前内容执行的一系列服务(活动)。通常情况下，点击之后该项活动会立刻执行。若某项活动过于复杂，系统则会进一步请求获取更多的信息后才为用户执行该服务。
(2) 设计原则
① 模态。
② 点击「取消」按钮或者遮罩层关闭 Activity Views。
③ 确保活动是可以对当前窗口中的内容进⾏操作的。
④ 活动标题尽量精简，且，标题中尽量避免包含公司或产品名称。
5.3. 常见自定义菜单
5.3.1. Pop Menus 气泡菜单
(1) 以 “小型气泡浮层” 的形式承载菜单功能。
(2) 通常包含一个箭头，指向浮层出现的位置(有时候也不包含箭头)。
(3) 选中某个菜单项后，自动关闭气泡浮层。
(4) 一般是模态的。可在气泡浮层下显示遮罩层，也可不显示。点击遮罩层或界面中其他区域，可关闭浮层。(比较特别的是，像微信和 QQ，弹出气泡浮层后，界面中其他元素均不可点击，但仍可切换底部 tab。)
(5) 与 Action Sheets 的区别：
• Pop Menus 指向性比较明确，在触发控件附近显示，使用起来比较便捷，并且呈现形式对用户打扰较小。
• Action Sheets 从屏幕底部弹出后可能会挡住触发控件，或者相距较远，点击后需移动视线到屏幕下方，并且所占屏幕空间较大，加上底部遮罩层的视觉样式，对用户打扰较大。
• 在手机端，以上区别影响较小。所以，一般情况下，当使用场景为「启动任务」或「筛选内容」时，既可以使用 Pop Menus，也可以使用 Action Sheets。
• 在 iPad 等较大的屏幕上，则一般使用 Pop Menus。
5.3.2. Bottom Menus 底部菜单
(1) 以 “底部模态面板” 的形式承载菜单功能。从底部向上滑动出现的面板，可承载的菜单项较多。
(2) 模态。向下滑动面板、点击「关闭」按钮或遮罩层关闭面板。
(3) Action Sheets 和 Activity Views 可以看作一种特定的底部菜单。
(4) 底部菜单用于筛选内容时：
① 单个筛选条件：选中选项后，自动关闭面板。
② 多个筛选条件：一般包含「重置」和「确定」按钮，选择菜单项后，点击「确定」才关闭面板，点击「重置」可清空所有已选条件。
5.3.3. Top Menus 顶部菜单
(1) 以 “顶部弹出层” 的形式承载菜单功能。
(2) 模态。点击遮罩层可关闭弹层。
(3) 通常与顶部 tab 结合，切换 tab 直接关闭当前弹层，同时显示新的弹层。
(4) 常用于筛选内容：
① Tab 下仅包含一个筛选条件：选中选项后，自动关闭弹层。
② Tab 下包含多个筛选条件：一般包含「重置」和「确定」按钮，选择菜单项后，点击「确定」才关闭弹层，点击「重置」可清空所有已选条件。
5.3.4. Side Menus 侧边菜单
(1) 以 “侧边弹出层” 的形式承载菜单功能。
(2) 模态。点击遮罩层可关闭弹层。
(3) 抽屉式的侧边菜单可承载更多筛选条件更多选项。常见的使用场景是，当筛选条件比较复杂时，与上文的「5.3.3. Top Menus 顶部菜单」结合，将较高频使用的筛选条件用「tab + 顶部菜单」的形式呈现，其他更多的较低频的条件都放在侧边菜单中。
5.4. iOS 官方提供的其他菜单类型
5.4.1 Edit Menus 编辑菜单
(1) 长按或单击文本视图、网页或图片视图中的元素来选择内容并显示编辑选项，例如复制和粘贴。
(2) 自定义命令的数量不宜过多，太多选择会让⽤户感到困惑。
(3) 保持自定义命令名称简短。命令名称应该是动词或简短的动词短语，简洁地描述要执行的动作。
(4) 如果未选择任何内容，则菜单不应显示如 “复制” 或 “剪切” 等操作选项。同样，如果已选择某些内容，则菜单不应显示 “选择” 选项。
(5) 不要使⽤与编辑菜单相同的功能的其他控件。提供多种⽅式来启动操作会导致⽤户体验不一致并导致混淆。例如，如果应用中允许⽤户使⽤菜单复制内容，请不要使用复制按钮。
5.4.2 Context Menus 情境菜单
(1) iOS 13 之前叫「Peek and Pop 预览弹出功能」，只能在支持 3D Touch 的设备上使用。主要用于快速预览内容；如果 app 进行了相应的支持，还可以通过向上轻扫预览视图唤出相关的操作选项。
(2) iOS 13 及 iOS 13 之后，所有设备都可使用「Context Menus 情境菜单」。长按或 3D Touch 均可唤出情境菜单，但 3D Touch 的速度会更快。并且，唤出情境菜单时，相关操作菜单会同时呈现，无需进一步操作。
(3) 为 app 当中所有可能产生相关操作的内容对象添加情境菜单功能。这样既便于操作，也利于发现所有可执行的功能。
(4) 情境菜单虽然很便捷，但并不是所有用户都能始终想到去使用它。所以，情境菜单中提供的功能也应该能够在界面中的其他地方被访问到。
5.4.3. Home Screen Quick Actions 主屏幕快捷操作
(1) 主屏幕快捷操作是 iOS 独有的交互形式，只在主屏中使用，用于快速执行应用的常用任务。通过 3D Touch 唤起 app 指定的快捷操作菜单。只需比 “长按” 更重一些的按压，就能看到高频操作菜单。
(2) 显示符合上下文情景的操作选项，并用通用的文案描述。
(3) 尽可能地减少选项数量，只显示最有意义的操作。
(4) 使用标准手势唤起菜单。
(5) 根据唤起的位置，自动调整菜单的位置。
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
