UI设计师必须了解的“弹窗”干货  

弹窗是用户在系统中进行操作时系统给予的回应。目的是遵循用户心里预期，告知用户当前状况，给予用户有效反馈。如引导用户如何操作、提示用户在操作后会发生什么。  

  什么是弹窗  

  在app使用中，弹窗出现的频率越来越高，运营活动，系统通知，信息反馈，任务引导等。滥用的弹窗会渐渐导致用户认知疲劳和视觉失调，甚至会出现“习惯性取消”等行为。弹窗最主要的功能就是服务于当前主任务之外的支线任务，包括信息传递，操作反馈等。对话框，警告框，toast......都属于弹窗，但是使用场景都不一样。在合适的业务场景选择合适的弹窗组件，能够保证最基础的用户体验。因为像强干扰类弹窗的使用，对用户而言，更是一种强加的任务，很容易导致用户丧失耐心而流失。  

  弹窗有哪些  

  弹窗可以按照是否强制打断用户操作来分成两种，模态弹窗和非模态弹窗（也可以叫做阻断式弹窗和非阻断式弹窗）  

  3.1模态弹窗  

  模态弹窗：模态提供了一个专注聚焦的环境，用户只有完成或者关闭当前任务，才能进行其他任务。  

  特点：打断用户当前的操作流程，属于强势的干扰行为，故运用弹窗需要慎重考虑。  

  常用组件：dialog（对话框）/alert(警告框)，popover（浮出层），actionsheet（动作菜单），activityviews（活动视图），modalbottomsheet（模态底部菜单）  

  3.2非模态弹窗  

  非模态弹窗：常用于轻量级的操作反馈和信息传递，不需要获取屏幕焦点，用户可以同时操作屏幕中的其他内容。  

  特点：属于轻量级的反馈，不会对用户流程产生干扰，但同时又给了用户反馈和信息。  

  常用组件：Toast（吐司），snackbar，Hud（透明指示层）  

  弹窗具体使用  

  强干扰类—dialog（对话框）/alert（警告框）  

  使用场景  

  通知用户app或设备相关的问题  

  辅助用户完成任务，如系统权限  

  用户主动中断任务，破坏性操作等  

  操作反馈  

  运营活动  

  功能引导  

  强干扰——popover（浮出层）  

  使用场景  

  多个常用操作的快捷入口  

  呈现页面中一些折叠的信息  

  对于新用户的功能引导或者新功能的引导  

  强干扰——actionsheet（动作菜单）  

  使用场景  

  当前对象的多个操作或者完成任务的多个选择  

  执行潜在的破坏性操作前的二次确认  

  了解了每个弹窗组件的用法，下次就可以根据实际业务设计合适的弹窗了，不过官方规范或者文章的建议也都只是参考，实际工作中还是要灵活变通。 

Powered by Froala Editor