Popover 弹出框
视频及原型文件下载:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定义:
是由一个矩形和三角箭头组成的弹出窗口,箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover。
交互原则:
1、不要用Tooltip来获取任务完成的关键信息;
2、在Tooltip中提供简短有用的内容;
3、支持鼠标和键盘悬停显示;
4、如果附近有多个元素,使用工具提示箭头;
5、用则始终用,保持一致性并为所有视觉元素都提供Tooltip很重要;
6、确保工具提示和背景形成适度的对比;
7、定位工具提示,以免挡住相关内容
交互说明:
1、【文案】:说明提示的文案内容,例如:相机,鼠标悬浮显示文案:点击调取系统相机
2、【触发条件】:显示的触发条件,鼠标悬停或点击,也可以键盘悬停显示,例如:鼠标和键盘悬停显示Popover 弹出框;
3、【触发后的流程】:需要说明触发Popover 弹出框,后续有哪些流程,例如:
用户点击【删除】按钮后,显示商品删除确认提示框,当客户点击【确定】按钮后删除该商品,点击取消按钮时,关闭Popover 弹出框,取消删除操作;
4、【显示位置】:说明Popover 弹出框提示的位置,例如:当前窗口居中显示;
3、【显示位置】:说明Popover 弹出框文字提示的位置,例如:显示在当前按钮的右上方,如果是按钮在右侧不满足显示位置,则显示在左上方;
使用场景:
1、快捷导航:移动设备屏幕空间有限,有时不能把很多低频但非常重要的功能直接呈现在屏幕上。将多个快捷功能入口收纳到Popover中,通过“更多”、“加号”图标触发Popover,是国内主流App常见的做法。
2、情境下的相关选项:如果界面中有多个条目,而且每个条目都有多个相关选项,使用Popover承载多个情境下的相关选项是个不错的方案。
3、提示引导:Popover的三角箭头这一独特特性,同样适合作为提示引导或者展示附属信息。每当上线新功能,用Popover能很好的吸引用户注意力,引导用户了解新功能。界面图形较多的情况下,用Popover简短的展示附属文字信息,能帮助用户很好的理解图形的含义。
4、临时视图:在iPad等大屏幕设备上,Popover可作为完成某个任务的临时视图。