知方号

知方号

B端弹窗设计11大法则 <网页弹窗怎么设计>

我们每天都会主动或者被动的接受弹窗的存在,甚至有时候会忽视它的存在,感觉它就像一粒尘埃一样渺小,不值得被关注,那么你知道这些问题的答案吗?弹窗是什么?弹窗的来历是什么?弹窗的种类是什么?弹窗的使用场景有哪些?弹窗的尺寸有哪些?使用弹窗的注意事项有哪些?弹窗的规范有哪些?以及众多弹窗种类中他们的区别又有哪些?如果你知道的更加全面,欢迎大家留言区互动补充,如果知道的不全面,也没关系,现在就来脑补一下也不是来不及吗?

分享目录

一、 弹窗的定义

二、 弹窗的由来

三、 弹窗的分类

四、 我眼中的弹窗分类

五、 模态弹窗和非模态弹窗的区别

六、 弹窗的尺寸

七、 弹窗的使用场景

八、 弹窗使用的注意事项

九、 动态弹窗

十、 弹窗样式的多样性

十一、弹窗中的按钮文案

一、弹窗的定义

弹窗,通常指的是计算机软件或网页中的一种用户界面元素,它以一种覆盖在当前窗口上的方式出现,通常用于显示通知、警告、提示信息或者要求用户进行某些操作(如输入信息、确认操作等),弹窗的设计和使用需要考虑到用户体验,以确保它们既有效又不会干扰用户的工作流程。

二、弹窗的由来

弹窗是伊凡·佐克曼(Ethan Zuckerman)在1990年代在互联网公司Tripod.com工作时发明的,最初发明弹窗的初衷是希望各品牌广告与用户网页内容风格能够吻合,他为弹射窗口写了代码,让广告在内部运营,而非直接插入页面中,后来随着时间的推移,弹窗的种类也越来越多,包括网页弹窗、桌面弹窗、APP弹窗等。

三、弹窗分类

弹窗分类从广义上来分,可以分为模态弹窗和非模态弹窗。

1. 模态弹窗

模态弹窗会打断用户的操作行为,强制用户必须回应,否则不能进行其他操作;它是一种特殊的弹窗,它在用户界面中提供了一种交互方式,要求用户必须先与之交互(如填写信息、做出选择或确认操作)后才能继续其他操作。模态弹窗通常会覆盖在当前窗口或应用程序的上方,阻止用户访问后台的内容,直到弹窗被正确关闭;模态弹框属于一种重量性反馈,一般用于用户进行重要的操作。

1.1 模态弹窗的具体种类

❶ Modal对话框(确认对话框的实例展示)

❷ Modal对话框(内容展示型的对话框)

这是我参与设计的一个后台界面,用户点击对应的地名,就能弹出对应城市云电脑使用的一个情况。

❸ Modal对话框(表单编辑型的对话框)

这是我参与设计的一个后台弹窗界面设计,该弹窗将基础信息、网络配置、高级配置用表格的形式来呈现,并且每块信息支持修改编辑服务。

❹ Modal对话框(操作反馈型)

下面是用户点击登录按钮之后弹出的一个弹窗,如果想要继续登录,必须要通过输入手机号和验证码才能成功登录,他需要用户有一个操作的反馈信息,才能继续进行。

❺ Drawer抽屉弹窗(内容展示)

360浏览器这种弹窗就是模态抽屉弹窗,它是从左向右弹出的,并且弹出之后主页面中的内容无法进行操作。

2. 非模态弹窗

非模态弹窗不会影响用户的操作,用户可以不予回应,用户可以自由地在弹窗和应用程序的其他界面元素之间切换,执行其他任务。非模态弹框偏重信息提示,通常它有时间限制,出现一段时间之后,它会自动消失。

2.1 非模态弹窗的具体类别

❶ Tooltip文字提示弹窗

Tooltip文字提示包含文字的解释弹窗,也包含按钮的解释弹窗。

❷ Drawer抽屉式弹窗

抽屉式弹窗一般从左右两边弹出, 它能承载比较多的信息,同时它的弹出并不会妨碍主页面中功能项的操作。

❸ popconfirm气泡确认框

当用户在界面中进行了不当的操作时,界面中就会弹出一个popconfirm气泡确认框,告知用户具体的错误点。

❹ Notification通知提示框

Notification通知提示框是系统自动弹出的一种弹框,例如天翼云电脑专家下面的这个弹框,它是软件启动后,系统检测到当前电脑有两款应用存在兼容性问题,而弹出的一个温馨提示,希望用户能够卸载,避免用户电脑过载,或者干扰过多。

❺ Alert警告提示弹框

Alert警告提示弹框是当前出现了特别需要用户注意的情况而弹出的弹框,通常弹窗中会配以具有告警色的红色或者橙色图标。

以下是我使用天翼云电脑管家的过程中弹出的一个告警弹窗,弹窗中提示网络异常,并且配了一个红色的告警图标,警示效果比较明显。

❻ Message 全局提示弹窗

Message 全局提示弹窗也就是我们常说的toast,它适用于轻量级的操作反馈,不会打断用户操作,一般悬浮出现在导航下方,会自动消失,它是最轻量级的反馈组件。

下面是蓝湖中的一个全局提示弹窗,每当

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。