「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡 - 优设网 - UISDC

「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡

2017/09/04 13977评论区

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

往期回顾:

  1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
  2. 《「这个控件叫什么」系列之加载占位图+页面指示器》
  3. 《「这个控件叫什么」系列之步进器+SWITCH》
  4. 《「这个控件叫什么」系列之TOAST》
  5. 《「这个控件叫什么」系列之虚拟键盘/软键盘/SOFT KEYBOARD》
  6. 《「这个控件叫什么」系列之动作菜单/动作面板》

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

△  Popover

如何使用

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

快捷导航

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

△  Popover作为快捷导航

情境下的相关选项

如果界面中有多个条目,而且每个条目都有多个相关选项,使用Popover承载多个情境下的相关选项是个不错的方案。在手机上,相比于Action Sheet,Popover的三角箭头能明确的指示当前操作的是哪个条目,不易出错。Popover显示区域较小呈现的选项有限,为了防止误操作不建议在Popover里启用滚动,如果选项很多,建议使用Action Sheet。

需要注意的是,在屏幕边缘需要转换Popover的方向,例如在屏幕顶部,Popover应当显示在触发位置的下方,否则Popover会超出屏幕导致显示不完整。

△  Popover作为情境下的相关选项

提示引导

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

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

临时视图

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

△  iPad上的Popover

相关资料

iOS规范对Popover用途的限定

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

Android平台类似Popover的控件

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

△  Contextual menus(情境菜单)

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

△  Overflow menu(溢出菜单)

Popover和Tooltips

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

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

Popover和Word balloons的区别

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

欢迎关注作者的微信公众号:

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ui-element-popover

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 职场 版式设计 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里