1. 设计核心概念-定义空间与交互基础

1.1 MR主页Home

http://www.woshipm.com/ucd/2025872.html
三维空间下的交互设计
交互体验流程的重要节点：
主页Home——>应用界面——>主页Home（手腕唤醒）
https://docs.microsoft.com/en-us/windows/mixed-reality/discover/navigating-the-windows-mixed-reality-home

• 开始菜单
  
  包括：系统信息、语音助手、app磁贴、“+”所有应用、相机与摄影。

  1.2 应用视图

  1）深度视图-深度关系分ABP层

  阶段性过渡ABP试图模式，今后进入MR状态后依然可以唤醒该模式
  0-3Dof适用
  

  2）空间2D视图-支持多应用共存

  https://docs.microsoft.com/en-us/windows/mixed-reality/design/app-model
  https://docs.microsoft.com/en-us/windows/mixed-reality/design/app-views
  每个app以放置模式（placement），打开形式为2D窗口或者3D模型 （后续统一称为“磁贴”）
  将app磁贴放置完成后，启动
  删除app磁贴，关闭/终止
  启动其他app磁贴，上一个app暂停
  支持后台任务（音频等）
  3Dof-6Dof适用
  
  

• 每一个视图都可以调整大小，保持长宽比。

• 调整过程中不会更改应用的分辨率
• 应用程序无法查询它们在世界上的实际大小
• 放置多个应用和目录，应用会保持在空间位置上，即使重启设备。
• 系统键盘想要接受文本输入的应用程序需要切换到带有文本框的 2D 视图。当该文本框获得焦点时，系统将显示系统键盘，允许用户输入文本。

3）空间3D沉浸视图-单一MR应用进行

6Dof适用

4）2D与3D混合视图（在3D沉浸式视图中嵌套2D）

6Dof适用

3D环境墙纸——动态墙纸越来越像个应用
+2D 应用多窗口展开
app内部调取设备内资料的问题

1.3 交互舒适感-人体工程参数

https://docs.microsoft.com/en-us/windows/mixed-reality/design/comfort

1）眼部视觉与眼动

• 最佳视觉内容放置范围为 1.25m到5m范围内
• 建议不要在 40 cm 以下显示全息图。因此，我们建议在 40 厘米处开始淡出内容，并在 30 厘米处放置渲染剪切平面以避免任何更近的物体。
• 直接交互需要直接上手操作的内容放置在1m以内
• 眼动追踪，视线在实际目标周围的视角范围内大约在 1.5 度以内（见下图）。由于预计会有轻微的不精确，开发人员应该计划围绕这个下限值留出一些余量（例如，2.0-3.0 度可能会带来更舒适的体验）

2）头部运动

对于大型物体或多个物体的混合现实体验，考虑与内容交互需要多少头部和颈部运动是至关重要的。根据头部运动，体验可分为三类：

• 水平头部运动（左右）-更适合频繁互动
• 垂直头部运动（上下）-保留用于不常见的事件，限制使用
• 沉浸式头部运动（水平和垂直）
  
  （内容的最佳区域是地平线以下 0 度到 35 度）

3）身体运动

• 手臂要求用户长时间重复做出隔空敲击手势也可能会让人感到疲倦。可以通过结合短暂的休息或提供手势和语音输入的混合来与应用程序交互来实现。
• 始终让用户控制他们的动作；意外的自主运动是有问题的
• 人类对重力方向很敏感。因此，尤其应避免非用户发起的垂直运动。

1.4 空间坐标系-用户与应用定位

https://docs.microsoft.com/en-us/windows/mixed-reality/design/coordinate-systems

• X、Y 和 Z 轴，所有 3D 图形应用程序都使用笛卡尔坐标系来推理虚拟对象的位置和方向。
• 与现实世界的比例关系：空间坐标系以米为单位表示其坐标值。
• 固定坐标系，世界/走动尺度的体验。定义世界原点，是根据世界保持用户附近物体的位置尽可能稳定，具备世界锁定的内容，同时考虑用户头部位置的变化。用户四处移动时改变应用程序对其全息图的视图（2.5D）
  
• 房间坐标系，房间/站立尺度的体验，5m为边界的stage中活动，单一固定的坐标系。
• 方向参考系：忽略头部位置更新，始终保持固定在选定的方向和与用户的距离。主要示例是 360 度视频
• 5m限制：相对距离较远，虚拟物件会随着时间有漂移
• 避免头部锁定的内容，尽量不要让内容停留在眼镜的固定位置（类似HUD），让用户无法顺利感受自然的MR交互体验。建议将头部锁定内容转化为防止在世界的全息图中

1.5 环境扫描与理解

1）环境扫描

• 用户扫描反馈循环，告知用户哪些空间区域被扫描过。（提示死角、和墙面的距离、平整度等）
• 扫描确定用户附近有多少体积的空间可以成为体验的一部分
• 支持某些应用的连续空间扫描过程

• 支持将空间扫描结果缓存使用

  2）环境理解

• Watertight网格数据推断房间空间结构

• 判断可以放置的Quads平面区域
• 通过计算Watertight和Quads推断对齐的空间映射
• 将识别的空间明确判定区分 平面Platform，墙Wall，地面Floor

常见的空间映射使用场景：放置、遮挡、物理和导航

1.6 空间音频

• 基于HRTF。于人体头部、躯干和耳朵形状（耳廓）的物理模型和测量值。我们的大脑对这些差异做出反应，以提供感知到的声音方向。
• 鼓励音频制作者将HRTF技术运用

2. 交互模型-本能互动

2.1 手

1. 手直接操作
   模态应用手的力量，用户可以用它来触摸和操纵全息图。

1. 手指射线
   使用户能够在远处与全息图进行交互
   

2.2 控制器

手部和运动控制器之间的核心交互是Select、Menu、Grasp、Touchpad、Thumbstick和Home。

• 光学追踪
• 扳机
• 抓取按钮
• 拇指棒
• 触摸板

  2.3 语音输入

  2.4 眼动注视

1. 功能
   1）辅助计算机理解用户意图，辅助其他输入等
   3）智能通知，根据用户当前注视的位置，偏移通知来改善对于用户的打扰
   4）远程注视可视化，将远程用户正在查看的内容可视化，辅助协助者提供帮助信息
   5）收集用户信息，用作用户研究
   6）增加远程培训和工作绩效的监管和信息收集
   7）设计评估、营销会让消费者研究
   8）游戏
   9）更灵动的Avatar，avatar眼睛和人眼动一致
2. 交互模式
   1）提供本能响应：基于注视的自动滚动、缩放和平移
   2）根据注视增强虚拟物体的UI反馈，例如被注视时虚拟物体会做出微妙反应，略微发光的UI元素，回头看用户的虚拟狗，提供交互上的流畅连通性。
   3）文本输入
   - 眼动追踪：目标选择
   - 眼动追踪：导航
   假设你要在平板上阅读信息，当你到达显示的文本的末尾时，文本会自动向上滚动以显示更多内容。 或者，你可以在查看的位置流畅地缩放。 此地图还会自动调整内容，以在视图字段中保留感兴趣的内容。 另一个有趣的应用程序是通过自动将您正在查看的全息图部分自动引入到前面，可以无需人工地观察3D 全息。 下面是在支持目视导航的上下文中在此页上描述的一些示例。
   - 眼动追踪：热图
   https://docs.microsoft.com/zh-cn/windows/mixed-reality/mrtk-unity/features/input/eye-tracking/eye-tracking-target-selection?view=mrtkunity-2021-05

2.5 运动交互

• 物件跟随 Billboarding。虚拟物件总是面向用户，一般是菜单和文本，当用户四处走动时，放置在用户环境（世界锁定）中的静态对象将被遮挡或不可读。跟随对象试图停留在允许用户舒适交互的范围内。
  

• 表面吸附 Surface magnetism。将对象的方向与现实世界的表面对齐，您可以为用户创造更加身临其境的自然体验。

  3. UX元素

  3.1 元件属性

  1）颜色 Color

  
  

• 深色背景。不建议使用大面积明亮的色彩，容易导致：
  - 眼睛疲劳
  - 在界面上看不清手
  - 某些显示硬件会产生斑点

• 粗体文字。使用半粗体或粗体字，比较细的字体，轻或半轻，因为垂直笔划可能会在小字体中抖动。
• 颜色补偿。背板颜色在预定义的范围内微妙地变化，在不影响内容可读性的情况下创造出引人入胜的动态视觉效果。这种微妙的颜色变化还可以补偿任何轻微的颜色不规则性。

• 半透明背景。由于全息对象与物理环境混合，透明或半透明窗口上的内容或 UI 易读性可能会降低。此外，当透明的全息对象相互叠加时，由于令人困惑的深度，可能会使用户难以进行交互。

  
  

  2）光 Light

• 
  

3）材质 Material

• Shader着色器

• 
  

  4）尺度 Scale

  5）文本设计 Typography

  6）声音 Sound

3.2 元件规则

锚点规则

层的规则

点击规则

滚动规则

https://docs.microsoft.com/zh-cn/windows/mixed-reality/mrtk-unity/features/ux-building-blocks/scrolling-object-collection?view=mrtkunity-2021-05

3）边界框

4）多物件排布

对齐方式

3.3 组件

1）锚点和射线

2）按钮按键

3） 应用控制台

4）弹窗

手势引导 Hand Coach

当系统未检测到用户的手时，Hand Coach 会触发 3D 建模手。此功能是一个“教学”组件，可在尚未教授手势时帮助指导用户。如果用户在一段时间内没有完成指定的手势，手部将延迟循环。

文本弹窗

5）播放器

6）键盘

7）标注 Tooltip

8）面板 Slate

9）滑块 Slider

10）对话框 Dialogue

11） Loading和进度条

3.4 UI资源库

参考资料：Google Material Designhttps://google.github.io/material-design-icons/
https://material.io/design/iconography/system-icons.html
参考资料：Apple App Icon https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

Apple System Icon
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/

Apple sf-symbols design
https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

抬高 iOS 设计「地板」的图标字体：SF Symbols
https://sspai.com/post/56209
不过，SF Symbols 的最大亮点并不在于提供了一套丰富的图标，而在于它的实现方式——直接把图标整合进了 iOS 和 macOS 的系统字体 San Francisco。苹果在宣传是也着重强调了 SF Symbol 的「文字」特性。用它自己的话来说，「SF Symbols 引入了一套完整的、基于矢量的图标库，你可以凭借其与周围文本的自动对齐和对多字重、多尺寸的支持，将其整合到自己的应用中，从而简化用户界面的布局。」

为您的 App 创建自定符号图像
https://developer.apple.com/cn/documentation/xcode/creating_custom_symbol_images_for_your_app/

SF Symbols: The benefits and how to use them guide
https://www.avanderlee.com/swift/sf-symbols-guide/

App Icon

System Icon