小气泡图片高清图片
都是交互反馈和提示组件，大家可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 的区别是什么，两者之间的应用场景如何？本文对两者的差异进行总结，希望对你有所帮助。
同样都是交互反馈及提示组件，你可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 有什么区别？分别有哪些特定的使用场景？
本文就来详细分析下这两个组件的区别和联系，帮助你做好应用。
一、气泡卡片 Popover
气泡卡片（Popover）是当用户点击 / 鼠标移入元素时，就会弹出气泡式的卡片浮层。当对于某个元素有更多的解释性描述和相关操作时，这些内容可以收纳到元素的气泡卡片中，根据用户的操作行为进行展现。
其用法特征是：
1. 用户可以在浮层卡片上进行相关操作，也即气泡卡片可以并需要承载更复杂的内容和交互功能。
2. 卡片中可以包括的内容有：文字说明，图片内容，操作按钮，相关链接等等。
3. 组件功能侧重于：承载信息和操作。即收纳并在需要的时候展示与该元素内容相关的信息和操作。这些信息的特征通常是：
- 并不紧急但比较重要的解释内容；
- 有一部分的用户需要随时阅读的内容；
- 在点击关键操作后给用户确认“是否继续进行”的提示（Ant Design 也单独把这个功能拿出来做成做了一个组件：Popconfirm 气泡确认框，如下图）。
二、文字气泡 Tooltips
文字气泡（Tooltips）是相对简单的文字提示气泡框。用户使用鼠标移入元素后显示提示，移出后提示消失。
其用法特征是：
1. 文字气泡通常不承载复杂的信息和操作，仅提供一段文案解释，也即用户在文字气泡中不能做除阅读外的其它操作。
2. 该组件功能侧重于：解释说明。即对局部内容或元素进行文字性的解释说明。通常来说该气泡是对其载体本身的解释，比如：
- 一个特殊的功能按钮；
- 专有名词、难懂词汇；
- 看不出具体目的地的操作链接
- 特殊的 icon 等。
三、使用建议
1. 关于使用场景- 气泡卡片 Popover：常用于承载信息和操作。承载的内容和形式更为多样。
- 文字气泡 Tooltips：常用于解释说明。仅承载简单的文案信息。
有同学看过 Ant Design 组件库提供的组件样例，会觉得气泡卡片 Popover 是白色背景，而文字气泡 Tooltips 是半透明黑色背景。
其实这两个组件的背景颜色上的差异并不是重点，因为这两个组件都可以使用其他颜色（比如带有透明度的品牌色）做背景底色。颜色并不具备唯一标准。AntD 就提供了多种颜色的文字气泡样式：
3. 关于理解规范也许你已经发现，即使我们将一个组件的使用规范和应用场景解释得再全面，在使用时也总会出现一些特殊的业务需求和应用场景无法严格按照规范来执行。
面对复杂多样的业务需求，我们更应该学会：在理解业务需求的基础上，合理调整组件的使用方式和样式。
组件的规范对设计师来说并不应该是限制或约束，而是一种能够帮助我们快速实现产品设计一致性，保证基础体验的快速方式。
专栏作家
元尧，微信公众号：长弓小子，人人都是产品经理专栏作家。一线互联网大厂B端体验设计师，清华大学美术学院本硕连读。曾负责国内最大开源组件库Ant Design组件的设计和运营工作，目前负责国际业务线B端产品体验设计和组件库的搭建工作。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
","gnid":"9c0685bf1be595d89","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t0149182d71945c805d.jpg","width":"900"},{"desc":"","height":"394","title":"","url":"https://p0.ssl.img.360kuai.com/t01df3be064e27d088d.jpg","width":"1062"},{"desc":"","height":"306","title":"","url":"https://p0.ssl.img.360kuai.com/t01825b8e3aa23366ca.jpg","width":"1080"},{"desc":"","height":"442","title":"","url":"https://p0.ssl.img.360kuai.com/t0173ce12dfa4b9305e.jpg","width":"738"},{"desc":"","height":"336","title":"","url":"https://p0.ssl.img.360kuai.com/t01286ab3b1e4e6dedb.jpg","width":"1080"},{"desc":"","height":"202","title":"","url":"https://p0.ssl.img.360kuai.com/t016eed5e16d701c9c7.jpg","width":"1080"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1687835940000,"pure":"","rawurl":"http://zm.news.so.com/882d14182c68f24aa6d01f815cce68fc","redirect":0,"rptid":"55d12e2e27f07f41","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"组件详解｜气泡卡片Popover 和 文字气泡Tooltips，用法有什么区别？
宫毛蕊1999壁纸起翘怎么办? -
谈卞郑15984226738 ______ 武汉在线装修网提醒您应注意以下几个方面: 先了解造成壁纸翘边的原因,主要是由于墙壁基础处理不当或裱糊中失误造成.翘边的原因是基础处理不干净、选择胶粘剂粘度差等所致,而不同材质的壁纸应选用与之配套的胶粘剂,壁纸应裹过阳...
宫毛蕊1999壁纸该怎么贴?
谈卞郑15984226738 ______ 粘贴新壁纸粘贴壁纸所需工具:胶刷、平刷、塑胶刮板、滚轮 1、将壁纸胶慢慢加水稀释. 2、调至适当的浓度. 3、用胶刷将粘剂均匀涂在壁纸上以后,以S型对折置放10分钟. 4、粘贴壁纸时留心是否对到花纹. 5、再用平刷刷平,注意在张...
宫毛蕊1999家用小气泡是啥东东?我今天在网上瞥见了一眼,有使用过的吗?好用吗? -
谈卞郑15984226738 ______ 您好,小气泡采用的是比较温和的物理手法来清洁面部,一般没有危害.超微小气泡是纳米级的水气泡,通过真空负压形成真空回路,将超微小气泡和营养液充分结合,通过特殊设计的小螺旋形吸头直接作用于皮肤.在安全没有疼痛的状态下,能深层洁面,祛除老化角质细胞,祛除皮脂黑头,清除毛囊漏斗部的各种杂质,螨虫及油脂残留物,同时可使毛囊漏斗部充满营养物质,为皮肤提供持久的营养,使皮肤湿润、细腻有光泽.适合油性肌肤和痘痘肌肤,以及黑头粉刺、毛孔粗大的爱美人士.相比化学去角质,超微小气泡物理去除老化细胞更加温和.缺点是效果不长久,需要多次治疗.
宫毛蕊1999壁纸张贴方法 -
谈卞郑15984226738 ______ 一、 壁纸的一般张贴方法 所用工具及材料有:胶水、毛刷、毛巾、海棉、砂纸、裁刀、刮板、卷尺、盛胶容器等. (一)张贴的基本程序为: 1. 墙面处理:用刮板和将墙面杂质,浮土刮除,凹洞裂缝用石膏粉铺好磨平,如墙面质地松软或有粉...
宫毛蕊1999韩国的小气泡和水氧活肤哪个好一点? -
谈卞郑15984226738 ______ 肯定是小气泡在很多妹纸都会入手家用的小气泡,就像林允在小红书上推荐的维莉小气泡,只有水壶那么大,用着方便.肌肤的问题向来比较多,维莉小气泡是深层清洁和补水,那些黑头什么的,还有角质死皮,都吸出来了.
宫毛蕊1999墙纸翘边怎么办? -
谈卞郑15984226738 ______ 1,施工问题,这个环节主要是出在工人刷胶不均上.现在的施工市场,售后都是由施工工人自己去解决的,所以很多工人在施工时都是可以避免刷胶不匀的. 2,墙纸胶的问题.胶的粘结力够,使用寿命不长.粘结力不够,时间长了自然就翘...
宫毛蕊1999韩国进口氢氧小气泡的工作原理是什么 -
谈卞郑15984226738 ______ 氢氧小气泡的工作原理及功能效果 在繁忙的日常生活中,可以方便迅速的管理皮肤. 皮肤一旦处于缺水的状态,就会加快肌肤老化的过程,长此以往,会导致皱纹、斑点等严重后果.通过zui先进的水分剥离技术,在探头轻柔将皮肤表层老化和...
宫毛蕊1999新帖壁纸起泡明显 专家教你怎样完美解决 -
谈卞郑15984226738 ______ 新贴壁纸频频起泡 专家教你一招解决问题 一、接缝明显 冬季空气干燥,墙体吸水速度快,壁纸施工张贴的过程中会使胶水蒸发过快,最终导致接缝明显的问题.小贴士:针对空气干燥,蒸发过快的问题,可在调制基膜的时候将基膜浓度提高(...
宫毛蕊1999qq气泡随心便签的底色是什么颜色 在哪里可以找到这种颜色的高清图片 -
谈卞郑15984226738 ______ 颜色代码为#00FFFF,00为红色浓度0,第一个ff是绿色浓度255,第二个是ff是蓝色浓度255. 生成的颜色为天蓝色,在百多图片搜天蓝色就行了
宫毛蕊1999如何将小气泡的功能发挥到极致? -
谈卞郑15984226738 ______ 超微小气泡可达到效果 深层清洁营养供给紧致提升 祛除老化角质细 祛除螨虫及油脂残留物 祛除黑头及毛囊各种杂质 超微小气泡探头及溶液搭配说明:探头分为两种 一号探头:大号螺旋形吸头,用于操作整个面部. 二号探头:小号螺旋形...