用控件做引导提示哪家强?Popovers当仁不让!
2019-07-01 本文已影响1人
foolishmanner
一、什么是Popovers

Popovers正是我们熟称的“气泡”,该控件特属于iOS的系统规范,可用于信息提示(Android的Tooltips控件与之类似),也可用于操作支持。
Popovers控件在提示场景的干扰程度可轻可重(稍后会在模态运用中讲述为什么),通常用于提供与操作/界面元素相关的选项或引导,这也正奠定了其在原生提示控件中的特殊地位,在诸多提示控件中,只有Popover最适合对指定界面元素进行引导提示。
那么,我们一起来看看Popovers的一些特性和玩法吧~
二、Popovers的常见样式
1.1 纯文本样式
注意控制文案字数显示。

1.2 可操作样式
支持与Menus等控件组合。

1.3 自定义引导样式
通常用于提示和引导。

三、模态/非模态
如左下图所示,非模态气泡与内容保持在同一层级,用户可同时对内容和浮窗进行操作;
如右下图所示,模态气泡层级高于内容,背景深色显示遮罩,用户仅能对气泡内容进行操作。

四、显示与消失
显示
气泡从对应操作/引导点以放大动画形式显示,非模态气泡显示时不会打断用户操作,模态气泡显示时会显示深色遮罩以打断用户操作。
消失
气泡以缩小动画形式消失。
非模态气泡在以下情况下会消失:
用户触发气泡相关的对应操作(自定义)。
模态气泡在以下情况下会消失:
用户触发气泡相关的对应操作(自定义);
持续一段时长后自动消失(自定义);
用户点击气泡外的区域;
用户点击Android系统返回键。
五、Popovers的几点不要
1.不要将Popover与相关的触发/引导元素放置过远;
2.不要同时显示多个Popovers;
3.除了Dialogs,不要将其它元素显示在Popover上方;
4.不要在Popover内展示过多或过长的信息,若确实需要,请考虑使用Sheets控件。
范例
微信:操作气泡

闲鱼:新手引导气泡
