7月第2篇《弹窗类型那么多我应该如何选择呢（看完这篇不再纠结》#设计规范#设计思考）
文章图片
7月第2篇，距离本月目标还有2篇
之所以整理这份内容是因为在工作中遇到了这些问题。
提醒控件类型那么多我应该如何选择？
控件该如何使用？什么情况下使用才能达到最佳效果？
怎么避免滥用控件导致整体交互不统一？
带着这三个问题，以iOS规范为主简单说一下弹窗的那些事
文章图片
目录
一、关于模态和非模态
模态
非模态
二、弹窗
Toast和HUD
底部提示框Snackbars
通告栏Noticebar
气泡浮层Popovers
警告框Alerts
菜单Menus
滑轮选择器Wheel Pickers
模态面板Modal Sheets
小结
三、如何选择合适的控件
文章图片
一、关于模态（modal）和非模态（nonmadal）
模态（modal）
场景：在用户当前流程下提示用户完成某个操作/任务
内容：
帮助人们专注于一个独立的任务或一组紧密相关的选项
确保人们收到关键信息，并在必要时采取行动
行为：
打断用户操作，用户必须通过点击或其他形式的交互来退出模态；
获取用户注意力，让用户完成独立的任务或做出明确选择；
非模态（nonmodal）
场景：在用户需要时给予反馈或轻提示，不干扰用户当前的行为。
内容：
使用纯文本或文本加图标的形式，不宜承载过多内容；
行为：
不打断用户操作，用户可继续当前行为；
自动消失或用户可以选择关闭；
文章图片
二、弹窗
1、Toast和HUD 
文章图片
Toast为原Android系统控件，演变历史就不介绍了，现在也被应用在iOS系统的产品中。
HUD属于iOS系统私有控件，不能被第三方应用获取。
使用场景：向用户反馈轻度提醒，比如某个操作、任务的执行结果（成功、失败、警告）
内容：避免使用大量文本，可以采用icon+文本的形式出现；
行为：出现1-2s后自动消失，具体时长可以根据文本的长度来设定；
而HUD虽然无法调用但聪明的设计师们将这个控件做了一个自定义，比如：视频亮度和音量的调节；
文章图片
哔哩哔哩音量调节 2、底部提示框Snackbars
Snackbars同Toast一样，属于Android控件。
文章图片
使用场景：
通常显示在屏幕底部
可应用于一些变更信息比如：安装完成、任务删除、账号升级、网络错误等，但在国内被用于减少用户路径，引导用户进入另外一个任务，比如登录、进入某个活动；
内容：
一次只能展示一个Snackbars；
少量文本，只能包含一个文本按钮，且颜色与文本色不同。当然你也可以自定义添加button。
行为：
从屏幕底部出现；
停留4-10s后自动消失，也可以点击按钮关闭。
3、通告栏Noticebar
Noticebar和Snackbars类似，而Noticebar更多的是位于屏幕顶部；
文章图片
使用场景：
需要给予用户持续性提醒时使用；（非必要，不使用）
Noticebar会成为内容的一部分，镶嵌于页面，不遮挡内容；
内容：
静态：背景色区别于其他内容，鲜亮色彩吸引用户，添加button引导用户查看内容；
动态：文本过长时，会滚动展示信息；
行为：
不干扰用户当前行为，但持续存在吸引用户视线；
不自动消失，需要用户处理事件后才能消失；
4、气泡浮层Popovers
4.1气泡菜单Pop Menus
Pop是用户点击或长按在界面中浮出的临时视图；
文章图片
使用场景：
需要承载更多集合功能，有两种情况一个是常用入口，方便用户快速找到对应的功能（比如微信+）；另一个是隐藏使用频率低的功能或不希望用户执行的操作；
帮助用户明确指向对应内容的操作。比如聊天信息长按操作后显示更多功能；
内容：通常包含一个箭头，执行浮层出现的位置。
行为：
点击出现，但不自动消失，需要用户点击非浮层区域或出现位置隐藏浮层；
属于用户主动触发，使用便捷，干扰较弱；
4.2文字提示Tooltips
文章图片
使用场景：用于信息提示或操作引导。常见的有新功能指引，更新消息提示；
内容：一般以纯文字展示，并指向要引导的内容；而特定情况下会添加icon或button。
行为：非模态，一般短暂停留后自动消失，也可以点击button关闭；
5、警告框Alerts
Alerts为模态弹窗，用于传达与app或者是设备相关的信息，需要用户操作或选择才能继续。
文章图片
使用场景：
用户进行敏感操作（破坏性）且不可逆，比如：删除、清空；
App状态改变告知用户；比如：登录失效，获取系统权限等；
内容：
包含标题，描述信息，按钮，必要时可以添加输入框，背景不可更改；
标题清晰表达主旨，描述文本言简意赅，可以告知原因、后果等；
button不宜超过3个，避免影响用户选择，按钮文本多采用动词为主。
行为：
用户无法关闭弹窗，只能做对前一个动作的取消；
强制打断用户行为，非必要时避免使用警告框；
6、菜单Menus
6.1、活动视图Action Views
Activity Views是一项任务，用户对某个内容可以执行多种任务。
文章图片
使用场景：当需要对当前内容进行多种任务支持时，比如分享。
内容：
包括系统提供的内置功能（比如：复制、标记、打印、添加到桌面等）这部分内容无法删除但可以选择列表中的先后顺序，之前的版本是不可调整的。
可以自定义内容，展示和其他应用共享和扩展操作，扩展操作是指可以添加更多第三方应用；
行为：
虽然是模态控件，但由用户主动触发，与Alerts相比会弱很多。
在iOS13中通过点击取消和遮罩区域收起，而iOS14多下拉操作也可以收起；
6.2、控制面板Action Sheets
Action Sheets是一种警报形式，相应控件和操作出现，一类是启动某项任务，另一类是让用户确认操作；
文章图片
内容：
需要突出显示破环性选择；
提供取消按钮，给用户后撤的余地，始终包含在屏幕底部，且清晰。
有必要时可以在顶部增加对操作的描述；
行为：
由用户的某个行为触发；
从底部向上滑出，用户可以点击取消或点击遮罩收起控件；
6.3、情景菜单Context Menus
Context Menus通过3D Touch和长按来启动情景菜单，主要是为了快速预览，可以在不打开详情页的情况进行上下文功能操作；
Context Menus虽然操作便捷，但用户对于长按的交互习惯较少，因此使用频率也会较低。所以大多数情况只是作为一种辅助操作。
文章图片
文章图片
7、滑轮选择器Wheel Pickers
Wheel Pickers是模态，交互相对复杂，但体验流畅，在iOS系统中是镶嵌于页面；
文章图片
应用场景：
【7月第2篇《弹窗类型那么多我应该如何选择呢（看完这篇不再纠结》#设计规范#设计思考）】当用户对于字组数据的逻辑结构有清晰的认知时，比如：年月日、省县镇等；
一组数据属于同一维度时，（比如：选择类型）
时间或距离设定时（比如：番茄钟）
内容：
滑轮，1个或多个滑轮根据实际情况而定，不宜超过3个滑轮；
提供确认和取消按钮，
设计师也可以在自定义选择器，比如淘宝和京东地址选择
行为：
模态弹窗，点击遮罩可收起，用户通过点击确定完成当前操作；
因为用户可以预测滑轮内容，看似复杂的交互对流程的干扰是较小的。
PS：选择器滑轮嵌入页面时可以考虑增加震动和齿轮滑动声音，增加趣味性，也会提高用户体验。比如：OffScreen的番茄钟
8、模态面板Modal Sheets
8.1、系统模态面板 System Modal Sheets
Modal Sheets为了集中注意力执行与当前任务不同的任务时才能创建模态面板。说白了就是切换任务，但模态面板的出现必须是对用户有价值的。
动图来源：站酷天真儿
使用场景：区别于当前任务相对简单的任务时使用；
内容：
由模态堆叠导航提示栏和任务面板两部分构成；
始终包含一个退出按钮，比如完成或取消，当然在需要时你也可以选择关闭icon。
通常需要显示模态任务的标题；
文章图片
行为：
当用户在放弃任务或可能造成数据丢失的情况时需要给用户警告；
模态面板由下到上滑动出现，原面板堆叠显示在模态面板后方，告知用户路径，不会让用户迷路，向下扫拉回到原路径，保持统一的过渡样式；
用户可以通过三种方式关闭面板，从顶部下拉，点击完成或取消按钮，在面板上向下轻扫。
8.2、自定义底部面板 Custom Bottom Sheets
自定义底部面板更多的是因为业务需求延伸出各类不同的面板以承载更多的内容，根据用户的体验路径来减少页面跳转快速达成目的。
出入方式和模态面板一样，面板可以通过点击遮罩，应用提供的按钮以及下拉的方式关闭。
也正是因为自定义面板的出现导致我们在设计时容易选择不适合的“弹窗”，造成用户体验的不一致。
文章图片
小结
从iOS系统“弹窗”的应用场景、内容和行为三个方面了解每种“弹窗”的使用方式可以帮助我们选择合适的“弹窗”。
对于一个工作经验较少的设计师来说保持整个系统/产品的体验一致和易用是一件相对困难的事。
在此之前曾做过一个大型APP改版的项目，当时因为团队对规范缺少统一的认知，每个人随意使用弹窗，没有制定统一的规范。最后的结果可想而知，相信在这之后单弹窗而言我可以做出一个理智的决策。
文章图片
文章图片
三、如何选择合适的控件
1、浏览弹窗设计规范，了解清楚每种弹窗的使用场景和可能给用户带来的影响。
2、如果你的产品已经梳理了设计规范，请遵循产品交互规范，以保证产品整体的体验一致性。
3、从业务场景出发，当前流程下弹窗的操作是确认信息，还是引导用户完成业务闭环，不同的场景下有不同的选择。
留一个案例，评论区留下你的选择？A or B or C ?
用户场景：用户首次进入APP，通过新手引导完成了车辆的绑定；
用户流程：首页-点击绑定按钮-输入VIN码-确认绑定-返回首页-提示绑定成功-领取卡券-跳转卡券列表；
业务诉求：引导车主绑定车辆，希望通过卡券培养用户使用线上预约和在线购买套餐的习惯。
那么在这种情况下进入首页时的弹窗应该选择哪一个更加有利于完成业务目标呢？
文章图片
另外感谢前辈们整理分享的经验和规范
参考文章
https://www.zcool.com.cn/article/ZMTE1MTE0OA==.html《移动端交互控件规范总结：弹窗（二）》站酷天真儿
https://www.zcool.com.cn/article/ZMTA5ODQ2NA==.html 《你知道如何正确的设计弹窗吗》站酷每天都睡觉
https://www.zcool.com.cn/article/ZOTY3MDY0.html《全面解析弹窗提醒交互设计》站酷上线修行
https://developer.apple.com/design 《iOS设计规范
文章图片
另外，我们开通了视频号，来关注啊
文章图片
觉得有用三连“关注、点赞、再看”
表示感谢！
推荐阅读
- 慢慢的美丽
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 《跨界歌手》:亲情永远比爱情更有泪点
- 诗歌:|诗歌: 《让我们举起世界杯，干了！》
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- 人间词话的智慧
- 《一代诗人》37期，生活，江南j，拨动心潭的一泓秋水
- 广角叙述|广角叙述 展众生群像——试析鲁迅《示众》的展示艺术
- 书评——《小行星》