暗抽屉图片

同样都是交互反馈组件，你可能会想：弹窗（Modal）、抽屉（Drawer）和折叠面板（Collapse）的区别是什么？有哪些特定的使用场景？

本文就来详细分析下这三者的区别和联系，帮助你做好应用。

一、弹窗 Modal

弹窗（Modal）也被叫做 “对话框”，当需要用户处理关键的事务、又不希望跳转页面打断用户的工作流程时，可以在当前页面正中打开一个浮层，承载相应的操作。

其用法特征是：

1. 需要呈现的内容篇幅相对较少。
2. 常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等，不会跳转页面而打断用户的操作流程。
3. 通常是由系统触发（对用户来说属于被动接受）。
4. 对于弹窗的整体高度和宽度，并没有绝对的标准或规定，你可以根据页面的视觉舒适度和功能需要自行确定。整个产品的弹窗尺寸应尽量保持统一、有规律。

二、抽屉Drawer

抽屉（Drawer）是从屏幕边缘滑出的浮层面板。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

在一些场景中，该组件可以使用两个层级，第二层抽屉可以由第一层抽屉中的内容唤起。关闭时需要按顺序一层层关闭。

不推荐使用两个以上层级的抽屉：

其用法特征是：

1. 树需要呈现的内容篇幅相对较多，样式也更为多样。
2. 常用于针对某内容进行补充说明；展示不紧急的细节信息；进行信息补充编辑等。不会跳转页面而打断用户的操作流程。
3. 通常由用户触发（对用户来说属于主动唤起）。
4. 对于抽屉的整体高度和宽度，并没有绝对的标准或规定，可根据页面视觉和栅格框架布局自行确定。整个产品的抽屉尺寸应尽量保持统一、有规律。

三、折叠面板Collapse

折叠面板（Collapse）是可折叠 / 展开的内容呈现区域。在一些场景中，该组件可以使用两个层级，也即在这部分内容区域中可以嵌套一个新的折叠面板：

其用法特点是：

1. 对内容进行分组和归类，保持页面整洁。
2. 对次要 / 不需要完整阅读的内容进行隐藏，缩短页面，提高屏效，减少用户的滚动操作。
3. 当折叠面板中的内容长于网页窗口高度时，整个折叠面板应垂直滚动。尽量不要在单个折叠面板内垂直或水平滚动。
4. 默认状态下是收起状态，有的场景中也会默认展开第一条，其余几条可默认收起。

四、使用建议

• 弹窗 Modal：常用于重要警告、关键信息提示和紧急信息处理；通常是由系统触发。
• 抽屉 Drawer：常用于补充详细信息、展示和编辑内容，呈现非紧急信息。通常是由用户触发。
• 折叠面板 Collapse：常用于分组归类、次要内容，用于提高屏效。通常是由用户触发。

假设我们规定多于 5 行内容的反馈用抽屉，少于 5 行则用弹窗，那么很有可能会导致在同一个页面中，点击相同类型的功能时，一会儿弹出的是弹窗，一会儿则是抽屉。

因此仅用内容篇幅作为判断依据会对用户预期造成一定的困扰，也会给产品的交互反馈一致性带来问题。

专栏作家

元尧，微信公众号：长弓小子，人人都是产品经理专栏作家。一线互联网大厂B端体验设计师，清华大学美术学院本硕连读。曾负责国内最大开源组件库Ant Design组件的设计和运营工作，目前负责国际业务线B端产品体验设计和组件库的搭建工作。

本文原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

蒯轰些1688请问什么是低姿家具? -
计唐虽13978802927 ______ 与常规家具相比,低姿家具最突出的特色是“小巧”、“低矮”,它们大都不超过半米高,桌椅橱柜等都像儿童用品,但功能设计却满足成人需要. ■低姿家具小巧灵活 功能却不少 很多低姿桌子看上去与茶几非常相似,但构造和一般餐桌别无两...

蒯轰些1688实木家具工厂订制到底是什么鬼 -
计唐虽13978802927 ______ 一般来说是指定制.定制先从板式家具开始,因为板式家具标准化程度以及机械化自动化程度较高.所以定制解决方案比较容易解决.随着人民生活水平的提高,对个性化需求越来越强烈.而板式家具对部份中高端收入人群的吸引力下降.所以产生的实木定制.所谓实木工厂定制家具,有几个关键字,一是实木,即生产家具的用材是实木而非板材.二是工厂,即直接由工厂接单、完成量尺,效果图、制作清单等直至产品生产、安装完成的全套服务.三是定制,即依客户房子的实际情况依房子的尺寸来制作家具(区别于普通成品家具是按工厂的设计方案制作尺寸统一).这样的好处一是提高房子的一致性,二是合理最大化利用空间.三是对客户个性化的体现.

蒯轰些1688双温双控冰箱好还是单温单控冰箱好?
计唐虽13978802927 ______ 单温单控的好(要冷藏室温控开停机的,而且要机械式温控器的好!) 技术稳定 因为,在理论上双温双控的的确是有道理,但是在实际的使用当中不是那么一回事!(特别是在环境温度很高的情况下,很难停机的) 而且,故障率非常的高. 不会瞎说的,从事家用电器维修十一年的经历认真的回答你的提问!

蒯轰些1688家具选购小窍门 -
计唐虽13978802927 ______ 家具选购小窍门 1.家具材料是否合理不同的家具,表面用料是有区别的.如桌、椅、柜的腿子,要求用硬杂木,比较结实,能承重,而内部用料则可用其他材料;大衣柜腿的厚度要求达到2.5厘米,太厚就显得笨拙,薄了容易弯曲变形;厨房、...

蒯轰些1688电冰箱的冷冻室为什么在顶部 -
计唐虽13978802927 ______ 通常家用电冰箱的冷冻室、冷藏室的设置是冷冻室在上,冷藏室置下.这是因为冷空气的密度比热空气密度大,能自然处在热空气的下方.现借用某冰箱说明书的图可以看出,风冷式(间冷式)只有一个蒸发器,冷冻室在上,就能充分利用冷空...

蒯轰些1688有哪几种常见模式的橱柜抽屉?
计唐虽13978802927 ______ 拉篮的轨道是装在抽屉下方的,细节考虑人性化,这样抽屉推拉使用起来更加方便.图中的抽屉尺寸是490*140*450mm(长*高*宽),因为抽屉拉开会占用面积,所以这个...

蒯轰些1688如何解决衣柜使用过程中的各种问题 -
计唐虽13978802927 ______ 问题一:衣服太多装不下1. 顶天立地不手软 衣柜的规格可以根据房间的具体情况来设定.如果需要定制,建议最好能够百分百利用有限的立体空间容量.顶天立地的衣橱设计,中间挂衣服的区域更充裕,上部空间用来放不经常穿的衣物,这样...

蒯轰些1688大家想想 男生的房间应该设计成什么样才好看呢 -
计唐虽13978802927 ______ 这要看看想要啥风格 我觉得要突出干净 有空间感好 白墙是提高室内亮度的好方法 如果房间地方够大就弄个书柜 上边可以放书籍 碟片啦啥地 下边做成抽屉可以放些东西 这样多了储物的地方 要是房间空间比较有限就可以在书桌上 或是墙壁合适...

蒯轰些1688看看这个家具的价值,具体看图
计唐虽13978802927 ______ 晚清左右的 花梨嵌骨 宁波式架子床,工手不错,保存完好,值得收藏,目前市价在5万元以上 清代初期,延续的是明代家具的朴素典雅的风格. 康熙中期以后,中国经历康熙、雍正、乾隆三代一百余年统治.到雍正、乾隆时期,满清贵族为追...

蒯轰些1688请教天龙大师,我买了一组书柜,可是尺寸和墙的尺寸正合适,怎么办? -
计唐虽13978802927 ______ 谢谢你的信任.你的书柜与留出的位置刚好,的确是不可能安装进去的.安装中,必须要有一定的活动余地.这个安装的余地,我的经验大约要3-4cm.那么,只有通过削薄墙体来实现.为了你钟爱的一万多元的书柜而在墙体上下功夫是值得的...