常见的B端弹窗样式设计总结

2024-5-21    ui设计分享达人

B 端产品的业务场景通常比 C 端更为复杂，因此在进行产品设计时对信息的处理方式也需要根据不同的业务场景进行设计。今天主要聊一下 B 端产品设计中弹窗设计。
常见的B端弹窗样式设计总结
 
 
弹窗的定义
弹窗是展现在用户操作界面之上的容器，在 X 轴和 Y 轴的平行空间之上扩展了页面的高度。是系统与用户之间建立联系非常重要的组成部分。它通常在用户进行特定操作或访问特定页面功能时弹出，目的是向用户展示某些信息、提供选择或执行某些操作。
 
弹窗使用场景
  1.  
    需要呈现的内容篇幅相对较少。
  2.  
    常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
  3.  
    通常是由系统触发（用户被动接受）。
  4.  
    弹窗整体高度和宽度不做绝对的标准或规定，可以根据内容篇幅的多少和视觉的平衡度来确定，整体规范保持一致即可。
 
总体概括为简单和复杂两个场景。
 
一、场景简单
场景简单包括：全局提示、气泡确认框、警告提示、通知提醒框，通常是操作确认和系统内部自动触发性提示时使用。
 
1. 全局提示
以 toast 提示居多，通常在页面中间偏上的位置。
常见的B端弹窗样式设计总结
 
 
 
2. 气泡提示
用于解释难理解的功能名词或者由于版面限制文字展示不完，利用气泡来展示。
常见的B端弹窗样式设计总结
 
 
 
3. 警告提示
用于重点内容的警告提醒，降低用户犯错概率，提升用户的使用体验。
常见的B端弹窗样式设计总结
 
 
 
4. 提示性通知弹窗：
位置相对固定，通常出现在需要介绍说明的功能旁边或者居页面中间展示。
例如，当系统发生重要更新维护或者重点功能引导时，可以显示一个提示性通知弹窗，告知用户当前状态。
类型主要包括以下三种：
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
 
举例：
有赞后台页面
有赞后台页面
 
 
 
二、场景复杂
1. 场景复杂｜全屏弹窗
常见的B端弹窗样式设计总结
 
 
 
新开页签（浏览器）
常见的B端弹窗样式设计总结
 
 
为什么是全屏弹窗，而不是页签？
全屏弹窗功能和页面相似，之所以使用全屏弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，编辑完成后需要快速关闭当前窗口并返回到原来的页面中去，数据可以做到实时同步。如果用新页签打开，则会对数据同步造成隔断，需要二次打开页面。页签是浏览器新开窗口，通常用于不同功能的展示。
 
 
2. 场景复杂｜非全屏弹窗
①中间弹窗·纯文本
确认弹窗：用于向用户确认某个操作或决策，通常包含确认和取消两个按钮。例如，当用户点击删除按钮时，可以显示一个确认弹窗，询问用户是否确定删除。
常见的B端弹窗样式设计总结
 
 
 
②中间弹窗·下拉框
下拉框：后台将全部数据返回，下拉展示全部内容，方便用户快捷查询。
常见的B端弹窗样式设计总结
 
 
 
③中间弹窗·文本输入
文本输入：通常用于备注等说明性内容的填写。
常见的B端弹窗样式设计总结
 
 
 
④中间弹窗·选择器
包括单选和复选两种类型，下图以单选框举例。
常见的B端弹窗样式设计总结
 
 
 
⑤中间弹窗·步骤条
常见的B端弹窗样式设计总结
 
 
 
⑥中间弹窗·多内容组合
常见的B端弹窗样式设计总结
 
 
 
⑦中间弹窗·左右穿梭框
穿梭框左侧通常会有分页，为了防止用户对已选内容造成遗忘，右侧框展示已选内容进行二次核对。
常见的B端弹窗样式设计总结
 
 
 
⑧中间弹窗·上下穿梭框
常见的B端弹窗样式设计总结
 
 
 
举例：
常见的B端弹窗样式设计总结
 
 
 
3. 场景复杂｜抽屉
抽屉呈现的内容篇幅介于弹窗和页面之间，通常居右侧展示。
 
①抽屉·纯文本
通常展示较大篇幅的说明性内容。
常见的B端弹窗样式设计总结
 
 
 
②抽屉·横向 tab
通常展示同一大类下，不同分类的信息内容。比如全部消息、已读、未读等。
常见的B端弹窗样式设计总结
 
 
 
③抽屉·纵向 tab
常见的B端弹窗样式设计总结
 
 
 
④抽屉·多内容结合
多类型内容的聚合展示。
常见的B端弹窗样式设计总结
 
 
 
 
三、其他情况
①强制性提示
为了更好的了解用户特征，提供更加优质的服务，有的系统在用户首次使用时，会出现强制性弹窗，执行必要操作后，才可进入系统使用。
常见的B端弹窗样式设计总结
 
 
 
四、弹窗使用规范
上下左右间距大小固定，弹窗大小根据内容的多少来自动调整。
 
①中间弹窗
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
 
②侧边弹窗
常见的B端弹窗样式设计总结
 
 
以上就是全部内容，谢谢。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发



作者：西城门设计
链接：https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

« 产品经理如何用ChatGPT提高工作效率？给你15个例子！ 层级思维解构图标分类体系 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档