移动端弹窗UX体验笔记

由于最近工作需要，整理Tencent**平台体验设计规范，最为一个职场新人来说，整个过程是比较痛苦的。在梳理的过程中，也是把所思所想沉淀下来，通过一个完整的思路将移动端弹窗的所有类型进行整合。

那对于弹窗来说，设计从业者们并不陌生；日常生活中我们在使用移动产品的时候，都会见到非常多的弹窗提示，它已经成为向用户传达信息非常重要的手段。有的会打断用户的行为，而有的却是润物细无声的存在。这背后的使用原理我们是否有思考过？

在弹窗设计过程中，我们首要明确产品所要传达的信息，同时紧密结合“用户的使用行为与场景”；选择合适的弹窗控件，提升用户的体验感。其次我们在设计弹窗时要考虑弹窗的内容量，以及我们传递给用户的挫败感。

根据弹窗的给用户的提示的强弱，我们可以把弹窗分为两大类：模态弹窗和非模态弹窗。

A.模态弹窗的定义：

又称阻断式弹窗，其特点是阻断用户操作，用户必须对本弹窗内容进行操作行为，否则不能在同时进行其他操作。

使用场景：

用户在当前界面中需要用户完成某个操作或任务。其操作行为不可逆且为重度级反馈行为。

此部分弹窗适用于强提示状态下使用；其优点可以更好的聚焦用户的视觉；缺点是打断用户的当前行为。在使用模态弹窗时，需要谨慎使用模态弹窗。交互设计中要紧密结合业务要求，选择合理的弹窗样式，优化用户体验行为。

B.非模态弹窗的定义：

又称非阻断式弹窗，其特点是在不打断用户操作的同时；提醒用户进行下一步操作的行为，有时间限制，自定义时间后会自动消失。用户可以根据自己的需要选择操作或选择不操作。

使用场景：用户在当前界面中不会受到太多干扰，可以正常进行浏览行为。大部分停留一段时间后会自动消失。其优点是不会阻断用户的当前操作；属于轻度级反馈方式。不适用于需要用户及时反馈场景下。

弹窗的应用及规范

一、对话框

ios规范中对话框为Alerts  MD规范中为Dialog 两者用法及定义比较相似，只是在样式上稍有不同。在设计时要注意两者规范的使用，本次以ios为例进行解释说明。对话框样式是弹窗中最常见的样式，也是应用最多的样式。

使用场景：

ios中表示传达出你的应用或设备某种状态的重要信息，并且常常需要用户来进行操作。比如用户在作出删除、清空等比较敏感操作或者app状态改变告知用户；比如：登陆失败，获取系统权限等。

构成：

包含标题、描述信息、按钮 必要时可以添加输入框、内容链接等。标题和描述信息为可选项，如果标题能够准确表达信息，就可不用描述信息。反之也可不用标题。

位置：

一般在屏幕中间

对话框的类型：

a.内容型弹窗

1. 警告框

  使用场景：警告框有着明确的操作指令，十分影响用户的体验感受，一般只出现在重要的场景下，如：确认购买和破坏性的操作（删除）以及通知用户有关APP和设备问题（警告、预警类信息）

2.信息选择类

使用场景：适用于重要信息提醒、版本更新通知、系统授权以及消息通知等功能型消息提醒。

b.运营类弹窗

运营弹窗属于系统弹窗Alerts的一种变；在模态弹窗中属于中度提醒。

使用场景：常见于运营活动（比如：大促、拉新、广告等）这类弹窗在视觉表现更加强烈、吸引人的眼球。造型丰富，其中异形弹窗更是给人较强的视觉冲击力。在设计此类弹窗时要根据运营的目的突出【领取】、【参与】等按钮（目前大促活动场景下会采用动态按钮，吸引用户注意力），弱化关闭按钮。

二、菜单Menus

菜单弹窗所展示的信息是将动作或者内容折叠起来，通过长按或者点击收折功能点call起弹窗，其中弹窗覆盖在当前展示页的蒙版上，让用户能够关注弹窗上的内容

使用场景：

1）启动任务：点击菜单弹窗的选项对当前页面执行某种操作，或者导航至其他页面

2）筛选内容：点击菜单弹窗的选项对当前页面进行内容的筛选。（列表形式、宫格形式以及树形弹窗等）

a.动作栏action sheet

点击页面中的操作区域，触发此弹窗，call起半个临时页面操作窗口，进行多个功能项选择。一般都有一个默认的“取消”按钮，点击“取消”或弹窗以外区域可以关闭弹窗。此sheet交互形式是iOS系统特有的。

b. 活动视图Acitivity View

使用场景：

一般由用户主动触发，常用于提供更多的功能操作。如：分享功能

交互形式：

点击「取消」按钮或者遮罩层关闭Activity Views。

选中当前窗口中的内容进⾏操作，关闭

c.其它自定义菜单

随着activity view和activity sheet的使用已经不足以满足信息的承载，而演变出其它自定义菜单的样式，比如：底部菜单、气泡菜单、顶部菜单以及侧边菜单。

Bottom menus底部菜单：

使用场景：一般适用于多选项操作，从底部向上滑动出现；activity view和activity sheet一般也可认作为一种特定底部菜单。

交互形式：

底部菜单属于模态弹窗，底部有蒙层，其蒙层底部的功能页不能进行操作

向下滑动面板或点击【关闭】按钮或点击蒙层退出

当底部菜单用与筛选内容时：

单一筛选条件，以列表的形式排列，选中选项后，自动关闭面板

多个筛选条件时，以宫格的形式排列，一般有两个操作按钮【重置】和【确定】，只有选择确定按钮时，面板才会关闭。

top menus顶部菜单：

使用场景：一般适用于多选项操作，从顶部部向下滑动出现；顶部菜单一般会配合tab 栏出现。

 

交互形式；

顶部菜单的交互形式与底部菜单基本吻合，但退出形式略有不同，顶部菜单关闭，没有关闭键，可以点击蒙层退出，选中面版中的选项退出，或者点击tab按钮，关闭当前的弹窗，但同时会出现切换tab的弹窗

side menus 侧边菜单

使用场景：一般适用于复杂的多选项操作，从右侧弹出；其样式结构很向web端的抽屉式布局

 

交互形式

侧边菜单一般与顶部菜单配合使用，顶部菜单筛选的内容为高频使用的，而侧边栏筛选的内容为低频使用的，一般侧边菜单相比较顶部菜单筛选内容更加复杂。

关闭方式点击蒙层关闭，或者选中面板中的选项退出。

pop气泡菜单

使用场景：气泡弹窗可以看作action sheet的演变形式。气泡弹窗指向性较强，再触发的控件附近显示，比较方便用户操作。而action sheet从屏幕的底部弹起后，需要我们的下移视线进行选择，加上底部遮罩的视觉样式，对用户的打扰 >气泡弹窗。一般情况下，在用户进行筛选和启动任务时，两者都可以。

但当我们切换场景时，在ipad设备下，气泡菜单完全可代替action sheet，由于ipad的屏幕占比较大，使用气泡菜单更加便捷。

交互形式：

选中面版中的菜单选项，或点击除气泡弹窗区域，关闭气泡弹窗。

三、选择器

使用场景：ios系统比较常见的滑轮选择器，主要用于多种选项的中场景下使用。在使用选择器时，选择项的内容要符合用户心里的认知选项（如常见年月日、身份城市等），因为在滑动选择器中，上下大部分内容是被隐藏的如果新的内容会造成用户的认知偏差。同时，选择器的选项不能太多，由于显示的信息区域比较少，滑动起来需要花费大量时间。

交互形式：

滑动弹窗重要包括【取消】和【确定】，选中选项中的内容，点击【确定】按钮，操作完成，同时关闭选择器。点击蒙层区域和取消键，关闭选择器。­

总结：

以上是总结的模态弹窗的全部样式以及交互方式，随着交互形式的不断创新，模态弹窗有了非常多的样式，但基本上都在原有基础上进行创新的。模态弹窗中，警告框>菜单>选择器（对于用户影响强度），交互设计师在进行弹窗设计时，需要结合场景进行合理选择。

（非模态弹窗会在下一篇更新）

希望可以和大家有更多的交流！

参考资料：

1.https://www.zcool.com.cn/article/ZMTE3ODc5Ng==.htmlAPP弹窗控件(二)——模态弹窗设计要点与技巧

2.https://www.zcool.com.cn/article/ZMTE1NjE3Ng==.htmlUI弹窗设计总结篇

3.https://www.zcool.com.cn/article/ZMTE1MTE0OA==.html移动端交互控件规范总结：弹窗（二）

4.https://zhuanlan.zhihu.com/p/159185385弹窗归纳（Dialog/Popover/Actionbar/Toast/Snackbars/HUD）

5.https://zhuanlan.zhihu.com/p/163245759  7月第2篇《弹窗类型那么多我应该如何选择呢？看完这篇不再纠结》#设计规范#设计思考