什么是弹窗? 如今的弹窗都变成了什么样子

我相信大多数人都熟悉什么是弹出窗口,也就是说,当我们操作某个页面时,一个信息框突然弹出,即弹出窗口。

弹出窗口的定义:它是用户和产品之间的操作和交互窗口。其核心价值在于关键信息的传输和反馈(传输信息 状态反馈 指导操作)。它的作用是什么?通常可用于营销活动、功能通知和版本升级。

一、弹窗类型分类

弹窗设计原则

1. 模态弹窗

什么是模态弹窗?就是用户可以进行交互操作,常见的模态弹窗有对话框、浮层框。

1)对话框

弹窗设计原则 弹窗设计原则

如右图所示,左图处于被动状态,即用户进入app的时候不需要任何操作,主动弹出来的信息框,图二属于主动状态,就是用户需要在点击按钮的情况下弹出来的信息框。

弹出时,背面的封面呈黑色或半透明,可以使弹出窗口的信息更加突出和醒目。

那么他们的设计是什么呢?图1促进了优惠券的使用,给用户一个引人注目的提示。图2反复确认提示后,系统提醒用户是否继续以对话框弹出窗口的形式操作,发挥警告作用,避免不必要的损失。

对话框弹出窗口的核心价值在于传达和反馈关键信息。

2)动作面板

弹窗设计原则 弹窗设计原则

如上图所示,从左到右属于子宫模式动作面板、列表模式动态面板、子宫模式在图表形式中很常见,子宫模式弹出窗口最常见的场景是共享模块,其功能是减轻用户不必要的记忆负担。

弹出窗口高度较低,可以显示更多的内容和功能,方便用户的记忆和使用。当有更多的选项时,可以分组,一个行为组,图表可以显示在屏幕的右边缘,表示可以水平滑动以查看更多的选项。

列表通常以文本的形式表示选项。选项较少,底部设置取消按钮。

3)浮层弹窗

弹窗设计原则
弹窗设计原则

我相信很多人对浮动弹出窗口并不陌生。最常见的支付宝微信右上角有一个 号,将放置一些常用功能。其设计方法投影浮动容器,避免与底部信息混淆,并在浮动层底部设置一层。

这种一般都出现在按钮右边,此种弹窗也可出现在任何位置,按钮数可多可少。

2. 非模态弹窗

非模态弹窗是什么?

用户可以回应,一段时间后可以自动消失,是轻量级反馈机制,最常见的是提示框和底部弹出窗口。

1)提示框(Toast/hud)

弹窗设计原则 弹窗设计原则

  • Toast(Android是一个控件名词,现在也应用于Androidios系统当中)
  • hud(ios有一个相似之处toast的是hud如音量调节)

如上图所示,屏幕弹出取消收藏和微信支付。我们在生活中经常关注博客或物品。此时,屏幕中间将提示关注成功或收藏成功。一般来说,这是一个轻量级提示,没有互动,通常显示1~2秒内自动消失。

它不能手动消失。位置可以在顶部/中间/底部。它弹出一个小信息作为提醒或消息反馈,通常用于显示操作效果或改变应用状态。

考虑到显示时间短,占用面积小,一般不适合携带更多的文字和信息。

2)底部弹窗(snackbar)

底弹窗也叫snackbar。

弹窗设计原则

底部弹出窗口通常由副本和按钮组成,通常出现在界面下方,可以自动消失或用户手动销售,通常在取消操作中很常见,也有注意后提示和按钮打开关注页面操作等。

3.分析弹窗的优缺点

什么是弹窗? 如今的弹窗都变成了什么样子

二、弹窗设计风格

现在很多app设计师在设计app当时,弹出窗口将被设计成各种形式,如抽屉式、标签式或宫殿格式等,我们可以通过用户自己的需要结合实际情况,通过上下拖动来查看弹出窗口信息。

那么这样做有什么好处呢?它可以节省屏幕的利用率,避免过多的显示内容对用户造成一定的视觉干扰和糟糕的体验。

什么是弹出窗口指示器?方便用户拖动弹出窗口的展开和收集。一般适用于内容较多时,用户可以根据自己的实际需要选择展开或折叠弹出窗口,以实现页面信息的最佳显示。

接下来我给大家举个例子:

弹窗设计原则 弹窗设计原则

如图所示,股票通过商业新闻提高用户粘性:

弹窗设计原则 弹窗设计原则

旅游设计结合自身的业务特点,丰富了指示效果:向上拖动可以显示车型、价格等信息,向下拖动可以收集更多的车辆信息。

1. 设计弹窗时需要考虑的三个问题

1)是否急迫

如果这件事不是那么紧迫,用户不需要立即处理,或者用户需要基本处理

不,可以考虑以下方式弱化降级触达:

  • 降低视觉音量:模态弹窗成为非模态弹窗,或设置弹窗消失时间
  • 主动接触降级为被动显示:将接触弹出窗口变成用户主动点击查看

2)具体情境

如果这是一个操作或信息显示弹出窗口,用户在处理内容/任务时是否需要比较或查看其他内容?这个内容/任务是否重复/需要重复处理?

在需要比较或查看其他内容的情况下,设计模态弹出窗口确实起到了引导注意力,让用户关注当前任务的作用

  • 试着用侧栏来承载信息或任务,而不是弹出窗口
  • 使用各种形式的非模态弹出窗口,允许用户在完成任务时自由行动,甚至暂时中断任务

3)生效方式

如果这是一个操作弹出窗口,用户是否需要根据自己处理的结果再次调整内容?

  • 是的:可以使用延迟生效模式。在你真正点击提交之前,所有的修改都只是暂存,没有真正生效(也可以在弹出窗口上添加一个保存选项)
  • 否:当您与弹窗内容区交互时,可以使用及时生效的模式已立即生效

2. 如何选择如何选择弹窗?

当您不知道使用对话框或控制面板时,您可以根据弹出窗口反馈信息的强度进行选择。如果强度较大,则选择对话框,如果强度较小,则选择控制面板。

使用非模态弹窗时,首先可以根据平台规范进行选择,其次可以根据具体场景放置在部分位置。

当反馈信息不需要太强的阻断感时,使用Snackbar代替Toast也是不错的选择。从用户体验来看,用户操作会更顺畅。

三、弹窗的核心价值

通信信息 状态反馈 指导操作。

  • 传递信息:传递信息是指通过语言、文字、视频和图片向人们表达交流的互动方式。
  • 状态反馈:是通过比例链接将系统状态变量传输到输入端进行反馈的一种方式,是反映系统内部特效的一种控制方式。
  • 指导操作:在产品中,一些新手指导是提示用户如何操作,帮助用户快速启动。

四、设计弹出窗时需要注意的细节

1)容器

也就是说,内容区域的长度和高度一般由视觉定义规范进行。弹出窗口的内容区域主要根据内容适应高度滚动,超过规范高度。

正常情况下,应避免滚动。如果你画的弹出窗口经常需要滚动,可能是标准不符合业务要求。UI提建议。

交互还应该定义什么样的信息量是弹出窗口的极限。如果超过此极限,则需要以其他形式显示

2)标题

弹窗标题应与用户触发弹窗的操作按钮同名,或者至少有相同的关键字;弹窗标题与内容区文案要各有分工。

3)关闭方式

对B在端方面,建议将关闭作为关闭操作弹出窗口的最短路径,并使用键控制、点击屏蔽等关闭方式;对C在端方面,弹窗中的功能弹窗很少添加X,关闭主要是取消、点击屏蔽、下拉(底部半弹出窗口将采取的关闭手势);操作弹出窗口不会取消操作,因为它需要视觉冲击和指导行为,所以它经常在底部圆。X”

4)内容区和主操作按钮

弹窗的底栏层次高于内容区,因此在设计弹窗内操作时,需要有轻重之分。

此外,尽量避免弹窗 tab的交互,tab 弹出窗口的潜台词是点击操作按钮后,所有tab所有的内容都会被提交,所以即使是隐藏的tab内容没有呈现也有效,与所见即所得背道而驰。

内容区和操作区需要映射。提高文案与操作的亲密性,让用户在做出判断的瞬间完成操作。

5)安排操作按钮

理想情况下,只有两个操作按钮。当有三个按钮时,按钮的放置规则可以根据平台的特点来确定,没有通行规则(但破坏性按钮通常放置在主操作按钮的对面)。

C有一条不成文的规则,取消在左边,行动在右边,如果行动不可撤回,则需要标记红色警告,c超过2个按钮后,可以考虑使用actionsheet替换弹窗。

5.弹出窗的设计体验角度

良好的弹出窗口应减少干扰,注重极简主义、视觉一致性,突出信息的主要传输内容,使用户在一定时间内一目了然。

其次,需要注意的是,弹出的频率不能太频繁,如果太频繁,会让用户感到非常无聊。在制作产品时,不能让用户思考,让客户思考所选产品不是一个好产品。

六、总结

本文介绍了如何使用弹出窗口,以及我们在设计弹出窗口时需要注意的细节,并考虑选择最适合用户的弹出窗口。

相关新闻

联系我们

联系我们

888-888-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部