VISUAL LANGUAGE / DESIGN GUIDE

空间叠层

Dimensional Layering

通过大小、遮挡、投影和轻微透视表达前后关系。层次应对应信息优先级与交互关系,而不是在所有组件上叠更多阴影。

空间叠层设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

通过大小、遮挡、投影和轻微透视表达前后关系。层次应对应信息优先级与交互关系,而不是在所有组件上叠更多阴影。

适用场景

功能展示、卡片堆栈、需要解释覆盖关系的工具。

不适用与取舍

多层弹窗、要求完全并列比较的数据,以及窄屏上无法保留空间关系的堆叠。

实现方法

建立有限 z-index 层级和统一阴影尺度;装饰透视不改变文字可读性。被遮挡内容不能包含必须操作的控件,弹层明确关闭与焦点回归。

具体界面示例

文件预览把当前文档置前,后方仅露出无交互缩略边缘;切换通过按钮完成,键盘同样可达。

常见误区

遮挡真实输入或让层级依赖随机 z-index 会导致点击困难;阴影方向混乱会破坏空间感。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。