弹窗是我们在设计APP时通常无法避免的一个元素。选择合适的弹窗形式是我们需要多加思考的，避免成为仅仅完善产品原型的线框图。艺术家。弹窗是我们与机器界面进行交互的窗口。这是用户与产品直接对话的一种方式。可以传达信息，反馈状态，指导用户操作。弹窗分为两种：模态弹窗和非模态弹窗（有的地方可能翻译成无模态窗）。模态弹出窗口要求用户在继续之前与其进行交互。也就是说，它是强制性的，用户不能忽视它的存在。确保人们收到关键信息并在必要时采取行动。非模态弹窗有一定的时间限制，通常用于系统反馈，用户不需要响应。模态弹窗1.对话框Dialog/warningboxAlerts在用户需要打断时出现，大致可分为信息发布（被动），如：版本更新、消息通知、操作广告等信息提交（主动），如：修改信息、登录注册等。通过以上几个案例，我们也可以发现几个特点。按钮可以通过差异化设计（比如美团的版本更新）引导用户点击。操作弹窗一般更注重视觉冲击，刻意弱化关闭按钮远离它。对于弹窗主体，背景遮罩颜色较深，营造出更强的沉浸感。对于带有输入功能的弹出窗口，需要注意弹出后键盘的位置。对于类似系统功能的弹窗，比如清除缓存，可以考虑直接调用平台的系统弹窗。2、浮层Popover/Popup通常在用户交互后出现，比如常见的下拉菜单、下拉弹窗等，强调弹窗的从属关系。（模态浮层和非模态浮层的概念在腾讯ISUX腾讯文档的文章中用到了，有兴趣的可以去看看）。也是下拉弹窗，只是很多产品的处理方式不一样。微博通过深色弹窗，将弹窗内容与背景内容明显区分开来。钉钉通过加深背景遮罩来突出弹窗内容。大众点评只采用去除光投射，去除背景遮罩，这样就无法打开弹窗内容与背景内容的对比，极大影响了用户在实际体验中的识别效率。3.ActionbarActionbar/操作列表ActionSheets/操作视图ActivityViews有点类似于浮层，也是用户主动交互后调出的功能菜单。它通常出现在屏幕的底部，占据屏幕的比例比较高。为了方便用户，取消功能将放在底部。（ActionSheets和ActivityViews是IOS官网规范中的名称。)这类弹窗最常见的场景是分享模块。与其他模态弹窗相比，它可以承载更多更丰富的功能（多为可选功能）。支付宝和微信公众号分享是最标准的ActionSheets。为了减少用户不必要的记忆负担，弹窗的高度限制较低，显示更多背景内容以辅助用户记忆。4.CardSheetSheet是IOS人机交互指南中出现的模态窗口，以卡片的形式从底图出现，几乎覆盖了整个原始页面。但未覆盖的区域也被深色遮盖，以帮助用户记住暂停的任务。因为支持上下拖动，所以可以承载比浮层更复杂的信息内容。常用于一些桌子无法承载但又不具身临其境的复杂任务。与ActionSheets相比，Sheet的屏幕覆盖率更高，更多时候承载信息录入功能。Sheet需要顶部标题告知用户当前步骤信息，底部卡片形式的叠加让用户将当前处理任务流程感知为主流程的分支任务。5.其他补充随着交互体验和产品技术的不断发展，如今的设备可以承载的模块越来越复杂和精细化。于是渐渐的出现了越来越多的特殊弹窗形式。（底层逻辑互通）比如网易云音乐的分享，采用沉浸式、多弹窗组合、动态引导的方式承载了自己丰富的分享形式。IOS桌面使用焦点式弹出菜单帮助用户在视觉上进行焦点。非模态弹窗1.提示框Toast常用来反馈用户的操作结果，反馈应用状态变化。一般持续约2秒后自动消失，并可能出现在任何位置。（不能主动滑动关闭）目前最常见的场景是各种刷新反馈信息，一般来说存在感比较弱，比如知乎、B站和ins中的案例。与B站和ins相比，微博和知乎都融入了自己的品牌特色：主题色点缀，虽然只是一个小细节，却能对用户的品牌认知产生潜移默化的影响。2、提示对话框SnackbarSnackbar是弹窗的一种形式，最早出现在Android上，现在也出现在很多IOS端的产品上。有点类似于Dialog和Toast的衍生。它经常像Dialog一样是交互的，有时像Toast一样有时间限制。它通常出现在屏幕底部，从页面底部向上滑动时出现，向下滑动时消失。由于手头没有安卓手机，所以截下了MaterialDesign的官方案例，帮助理解。主要强调两点：1.不要添加Icon，2.操作项只能有一个；因为snackbar不及时运营就会消失，所以使用和工具类产品比较普遍，需要保持运营的连续性。比如在邮箱类产品中，当用户删除邮件时，snackbar可以及时反馈删除成功状态，并提供撤销操作。3、透明指示层HUDHUD是IOS端常用的非模态类型。它首先出现在屏幕中间。由于容易影响用户的沉浸体验，IOS13版本对HUD做了微调。对比一下左右的HUD，你就会明白为什么早期会有那么多人吐槽，尤其是在游戏这样的沉浸式游戏中，很容易破坏用户体验。在设计弹窗时需要注意1、显示形式。展示形式的核心是场景。一些有偏见的系统错误报告考虑使用最简单的弹出窗口显示形式。运营广告等可以通过特殊的设计手法吸引用户。但是无论怎么做，都要让用户明白这是一个弹窗。非模态弹窗一般以最简单的形式出现，以避免在传递状态信息时干扰用户获取关键信息。2、按钮模态弹窗一般只放1-2个按钮，信息通知类放“确定”，重大决策类放“确定”和“取消”。比较特殊的是权限请求弹窗，可能有多个按钮。现在很多运营广告为了曝光，把关闭按钮放在了边上，这在用户体验上是相当不友好的，但在运营数据上可能看起来不错。3、动态效果由于弹窗承载的文字量有限，得益于设备技术的发展，现在越来越多的产品采用动态形式在模态弹窗中传达信息，比如功能引导许多产品。对于非模态弹窗，由于其存在感较弱，因此采用动态效果来合理适应用户的视觉移动。比如你下拉刷新后，刷新反馈弹窗一般会出现在用户当前的视觉焦点处。4、时间和频率掌握弹窗的时间和频率。模态弹窗会直接打断用户的操作状态，一般只有在不可逆或操作会造成严重后果时才会出现。但是在一些特殊的业务需求下，比如运营广告，就需要权衡用户与商业利益的关系。非模态弹窗更注重出现的时机，反馈一定要足够及时，这样用户在操作中才不会产生疑虑。5、文案由于弹窗的信息承载量很小，所以需要用最简洁、恰当的表达方式来告知用户信息或当前状态。可以考虑使用“动词+名词”的组合，比如“删除照片”“取消订单”等。特别是对于会自动消失的非模态弹窗，更要注意文案的字数（可以考虑加一些通用的图标颜色辅助表达，比如正确使用绿色勾号）。6、输入内容很多弹窗都承载着表单输入的任务，但是弹窗不适合输入太多的表单，尤其是一些需要下拉的——如果用户需要填写的表单很多，乖乖跳转到新的页面。而且弹窗的出现本身就已经打断了用户原本的操作，如果要填的东西很多。。（除了IOSSheet，它的出现是IOS官方为了解决一些表无法承载但又不沉浸的复杂任务。）写在最后因为目前手头没有Android，所以截图了基于IOS端，下次有机会继续修改更新。然而，目前两端之间的多种交互形式正变得越来越普遍。借助本文开启了“设计控件”系列，接下来我会继续学习和分享其他设计控件相关的知识。包括之前系列的设计原则，我们会继续分享设计心理学的原理等等。最近一直在思考自己的学习框架。除了设计基本原理和设计控制外，还有设计模型和设计工具。坑已经挖好了，接下来就是用铲子填平了。
