iOS12界面设计指南之视图(Views)–浮层(Popovers)

引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》

 

浮层通常是当用户点击屏幕上某个内容的控制点或区域时在其上方出现的瞬态视图。通常,一个浮层包括一个指向其所出现的位置。浮层分为模态和非模态。一个非模态浮层主要通过点击屏幕上其它非浮层区域进行返回。模态浮层则是通过点击浮层中的取消或其它按钮进行返回。

浮层比较适合出现在大屏幕中,其可以包含各种元素,包括导航栏、工具栏、标签栏、表、收藏,图片,地图,和自定义视图等。当浮层是可见状态时,其它视图中的交互行为便会被禁止。使用浮层所显示的内容要与当前页面中的内容关联。例如许多iPad应用程序,当你点击分享按钮时便会弹出一个分享浮层。

避免在iPhone中使用浮层(Avoid displaying popovers on iPhones. )一般来说,浮出层应该在iPad应用程序中使用。在iPhone的应用程序,一般会利用当前屏幕中所有可用的空间以一个全屏模态视图来呈现信息,而不是在一个浮层中。有关指导,请参见模态。

使用关闭按钮进行确认和指导(Use a Close button for confirmation and guidance only. )一个关闭按钮,如取消或完成,如果其意义都是明确的,即使其即可能包含保持也可能不包含保存但都值得被保留。在一般情况下,当其没有在存在的必要时浮层应该被自动关闭。在大多数情况下,浮层应该在用户点击关闭或浮层外的其它区域时进行关闭。如果可以有多个选择,浮层应该保持打开状态直到有人有意识的对其进行关闭。

总是在浮层自动关闭时进行当前任务的保存(Always save work when automatically closing a nonmodal popover. )通过点击屏幕中非浮层区域去关闭一个非模态浮层是很容易的。仅在用户明确的点击取消时才取消当前工作的保存。

浮层应该显示在适当的位置上(Position popovers appropriately onscreen. )一个浮层的箭头应指向尽可能直接触发它的元素。因为浮层不能在屏幕上拖动,浮层不能覆盖屏幕上太多的内容,因为用户在使用浮层的同时可能也需要看到这些内容。浮层同样也不能覆盖弹出它的相关内容。

一次只显示一个浮层(Show one popover at a time. )显示多个浮层会引起界面的混乱。永远不要显示一个有层级关系的浮层或一个浮层继承于另一个。如果你需要显示另一个浮层,那么首先关闭当前所显示的浮层。

不要在一个浮层之上再去显示另一个浮层(Don’t show another view over a popover.)除了警告,任何其他组件均不应该显示在一个浮层之上。

如果可能的话,让用户在一次点击中同时关闭一个浮层且打开另一个浮层(When possible, let users close one popover and open another with a single tap. )避免额外的点击尤其是需要在多个不同的项目栏中进行浮层的打开时。

避免浮层太大(Avoid making a popover too big.)浮层不应该接管整个屏幕,所以它的大小只需足够显示其内容且指向其来自的地方即可。要知道,系统会调整浮层的大小以确保它适合屏幕。

确保自定义的浮层与系统提供的浮层类似(Make sure custom popovers look like popovers.)尽管浮层是可以被自定义的,但也应该尽量避免自定义一个看起来不太像浮层的浮层。因为浮层通常会在比较接近系统浮层的时候才能发挥其最大作用。

当需要改变浮层的尺寸时尽量提供一个平滑的过渡方案(Provide a smooth transition when changing the size of a popover. )有些浮层对于同样的信息展示提供了简明以及详细的两种展示方式。所以如果你需要进行浮层大小的调整时,平滑的动效变化会避免使用户产生新的浮层代替旧的浮层的意识。