浮出层作为一种临时视图,会在用户点击控件或特定区域时触发,高于其他页面层级。通常,浮出层包括指向它出现位置的箭头。它可以是非模态(罗列信息)或是模态(进行信息操作)。非模态浮层通过点击屏幕的另一部分或浮层按钮来关闭;模态浮层通过点击取消或其他按钮即可解除浮层。
浮出层在大屏设备上最合适,可以包含各种元素,包括导航栏、工具栏、制表符栏、集合视图、表格、图像、地图和自定义视图。当一个浮层可见时,其他视图交互通常被禁用,直到浮层关闭。使用弹窗显示与屏幕内容相关的选项或信息。例如,当用户点击按钮操作时,许多 iPad 应用会显示一个共享选项。
避免在 iPhone 显示浮层
一般来说,浮出层应该保留在 iPad 应用中使用。在 iPhone 应用中,在全屏模式视图中呈现信息,而不是在浮层中,利用所有可用的屏幕空间。
包含关闭按钮
应包含关闭按钮,例如 取消、完成。可以是另一种形式,例如退出或不保存更改。一般来说,浮层应在不需要时自动关闭。在大多数情况下,当用户点击其边界之外或选择一个在浮层中的项目时,浮层应该关闭。如果可以进行多项选择,则浮层应保持打开状态,直到用户明确将其关闭。
防止误关非模态弹出窗口
轻按屏幕的另一部分就会无意中关闭非模态浮层,只有当用户点击取消按钮时才放弃次次操作。
指向触发位置
浮层箭头应该尽可能直接指向触发它的元素,由于浮层不能移动,不应该遮挡可能需要看到的基本内容,当然也不应该覆盖触发它元素。
一次显示一个浮层
不要显示一个级联或层次结构,例如其中一个从另一个弹出,显示多个浮层会导致混乱。如果需要一个新的浮层,请先关闭打开的那个。
请勿在浮层上再展示一个模态视图
除了弹窗,浮层中应当有任何模态视图。
关闭现有的,才能打开新的
当多个不同的按钮会触发不同浮层时,避免额外的注释很重要。
避免浮层太大
浮层不应占用整个屏幕,只显示足够大的内容并指向触发元素。要注意,系统可能会调整浮层的大小以确保它适合屏幕。
确保自定义浮层有浮层样子
虽然可以定制浮层样式,但要避免用户可能无法识别为浮层的设计。当内容包含标准控件和视图时,浮层往往最有效。
更改浮层大小时平滑过渡
一些浮层提供了相同信息下的视图缩放,如果用户需要调整浮层大小,请使用动效平滑过渡,以避免给用户一种新浮层替换旧浮层的印象。