# 设计规范

![](/files/4d41304745e3587d98338061e27f02fd2cf556dd)

| <p><strong>本文档规范主要用于X系列光波导眼镜系列</strong> </p><p>X2眼镜可UI素材： <a href="https://www.figma.com/design/UtFNqU3paQ5DlWLnHV8mkO/%E5%BC%80%E5%8F%91%E8%80%85%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-%E8%AF%95%E7%94%A8%E7%89%88?node-id=0-1&#x26;p=f">点击前往figma</a><br>X3pro 眼镜UI素材：即将推出 </p><p>文档更新时间：2025年9月12日</p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

## **1. 概览**

### **1.1 手册目的**

* 本规范用于指导AR应用在X系列眼镜上的设计与开发。
* 帮助开发者理解AR设备与手机设备的本质差异。

### **1.2 适用机型与平台**

当前文档适用于X系列等光波导一体机眼镜 [设备介绍](broken://spaces/GXszFdkrLPWnwXeroI7l)

| **模块** | **内容**  | **X2**         | **X3 Pro**                           | **建议**        |
| ------ | ------- | -------------- | ------------------------------------ | ------------- |
| **显示** | 分辨率     | 640\*480       | 640\*480                             | 画布尺寸保持不变      |
| FoV    | 对角线 25° | 对角线 30°        | 同一画布，在 X3 Pro 上的显示效果相比于 X2 放大了 1.2 倍 |               |
| **交互** | 触控板     | 双向（前后）         | 四向（上下前后）                             | 走焦规则适配双向或四向交互 |
| 按键     | 无快捷键    | 新增快捷键（可唤起快捷功能） | 三方应用不支持修改快捷功能。                       |               |
| 语音助手   | 不支持大模型  | 支持大模型          | 可基于 X3 Pro 开发 agent 应用               |               |
| 配件     | 戒指      | 手表             | 可适配配件交互                              |               |

### **1.3 【导读】模块介绍**

<table><thead><tr><th width="198">模块</th><th>说明</th></tr></thead><tbody><tr><td>AR 理解与开发原则</td><td>解析 AR 眼镜与传统手机在 UI 设计、交互方式的差异，提供核心开发设计原则</td></tr><tr><td>显示设计规范</td><td>介绍 AR 应用的自由度模式、UI 显示区域划分及显示距离与空间层级设置</td></tr><tr><td>交互设计规范</td><td>明确镜腿按键、戒指、手表手势等核心交互方式的操作逻辑与功能映射</td></tr><tr><td>视觉设计规范</td><td>制定颜色、字体、线条、图标、3D 素材等视觉元素的设计标准与要求</td></tr><tr><td>UI 控件组件规范</td><td>规定 Toast、弹窗、底部导航栏等常用 UI 控件的使用场景与设计规则</td></tr><tr><td>如何设计好一个应用</td><td>以翻译（0 DoF）、导航（3 DoF）应用为例，提供具象化的应用设计参考</td></tr><tr><td>功耗优化与性能建议</td><td>从 UI 层设计与资源管理角度，给出降低功耗、提升应用性能的具体建议</td></tr></tbody></table>

## **2. AR理解与开发原则**

### **2.1 UI设计的差异**

AR眼镜的UI设计强调空间叠加和低信息密度以适应真实环境，而传统手机则侧重高分辨率的二维平面布局和高信息密度浏览。

| 维度   | AR 眼镜                 | 传统手机            |
| ---- | --------------------- | --------------- |
| 透明背景 | 叠加在真实世界上              | 固定在黑色/白色/图片等背景上 |
| 分辨率  | 相对有限，受光学模组与算力约束       | 高分辨率屏幕，清晰度高     |
| 双屏显示 | 双眼立体显示，有视差与深度感        | 单屏平面显示          |
| UI布局 | 空间化、需适配有限FoV，避免遮挡真实场景 | 二维平面布局，自由度高     |
| 信息密度 | 须低密度、简化，减少视觉负担        | 可承载高密度信息，滚动浏览   |
| 视觉层级 | UI需考虑与真实物体的前后关系、半透明叠加 | 全部在屏幕内部，统一的显示层级 |

### 2.2 **交互方式的差异**

AR 将信息直接叠加在用户所处空间中，强调“视野内即所得”的沉浸式操作，而传统手机则依赖二维屏幕、触控为主的窗口式操作。

| 维度   | AR 眼镜                 | 传统手机               |
| ---- | --------------------- | ------------------ |
| 交互方式 | 镜腿触控板、语音交互、戒指交互、手环交互  | 触控交互、物理按键、语音交互     |
| 交互姿势 | 自然平视                  | 双手或单手握持，低头看屏幕      |
| 空间维度 | 三维，有深度感               | 二维平面               |
| 输入界面 | 悬浮在视野中的虚拟界面           | 实体触摸屏              |
| 反馈方式 | 视觉叠加动效、空间音频、触觉（手表，可选） | 屏幕视觉和动效、振动、音频      |
| 沉浸感  | 虚拟内容与真实环境叠加           | 内容与真实世界分离，注意力集中于屏幕 |

### 2.3 **开发设计原则**

| 维度            | 说明                                                          | 建议                                                                                         |
| ------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| **🌟步骤引导明确**  | 鉴于当前 AR 眼镜的操作方式仍不够成熟，用户缺乏熟练度，因此每一个操作步骤或功能触发都应伴随清晰的提示或反馈信息。  | <ul><li>引导式提示，如“单击确认｜双击取消”。</li><li>状态变更后的及时反馈，如“已开启” / “已完成”。</li></ul>                   |
| **🌟 信息密度可控** | AR 眼镜普遍 FoV 有限，用户的视野承载信息能力较弱，复杂图文易造成遮挡与认知负担，简单的文字提示更易识别与理解。 | <ul><li>关键提示以短句式文字为主。</li><li>减少背景装饰、冗余视觉图形。</li><li>合理控制内容密度。</li></ul>                   |
| **🌟 避免遮挡视野** | 长时间全屏覆盖虚拟内容可能干扰用户对现实环境的感知，尤其在走动或动态场景下存在安全隐患。                | <ul><li>采用局部信息卡片，非沉浸式覆盖。</li><li>定时淡出或主动消隐。</li><li>设置“环境保留区”，避免遮挡关键现实区域（如道路中央）。</li></ul> |
| **🌟 遵循合目距离** | 为避免视觉疲劳与辐辏-调节冲突，建议虚拟内容的显示距离控制在 1.7 米以上。                     | <ul><li>非关键内容可进一步远置或淡化。</li><li>特殊场景需近距离显示时，采用轻量级视觉表达，控制使用使用时长。</li></ul>                  |

## **3. 显示设计规范**

### **3.1 自由度模式（DOF）**

| <p><strong>0 DOF（推荐）</strong></p><ul><li><strong>说明</strong><br>AR 眼镜不跟踪用户头部的任何运动，虚拟信息固定显示在佩戴者眼前，跟随佩戴者的移动而移动。</li><li><strong>适用场景</strong><br>目前 X 系列眼镜的系统级应用，均采用 0 DoF 模式。</li><li><strong>交互限制</strong><br>用户不能通过转头或移动来改变视角，虚拟信息始终保持在固定位置上。</li><li><strong>适合交互</strong><br>触控板或按键交互、语音交互。</li></ul> | <p></p><p><img src="/files/BWzVPwEU4gEx0jidH0Iq" alt="" data-size="original"></p><p>0Dof 效果演示<br></p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |

| <p><strong>3 DOF</strong></p><ul><li><strong>说明</strong><br>AR 眼镜跟踪用户头部在 x 轴、y 轴和 z 轴的旋转，但不跟踪位置平移。</li><li><strong>适用场景</strong><br>360° 全景视频或全景图片浏览。</li><li><strong>交互限制</strong><br>用户只能通过“转头”来移动视角，无法“走进”虚拟内容。虚拟内容与真实环境中物体的遮挡与碰撞感弱。</li><li><strong>适合交互</strong><br>触控板或按键交互、语音交互、固定深度的手势交互。</li></ul> | <p></p><p><img src="/files/oOwOlaGy8YhrLG7pCZq2" alt="" data-size="original"></p><p>3Dof 效果演示<br></p> |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |

| <p><strong>6 DOF</strong></p><ul><li><strong>说明</strong><br>AR 眼镜可以同时跟踪用户头部在 x 轴、y 轴、z 轴的旋转和位置平移，用户在三维空间内自由移动。</li><li><strong>适用场景</strong><br>虚拟物体摆放与实时交互，如家具预览、工业装配、虚拟导航。</li><li><strong>交互限制</strong><br>需要摄像头和 SLAM 算法支持，避免坐标产生漂移；虚拟物体与真实环境产生交互时，需要考虑遮挡、光照和空间位置关系等问题。</li><li><strong>适合交互</strong><br>有空间深度的手势交互、6 DoF 控制器、眼动交互等。</li></ul> | <p><img src="/files/e5G16K1pZGEaT6b2Fs35" alt="" data-size="original"></p><p>6Dof 效果演示<br></p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

### **3.2 UI显示区域划分**

因近眼显示及双目异显等特点，0DOF场景下，UI内容的显示区域可参考以下建议，以X2为例

![](/files/94aaee621f7f8d80ff8e0b6b8ff277ad3155893d)

| ![](/files/474fb80e72f24ee9a56b4a758c6001793c7d61ff) | **预留边界** 屏幕四周应当预留空白区域。在 5m 景深处，四周各预留 16px 边界，距离拉近时，预留边界应当适当增大；距离拉远时，预留边界可适当缩小。 |
| ---------------------------------------------------- | ------------------------------------------------------------------------------ |

| ![](/files/a6c328ce03721acefb1c78300e00662bb0127cf8) | **信息提示区域** 优先级较低、不需要用户当下立即处理的提示信息，可以显示在屏幕的顶部。此类信息显示 2～3s 后消失。 |
| ---------------------------------------------------- | ------------------------------------------------------------- |

| ![](/files/e19e6159608b246bf881f9f9de06ac4f81f9354d) | **主界面区域** 应用的主界面，显示在屏幕 的中间区域。 |
| ---------------------------------------------------- | ----------------------------- |

| ![](/files/2cab7e00fbbdc3c6546f96403264d58f09718e39) | **导航栏区域** 导航栏类型的信息，显示在屏幕 的底部。 |
| ---------------------------------------------------- | ----------------------------- |

| ![](/files/bfad4cdf078248c31891746fdcb0bb8c29aa3300) | **媒体控制区域** 用户通过左镜腿控制媒体播放，因此与之相关的信息显示在 屏幕 的左侧，以建立操作与界面反馈之间的映射关系。此类信息包括音量调节，音乐的播放控制等。 |
| ---------------------------------------------------- | ----------------------------------------------------------------------------------- |

### **3.3 显示距离与空间层级**

不同自由度对应的场景及策略不同

#### **3.3.1 0 DoF场景**

**基本特征**

* 用户头部固定或自由移动时系统无法感知方向，仅通过画面偏移来模拟深度。
* 所有内容始终跟随头部视角移动，无空间参考锚点。

**显示距离与策略**

* 主要信息层：视觉中心，距离建议 2～5m，避免过近导致视觉疲劳。
* 辅助信息层：显示在主要信息层背后。
* 深度模拟方式：通过信息偏移、模糊、缩放等视觉手法营造“远近感”。

#### 3.3.2 **3 DoF场景**

**基本特征**

能感知用户头部旋转，但无法感知位置变化。

**显示距离与策略**

| 空间层级       | 显示距离 | 内容类型           | 设计要点           |
| ---------- | ---- | -------------- | -------------- |
| 上焦层、焦点内容   | 1.8米 | 焦点信息、主要交互区     | 保证信息在自然视线中可见   |
| 主操作层/辅助信息层 | 2米   | 内容层级、状态提示、次要按钮 | 与焦点内容层级进行明显区别  |
| 背景层        | 2.2米 | 情境提示、背景元素      | 降低密度，不作为主要互动区域 |

**开发常见问题与对应设计建议**

| 维度           | 问题                       | 建议                                                                           |
| ------------ | ------------------------ | ---------------------------------------------------------------------------- |
| **缺少回正机制**   | 用户转头后，信息失焦，难以快速回到主交互视图。  | <ul><li>主操作内容随时间 / 状态自动回到正前方（如 3 秒无操作重置视图）。</li><li>支持快捷键触发“回正视图”。</li></ul> |
| **内容范围过大**   | 信息分布过广，用户需频繁转头，造成疲劳与遗漏。  | <ul><li>核心信息聚焦在 ±15° 视野范围内</li><li>多内容采用分页 / 滑动 / tab 切换，避免“全域铺开”。</li></ul> |
| **重点提示易被忽略** | 提示信息出现后，用户转头即错过。         | <ul><li>关键提示固定在用户眼前显示。</li><li>辅以声音提醒。</li></ul>                             |
| **操作分散难聚焦**  | 多个按钮在不同方向，难以控制注视聚焦或手势选中。 | <ul><li>将关键操作统一放置在视野中心附近。</li><li>设置“半聚焦”机制，靠近焦点时自动高亮并接受操作。</li></ul>        |

## **4. 交互设计规范**

### **4.1 镜腿和按键触控交互**

在 X 系列眼镜中，支持通过左、右侧镜腿上的触控区域进行系统交互。

相比于 X2 眼镜，X3 Pro 眼镜的双侧触控板支持上、下、前、后四个方向滑动；

且在右侧镜腿上方新增了快捷按键，用户可以单击或长按快捷键来快速唤起“录音”等应用。

| <p><img src="/files/52309748ffdb6fd4dd2c30aa1c4a891d0e7b10f2" alt=""> X3 Pro<br></p> | <p><img src="/files/a16e82e56df23ceeb6f66f49c992f25d8729a559" alt=""> X2<br></p> |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |

以下是 X3 Pro 和 X2 系列眼镜的触控手势，三方应用的交互方式应当遵循系统级规范，以保证体验的一致性。

| **触控区域** | **操作** | **X3 Pro** | **X2**    |
| -------- | ------ | ---------- | --------- |
| 右镜腿触控区域  | 单击     | 选中 / 确认    | 选中 / 确认   |
| 右镜腿触控区域  | 双击     | 返回 / 退出    | 返回 / 退出   |
| 右镜腿触控区域  | 长按     | 打开快控中心     | 唤出主界面     |
| 右镜腿触控区域  | 前滑     | 下一个        | 上一个       |
| 右镜腿触控区域  | 后滑     | 上一个        | 下一个       |
| 右镜腿触控区域  | 上滑     | 上一个        | —         |
| 右镜腿触控区域  | 下滑     | 下一个        | —         |
| 右镜腿触控区域  | 息屏前滑   | —          | 快速拍照      |
| 右镜腿触控区域  | 息屏后滑   | —          | 启动翻译      |
| 左镜腿触控区域  | 单击     | —          | 播放 / 暂停音乐 |
| 左镜腿触控区域  | 双击     | 播放 / 暂停音乐  | 播放下一首     |
| 左镜腿触控区域  | 三击     | —          | 播放上一首     |
| 左镜腿触控区域  | 长按     | 唤醒语音助手     | 唤醒语音助手    |
| 左镜腿触控区域  | 前滑     | 音量增加       | 音量增加      |
| 左镜腿触控区域  | 后滑     | 音量降低       | 音量降低      |
| 左镜腿触控区域  | 上滑     | 播放上一首      | —         |
| 左镜腿触控区域  | 下滑     | 播放下一首      | —         |
| 快捷键      | 短按     | 录音         | —         |
| 快捷键      | 长按     | 一句话待办      | —         |

在 X3 Pro 系列眼镜中，支持用户在“系统设置-通用设置”中，修改右镜腿触控板滑动方向与焦点移动方向的映射关系。

| <p><img src="/files/DwDV1gbYoCj42c7JgXMm" alt="" data-size="original"></p><p>自然移动方向-默认开启</p><p><img src="/files/O4eft8rLbZJQoCBtrvWx" alt="" data-size="original"><br>自然移动方向-默认开启</p> | <p><img src="/files/erjqa4lSwLFFagCSxEbY" alt="" data-size="original"></p><p>非自然移动方向</p><p><img src="/files/w7HbI4aepNrOEoTTrZ95" alt="" data-size="original"></p><p>非自然移动方向</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

### **4.2 戒指控制交互**

**X2 系列眼镜**支持通过配件—戒指进行交互，戒指包括触控板和按键两个触控模块，开发者无需对戒指交互进行额外的开发，官方提供的 APK 会自动进行映射和适配。

![](/files/48e62dbca5ee013ab99e539d2c5f8562587ff782)

在 X2 的系统交互中，戒指的触控手势以及与 X2 触控手势的映射关系如下：

| **戒指**    | **X2**    |
| --------- | --------- |
| **触控区域**  | **操作**    |
| 触控板       | 单击（轻触或按下） |
| 双击（轻触或按下） | 返回 / 退出   |
| 左滑        | 上一个       |
| 右滑        | 下一个       |
| 上滑        | 上一个       |
| 下滑        | 下一个       |
| 长按（轻触或按下） | 唤出主界面     |
| 按键        | 短按        |

X2 系列眼镜接入了微信小程序，为保证用户在小程序中的交互流畅性，戒指引入了射线模式。射线模式仅在小程序中启用和生效，交互定义如下：

| 操作    | 功能      | 示意                                                   |
| ----- | ------- | ---------------------------------------------------- |
| 转动戒指  | 移动射线    | ![](/files/473686dac6464992fc0c15e5ebaed3c04300a672) |
| 单击触控板 | 选中 / 确认 | ![](/files/0385c54be36ea484e7e86b1a1167095ebbc0d77e) |
| 长按触控板 | 激活射线    | ![](/files/446e3bcd39f3b45e4ef1e366323f1fb183771ac1) |
| 滑动触控板 | 翻页      | ![](/files/13bf56f7289bc1cd5b8bca3585516d1d4380c147) |

### **4.3 手表手势交互**

**X3 Pro 系列**眼镜支持 iOS 用户在苹果手表上获取“雷鸟 AR 眼镜”App，佩戴手表后通过手表手势来与 X3 Pro 眼镜进行交互。目前支持的手表手势及其对应的功能如下：

| 手势                | 示意                                                                  | 功能          |
| ----------------- | ------------------------------------------------------------------- | ----------- |
| 食指和拇指用力互点一下       | <img src="/files/9KoM2fMvrl8U2hOnaGBz" alt="" data-size="original"> | 选中 / 确认     |
| 食指和拇指用力互点两下       | <img src="/files/FeR6zZQcT2oWEOzErrKh" alt="" data-size="original"> | 返回 / 退出     |
| 快速转腕后，移动手部        | <img src="/files/9x1K43CHiA63BtogyEzm" alt="" data-size="original"> | 切换焦点        |
| 摊掌暂停切换，反掌后继续      | <img src="/files/CaxXdvRn0nAqt6xH01C4" alt="" data-size="original"> | 暂停 / 继续切换焦点 |
| 向左或向右摆动手腕         | <img src="/files/6SXzoo6eBx2IOtjgtOgm" alt="" data-size="original"> | 切换焦点        |
| 快速握拳并松开           | <img src="/files/wLmoRhmhBNzWMRPMYtXe" alt="" data-size="original"> | 打开“快捷控制”    |
| 摊平手掌后，食指和拇指用力互点两下 | <img src="/files/K3ZISiXlOfmZd8e62l2i" alt="" data-size="original"> | 唤醒“语音助手”    |

## **5. 视觉设计规范**

### **5.1 颜色与亮度**

颜色选择可以影响用户体验和情感反应，同时也用于引导用户，建立品牌身份，确保应用的可访问性。因此，在设计AR应用时，需要善于选择和运用颜色。

#### **5.1.1 颜色使用指南**

\*\*慎用渐变色：\*\*尤其在高对比度条件下，以避免出现明显的色阶问题。如果非得使用，建议优先考虑蓝色通道的渐变效果，以最大程度减少色阶问题对用户体验的不利影响；

**避免使用**：大面积白色、红色（仅警示色和提醒时使用红色）；

**谨慎使用黑色**：因为在AR世界中，黑色代表不发光，而对于人眼来说，不发光的元素会呈现为透明，因此可能会导致元素不可见。

#### **5.1.2 主题色**

![](/files/9bd08a90096be4f1b33dff920f5579b8348930be)

#### **5.1.3 注意场景**

* 【警示色】避免高频使用红色警示色，仅着重强调，如“删除”、“结束”等场景使用。

![](/files/18c36b374ee343afcc29bf1587102014ba66a398)

* 【纯色】避免大面积使用高饱和度、纯色的颜色

![](/files/159c5d0a7cd07b7cfbe9555694c9b9b98b48c6c5)

* 【透明】在增强现实（AR）世界中，黑色通常表示没有光源的区域，而根据人眼的感知，缺乏光源的元素会呈现为透明。

![](/files/790aeaf014bb2f1a59fc3e3bd7fbfb7ca15d15b8)

### **5.2 字体与字号**

* 默认推荐字号（基于5米阅读距离）

请确保使用适当的字体大小， 确保用户可以清晰、有效的阅读到文本内容。

最小字号为16，避免使用小于16的字号。

X3 中新增行距倍率，增强信息之间呼吸感，使用时需要注意字高是否使用正确。

![](/files/3f345012d7b85536f7d7480544803d24574bcdb0)

* 字体建议与选型兼容性说明（系统字体 vs 内嵌字体）

系统内嵌字体：HarmonyOS\_Sans\_SC

### **5.3 线条**

系统所有线条，根据不同场景会使用 2px 或 3px 或 4px ，低于 2px 的线条在AR设备中会出现圆角锯齿等显示问题。

线条颜色调用系统颜色。

![](/files/1ed8eadb0ad0debaca425ae6a01e8cdd0b06d980)

![](/files/5e56d6c66611ded5593c6f58feff9793f396c78a)

![](/files/ace1a264415d1e622b7a499172d14d3db7de5ea6)

### **5.4 安全边距**

全页面安全边距，左右预留 30px 的安全边距，上下预留20px，避免因双目视差导致的内容遮挡

![](/files/5e5e402814897543886373c8f9c2df6b2fb482fe)

### **5.5 图标与图形元素**

应用图标：会显示在系统界面中

![](/files/b284d8a8c21f887d0beb216c8152642a7e270577)

### **5.6 3D素材**

* 面数建议

建议使用低模,不建议使用工业高精度模型以及扫描模型，单个低模模型面数控制在5000面以内，同时展示模型面数不应超过5w面。

| ![](/files/0f4237930e466f1dd219da58c5b5ebfa9f87fe46) ✅ 低模多边形数量：4500 | ![](/files/b547e4baadee31667f7e4da78e2bf118d0d93543) ❌ 高模多边形数量：30000 |
| ------------------------------------------------------------------- | -------------------------------------------------------------------- |

* 贴图大小

模型优先使用PBR材质，PBR贴图最大尺寸建议512x512px，限制尺寸有助于减少缓存。

* 颜色
  * 材质建议使用纯色，谨慎大面积使用暖色。
  * 渐变色彩效果需控制渐变的色彩色值，色值不易差异太大，渐变色中不能出现黑色，会产生分层色阶。
  * 效果样式不建议使用后期效果(Post Processing)以及谨慎使用发光，若需要发光效果，需控制发光范围，以优化眼镜显示效果。
  * 天空盒/HDR环境：无需渲染环境纹理，若添加天空环境，请设置摄像机背景设置为黑色，确保Skybox不被渲染。
* 动画
  * 不建议使用粒子效果及物理系统，大量运算会增加CPU功耗，导致发热，画面掉帧卡顿。

## **6. UI控件组件规范**

### **6.1 提示 Toast**

* 类型

![](/files/a4ef3e0467674e3607d0806bd77025638179682d)

* Icon 使用规则

仅以下两种场景需要使用Icon，且Icon样式需要保持统一 异常场景：各种异常场景，如网络异常、内存不足、无法保存等异常情况使用icon。

成功场景：成功场景判断——有数据存储成功存储下来的，如照片、录音等资源成功被存储，可以用对勾icon；

描述类场景：其余场景不建议使用icon，仅出现出现文字描述即可。

![](/files/f28874368c7819258518d781927995ebf270351d)

### **6.2 弹窗（警示/确认）**

* 仅警示类、强操作类的场景才可以使用弹窗，切勿高频多次出现。

![](/files/b465076d9fa8d0998ebd39d4dcef414609e385ec)

### **6.3 空状态、异常、无权限**

空状态、异常、无权限场景是新用户遇到比较高频的场景，可以引导用户去进行对应的操作。

![](/files/f886567e18f9cd0cac0b32d9d76cf258f1d32a75)

### **6.4 底部导航栏**

底部导航栏通过左右滑动，是切换功能或界面的常用控件。

![](/files/46d85664ffcf3b310e4f704a97e81ec890933be7)

有限个数（一屏内）无限个数（超过一屏）

![](/files/3628c59f87c1159d18a7130e37d694aad2e10369)

## **7. 如何设计好一个应用**

### **7.1 0 DoF 应用--翻译**

#### 7.1.1 **导航设计**

| 若应用内包含多个子功能，可默认选中其中一个子功能，并引导用户通过界面底部的导航栏滑动切换。 | <p><img src="/files/ceeb8e78a7cef64b90f8434b225bdd3d78a19aaa" alt=""> </p><p>默认选中子功能<br></p> |
| --------------------------------------------- | -------------------------------------------------------------------------------------------- |

| 建议导航栏支持跟手滑动，从而提升交互效率。                     | <p><br></p>                                                                             |
| ----------------------------------------- | --------------------------------------------------------------------------------------- |
| **跟手滑动：** 滑动触控板时，焦点会实时跟随指尖移动，持续滑动可连续切换焦点。 | <p><img src="/files/4vCmvdhWcVZcrpqeHEG1" alt="" data-size="original"></p><p>跟手滑动效果</p> |

| 选择完子功能后，导航栏可自动消失，从而为用户留出更大的视野。 | <p><img src="/files/VHfcTw2Shwr6uDGfXybU" alt="" data-size="original"></p><p>导航栏消失动效</p> |
| ------------------------------ | ---------------------------------------------------------------------------------------- |

#### 7.1.2 **交互设计**

| 若应用包含多个子功能，可以考虑前后滑动触控板切换子功能，以实现快速切换，减少交互层级和操作步长。 | <p><img src="/files/162074a1512a6bc1c6dfad74d8aa2a30e8ed3ff4" alt=""> 滑动切换子功能<br></p> |
| ------------------------------------------------ | ------------------------------------------------------------------------------------- |

| 对于列表式和宫格式布局，应同时兼容双向（前后）和四向（上下前后）交互。 | <p><img src="/files/9cdf6bcca52f21c1d0d3c084b45ba6dd5320a895" alt=""> 列表型布局<br></p> | <p><img src="/files/fba3edf9d8c939f24923c984a69f0a514155bc4b" alt=""> 九宫格式布局<br></p> |
| ----------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |

| 若网络、蓝牙或服务器等出现异常，影响应用正常使用，应及时告知用户；持续性的影响可以考虑常驻提示。 | <p><img src="/files/9cdf2ee6d4f6226da6db1371cb4fc7a24e45d76a" alt=""> 即时提示<br></p> | <p><img src="/files/cb5c50d27a3f7b90ebe080184080b5e957505266" alt=""> 常驻提示<br></p> |
| ------------------------------------------------ | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |

#### 7.1.3 **显示设计**

| 对于文本阅读类型的应用，可提供多种字号供用户选择，以提升个性化体验。 | <p><img src="/files/162074a1512a6bc1c6dfad74d8aa2a30e8ed3ff4" alt=""> 更大的字号<br></p> | <p><img src="/files/8de4d4eb68eb9e63c655ca828ade054418cd69b4" alt=""> 较小的字号<br></p> |
| ---------------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |

| 若用户在观看虚拟画面的同时，需要与真实环境进行交互，则应当考虑是否为用户预留视野，即虚拟内容是否铺满屏幕、还是仅在有限的区域内呈现。 | <p><img src="/files/7c025af03df06470a34b339b9e7a8a8803a773f6" alt=""> 预留视野<br></p> | <p><img src="/files/9a2487e8d42098bfa0ae35c299b14f6b5234c622" alt=""> 信息铺满屏幕<br></p> |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |

### **7.2 3DoF应用--导航**

#### 7.2.1 **设计原则**

3DoF（三自由度） 是指设备通过传感器感知用户头部的旋转动作（偏航、俯仰、翻滚），是在AR眼镜能够实现的特殊效果。在雷鸟X系列产品中，这种技术效果常用在需要眼镜界面和现实世界交互的场景中，让用户可以仅通过头动就可以获取更多信息并进行交互。

但在雷鸟X系列产品中，我们只建议在必要场景中使用3DoF的方式进行设计，即使是运用了3DoF的应用，也只会应用在其中**需要周围环境交互的场景或者能带来更多乐趣的场景功能中**。

接下来，以导航应用为例，讲解在一个合适的应用中，如何选择3DoF的使用场景以及如何使用3DoF进行设计。

#### 7.2.2 **常规交互方式**

在导航应用中，主要包含**搜索目的地、选择目的地、选择出行方式和路线、开始导航4**个主要步骤。当让用户搜索目的地、选择目的地并选择出行方式及路线时，用户并不需要和周围环境交互，此时的设计目标是让用户更快更准确地找到自己的目的地并选择合适的路线开始导航。

因此这些功能场景的设计时，主要选择\*\*「TP交互」和「语音交互」\*\*让用户更快地实现自己的目标，其中，TP交互是必要的兜底的交互方式；而语音交互则是为用户提效的交互方式。

{% file src="/files/UTMLDGjfh8J8KEYVkJ27" %}

在视频中，用户通过语音完成了所有任务，界面通过可视化的语音交互方式帮助用户搜索、选择目的地并使用合适的路线开启了导航。

#### 7.2.3 **3DoF交互方式**

在应用首页和导航过程中，3DoF的设计则能够给用户带来「更高的导航效率」和「更新奇特的使用体验」。

| 在应用首页，用户周围的地标会以**方向性卡片**呈现，通过**头部转动**即可查看对应方位的地点信息，实现**沉浸式环境探索。** | <p></p><div data-gb-custom-block data-tag="file" data-src="/files/3gn7fNTjbOUk3YEyF0E0"></div> |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| <p><strong>导航模式</strong>下，界面通过<strong>动态3D方向箭头</strong>实时引导：</p><ul><li>当用户面朝正确前进方向时，箭头以实体化形态悬浮指引路径；</li><li>当用户方向偏离时，界面即时提示「向左看/向右看」，<strong>用户仅需转身即可获得反馈</strong>，大幅提升寻路效率。</li></ul> | <p></p><div data-gb-custom-block data-tag="file" data-src="/files/9a8nPN0zBBsaQFsEvy2J"></div> |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

#### 7.2.4 **其他注意事项**

除此之外，在3DoF场景的设计中，还应该注意：

* 在3DoF场景中，不要引导用户过于激烈地转头/转向，这可能会导致眼镜掉落、用户碰撞或摔倒等其他风险。
* 克制地使用3DoF，这会提高产品的能耗，带来更大的性能压力，同时在不合适的场景使用3DoF反而会给用户带来不良的体验。

## **8.如何降低功耗**

因眼镜集成度较高，整体散热能力较弱，故需控制功耗防止过度发热带来的卡顿、降频问题

### **8.1 UI层设计对功耗的影响**

* 尽量减少高亮动画或持续性动态内容
* 合理使用透明背景，避免GPU负担过重
* 优化图层合成与资源格式（SVG优于PNG/GIF）
* 多用绿色通道，少用红色通道
* 3D素材的优化， [请查看](https://leiniao-ibg.feishu.cn/wiki/HPZAwW658ird5EkUzwgc8WYqnsg#share-JgkWdwaAaownLsxrIyEcfyhYnDe)
* **APL屏占比持续显示的内容建议小于13%，非持续显示最高不超过25%，否则功耗会较高**
  * APL=点亮像素量的占比
  * 背景强制使用纯黑色，黑色意味着该像素不被点亮，不占用APL数值；
  * 禁止展示全屏白色画面(高功耗)。
  * APL(点亮像素量)超过13%时，非重点UI内容可降低亮度以减少功耗。

### **8.2 性能资源管理建议**

* 逻辑线程数量尽量控制在4个以内
* 刷新率尽量控制在30fps以内


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rayneo.gitbook.io/rayneo-devdoc/x-xi-lie/she-ji-gui-fan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.