弹窗/抽屉使用指南

用户头像
南京/UI设计师/3年前/1939浏览
弹窗/抽屉使用指南
用户头像
鲲sky

这篇文章,用最通俗的语言阐述弹窗和抽屉的区别和用法,欢迎评论交流~

看完本篇文章,你会学到以下内容:
1,什么是弹窗?
2,弹窗的规范如何定义?
3,弹窗使用规则是什么?
4,什么是抽屉?和弹窗对比优缺点是什么?

一、什么是弹窗?

弹窗是在保留当前页面状态的情况下,告知用户并承载相关操作。

思考:弹窗里面哪些构成原件可以根据业务属性可以有可以没有呢?

答案:标题区和操作区。

二、弹窗的规范如何定义?

1、定义弹窗的大小规范

弹窗的的大小有两种定义方式。一种是固定大小,一种是自定义大小。需要根据自己的业务场景二选一。

弹窗宽度一般定义为三种。分别为560px,720px,960px,都是8的倍数方便记忆。尺寸并不是定死的,可以根据自身业务场景调节。

弹框固定高度会有一个最小高度200px,一个最大高度560px。在其之间的高度是由内容区的内容决定,超过最大高度560px时出滚动条。

弹窗自定义高度,只定义最大高度,随着页面拉升缩小,弹窗边距不变。

2、定义弹窗内容规范

定义:标题栏操作栏高度,内容区边距。

3、弹窗类型

弹框类型是根据使用场景区分提示弹窗,自定义弹窗两种

弹窗优点:没有跳出父级页面,弹窗任务完成后仍然会留在父页面进行操作,减少用户操作中步骤体感

弹窗缺点:信息承载量少,信息内容过多的时候会出现上下左右滚动条,弹窗会降低用户操作效率

三、弹窗使用规则是什么?

1、不超过两种操作选项

假如承载的操作项比较多,建议新跳转一个落地页。

2、多步骤操作,选择用页面承载

3、尽量避免弹窗叠弹窗

第一个弹窗的内容考虑用页面承载或者第二个弹窗是否可以用气泡或者下拉来承载。

假设一定要叠,二级弹窗的复杂度要低于一级弹窗,满足形式上的平衡,遵循从大到小的逻辑或者是覆盖上级,完成任务后点“返回”返回。

四、什么是抽屉?和弹窗相比优缺点是什么?

抽屉是信息承载量和页面比肩,又兼具弹窗的优点。

////////////////////////////////////////
结语
这篇文章对弹窗和抽屉的用法进行了总结与归纳,感谢阅读,欢迎交流~

9
举报
|
42
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
我的钱包-UI界面设计-app
新拟态风格 UI设计组件库
新能源APP应用UIKit
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
钱包ui模板
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】积分icon
3D渐变流体抽象矢量UI背景图
盲盒APP UI设计
高级表盘系列UI源文件
【新年UI图标】美食icon
UI界面 组件
智能家居中心 简约 UI设计组件库
UI通用设计素材1
高级感金属拟物 UI设计组件库
【新年UI图标】银行卡icon
手表表盘UI系列
【新年UI图标】旅行icon
【新年UI图标】相机icon
UI应用平面图标
UI 登录界面设计模板包
【新年UI图标】活动icon
Security Camera UI kit
森系3D渐变流体抽象矢量UI背景图
你可能喜欢
相关收藏夹
大家都在看
登录注册