# Apple Human Interface Guidelines Spatial Layout

> visionOS空间布局设计规范，包含视野、深度、缩放。Invoke when designing spatial layout for visionOS app.

- Skill: `opn48/apple-human-interface-guidelines-spatial-layout` (Agent Skill)
- Install (CLI): `npx skillmds@latest add opn48/apple-human-interface-guidelines-spatial-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/opn48/apple-human-interface-guidelines-spatial-layout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: OPN48 (https://skillmd.com/u/opn48)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/opn48/apple-human-interface-guidelines-spatial-layout

---


# iOS Spatial Layout - 空间布局设计指南

基于 Apple Human Interface Guidelines 的空间布局设计规范（主要针对 visionOS）。

## 核心概念

### 视野 (Field of View)

- 头部不动时可见的空间
- 因 Light Seal 配置和周边视力而异
- 重要内容保持在视野中心

### 不要锚定在头部

- 让用户自由环顾
- 避免让用户感到被困住

---

## 深度 (Depth)

### 视觉线索

- 距离、遮挡、阴影
- 系统自动应用效果

### 3D 内容

- 使用 RealityKit
- Volume 显示 3D 内容

### 设计要点

- 准确的深度线索避免不适
- 用深度展示层级
- 避免文字深度

---

## 缩放 (Scale)

### 动态缩放

- 内容无论距离保持可读可交互
- 窗口远离放大，靠近缩小

### 固定缩放

- 物体无论距离保持相同大小
- 适合展示物理产品

---

## Z轴层级

### 布局原则

- 近处物体更大、更吸引人
- 远处物体更小、不突出

### 内容排列

- 重要内容放靠近用户
- 考虑场景构成

---

## 窗口布局

### 窗口尺寸

- Small：快速交互（设置、通知）
- Medium：大多数应用功能
- Large：沉浸式丰富内容

### 标题栏

- 显示窗口标题和可选控件
- 提供上下文

---

## 定位

### 避免难以触及的区域

- 眼睛水平或以下最舒适
- 过高过低导致颈部疲劳

### 距离与交互

- 远距离物体不太可能被交互
- 近距离物体更可能被交互

### 元素间距

- 避免太近难以准确选择
- 足够的呼吸空间

---

## 悬停效果

### 视觉反馈

- 用户注视时显示
- 轻微但明显
- 不遮挡内容

### 一致性

- 整个应用保持一致
- 帮助用户建立预期

---

## 安全区域

- 重要内容远离窗口边缘
- 边缘交互困难
- 内容保持在中心

---

## Android 适配

注：空间布局主要针对 visionOS，Android 无直接对应。

### 3D 能力

- 使用 OpenGL ES 或 Vulkan
- ARCore 用于 AR 体验

### Z轴层级

- Android 使用 Elevation 实现深度
- Material Design 支持阴影

```xml
<!-- Elevation -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="4dp" />
```

### Compose 3D

```kotlin
// Jetpack Compose 3D 变换
Modifier.graphicsLayer {
    rotationX = 15f
    rotationY = 15f
    scaleX = 1f
    scaleY = 1f
}
```

### ARCore

```kotlin
// ARCore 应用
val session = ArCoreApk.getInstance().requestSession(this, ...)
```