抽屉样式图片

同样都是交互反馈组件，你可能会想：弹窗（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 协议。

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

席紫店2393如何选择橱柜? -
茹咏娜19132956844 ______ 对于消费者在橱柜选购上如何把握,其实归根结底无外乎三点:好看、耐用、好用.所以在选购上只要照着这三点挑选,就没有什么大错.好看,就是看它和你是否有眼缘.不管是门板、花色的搭配,还是个性设计,只要相对眼就对了.耐用,就是橱柜的细节出发.从柜体材料是否环保,到台面边角是否平整没毛刺,吊码、地脚线承重等等细节之处严格把关.好用,就是烹饪前后使用方便.无论是橱柜里的五金功能件、电器、尺寸高度,还是洗、切、炒、盛、装的烹饪动线设计,这一切都是为了方便自己的煮家生活.但由于市面上产品同质化现象严重,对于一个外行人来说,想从表面上去甄别橱柜到底谁好谁坏,确实有点难度.因此,为家选购一套好橱柜,品牌挑选极其重要.

席紫店2393开放式衣柜好不好用 -
茹咏娜19132956844 ______ 现在家里都流行用这种开放式的衣柜,时尚又方便,能快速找到需要传的衣服.听过箭牌衣柜布局可以根据定制房型定制,分有挂衣区、叠放区,首饰叠放区、抽屉储物区等,欧式古典风、文艺复古风、简约现代风、欧式田园风、简约欧式风的款式都有效果图,

席紫店2393如何选购橱柜呢? -
茹咏娜19132956844 ______ 选购橱柜时出除了要注意橱柜的款式、功能外,还要注意一些比较隐蔽的细节方面.比如,一些封边处理、五金配件等方面.1橱柜台面切割后的预处理 灶台水盆的开口边缘最容易发生断裂,在选购之前应该了解厂商的预处理方式.2 面板及柜...

席紫店2393IBM Pseries 里的I/O抽屉(drawer)的作用是什么.是用来扩展I/O存储容量的吗???希望能提供详细的资料 -
茹咏娜19132956844 ______ 没错,既然是I/O抽屉,当然是用来扩展I/O的,IBM P系列小型机作为企业级应用核心,经常需要对外进行多层次多种类的连接,需要的板卡就往往很多,本机扩展有限,就需要额外的I/O柜子.一般来说分为带硬盘的和不带硬盘的两种.

席紫店2393衣柜格局图 衣柜配件有哪些 -
茹咏娜19132956844 ______ 衣柜格局图参考一:步入式L型衣帽间衣柜格局 衣柜配件材质包括:E1级密度板(新柚木)、不锈钢、铝镁合金+油漆(纯白).本款衣柜格局款式新颖,清新爽朗,给业主朋友们不一样的视觉享受,优美大方,为卧室增添光彩的同时也不失浪...

席紫店2393厨房杂物怎样收纳设计呢?
茹咏娜19132956844 ______ 抽屉拉门的样式,不仅节约了空间,而且将各种调味用品分层摆放在里面,瓶瓶罐罐排排站,不仅整齐大方,而且方便拿取,尽显实用之感.金属的滑道,不锈钢的样式,...

席紫店2393如何选择办公家具?
茹咏娜19132956844 ______ 办公家具是现代企业实际运行需要,反映企业形象、经营营销更需要,也可以称得上是职工的第二个家.因为要反映企业文化、精神、品味、规模和经济实力,选择办公家具考虑即要考虑实用性又要考虑艺术性;既然是家,当然少不了家具....

席紫店2393衣柜功能五金都有哪些 -
茹咏娜19132956844 ______ 1、活动拉 衣柜中我们最常见到的就是活动拉篮的运用了,活动拉篮使取放更方便,可以根据实际需要装配不同大小的拉篮.拉篮中适合放T恤、衬衫、毛衣等衣物. 图片来源于悍高功能五金 2、门板篮架 安装在衣柜门板上的篮架,可以充分...

席紫店2393抽屉拉手选择技巧 抽屉拉手怎么选购 -
茹咏娜19132956844 ______ 抽屉拉手选择技巧1、最好选择知名品牌的抽屉拉手,品质方面才有保障.2、抽屉拉手的造型也十分重要,它对于整件家具的装饰效果有明显的促进作用,因此要选择与抽屉以及整件家具风格搭配的抽屉拉手,当然抽屉拉手的造型可随喜好选择...

席紫店2393我们要怎么选好的家具? -
茹咏娜19132956844 ______ 现在的家具主要是两种:板式家具和实木家具. 1、板式家具的质量鉴别 选购时主要看表面的板材是否有划痕、压痕、鼓泡、脱胶起皮和胶痕迹等缺陷;木纹图案是否自然流畅,不要有人工造作的感觉;对于对称家具,更要注意板面色彩、纹...