这个控件叫:Popover/气泡弹出框/弹出式气泡/气泡

作者:龙爪槐守望者

原文地址:zhuanlan.zhihu.com/p/29026281

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

Popover(气泡弹出框/弹出式气泡/气泡)是由一个矩形和三角箭头组成的弹出窗口,箭头指向的地方通常是导致 Popover 弹出的控件或区域。通过点击 Popover 内的按钮或非 Popover 的屏幕其他区域可关闭 Popover。


如何使用

点击某控件或区域弹出 Popover 后,Popover 出现在使其触发的控件附近,箭头的指向很好的表达了 Popover 和触发控件的潜在关系,用户的注意力能马上被吸引过来。而且把手指或鼠标指针从触发控件移动到 Popover 的距离很近,操作非常顺手、效率高。
Popover 常见用法有以下几种:

  • 快捷导航
    移动设备屏幕空间有限,有时不能把很多低频但非常重要的功能直接呈现在屏幕上。将多个快捷功能入口收纳到Popover中,通过“更多”、“加号”图标触发Popover,是国内主流App常见的做法。

v2-3e87f3a80a212ac8e4c75b8723093319_r.jpg

Popover 作为快捷导航

  • 情境下的相关选项
    如果界面中有多个条目,而且每个条目都有多个相关选项,使用 Popover 承载多个情境下的相关选项是个不错的方案。在手机上,相比于 Action Sheet,Popover 的三角箭头能明确的指示当前操作的是哪个条目,不易出错。Popover 显示区域较小呈现的选项有限,为了防止误操作不建议在 Popover 里启用滚动,如果选项很多,建议使用 Action Sheet。
    需要注意的是,在屏幕边缘需要转换 Popover 的方向,例如在屏幕顶部,Popover 应当显示在触发位置的下方,否则 Popover 会超出屏幕导致显示不完整。

v2-fc358c6eeba1b10a9c733aeb9d991139_r.jpg

Popover 作为情境下的相关选项

  • 提示引导
    Popover 的三角箭头这一独特特性,同样适合作为提示引导或者展示附属信息。每当上线新功能,用 Popover 能很好的吸引用户注意力,引导用户了解新功能。界面图形较多的情况下,用 Popover 简短的展示附属文字信息,能帮助用户很好的理解图形的含义。

v2-b2a844b61f2b91f89e7d7bd92ffcb5cd_r.jpg

Popover 作为提示引导、展示附属信息

  • 临时视图
    在 iPad 等大屏幕设备上,Popover 可作为完成某个任务的临时视图。此时 Popover 就像是一个大容器,可将导航栏、标签页(Tabs)、输入框、表格或者工具栏等等包含其中。建议实时保存 Popover 中的状态,以防因误点非 Popover 的其他区域关闭 Popover,导致 Popover 中的修改结果前功尽弃。

v2-a452dd8e781f1deba76bf482310407ce_r.jpg

iPad 上的 Popover


相关资料

  • iOS 规范对 Popover 用途的限定
    iOS 的规范中限定 Popover 只能作为临时视图在 iPad 中使用,不能用在 iPhone 上。(详见 developer.apple.com/ios/human-interface-guidelines/ui-views/popovers/ )实际上,早在移动互联网诞生之前,Popover 作为快捷导航或者提示引导就在 PC 和 Web 里被广泛运用。只要把握好 Popover 的特性,跨平台使用 Popover 并没有什么问题。

  • Android 平台类似 Popover 的控件
    Material design 中 Contextual menus(情境菜单,详见 material.io/guidelines/components/menus.html#menus-usage)和 Popover 用法类似,除了没有三角箭头指示触发区域外,另一个不同是 Contextual menus 会根据 App 的当前状态,来动态调整菜单选项的数量,例如文本选择,文本编辑类 App 有全选、剪贴、复制和粘贴三个选项,但是在网页选中文本只有复制一个选项,因为此时不能剪贴和粘贴。

v2-1084cd96721814b00410d98f6006bb2c_r.jpg

Contextual menus(情境菜单)

在 App bar 点击“更多”图标展开的菜单被称为 Overflow menu(溢出菜单),App bar 图标太多放不下,其他图标从 App bar “溢出”到“更多”里去了,是个比较形象的命名。

v2-e42433f4d9be03d80fa3b22b67d1dc16_r.jpg

Overflow menu(溢出菜单)

  • Popover 和 Tooltips
    Tooltips(工具提示/文字提示)是鼠标 hover(悬停)或者触摸长按(Material design 规范有,但在移动端 Tooltips 不常见)在某元素上,出现的对此元素的附加解释。有时 Tooltips 样式是一个矩形,有时候是一个 Popover。Popover 是从样式上命名的控件,Tooltips 是根据其用途命名的控件,两者不冲突。

v2-0836394bce85022d3eaa161ff28f150b_hd.jpg

Tooltips(工具提示/文字提示)

  • Popover 和 Word balloons 的区别
    Word balloons(Speech balloons/speech bubbles/dialogue balloons/文字气泡/对话气泡/聊天气泡)是漫画或者聊天 App 中表示人物说话内容的图形,其三角箭头指向说话的人物。Word balloons 通常是界面内的图形元素,而 Popover 是浮于界面上方的弹出窗口。两者样式相似,但是界面层级和用途有所区别。

v2-fcf5cff89736fe4c4c655c2c678b0939_hd.jpg

Word balloons(文字气泡)


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 39 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与我们的工作坊、分享会等各种线下活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们