Apple Vision Pro 的设计跟所有 2D 平台都不同——多了 眼睛、手势、深度、真实空间 四个维度。核心矛盾贯穿全篇:沉浸 vs 舒适(防晕)、虚拟 vs 现实(融合)。动态效果大量是视频(本地 .mov),本 wiki 把原理讲透。
一、眼动输入 Eyes(最独特的交互)
用户注视虚拟对象 = 把它识别为可交互目标,系统显悬停效果确认。隐私铁律:轻点前系统不告诉 App 用户在看哪里(所以你无法监听 hover 事件,只能定义"正常态"和"被注视态"两个状态让系统自动切换,且不能直接触发功能)。
· 舒适:内容放正前方视野中心(颈部左右转比上下易,大画布选宽不选高);交互和内容尽量同深度(眼一次只能聚焦一个距离,频繁改焦距致疲劳——所以弹窗是父窗后退变暗而非浮在上层,跟手机相反)。 · 易聚焦:用圆形/胶囊/圆角矩形(尖角让眼看向外、降中心精度);扁平化(粗描边阴影引眼看边缘);留足内边距居中。 · 响应:动态缩放(窗口远了变大、近了变小,与"近大远小"相反,保持目标区一致);所有交互元素要高亮态,效果细微通用(眼动快)。 · 意图:长时间注视=感兴趣→展示更多信息(工具名/按钮说明/注视麦克风触发语音搜索);聚焦也助无障碍(凝视选中免手点)。 · Look to Scroll 视线滚动:注视边缘自动滚动;适合阅读/浏览(Safari/TV),不适合设置(快速扫找选项易误触);默认不启用需主动开;滚动区铺满窗口宽/高。
二、悬停交互 Hover(3 种类型)
所有悬停动画从可见元素开始(别空白处冒东西);提供锚定元素(标题别动当参照);避免意外动态(Safari 标签关闭按钮:看标签时半透明淡入、看按钮本身才全显,否则误点关闭)。效果小巧克制(高频区如工具栏用系统默认高亮)。
| 类型 | 行为 | 用途 |
|---|---|---|
| 立即 Instant | 一看动画立刻播 | 按钮显箭头/进度条显时间戳 |
| 延迟 Delayed | 持续注视一段才播 | 工具提示(快速点不显、持续看才出) |
| 渐变 Ramp | 小提示+自定义曲线逐步展开(ease-in 慢启动→spring 弹性完成) | 环境图标"再看一下就展开";卡片渐展开 |
持久控件:延时自动隐藏的 UI(视频播放控件/FaceTime 挂断/冥想暂停),只要还在注视就不消失,视线移回内容才隐藏(系统视频控件自带,无需写代码)。
三、手势 Gestures + 触觉
· 系统手势(玩家已会、无需额外设备、任何空间可用):单击(注视+双指点)、双击、捏合拖动(直接/间接操作)、捏合保持(激活+移动控方向力度)、双手(放大缩小旋转)。可组合(同时选移调旋卫星)。 · 眼+手组合:开始用手时放大起点=当时眼睛聚焦点;看画布另一边轻点光标就跳过去(精准覆盖大画布)。 · 直接 vs 间接触控:直接触控适合①需近距细看/手移组装②模仿真实动作(肌肉记忆)③核心是身体活动;否则优先间接手势(不用把手伸进视野,省力)。 · 触觉缺失补偿:visionOS 无触觉反馈,用视听补——按钮凸起、悬停高亮、接近变亮的接近提示、接触瞬间快速状态变化+空间音效,给"触感、可靠感、满意感"。
四、舒适度科学 Comfort(防晕的硬约束)
运动科学:自我运动感知 = 视觉系统 + 前庭系统(内耳管平衡)共同作用。当视觉运动与前庭信息冲突→晕(头晕/恶心)。
· 运动:大物体覆盖大部分视野移动时,大脑会以为"自己在动"→用半透明减冲突;避免头锁内容(必须用则小窗、放视线中心、远离);优先世界锁定;摄像机移动慢且可预测、地平线对齐、避免快速转弯/纯旋转(用快速淡出+瞬时方向变);避免约 0.2Hz(每 5 秒一次)振荡(必须用则低幅+半透明);避免大物体近距快速掠过。 · 深度:深度线索(透视/阴影/颜色/大小/模糊/运动)要一致,冲突会致不适(相对大小 vs 遮挡矛盾);重复图案防重影(两眼锁不同物体)→用小图案或打破图案。 · 视觉参数:长时间阅读内容放超过一臂距离最舒适、视线中心稍偏下;近处只留给短暂或直接交互;暗场景渐进过渡到亮(给眼适应);眼睛向下/左右转最舒服;长时使用给休息点。
五、空间 UI 与布局
· 尺寸:交互元素 ≥60pt 点击区(=2.5° 视角,1 米处约 4.4cm);按钮周围 ≥8pt 空白满足 60pt;堆叠按钮间距 ≥16pt;迷你 28pt 按钮靠 60pt 空间也好点;同心公式:嵌套元素圆角 + 边距 = 外容器圆角。 · 人体工程学:UI 保持视野内别太高太低;窗口可移动/关闭/调大小,移动时始终面向用户;大画布选宽高比不选高度。 · 窗口按内容定:Safari 高(看更多网页)、Keynote 宽(全尺寸演示);多窗口并排(幻灯片+演示者);控件与内容分开(导航栏与网页分开)。 · 挂件 Ornaments:浮动附件,visionOS 在窗口底部稍前;无边框按钮(玻璃容器);与底部重叠 20pt 融合;可展开有自己导航层级。 · 菜单/弹框/Sheet:可扩展到窗口外、默认居中(出现在注视处);模态与父窗同 Z 轴、父窗后退变暗;选中态用白底黑标(免箭头);关闭+返回按钮都在左上角。 · 材质:玻璃材质无明暗模式(随环境光自动渲染);深材质分隔区块(侧边栏)、浅材质强调交互(按钮)、暗材质增对比(输入框);别堆叠浅材质(降可读);文字默认白色、提粗字重+字间距增对比(正文 visionOS 中粗、标题粗体);vibrancy 让前景实时更新保可读。 · 图标:三维逼真,≤3 层(背景+2 前景),1024px 正方形前景透明背景,系统加玻璃层+高光+阴影圆形蒙版。
六、沉浸光谱 Immersion Spectrum
graph LR
A["共享空间<br/>Shared Space<br/>多 App 并存"] --> B["调暗 Dim<br/>突出主内容<br/>(Keynote 放幻灯片)"]
B --> C["全空间 Full Space<br/>独占,带你到新地方<br/>(Keynote 剧院排练)"]
C --> D["完全沉浸<br/>360° 自定义环境<br/>替代透视"]
· 可动态过渡(按用户位置平滑切换);调暗是最简单的聚焦手段(不离当前页);全空间需更多空间;融合现实("hello"在桌上投阴影)。 · 基本技巧:引导注意力(运动+空间音频+色彩,Mindfulness 花朵);柔和边缘融现实;细微动画"栩栩如生"(水波/云);少即是多(影院地板天花板微光反射就够);平滑可预测过渡保舒适。 · 构建真实感/空间感:找"只能在空间体验的关键时刻"专注做;用光影阴影增深度(近处小元素比远处大对象重要、发光物投反光);文本保持平面(3D 文本难读分散注意);比例传达强调(小物个人化、大物震撼,购物 App 用实际比例)。
七、空间小组件 Widgets(visionOS 独有"距离感知")
小组件变成 3D 对象,贴墙/放桌(永久驻留该房间、锁定位置、桌面微倾+阴影);只能依附物理表面(不能附虚拟环境);始终在虚拟内容后方。固定物理尺寸(墙上桌上看着"理所当然属于那空间",可调 75%-125% 用高清素材)。
| 风格 | 特性 | 用途 |
|---|---|---|
| Paper | 类纸张印刷,随环境光变亮暗、融入空间 | 音乐海报(像墙上的画) |
| Glass | 前景全彩不受光影响、多层结构、信息密度高 | 新闻(图像像杂志封面、标题始终清晰) |
· 镶嵌:Elevated 浮起(挂画感,强调存在,垂直水平都行)/ Recessed 凹入(墙被挖开的沉浸感,仅垂直面);14 种系统配色,边框 5 档粗细。 · 距离感知 Proximity awareness(最独特):远 = Simplified 态(只显队名分数)、近 = Default 态(完整内容);像"空间版响应式设计"。
八、SharePlay 共享空间(多人同步)
· 窗口模式(可同时用其他 App,窗口标"共享/非共享"可拖放)vs 全空间模式(更沉浸但限多任务)。 · 全空间 3 子模式:并排 Side-by-Side(像电影院,同角度看同内容,适合看片)/ 环绕 Surround(像围会议桌,各自角度看中心,适合讨论协作)/ 对话 Conversational(围着 App 聊天,内容是背景,适合社交)。 · 共享上下文+空间音频(声音位置对所有人一致);个人设置(音量/字幕)不影响他人;可个人窗口+主视图同步。
九、叙事互动 + 空间核心策略
· 叙事互动(Encounter Dinosaurs):清晰指示是必须的;初始互动定基调(蝴蝶引导停在手上);空间角色用眼神接触+接近+手互动(恐龙 Izzy 闻手可抚摸);空间音频赋予生命。 · 空间音频:模拟现实声音传播(传感器识别房间大小材质+混响);随机化避免单调(青蛙声调音量+推远+随机时间);前景+背景分层。 · 空间核心策略:找应用的关键时刻(只在 visionOS 可能,Mindfulness 脉动花朵);不断原型迭代(Loona "做很多原型找最佳体验");构建互补体验(Lowe's vision 沉浸式厨房设计 + iPad 商品购买=完整旅程);最小化物理运动(Fruit Ninja 不用走动);无限画布但保界面连贯;视觉舒适(玻璃材质+悬停反馈)。
源自 VisonOS VR(17 篇)。空间动态效果在原档 .mov 视频(本地 Obsidian 查看)。眼动/手势输入也见 Apple HIG 输入源 Inputs(13 种 · 触控/手势/键盘/指针/Pencil/表冠/眼动/遥控器/手柄);沉浸式体验/空间布局基础见 Apple HIG 视觉基础 Foundations(颜色/字体/布局/材质/动效/暗黑/图标/SF Symbols/品牌)。