B端:弹窗的场景、类型、 选择策略串讲,让你的设计有理有据。

B端产品在什么情况下使用弹窗,弹窗又分为哪些类型,该如何选择合理的弹窗形式,很多小伙伴都是跟着感觉走,本文告诉你依据。

一、弹窗及其场景

在B端系统中,"B端"通常指的是面向企业(Business)的系统,即企业级应用。在这样的系统中,弹窗通常是指在用户界面上弹出的对话框或弹出框,用于向用户显示信息、提示用户进行操作或者请求用户确认。

弹窗通常用于以下场景:

1. 提示信息:向用户显示一些重要的提示信息,例如操作成功、操作失败、系统错误等。

2. 确认操作:在用户进行一些重要的操作时,需要用户确认,例如删除操作、提交操作等。

3. 输入信息:需要用户输入一些信息时,可以通过弹窗来进行输入。

4. 警告信息:向用户显示一些警告信息,例如某些操作可能带来风险或者影响。

在B端系统中,弹窗通常需要考虑用户友好性、操作便捷性以及信息准确性等方面,以提高用户体验和系统的易用性。


二、弹窗分类

弹窗可以分为模态和非模态两种类型:

1. 模态弹窗:

模态弹窗是指当弹窗出现时,用户必须先处理弹窗中的内容,才能继续进行其他操作。在弹窗出现后,用户不能操作弹窗之外的界面,只能进行弹窗内的操作。模态弹窗通常用于需要用户必须完成某些操作才能继续的场景,例如确认框、提示框等。

2. 非模态弹窗:

非模态弹窗是指当弹窗出现时,用户仍然可以操作弹窗之外的界面。用户可以在弹窗出现的同时继续进行其他操作,不需要等待或者处理弹窗中的内容。非模态弹窗通常用于需要用户进行选择或者输入操作的场景,例如输入框、选择框等。

模态弹窗通常用于需要用户必须完成某些操作才能继续的场景,而非模态弹窗通常用于需要用户进行选择或者输入操作的场景。在实际应用中,需要根据具体的场景和需求来选择合适的弹窗类型,以提高用户体验和系统的易用性。


三、模态弹窗有哪些类型

模态弹窗可以以多种形式出现在用户界面上,常见的模态弹窗形式包括:

1. 确认框(Confirm Dialog):

确认框是一种常见的模态弹窗,用于向用户显示一条消息以及“确定”和“取消”两个按钮,用户需要在确认框上选择“确定”或“取消”来确认或取消某个操作。

2. 提示框(Alert Dialog):

提示框也是一种常见的模态弹窗,用于向用户显示一条消息以及一个“确定”按钮,用户需要点击“确定”按钮来确认消息并关闭弹窗。

3. 输入框(Input Dialog):

输入框是一种模态弹窗,用于向用户请求输入一些信息,例如用户名、密码、数字等,用户需要在输入框中输入信息并确认后才能关闭弹窗。

4. 模态窗口(Modal Window):

模态窗口是一种全屏覆盖的模态弹窗,用于显示较为复杂的内容,例如表单、设置页面等,用户需要在模态窗口上进行操作后才能继续其他操作。

5. 加载框(Loading Dialog):

加载框是一种模态弹窗,用于在执行较长时间的操作时向用户显示加载状态,通常包括加载动画和提示信息。

以上是常见的模态弹窗形式,不同的形式适用于不同的场景和需求。在实际应用中,需要根据具体的情况选择合适的模态弹窗形式,以提高用户体验和系统的易用性。


四、弹窗的两种输入框:对话框和抽屉,如何选择

在设计 B 端系统时,对话框和抽屉都是常见的弹窗形式,它们在不同的场景下有不同的使用方式。在选择对话框和抽屉时,可以考虑以下几点:

1. 信息的重要性:

如果需要向用户展示重要的信息、警告或者需要用户进行确认的操作,通常选择对话框。对话框是模态的,能够确保用户在处理完对话框上的信息或操作后才能继续其他操作。

2. 用户操作的频率:

如果需要用户频繁进行一些操作,例如切换导航、设置选项等,通常选择抽屉。抽屉是非模态的,用户可以在抽屉打开的同时继续进行其他操作,适合用于提供附加信息或者导航功能。

3. 界面布局和一致性:

在设计中需要考虑整体的界面布局和一致性,对话框和抽屉的使用应该符合整体的设计风格和用户习惯,以提高用户的使用体验。

4. 用户行为的引导:

根据用户行为的引导,选择合适的弹窗类型。如果需要引导用户进行必要的操作或者选择,通常选择对话框;如果需要提供附加信息或者导航功能,通常选择抽屉。

可以根据具体的场景和需求来选择合适的弹窗类型。在设计 B 端系统时,需要根据具体的功能和交互需求来设计对话框和抽屉,以提高用户体验和系统的易用性。

Hi,我是贝格前端工场,10年前端和UI老司机了,持续为大家分享有价值、有见地的观点、作品、干货,欢迎评论、关注、点赞、有事请私信。

声明:未经允许,不能转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/308546.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VMware Workstation部署最新版OpenWrt 23.05.3

正文共:1456 字 51 图,预估阅读时间:2 分钟 我们之前介绍了如何在VMware Workstation上安装OpenWrt(软路由是啥?OpenWrt又是啥?长啥样?在VMware装一个瞅瞅),也介绍了如何…

十分钟学懂Java并发

并发简介 我们学到的基本上都是有关顺序编程的知识,即程序中所有事物在任意时刻都只能执行一个步骤。 编程问题中相当大的一部分都可以通过使用顺序编程来解决。然而,对于某些问题,如果能够并发地执行程序中的多个部分,则会变得非…

lua学习笔记19(面相对象学习的一点总结)

print("*****************************面相对象总结*******************************") object{} --实例化方法 function object:new()local obj{}self.__indexselfsetmetatable(obj,self)return obj end-------------------------如何new一个对象 function object:…

1688商品详情接口技术深探:解锁电商数据新纪元,实现业务自动化飞跃

1688商品详情接口技术解析 一、引言 随着电子商务的快速发展,越来越多的企业开始关注如何利用API接口获取商品详情信息,以实现数据的自动化处理和业务的快速拓展。1688作为国内知名的B2B电商平台,其商品详情接口成为了众多企业关注的焦点。…

三小时使用鸿蒙OS模仿羊了个羊,附源码

学习鸿蒙arkTS语言,决定直接通过实践的方式上手,而不是一点点进行观看视频再来实现。 结合羊了个羊的开发思路,准备好相应的卡片素材后进行开发。遇到了需要arkTS进行解决的问题,再去查看相应的文档。 首先需要准备卡片对应的图片…

什么是JAVA面向对象

一,什么是面向对象: 我们以前的项目都是面向过程的,一个完整的项目所有的代码都写在一个类里 这就叫面向过程。 面向对象,是指在写大型项目时,多人分工合作,为了代码看上去简洁美观,会将不同的…

2023-2024年科技行业主要变化趋势梳理与总结

一、主要大额并购案例并购原因 (一)产品线补充与业务市场拓展(如VMware、Activision Blizzard并购案) (二)技术整合(如Spunk并购案)、 (三)优化运营以期溢…

MFC:手写一个模态对话框程序

我们知道,在MFC中,要生成一个模态对话框程序,只要按着VS的提示,拖拖拽拽就能生成一个这样的程序,效率非常高。这里,我们反其道而行之,自己写一个这样的程序,这个程序与自动生成的程序…

机器学习和深度学习 --李宏毅(笔记与个人理解)Day 18

Day 18 Spatial Transformer Layer 因为单纯的cNN无法做到scaling(放大)and rotation(转),所以我们引入; 实战中也许我们可以做到 是因为 我们的training data 中包含了对data 的augmentation; …

设计模式——外观(门面)模式10

外观模式:能为系统框架或其他复杂业务流程封装提供一个简单的接口。 例如抽奖过程中 设计模式,一定要敲代码理解 调用1(抽奖系统) /*** author ggbond* date 2024年04月08日 10:34*/ public class Lottery {public String getId…

帝国cms仿《鳄鱼下载站》网站源码

仿《鳄鱼下载站》网站源码手机安卓软件网站模版 PHP网站源码 帝国cms内核 采用帝国cms7.5 环境PHPmysql 恢复数据库后如何修改密码: 双击表,进入对应的详细数据表,然后找到:www_96kaifa_com_enewsuser这个表,双击打开修改&…

python画神经网络图

代码1(画神经网络连接图) from math import cos, sin, atan import matplotlib.pyplot as plt # 注意这里并没有用到这个networkx这个库,完全是根据matploblib这个库来画的。 class Neuron():def __init__(self, x, y,radius,nameNone):self.x xself.y …

Substance 3D2024版 下载地址及安装教程

Substance 3D是Adobe公司推出的一套全面的3D设计和创作工具集合,用于创建高质量的3D资产、纹理和材质。 Substance 3D包括多个功能强大的软件和服务,如Substance 3D Painter、Substance 3D Designer和Substance 3D Sampler等。这些工具提供了广泛的功能…

智过网:注册安全工程师注册有效期与周期解析

在职业领域,各种专业资格认证不仅是对从业者专业能力的认可,也是保障行业安全、规范发展的重要手段。其中,注册安全工程师证书在安全生产领域具有举足轻重的地位。那么,注册安全工程师的注册有效期是多久呢?又是几年一…

数据可视化的3D问题

三维对象非常流行,但在大多数情况下会对解释图形的准确性和速度产生负面影响。 以下是对涉及 3d 的主要图形类型的回顾,并讨论了它们是否被认为是不好的做法。 1、3D 条形图:不要 这是一个 3d 条形图。 你可能很熟悉这种图形,因为…

LabVIEW电信号傅里叶分解合成实验

LabVIEW电信号傅里叶分解合成实验 电信号的分析与处理在科研和工业领域中起着越来越重要的作用。系统以LabVIEW软件为基础,开发了一个集电信号的傅里叶分解、合成、频率响应及频谱分析功能于一体的虚拟仿真实验系统。系统不仅能够模拟实际电路实验箱的全部功能&…

The C programming language (second edition,KR) exercise(CHAPTER 3)

E x c e r c i s e 3 − 1 Excercise\quad 3-1 Excercise3−1:输出结果如图1所示,这里故意让二分搜索算法去寻找一个在数组中不存在在的数,然后去看两种二分搜索算法分别所花费的时间的大小,为了使得所花费的时间更具有可分辨性&a…

3D室内装潢设计 Sweet Home 3D for Mac 中文直装版

Sweet Home 3D 是一款非常棒的家装辅助设计软件,支持包括中文在内的16中语言,它能帮您通过二维的家居平面图来设计和布置您的家具,还可以用三维的视角浏览整个装修布局的全貌。是一款操作起来简单方便,使用起来快捷、迅速,拥有超高…

C语言——数据在内存中的存储

引言 数据是程序运行的核心。当我们用C语言编写程序时,我们实际上是在操纵内存中的数据。这些数据在内存中是如何储存的,今天我们就来学习这些内容。 基本数据类型 1.整型 int: 基本整型,通常占用4个字节 short: 短整型,通常占用…

Windows环境下删除MySQL

文章目录 一、关闭MySQL服务1、winR打开运行,输入services.msc回车2、服务里找到MySQL并停止 二、卸载MySQL软件1、打开控制模板--卸载程序--卸载MySQL相关的所有组件 三、删除MySQL在物理硬盘上的所有文件1、删除MySQL的安装目录(默认在C盘下的Program …