导图社区 互联网产品弹窗设计
好的产品通常会在恰当的时间、合适的位置给出合理的反馈,弹窗也是必不可少的反馈方式,不反馈、反馈不及时或反馈不合理都会带来不好的使用体验,甚至误导用户,从而导致用户流失。 该导图将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点,帮助大家对弹窗组件有更清晰的认识,为后续避坑设计出更好的弹窗做准备。
编辑于2022-04-29 17:23:50这是一张关于AI智能制造技术全景图,在制造业的发展进程中,不同阶段呈现出鲜明的特征与驱动要素。智能化阶段以数据驱动为核心。在这一阶段,多个系统实现深度打通,打破了信息孤岛,使得数据能够在企业内自由流动与共享。此阶段依赖企业级互联与规划,借助ERP进行企业资源规划,实现跨部门业务管理和前后台流程自动化;通过SCP整合多部门数据,进行供应链规划,做到国步需求与供应预测。自动化产线阶段主要由设备驱动。单机或产线集成成为常态,像真空乳化、自动灌装/贴标等技术得到普及,极大地提高了生产效率,推动企业走向规模化生产。然而,多SKU排产难题也随之而来,如何合理安排不同产品的生产顺序和资源分配成为挑战。手工/半自动阶段则以经验驱动为主导。人工在生产过程中占据主导地位,单机仅起到辅助作用。由于人工操作的局限性,导致批次间产品质量波动较大,而且追溯能力较弱,一旦出现问题,难以快速准确地定位根源。从手工/半自动到自动化产线,再到智能化阶段,制造业不断升级,借助核心制造运营平台以及机器集成与控制等相关技术和系统,逐步提升生产效率、质量控制能力和管理水平,以适应日益复杂多变的市场环境。
可信数据要素流通平台是数据要素在安全合规前提下高效流通的关键支撑平台,精心构建了多个核心模块,为数据要素的全生命周期管理提供了全面且可靠的解决方案。该平台打造了统一的数据要素流通门户,作为数据要素流通的总入口,整合了各类资源与服务,为数据提供方、使用方等不同角色提供了便捷的操作界面,极大地提升了用户体验和操作效率。可信数据交易平台是其中的重要组成部分,它承担着数据产品登记、存证、发布等关键职能。通过严格的登记流程,确保数据产品的来源合法、权属清晰;利用先进的存证技术,为数据交易提供可信的证据支撑,保障交易的公平性和合法性;而规范的发布机制,则让优质的数据产品能够被市场广泛知晓。流递服务平台专注于数据交易后的交付与服务,实现了交易数据的精准传递和计费功能。它能够根据不同的交易场景和需求,灵活计算费用,确保交易的公正透明。通过这些模块的协同运作,平台实现了数据产品从登记到计费的全流程安全合规流通服务。无论是金融、医疗、交通等不同行业的数据流通需求,还是政务、企业等不同主体的数据共享场景,该平台都能够提供定制化的解决方案,推动数据要素在各领域的高效配置和充分利用。
业务架构的核心价值在于优化业务视图的展现形式。通过精心描绘业务上下层之间的逻辑关系,它能够将原本错综复杂的业务系统进行合理拆解与整合,梳理出一套完整且简洁的业务视图。这不仅极大地降低了业务系统的复杂度,让业务运作的脉络一目了然,还显著提高了外部客户和内部人员对业务的理解程度。对于外部客户而言,能够更清晰地了解企业的业务范围和服务流程,增强合作信心;对于内部人员,尤其是新员工,可以快速熟悉业务架构,明确自身在业务链条中的位置与职责,从而提升工作效率。业务架构图的构建遵循三大核心原则,即分层、分模块、分功能。分层让业务架构具有清晰的层级结构,从战略层到执行层,层次分明;分模块将业务划分为不同的业务板块,便于独立管理与分析;分功能则进一步细化每个模块的具体功能,使业务细节得以清晰展现。为了帮助大家更好地应用业务架构图,万兴脑图贴心地列举了30个覆盖不同场景和行业的业务架构图示例。无论是互联网行业的电商业务架构,还是制造业的生产管理业务架构等,都一应俱全。这些示例为各行业的企业和从业者提供了丰富的参考借鉴,大家可以根据自身业务特点,猛猛拿去用起来,打造出适合自己业务发展的业务架构图。
社区模板帮助中心,点此进入>>
这是一张关于AI智能制造技术全景图,在制造业的发展进程中,不同阶段呈现出鲜明的特征与驱动要素。智能化阶段以数据驱动为核心。在这一阶段,多个系统实现深度打通,打破了信息孤岛,使得数据能够在企业内自由流动与共享。此阶段依赖企业级互联与规划,借助ERP进行企业资源规划,实现跨部门业务管理和前后台流程自动化;通过SCP整合多部门数据,进行供应链规划,做到国步需求与供应预测。自动化产线阶段主要由设备驱动。单机或产线集成成为常态,像真空乳化、自动灌装/贴标等技术得到普及,极大地提高了生产效率,推动企业走向规模化生产。然而,多SKU排产难题也随之而来,如何合理安排不同产品的生产顺序和资源分配成为挑战。手工/半自动阶段则以经验驱动为主导。人工在生产过程中占据主导地位,单机仅起到辅助作用。由于人工操作的局限性,导致批次间产品质量波动较大,而且追溯能力较弱,一旦出现问题,难以快速准确地定位根源。从手工/半自动到自动化产线,再到智能化阶段,制造业不断升级,借助核心制造运营平台以及机器集成与控制等相关技术和系统,逐步提升生产效率、质量控制能力和管理水平,以适应日益复杂多变的市场环境。
可信数据要素流通平台是数据要素在安全合规前提下高效流通的关键支撑平台,精心构建了多个核心模块,为数据要素的全生命周期管理提供了全面且可靠的解决方案。该平台打造了统一的数据要素流通门户,作为数据要素流通的总入口,整合了各类资源与服务,为数据提供方、使用方等不同角色提供了便捷的操作界面,极大地提升了用户体验和操作效率。可信数据交易平台是其中的重要组成部分,它承担着数据产品登记、存证、发布等关键职能。通过严格的登记流程,确保数据产品的来源合法、权属清晰;利用先进的存证技术,为数据交易提供可信的证据支撑,保障交易的公平性和合法性;而规范的发布机制,则让优质的数据产品能够被市场广泛知晓。流递服务平台专注于数据交易后的交付与服务,实现了交易数据的精准传递和计费功能。它能够根据不同的交易场景和需求,灵活计算费用,确保交易的公正透明。通过这些模块的协同运作,平台实现了数据产品从登记到计费的全流程安全合规流通服务。无论是金融、医疗、交通等不同行业的数据流通需求,还是政务、企业等不同主体的数据共享场景,该平台都能够提供定制化的解决方案,推动数据要素在各领域的高效配置和充分利用。
业务架构的核心价值在于优化业务视图的展现形式。通过精心描绘业务上下层之间的逻辑关系,它能够将原本错综复杂的业务系统进行合理拆解与整合,梳理出一套完整且简洁的业务视图。这不仅极大地降低了业务系统的复杂度,让业务运作的脉络一目了然,还显著提高了外部客户和内部人员对业务的理解程度。对于外部客户而言,能够更清晰地了解企业的业务范围和服务流程,增强合作信心;对于内部人员,尤其是新员工,可以快速熟悉业务架构,明确自身在业务链条中的位置与职责,从而提升工作效率。业务架构图的构建遵循三大核心原则,即分层、分模块、分功能。分层让业务架构具有清晰的层级结构,从战略层到执行层,层次分明;分模块将业务划分为不同的业务板块,便于独立管理与分析;分功能则进一步细化每个模块的具体功能,使业务细节得以清晰展现。为了帮助大家更好地应用业务架构图,万兴脑图贴心地列举了30个覆盖不同场景和行业的业务架构图示例。无论是互联网行业的电商业务架构,还是制造业的生产管理业务架构等,都一应俱全。这些示例为各行业的企业和从业者提供了丰富的参考借鉴,大家可以根据自身业务特点,猛猛拿去用起来,打造出适合自己业务发展的业务架构图。
互联网产品-弹窗设计
4、弹出的时机及频率
针对运营弹窗,如果弹出的时间不对或过于频繁,可能会造成用户反感,所以需要把握好弹出时机及频率 例如用户有一张未使用的优惠券,如果用户每次进入应用都看到弹出提醒,确实又没有购买商品的意愿,总是被弹窗打断真的就很烦,那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等
3、弹窗的文案表述
因弹窗本身承载内容有一定的局限性,所以文案一定要简洁且精确,能用一句话说清楚的就不要过于啰嗦,不仅容器的空间有限且用户的耐性也有限,需要在有限的空间、有效的时间内清晰的表达出核心内容
2、窗口的展现形式
弹窗需要根据实际的场景合理使用,不能为了简洁而过分删减内容、更不能画蛇添足。 例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈,而可能造成用户损失的提醒就需要刻意打断用户,给予更明确的提示甚至二次确认
1、信息的层级关系
弹窗设计时需要注意信息的主次层级关系,优先传达用户想要的或产品想要让用户知道的,以确保重要的信息在第一时间传达给用户
五、弹窗设计的注意事项
交互状态
交互流程逻辑清晰,拟请产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题
规则用法
弹窗出现的位置、包含的具体内容及信息的展示规则,比如哪些场景可复用
类型构成
明确弹窗的类型,如模态/非模态,将其拆分并注明每个小元素的具体信息
基础定义
利用清晰易懂且简短的文案描述弹窗组件的内容及目的
3设计思路
思考角度
产品需求
用户侧
能给用户带来什么?满足什么样的需求?避免什么损失?
产品侧
能给产品带来什么?产品如何期望?是否合理?能得到什么样的结果? 分析为什么要加弹窗,然后将分析结果转化为设计目标,以确保弹窗根据不同需求,在恰当的时间、适合的样式合理的呈现给用户
设计目标
设计侧
团队所有成员需要对该组件有清晰且统一的认知,了解组件的使用场景,以确保不会错用、滥用,如果增加或更换新人设计师,很容易学习和上手,提升效率
技术侧
开发人员使用一致性的常用弹窗组件,便于开发做组件封装后续复用,减少不必要的重复工作,大大提高开发效率
+
>
+
>
技术侧 复用封装组件 提高开发效率
设计侧 明确设计规范 建立统一认知
产品侧 促使用户操作 增加产品收益
用户侧 满足用户需求 避免失误损失
产品需求
设计目标
2设计目的
原则
视觉层面
首先,需要做到的是易懂,弹出的信息需能直击要害,用户看了能一目了然才是关键;
其次,弹窗属于一种干扰信息的存在,设计必须简洁,在弹出时需要考虑是否会过度影响(影响是一定会有的、且看如何降低)用户的其他操作
举例说明:假设用户正在玩游戏、突然来了电话全屏幕覆盖(传统来电),他会以最快的速度挂掉电话,回到游戏中后发现已“阵亡”或被迫离线,即便来电是多么的理所当然,但心里必定是非常不痛快的,如果来电以弹窗的形式且占据屏幕很小区域(如今的来电方式)是不是就给了用户足够反应时间及缓冲时间呢?
交互层面
弹出的内容及操作入口需清晰可操作,虽然有时基于业务需求,产品更希望用户能进行下一步操作而并非回到上一步,即便如此,应用也只能通过弱化次要操作以突出主要操作,让用户有来去自由的权利,如果弱化至用户看不清、甚至找不到的程度,即便提供了次要操作入口,也会存在反面作用;
另外需注意用户对产品的可控性,不管产品如何期望用户进入下一步转化,但不能强制,一定要给用户提供回去的路(强制版本更新除外),否则,任性的用户可能会直接结束应用,甚至因产品过于霸道直接卸载。
概要
可控
+
可操作
>
交互层面
+
>
易懂
简洁
视觉层面
1前提条件
四、如何设计有效的弹窗
4、简单提示
说明
常见于用户操作之后的状态反馈,即便用户没有注意到,也不会造成较大的损失、或结果已经注定,相对来说成本较低,大部分出现在任务过程中的提示(可重复)和结果反馈,以确保用户知晓当前所处状态
使用方式
非模态弹窗toas样式居多,例如加载中、操作成功、刷新结果、清除缓存等,可出现在其他类型的弹窗之后或同时存在
3、信息二次确认
说明
二次确认也是一种打断用户的操作行为,主要是在用户已做好选择的情况下再次弹出确认,以免操作结果造成用户认知上的偏差。它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用
注意事项
二次确认使用得当,可以避免用户、产品的潜在风险,但若是从主观角度一味的滥用,就成了对用户的恶意干扰、影响使用体验,导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题,所以需要从业务(用户侧、产品侧)实际角度出发,两相其害(加-影响使用体验;不加-造成一定损失)取其轻的考虑是否需要增加二次确认弹窗
使用方式
例如:放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等,系统都会给予二次确认,降低用户认知偏差后,以确保用户是经过多次思考才做出的决定
2、定制化弹窗信息
说明
主要从产品角度出发,不过于在乎用户是否需要、会不会反感,都会引导或强制用户操作
使用方式
例如产品发布新版本,会强制用户更新,否则将无法使用。还有各大电商APP,在进入首页时会弹出一堆红包、优惠券,刻意将取消/关闭入口弱化,给用户返回造成一定的难度,利用突出的视觉、动态效果突出主题增加吸引力,以达到转化用户的目的
1、打断用户当前操作
风险提示
当用户的某种操作可能存在风险,为避免操作失误,会弹出对话框打断用户,并给予一定的风险提示引起用户的注意,让其有足够的时间确认是否真的需要进行下一步操作,例如:删除、放弃福利机会、退出登录等,会弹出对话框提示操作后可能引起的后果
前置条件
部分任务在流程中设有一定的前置条件,需要满足条件才能进入下一步操作,通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出,例如下单时选择优惠券、支付方式
任务关键节点
用户在满足任务的基本条件后,需要操作一个关键步骤才能成功,则会弹出对话框让用户完成最后一步操作,例如提交订单、表单、输入支付密码等
三、弹窗的使用场景
透明指示层
用途
一种在透明元素上通过填充、反馈用户当前交互操作的指示层,实时生效
位置
当前应用页面的任何位置,视频类产品中的调整音量、亮度、控制进度条等
特点
主动触发居多,对用户干扰低,能快速传达信息
透明指示层 HUD
通知
用途
消息通知、系统推送
位置
通常从顶部弹出,停留几秒后自动消失,锁屏后,不同设备弹出的位置也有所不同
特点
Notice的前提是需要在应用设置中打开消息通知开关,具备应用外推送功能的,需在设备系统设置中开启通知权限
通知 Notice
提示对话框
用途
Snackbar早期只是Android系统的一种弹窗控件,后在iOS、Web前端都会使用到,可以看作是toast的加强版
位置
一般只出现在屏幕底部,存在的时间比toast长,提供0~1个操作入口,可自动消失,也可与用户产生交互后消失或者跳转至其他页面
特点
Snackbar反馈的重要程度强于toast,例如,某个应用今天有重要提醒,同时又不想影响用户的其他操作,会在用户首次进入时弹出提醒,并提供关闭操作入口,等待用户通过手动关闭(部分自动关闭),加强用户记忆
提示对话框 Snackbar
提示框
用途
用于反馈用户操作成功、警告、错误等当前状态信息
位置
可能出现在任何位置(底部/中间/顶部),在呈现样式上,相同等级的模块统一位置、风格即可,无需用户有任何操作,出现2s左右自动消失
特点
Toast只有纯文字提示,例如格式错误、刷新成功、删除成功等;Hud会使用文字+图标样式,例如添加到购物车、关注成功等
提示框 Toast / Hud
2、非模态弹窗
定义
相比模态弹窗,非模态弹窗属较为轻量,触发后以一种非阻碍的方式呈现,不会打断用户的当前操作
特点
主要是给予用户即时反馈,让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作,根据反馈信息的重要程度及意愿,可在一定的时间内自动消失,也可等待用户操作后消失
类型
提示框、提示对话框、通知、透明指示层 ... ...
浮层
用途
用户操作某个功能/内容后,会在附近出现一个带有视觉引导性质的弹窗,最常见的浮层就是下拉菜单/弹窗等
位置
浮动于顶层窗口并指向触发操作的位置,例如很多社交娱乐类型的应用右上角有一个“+”入口,里面会放置部分常用功能
特点
部分浮层底部没有设置不透明度的蒙层,为了与页面信息更好的区分,会给浮层容器加上投影,避免与底部信息混淆
浮层 Popover / Popup
动作栏 Actionbar
动作栏
用途
通过用户主动操作后弹出的内容信息
位置
基本都是从底部弹出,屏幕占用比例根据内容量的多少比较随意,从小区域、半屏、再到全屏随处可见
特点
动作栏相比对话框则能承载更多、更丰富的功能信息,在用户清晰感知当前操作及反馈的情况下,比跳转到新的页面更有安全感
对话框
用途
主要在打断用户后并提供选项操作,对用户的干扰较大,通常会配备1~3个操作按钮,而且会把用户最期待的或产品最期待用户操作的按钮突出显示
位置
大部分屏幕居中弹出并显示
类型
主动触发
信息的二次确认、输入内容、前置条件选择、风险警示等
被动触发
版本更新、运营宣传、消息通知、系统功能授权等
对话框 Dialog / Alert
1、模态弹窗
定义
用户在完成任务的过程中,界面会出现弹窗打断用户的操作行为,用户必须通过主动点击才可以进行下一步操作
特点
模态弹窗通常能较好的获取用户的视觉焦点,并通过承载的内容、按钮主次层级来引导用户完成他们的需求
类型
对话框、动作栏、浮层 ... ...
二、弹窗体系分类
2、弹窗的构成
1. 容器
作为承载弹窗的文本、图片等内容,容器必不可少,有的弹窗直接以蒙层作为容器,如toast
2. 蒙层
为了和底层内容分离,避免信息混淆,通常会在界面上层(容器下层)设置一个不透明度为20%~60%的纯黑色蒙层。部分小型弹窗不设蒙层,但会为容器设置投影,例如筛选器的展开、下拉菜单等
3. 文本
文本是弹窗传达信息主体的必要条件,如标题、按钮等,即便把文本融入图片,也能一目了然
4. 图片
用于运营弹窗传达更多信息内容的方式之一,为了对用户产生更强的吸引力,还可设计成动态效果
5. 表单
为成功进入下一步做准备,如输入密码(iOS设备下载应用前的必要步骤)。也可以是当前页面流程的分支,例如输入优惠券等
6. 选项
条件较少的选项可使用弹窗完成,单选、复选在选项不超过6个的情况下都可使用
7. 图标
在弱化次要操作的情况下,通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方,目的是突出主操作,鼓励用户从弹窗中进入下一步,另外还有单选、复选、提示等按钮
8. 按钮
是进入下一步或回到上一步(去掉弹窗)的操作入口,部分应用也可以点击弹窗以外的空白区域让弹窗消失,但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮
+
+
引导操作
状态反馈
=
弹窗
传递信息
1、弹窗的定义
定义
当用户与应用产生主动或被动交互时,页面上层会弹出容器,将可承载的文本、按钮、选项、标签或表单等任一内容与之组合,用来传递信息、状态反馈、引导用户等操作
目的
主要是为回应用户或让用户回应,是用户与产品间对话的一种方式,在线上各种场景中都有可能碰到,相当于产品的线上小助理。不同类型的弹窗其作用不同,但最终都是为了满足跟用户之间的友好交流。
一、弹窗的基本介绍