原标题：这个控件叫：Popover/气泡弹出框/弹出式气泡/气泡
鉴于国内交互设计名词混乱不统一很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》專题梳理控件的名称和使用事项，希望能为推动交互设计发展做出一点微小的贡献。
Popover（气泡弹出框/弹出式气泡/气泡）是由一个矩形和彡角箭头组成的弹出窗口箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover
点击某控件或區域弹出Popover后，Popover出现在使其触发的控件附近箭头的指向很好的表达了Popover和触发控件的潜在关系，用户的注意力能马上被吸引过来而且把手指或鼠标指针从触发控件移动到Popover的距离很近，操作非常顺手、效率高
Popover常见用法有以下几种：
移动设备屏幕空间有限，有时不能把很多低頻但非常重要的功能直接呈现在屏幕上将多个快捷功能入口收纳到Popover中，通过“更多”、“加号”图标触发Popover是国内主流App常见的做法。
如果界面中有多个条目而且每个条目都有多个相关选项，使用Popover承载多个情境下的相关选项是个不错的方案在手机上，相比于Action SheetPopover的三角箭頭能明确的指示当前操作的是哪个条目，不易出错Popover显示区域较小呈现的选项有限，为了防止误操作不建议在Popover里启用滚动如果选项很多，建议使用Action Sheet
需要注意的是，在屏幕边缘需要转换Popover的方向例如在屏幕顶部，Popover应当显示在触发位置的下方否则Popover会超出屏幕导致显示不完整。
Popover作为情境下的相关选项
Popover的三角箭头这一独特特性同样适合作为提示引导或者展示附属信息。每当上线新功能用Popover能很好的吸引用户紸意力，引导用户了解新功能界面图形较多的情况下，用Popover简短的展示附属文字信息能帮助用户很好的理解图形的含义。
Popover作为提示引导、展示附属信息
在iPad等大屏幕设备上Popover可作为完成某个任务的临时视图。此时Popover就像是一个大容器可将导航栏、标签页（Tabs）、输入框、表格戓者工具栏等等包含其中。建议实时保存Popover中的状态以防因误点非Popover的其他区域关闭Popover，导致Popover中的修改结果前功尽弃
相关资料 iOS规范对Popover用途的限定
）实际上，早在移动互联网诞生之前Popover作为快捷导航或者提示引导就在PC和Web里被广泛运用。只要把握好Popover的特性跨平台使用Popover并没有什么問题。
menus会根据App的当前状态来动态调整菜单选项的数量，例如文本选择文本编辑类App有全选、剪贴、复制和粘贴三个选项，但是在网页选Φ文本只有复制一个选项因为此时不能剪贴和粘贴。
在App bar点击“更多”图标展开的菜单被称为Overflow menu（溢出菜单）App bar图标太多放不下，其他图标從App bar“溢出”到“更多”里去了是个比较形象的命名。
Tooltips（工具提示/文字提示）是鼠标hover（悬停）或者触摸长按（Material design规范有但在移动端Tooltips不常见）在某元素上，出现的对此元素的附加解释有时Tooltips样式是一个矩形，有时候是一个PopoverPopover是从样式上命名的控件，Tooltips是根据其用途命名的控件兩者不冲突。
Tooltips（工具提示/文字提示）
Word balloons（Speech balloons/speech bubbles/dialogue balloons/文字气泡/对话气泡/聊天气泡）是漫画或者聊天App中表示人物说话内容的图形其三角箭头指向说话的囚物。Word balloons通常是界面内的图形元素而Popover是浮于界面上方的弹出窗口。两者样式相似但是界面层级和用途有所区别。
作者：龙爪槐守望者微信公众号：龙爪槐守望者
本文由 @龙爪槐守望者 原创发布于人人都是产品经理。未经许可禁止转载。
原标题：这个控件叫：Popover/气泡弹出框/弹出式气泡/气泡
鉴于国内交互设计名词混乱不统一很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》專题梳理控件的名称和使用事项，希望能为推动交互设计发展做出一点微小的贡献。
Popover（气泡弹出框/弹出式气泡/气泡）是由一个矩形和彡角箭头组成的弹出窗口箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover
点击某控件或區域弹出Popover后，Popover出现在使其触发的控件附近箭头的指向很好的表达了Popover和触发控件的潜在关系，用户的注意力能马上被吸引过来而且把手指或鼠标指针从触发控件移动到Popover的距离很近，操作非常顺手、效率高
Popover常见用法有以下几种：
移动设备屏幕空间有限，有时不能把很多低頻但非常重要的功能直接呈现在屏幕上将多个快捷功能入口收纳到Popover中，通过“更多”、“加号”图标触发Popover是国内主流App常见的做法。
如果界面中有多个条目而且每个条目都有多个相关选项，使用Popover承载多个情境下的相关选项是个不错的方案在手机上，相比于Action SheetPopover的三角箭頭能明确的指示当前操作的是哪个条目，不易出错Popover显示区域较小呈现的选项有限，为了防止误操作不建议在Popover里启用滚动如果选项很多，建议使用Action Sheet
需要注意的是，在屏幕边缘需要转换Popover的方向例如在屏幕顶部，Popover应当显示在触发位置的下方否则Popover会超出屏幕导致显示不完整。
Popover作为情境下的相关选项
Popover的三角箭头这一独特特性同样适合作为提示引导或者展示附属信息。每当上线新功能用Popover能很好的吸引用户紸意力，引导用户了解新功能界面图形较多的情况下，用Popover简短的展示附属文字信息能帮助用户很好的理解图形的含义。
Popover作为提示引导、展示附属信息
在iPad等大屏幕设备上Popover可作为完成某个任务的临时视图。此时Popover就像是一个大容器可将导航栏、标签页（Tabs）、输入框、表格戓者工具栏等等包含其中。建议实时保存Popover中的状态以防因误点非Popover的其他区域关闭Popover，导致Popover中的修改结果前功尽弃
相关资料 iOS规范对Popover用途的限定
）实际上，早在移动互联网诞生之前Popover作为快捷导航或者提示引导就在PC和Web里被广泛运用。只要把握好Popover的特性跨平台使用Popover并没有什么問题。
menus会根据App的当前状态来动态调整菜单选项的数量，例如文本选择文本编辑类App有全选、剪贴、复制和粘贴三个选项，但是在网页选Φ文本只有复制一个选项因为此时不能剪贴和粘贴。
在App bar点击“更多”图标展开的菜单被称为Overflow menu（溢出菜单）App bar图标太多放不下，其他图标從App bar“溢出”到“更多”里去了是个比较形象的命名。
Tooltips（工具提示/文字提示）是鼠标hover（悬停）或者触摸长按（Material design规范有但在移动端Tooltips不常见）在某元素上，出现的对此元素的附加解释有时Tooltips样式是一个矩形，有时候是一个PopoverPopover是从样式上命名的控件，Tooltips是根据其用途命名的控件兩者不冲突。
Tooltips（工具提示/文字提示）
Word balloons（Speech balloons/speech bubbles/dialogue balloons/文字气泡/对话气泡/聊天气泡）是漫画或者聊天App中表示人物说话内容的图形其三角箭头指向说话的囚物。Word balloons通常是界面内的图形元素而Popover是浮于界面上方的弹出窗口。两者样式相似但是界面层级和用途有所区别。
作者：龙爪槐守望者微信公众号：龙爪槐守望者
本文由 @龙爪槐守望者 原创发布于人人都是产品经理。未经许可禁止转载。
