暗抽屉图片
本篇文章,作者将分析弹窗、抽屉和折叠面板三个组件的用法特征,并对这三个组件的使场景提供对应的使用建议,能给产品设计的伙伴提供一些参考,希望能对你有所帮助。
![](https://p0.ssl.img.360kuai.com/t0132211102f39f829c.jpg)
同样都是交互反馈组件,你可能会想:弹窗(Modal)、抽屉(Drawer)和折叠面板(Collapse)的区别是什么?有哪些特定的使用场景?
![](https://p0.ssl.img.360kuai.com/t019c759f36ccc70928.jpg)
本文就来详细分析下这三者的区别和联系,帮助你做好应用。
一、弹窗 Modal
弹窗(Modal)也被叫做 “对话框”,当需要用户处理关键的事务、又不希望跳转页面打断用户的工作流程时,可以在当前页面正中打开一个浮层,承载相应的操作。
![](https://p0.ssl.img.360kuai.com/t010dac1224a4af947a.jpg)
其用法特征是:
- 需要呈现的内容篇幅相对较少。
- 常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等,不会跳转页面而打断用户的操作流程。
- 通常是由系统触发(对用户来说属于被动接受)。
- 对于弹窗的整体高度和宽度,并没有绝对的标准或规定,你可以根据页面的视觉舒适度和功能需要自行确定。整个产品的弹窗尺寸应尽量保持统一、有规律。
二、抽屉Drawer
抽屉(Drawer)是从屏幕边缘滑出的浮层面板。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。
在一些场景中,该组件可以使用两个层级,第二层抽屉可以由第一层抽屉中的内容唤起。关闭时需要按顺序一层层关闭。
不推荐使用两个以上层级的抽屉:
![](https://p0.ssl.img.360kuai.com/t013723d79c1949a581.jpg)
其用法特征是:
- 树需要呈现的内容篇幅相对较多,样式也更为多样。
- 常用于针对某内容进行补充说明;展示不紧急的细节信息;进行信息补充编辑等。不会跳转页面而打断用户的操作流程。
- 通常由用户触发(对用户来说属于主动唤起)。
- 对于抽屉的整体高度和宽度,并没有绝对的标准或规定,可根据页面视觉和栅格框架布局自行确定。整个产品的抽屉尺寸应尽量保持统一、有规律。
三、折叠面板Collapse
折叠面板(Collapse)是可折叠 / 展开的内容呈现区域。在一些场景中,该组件可以使用两个层级,也即在这部分内容区域中可以嵌套一个新的折叠面板:
![](https://p0.ssl.img.360kuai.com/t01f81e92005eb1c303.jpg)
其用法特点是:
- 对内容进行分组和归类,保持页面整洁。
- 对次要 / 不需要完整阅读的内容进行隐藏,缩短页面,提高屏效,减少用户的滚动操作。
- 当折叠面板中的内容长于网页窗口高度时,整个折叠面板应垂直滚动。尽量不要在单个折叠面板内垂直或水平滚动。
- 默认状态下是收起状态,有的场景中也会默认展开第一条,其余几条可默认收起。
四、使用建议
1. 关于使用场景- 弹窗 Modal:常用于重要警告、关键信息提示和紧急信息处理;通常是由系统触发。
- 抽屉 Drawer:常用于补充详细信息、展示和编辑内容,呈现非紧急信息。通常是由用户触发。
- 折叠面板 Collapse:常用于分组归类、次要内容,用于提高屏效。通常是由用户触发。
![](https://p0.ssl.img.360kuai.com/t01f2fdc16765386db8.jpg)
假设我们规定多于 5 行内容的反馈用抽屉,少于 5 行则用弹窗,那么很有可能会导致在同一个页面中,点击相同类型的功能时,一会儿弹出的是弹窗,一会儿则是抽屉。
因此仅用内容篇幅作为判断依据会对用户预期造成一定的困扰,也会给产品的交互反馈一致性带来问题。
专栏作家
元尧,微信公众号:长弓小子,人人都是产品经理专栏作家。一线互联网大厂B端体验设计师,清华大学美术学院本硕连读。曾负责国内最大开源组件库Ant Design组件的设计和运营工作,目前负责国际业务线B端产品体验设计和组件库的搭建工作。
本文原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Unsplash,基于 CC0 协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
","gnid":"9602fc95165305fda","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t0132211102f39f829c.jpg","width":"900"},{"desc":"","height":"556","title":"","url":"https://p0.ssl.img.360kuai.com/t019c759f36ccc70928.jpg","width":"1080"},{"desc":"","height":"442","title":"","url":"https://p0.ssl.img.360kuai.com/t010dac1224a4af947a.jpg","width":"1080"},{"desc":"","height":"429","title":"","url":"https://p0.ssl.img.360kuai.com/t013723d79c1949a581.jpg","width":"1080"},{"desc":"","height":"397","title":"","url":"https://p0.ssl.img.360kuai.com/t01f81e92005eb1c303.jpg","width":"1080"},{"desc":"","height":"520","title":"","url":"https://p0.ssl.img.360kuai.com/t01f2fdc16765386db8.jpg","width":"1080"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1686897060000,"pure":"","rawurl":"http://zm.news.so.com/e09a9e39bb01baf76e2a1dc06e3d1192","redirect":0,"rptid":"fe7d46e957297f9c","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"组件详解|弹窗、抽屉、折叠面板,用法有什么区别?
蒯轰些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.那么,只有通过削薄墙体来实现.为了你钟爱的一万多元的书柜而在墙体上下功夫是值得的...