web设计-弹窗/抽屉的使用

2023-11-14    博博

什么是弹窗?
 
弹窗最主要的功能就是服务于当前主任务之外的支线任务,包括信息传递,操作反馈等。对话框,警告框,toast......都属于弹窗,但是使用场景都不一样。在合适的业务场景选择合适的弹窗组件,能够保证最基础的用户体验。因为像强干扰类弹窗的使用,对用户而言,更是一种强加的任务,很容易导致用户丧失耐心而流失。
弹窗/抽屉使用指南
 
弹窗的规范如何定义?
 
1、定义弹窗的大小规范
弹窗的的大小有两种定义方式。一种是固定大小,一种是自定义大小。需要根据自己的业务场景二选一。
弹窗宽度一般定义为三种。
分别为560px,720px,960px,都是8的倍数。尺寸并不是定死的,可以根据自身业务场景调节。
 
弹窗/抽屉使用指南
 
弹框固定高度会有一个最小高度200px,一个最大高度560px。在其之间的高度是由内容区的内容决定,超过最大高度560px时出滚动条。
 
弹窗/抽屉使用指南
 
弹窗自定义高度,只定义最大高度,随着页面拉升缩小,弹窗边距不变。
 
弹窗/抽屉使用指南
 
定义弹窗内容规范
标题栏操作栏高度,内容区边距。
 
弹窗/抽屉使用指南
 
弹窗类型
弹框类型是根据使用场景区分提示弹窗,自定义弹窗两种
 
弹窗/抽屉使用指南
 
弹窗优点:
没有跳出父级页面,弹窗任务完成后仍然会留在父页面进行操作,减少用户操作中步骤体感
弹窗缺点:
信息承载量少,信息内容过多的时候会出现上下左右滚动条,弹窗会降低用户操作效率
 
弹窗使用规则是什么?
 
1、不超过两种操作选项
假如承载的操作项比较多,建议新跳转一个落地页。
 
弹窗/抽屉使用指南
 
2、多步骤操作,选择用页面承载
 
3、尽量避免弹窗叠弹窗
第一个弹窗的内容考虑用页面承载或者第二个弹窗是否可以用气泡或者下拉来承载。
假设一定要叠,二级弹窗的复杂度要低于一级弹窗,满足形式上的平衡,遵循从大到小的逻辑或者是覆盖上级,完成任务后点“返回”返回。
 
弹窗/抽屉使用指南
 
什么是抽屉?和弹窗相比优缺点是什么?
抽屉是信息承载量和页面比肩,又兼具弹窗的优点。
 
弹窗/抽屉使用指南

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

关键词:UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司用户体验公司软件界面设计公司、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

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

存档