气泡- Popover
定义:
popover实现轻量下拉菜单,用于快捷操作,兼具Quick Actions的能力。
当你触击一个控件或一个区域时,出现在屏幕其它内容之上的临时性视图。通常,气泡式弹窗包含一个箭头指向出现的位置。气泡式弹窗可以使非模态或者模态。
上图:light模式-使用右侧单色图标
规则:
1、非模态的气泡式弹窗在点击屏幕的其他区域或者弹窗上的按钮时关闭。
2、模态的气泡式弹窗在点击去取消或者页面上的其它按钮时关闭。
3、弹出框的背景使用了略微降低的不透明度并模糊了下面的内容,就像自 iOS 7 以来许多其他 UI 元素所做的那样。
4、弹出框很有用。一个很好的例子是:添加一个项目,它有一些属性需要在创建项目之前设置。
上图:dark模式-使用左侧彩色图标
上图:light模式-使用左侧彩色图标
上图:dark模式-选择列表
上图:巨型气泡示例
属性栏或预制样式中的样式配置:
圆角 | |
---|---|
背景 | |
是否有引导箭头 | |
文字颜色 | |
图标位置 |
tips:
气泡式弹窗最适合在大屏幕上使用,并且可以包含多样化的元素。包括导航栏、工具栏、标签栏、表格、集合、图片、地图和自定义视图。当出现气泡式弹窗时,其它视图的交互元素不可用直到气泡式弹窗被关闭。使用气泡式弹窗来展示与当前屏幕内容相关联的选项或信息。例如在许多iPad APP中,当你触击行动按钮时通过气泡式弹窗来展示分享选项。
理论上来说,避免在iPhone上使用气泡式弹窗。但是目前在iphone复杂的交互中,Popover已经被泛华应用。
一般而言,气泡式弹窗仅供iPad APP使用。在iPhone APP中,通过全屏的模态视图而不是气泡式弹窗来展示信息,以此利用所有可用的屏幕空间。