B端界面优化:常见弹窗样式设计技巧与案例

2024-10-31    蓝蓝小助手 B端ui设计文章及欣赏


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端弹窗样式设计总结
 
以上就是全部内容,谢谢

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

image.png蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

image.png

 

日历

链接

个人资料

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

存档