明白：App弹窗设计体系总结

五连环画

这一篇你将看到：景观作品集的相关知识也可以到网站具体了解一下，有专业的客服人员为您全面解读，相信会有一个好的合作！

1、弹窗的定义


2、不同类型弹窗的特点及使用场景


、常见使用误区










一、弹窗的定义：


弹窗是A中一种常见的交互方式，主要具有传递信息和获取反馈两大功能。按类别划分，可分为模态弹窗和非模态弹窗两大类。













模态弹窗：


强制打断用户当前操作行为，传递给用户信息，同时用户必须进行操作回应，否则法使用其他功能。


包含：D（警告框、对话框）；A、AS、AV（动作栏、操作列表、活动视图）；PP（弹出框、浮层）






非模态弹窗：


不影响用户当前操作行为，传递给用户信息，用户不用对其进行回应，一般出现几秒后消失。


包含：THUD（提示框）；S（底部弹窗）














二、弹窗介绍：





11、D（警告框、对话框）


顾思义此类弹窗具有通知、警告的作用，往往会打扰到用户正常操作。用户必须对弹窗进行回应，才能继续其他任务。此类弹窗在安卓中称为D，在中称为。














（1）样式：


一般出现在屏幕中间位置，背后有黑色半透明蒙层。主要分为按钮样式和图片样式。按钮样式基本元素必须包含标题、1~个按钮，此外可以根据情况添加：描述文案、输入框等。图片样式通常用于广告活动宣传，图片形状不固定，可以是异形。有时也可以图片和按钮结合使用。













（2）使用场景：


此类弹窗通常用于很重要、很紧急、有风险的操作，或传达重要信息。如：退出、删除、清空、版本升级、广告宣传等。由系统发起的弹窗（非用户触发）一般也使用D。






（）不同按钮数量的D使用方法也不同：





单个按钮：一般用于告知用户信息，用户不需要做出选择，点击按钮后弹窗消失或直接执行对应操作。






两个按钮：一般用于告知用户信息，用户需要在两个选项中做出选择，如果其中涉及到不能恢复的破坏性操作时，需要在按钮上添加特殊颜色，来警示用户谨慎操作。






个按钮：用于有个选项时。通常把最希望用户点击的选项，放在第一个按钮。最不想用户点击的选项，放最后一个按钮。










12、A（AS、AV）（动作栏、操作列表、活动视图）


点击页面某个操作区域，触发此弹窗。提供一个临时操作窗口，可以选择多个功能选项。一般都有一个默认的取消按钮，点击取消或弹窗以外区域可以关闭弹窗。AS和AV是OS上特有的交互形式。









AS






（1）样式：


动作栏主要位于屏幕底部，背后有黑色半透明蒙层，可以提供多个功能选项，且展示的样式不固定。AS一般提供至少2个功能选项，顶部提示文案是可选模块。如果功能选项太多，可以使用AV滚动显示多个功能，注意需要保留一定的视觉线索。特殊情况下也可自行定义弹窗样式，来包含多个功能或复杂操作，以适应特殊场景。






AV






（2）使用场景：


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






（）优点：


这种提示方式可以减少弹窗出现在页面中间给用户带来的干扰，且不会永久占用页面的空间。










1、PP（浮层）









（1）样式：



用户点击页面某个区域，浮出的半透明或不透明窗口，包含有多个功能选项。浮层出现的位置不固定，因此使用上更加灵活。






（2）使用场景：



用于折叠页面中的多余信息，或是作为一些功能的捷入口。常出现于首页，具有一定的指向性。










21、THUD（提示框）


此类弹窗在安卓里叫T。在OS里有一个类似的叫HUD，音量调节提示是最常见的HUD。









（1）样式：


此类弹窗尺寸较小，常出现几秒后消失。一般有一个背景，背景颜色不限制，带有简短的文案提示。同时也可以添加，颜色也不限制，可以是动图。T出现的位置可自定，通常在屏幕中间居多。整个A里，相同类型的T出现的位置需要保持一致，形成统一的认知习惯。













（2）使用场景：


用于通知用户结果反馈或状态变化，用户不需要对这个弹窗做出回应。此类弹窗能给予用户及时反馈，对用户的打扰程度较小，用于不是非常重要信息的提示，如：刷新成功、保存成功、等待中。






（）优点：



不打断用户当前的操作任务，是一种轻量级的反馈提示，对用户干扰小，占用屏幕空间小。






（4）缺点：


容易被用户忽视，出现时间短。不适合展示重要信息，以及大量文案，用户很可能没读完文案弹窗就消失了。此类弹窗法交互操作。













（5）系统规范里T与HUD的区别：


1、T只出现在屏幕底部，HUD则出现在屏幕。


2、T只能是纯文字，HUD则可以带。


、T一般是黑色半透明背景，HUD是毛玻璃透明背景


4、T里面的内容法变化，HUD则可以变化内容（如音量调节时，音量的变化）






我们可以看到很多线上A的T，并没有严格按照系统规范。所以在际使用中，完全可以跳出规范，选择适合自己产品的T样式。










22、S（底部弹窗）


S是安卓系统的一种控件，有时也在系统中使用。它用于向用户反馈信息，其打扰程度介于D和T之间，是一种轻量级的反馈弹窗。S出现时，用户仍然可以在屏幕上操作，屏幕上只能同时出现1个S。









（1）样式：


大多数出现在屏幕底部，由文字和按钮组成，用户可以点击按钮进行交互。通常展示几秒钟后消失，也可以操作弹窗外其他位置而消失。偶尔也有未按照规范，出现在屏幕顶部的情况，如摩拜单车A。






（2）使用场景：


较多使用于撤销操作，给予用户反悔的机会。






（）S与T的对比：


1、都是小尺寸弹窗，几秒钟后自动消失。


2、S带有可交互的按钮，而T法交互。


、S一般出现在屏幕底部，T位置不固定。


4、S对用户的打扰程度，比T略高。


5、S可以触摸弹窗以外部分消失，而T不行，只能等待自动消失。














、弹窗总结：






1、模态弹窗


特点：模态弹窗是一种重量级反馈，常用于重要信息的提示，进行重要操作。


优点：能够容易的获取用户视觉焦点，吸引用户注意力。


缺点：容易打断用户当前的操作行为，用户必须回应弹窗，否则法进行其他操作。






D适用于少量选项的判断操作；动作栏和浮层适用于多个选项的功能操作；浮层具有一定的指向性。










2、非模态弹框


特点：非模态弹窗属于一种轻量级反馈，常用于非重要的信息提示。有一定的时间限制，出现一段时间后自动消失。


优点：不强制用户交互，对用户的打扰程度较小。


缺点：展示时间较短，不适合展示重要信息。不能承载大量文案。










、弹窗设计原则


（1）精简文案



弹窗的按钮文案和提示文案应尽量精简易懂，不产生疑惑和歧义。大量或模糊不清的文案，会导致用户法速做出选择，导致整个操作流程时间变长、效率低下。


反馈类型的弹窗，应尽可能告诉用户：发生了什么，应该怎么做。（如果不需要用户去做什么，则不用提示应该怎么做）













图一：过于复杂的文案看似，能让用户完全明白发生了什么。际上文案过多，阅读时间变长，操作效率变低。大量的文案阅读起来也很累。






图二：只告诉了用户发生了什么，没有告诉用户应该怎么办。尤其是对年纪大的用户，以及对A不熟悉的用户，根本不知道接下来应该怎么做。






图：比较合适。精简的文案清楚且速的让用户知道发生了什么，应该怎么做。同时按钮文案变成重新输入，再一次提示用户接下来如何操作。










（2）直接了当


操作按钮尽可能使用直接表示对应操作的文案，避免用户长时间思考，速理解选项，高效完成操作。





如果希望用户点击按钮去升级，文案应直接表达升级意思，使用立即升级文案。而使用确定文案，则不能清晰表达升级意思，会使用户产生疑惑和歧义，不利于理解和高效操作。













使用删除文案，而不是确定文案。虽然根据提示内容，一样可以知道确定就是删除A，但是不如使用删除文案更直接明了。甚至都不用看提示内容，也能明白操作按钮的含义，和点击后的结果。直接展示出操作称更合适。














四、常见使用误区：









1、D（警告框）和AS（操作列表）


（1）D侧重于传达信息，因此文案内容的优先级较高。AS侧重于功能选项，因此表示不同功能选项的按钮优先级较高。



（2）按钮为2个或以内时，一般使用D。按钮超过2个时，一般使用AS。（仅指一般情况，特殊场景特殊对待）


（）需要强行打断的场景，使用D。如：没有络，版本升级。

















2、AS（操作列表）和选择器


（1）AS用于选择不同的操作，而不是选择不同的选项。



（2）选择不同的选项时（单选），使用选择器。选择器可以容纳很多选项。













------------------------------------------------------


以上仅对工作中学习到的弹窗知识进行总结，希望可以帮助到大家。











如果喜欢请点个赞吧。听说点完赞的朋友今年有好运哦~