等距三维视觉与业务插图设计

解决什么问题

产品页、功能示意图和数据信息图经常陷入同一种尴尬：纯扁平插画显得太平，真实 3D 渲染又太重，风格也很难统一。等距投影（isometric projection）恰好处在中间地带——看起来像微缩模型，却只依赖一组固定角度，完全不需要处理透视收敛。这个技能就是一套可复用的视觉规范，说明什么场景该用它、用的时候要守哪些规则。

它如何工作

核心原则只有三条：没有消失点，平行线永不交汇；视角固定为精确的 30 度；元素呈现为积木式的区块与叠层，也就是经典的「模拟城市」视角。

视觉层面，色彩走 Warm Tech 或 Earth-Grounded Elegance 路线，偏写实、略微压低饱和度，因为等距图本质上像物理模型。文字要么完全贴屏幕平面，要么严格贴合顶、左、右三个等距面。阴影必须是硬边长投影，角度固定为 -45 或 45 度。

各端的落地方式：

• Web：rotateX(60deg) 配合 rotateZ(-45deg)，纯 CSS transform 就能拼出等距网格。
• SwiftUI：先用 .rotationEffect 转 -45 度，再用 .rotation3DEffect 转 60 度；沿 Z 轴堆叠视图即可得到高耸的区块。
• Flutter：用 Matrix4 施加 rotateX 与 rotateZ，阴影设 0 blurRadius，并严格沿网格轴偏移。
• React Native：transform 数组按顺序先 rotateX 再 rotateZ，配合 shadowRadius: 0 的硬阴影。
• Jetpack Compose：用 Modifier.graphicsLayer 设置 rotationX 与 rotationZ；要真正的硬投影，用 Modifier.drawBehind 手绘偏移矩形，避开 elevation 模糊。

适用边界

它适合信息图、功能示意图和首屏 hero 区，不适合把整个功能性 UI 都做成等距投影——交互成本太高。此外它是一套样式参考，不替代环境验证、无障碍测试或专家评审，对比度与响应式行为需要另行确认。