CHAPTER 01 / WRITINGFIELD NOTE 48
不使用重型场景,如何给网页增加空间感
用克制的透视、Z 轴分层和指针反馈建立深度,同时为触屏和减少动态效果模式保留安静的版本。
向下阅读
网页的空间感不一定需要完整的 WebGL 场景。很多时候,几个明确的层次和一致的运动方向就已经足够。
深度来自相对运动
当容器随指针轻微倾斜,而标题、图形和光泽分别处于不同的 Z 轴位置时,大脑会自然理解这些元素之间的距离。关键不是让角度更大,而是让每一层的运动关系足够稳定。
只动画合成属性
高频指针反馈只修改 transform,并通过可复用的 tween 更新目标值。避免连续修改宽高或位置,可以减少布局与绘制压力。
动效必须有静态版本
触屏没有 hover,部分用户也会主动选择减少动态效果。关闭倾斜后,卡片的排版、对比度和交互状态仍然必须完整——动效应该是增强,而不是理解页面的前提。