2023年弹出窗口的设计原则

编辑指南:我们在操作某个页面时,有时会出现一个消息框。 这就是弹窗。 它的作用是什么呢? 有什么类型? 一起看看吧。

弹窗是什么,我想大多数人都不知道,我们在操作某个页面的时候,突然出现消息框就是弹窗。

弹匣的定义:是用户与产品之间进行操作交互的窗口,核心价值在于重点信息的传递与反馈(传递信息状态的反馈引导操作),它的作用是什么呢? 通常可用于营销活动、功能告知、版本升级等。

一.弹匣类型分类

1 .什么是模式弹窗? 是用户可以交互的事情。 常见模式的弹匣有对话框、浮层框。

1 )对话框

如图2所示,左图是在处于被动的状态下、在用户进入APP时在没有任何操作的情况下主动地弹出的消息框,图2是在主动的状态下、在用户按下按钮时弹出的消息框。

弹出时背后的封面变成黑色或半透明,弹匣的信息会变得更加突出和显眼。

那么他们设计的作用是什么? 图1促进优惠券的使用,为用户提供了明显的提示,图2经过反复确认的提示,系统以对话框的弹匣的形式提醒用户是否继续操作,起到警告的作用,避免用户带来不必要的损失

对话框弹坑的核心价值是重点信息的传递和反馈。

2 )动作面板

如上图所示,从左到右分别属于宫格模式的动作面板、列表模式的动态面板。 宫格模式常见于图表形式的表达。 宫格模式弹坑最常见的场景是共享模块,它的作用是减轻用户不必要的记忆负担。

窗户高度低,可以表达更多的内容和功能,方便用户的记忆和使用。 如果有很多选择,可以分组。 对一行进行分组后,屏幕右端会显示一个图表,提示您可以横向滑动以查看更多的选择。

列表表达式在用文字表达选项中很常见。 选项不太可用。 在下部设定取消按钮。

3 )浮层弹窗

相信很多人对浮层弹窗并不陌生,最常见的支付宝( Alipay )微信右上角就有一个号码,里面放着一些常用的功能。 其设计方法是在浮层容器上施加投影,避免与底部信息混淆,在浮层底部设置口罩。

它在普通按钮的右侧。 这个弹匣也可以在任何地方。 按钮的数量可以是多少。

2 .非模式弹窗什么是非模式弹窗?

用户响应,一定时间后可以自动消失,是一种轻量级的反馈机制,最常见的是提示盒和底部的弹匣。

1 )队列( Toast/hud ) )。

toast (安卓系统的控制名词,目前也应用于ios系统。 ) hud ) ios与toast类似的是类似音量调节的hud ) )如上图所示,出现了“取消收藏”和“微信支付”的界面,我们经常是生活中的博主和道具。 那个时候,在画面的正中央提示关注成功和收藏的成功,但一般来说这是轻量级的

不能手动删除。 显示的位置位于上部/中央/下部。 它还显示一条小消息作为警告和消息反馈,用于显示操作的效果和应用状态变化。

考虑到显示时间短,占用面积不大,不适合放更多的文字和信息。

2 )打开底部弹窗( snackbar )

底部的弹坑也叫snackbar。

下部弹匣通常由拷贝和按钮组成,一般显示在界面下方,可以自动消失,也可以由用户手动操作进行销售。 通常多见于撤销操作。 另外,也有关注后发出提示,带按钮打开关注页面的操作等。

3 .弹坑优缺点分析

二、弹匣的设计风格目前很多app设计师在设计app的时候,都会把弹匣设计成各种各样的形状。 例如,抽屉式、标签式或宫形式等,根据用户自身的需要,通过上下拖动可以看到弹匣的信息。

那么,这样做有什么好处呢? 可以节约画面的使用率,避免显示内容过多给用户带来一定的视觉障碍和体验感的不良效果。

什么是弹窗指示器? 便于用户拖动来展开和收起弹匣的操作。 一般来说,适合内容多的情况。 用户可以根据自己的实际需求,选择打开或折叠弹匣,以实现页面信息的最佳显示。

举个例子:

某股通过商业新闻增强用户粘性:

该设计结合自身业务特点,丰富了指示条的效果。 向上拖动可以在整个屏幕上展示车型、价格等信息,向下拖动可以容纳更多的车辆信息。

1 .设计弹匣时应该考虑的三个问题1 )是否迫在眉睫

如果这件事不太紧迫,不需要用户立即采取措施,或者用户根本无法采取措施,请考虑通过以下方式减弱并降级:

降低视觉音量:将模式弹窗设置为非模式弹窗,或设置弹窗消失时间将主动按下降低为被动显示:用户主动点击按下弹窗查看2 )具体情况

如果这是一个操作或信息显示弹匣,用户在处理此内容/任务时是否需要与其他内容进行比对或显示? 此内容/任务是否重复出现/是否需要重复处理?

如果需要“比对”、“查看”其他内容,设计模态弹窗无疑会起到“引导注意力,让用户专注于当前任务”的作用,但也会严重影响用户完成任务的能力。 对此,我们一般用以下方法解决。

尝试使用各种形式的非模态窗口(在边栏上承载信息和执行任务,而不是窗口),让用户在执行任务的同时自由行动。 也可以暂时中断任务3 )

如果这是操作弹匣,用户需要对照自己处理的结果再次调整内容吗

是的,可以使用延长有效期模式。 除非实际单击“提交”,否则所有更改都是临时的,实际上无效。 (可以在弹坑里添加保存选项哦。 )不,有效期延长模式将在与弹坑内容区交互时立即生效

2 .在产品设计中不知道如何选择弹匣时,可以根据弹匣反馈的信息强度进行选择,强度大时选择对话框,强度小时选择控制面板。

非模态弹窗在使用时可以首先根据平台规范进行选择,然后根据特定场景在部分位置进行定位。

如果反馈信息不需要很强的屏蔽感,采用Snackbar代替Toast也是一个不错的选择。 在用户体验方面,用户操作更加顺畅。

三.弹药库核心价值传递信息状态反馈引导操作。

传递信息:传递信息是通过语言、文字、视频、图片向人们表达交流的互动方式。 状态反馈:系统的状态变量通过比例环节传送到输入端反馈的一种方式,是体现系统内部特效的控制方式。 操作引导:产品中之所以有新手引导,是为了提示用户如何操作,帮助用户快速操作。

四.弹匣设计应注意的细节1 )容器

也就是说,内容区的长度尺寸一般由视觉定义规范,弹坑的内容区往往根据内容适应高度,滚动超过规范高度。

通常应该避免滚动。 如果你画的弹匣需要频繁滚动,规范可能不符合业务,请向UI提出建议。

交互也定义了什么样的信息量是弹坑的极限,要超过就需要以别的形式展示

2 )标题

弹窗标题应与用户触发弹窗的操作按钮同名或至少有相同的关键词; 弹窗标题和内容区副本应分别分工。

3 )闭合方法

对于B端来说,建议在右上角增加封闭作为封闭操作性弹匣的最短路径,采用按键输入、点击屏蔽等多种封闭方式;对于C端来说,功能性弹匣很少在弹匣上加“x”,封闭为“取消”,点击式运营窗户需要视觉冲击力和引导行为,不放置取消操作,所以总是在底部放置圆形的“x”

4 )内容区和主操作按钮

弹匣底栏水平高于内容区,在设计弹匣内操作时,需要重点。

此外,还应尽量避免选项卡交互。 标签的台词是“单击操作按钮后,所有标签的内容都会提交”,所以即使不显示隐藏标签的内容也是有效的。 这与“看了就占便宜”相反。

内容区和操作区需要映射。 提高复制和操作的亲密性,使用户能够在判断的瞬间完成操作。

5 )操作按钮的配置

理想情况下只有两个操作按钮。 如果有三个按钮,则按钮的放置规则可以根据自己的平台特性决定,没有通行规则(但是,破坏按钮一般位于主操作按钮的相反侧)。

C方有潜规则,取消应为左,行动为右,行动为不可撤回的操作时应以红色警告。 C方超过两个按钮后,可以考虑用actionsheet代替弹匣。

五、弹匣设计体验角度好的弹匣,要减少干扰,注重简约,重视视觉一致性,突出信息的主要传递内容,使用户在一定时间一目了然。

接下来需要注意的是,弹出窗口的频率不要太频繁。 如果太频繁的话,用户会厌倦的。 制作产品时一定不要让用户思考。 让客户思考并选择的产品不是好产品。

六、本文总结了弹窗在什么场合如何使用,以及设计弹窗时必须注意哪些细节,综合考虑根据自己选择最佳用户的弹窗。

本文由@汪仔9619原创,每个人都是产品经理,未经许可禁止转载。

标题来自Unsplash,基于CC0协议。

动态分享

2021国外流行的影视后期软件,影视后期网站模板

2022-12-7 21:45:58

动态分享

ai 图像生成技术走了多远,人工智能ai 图像描摹

2022-12-7 21:48:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索