设计场景

创建项目后，你可以在项目里开发场景。开发场景由三个环节组成：设计、预览、部署。本文介绍如何设计场景。

设计页介绍

设计场景的页面有三个部分：工具箱、设计画布、细节设置。

工具箱

在工具箱，你可以通过场景、模块、主题三个选项卡进行以下操作：

• 选择场景模板：你的场景会基于模板创建。目前可选的模板有 1 对 1、小班课、大班课。
• 添加功能模块：通过向设计画布上拖拽不同模块以组合出你所需的场景功能，并设置是否开启各个功能。目前有如下模块可供选择：
  • 顶部功能栏：显示网络状态、课堂名称、已上课时长、用户对摄像头和麦克风的开关状态、退出课堂。
  • 教师视频窗口：显示教师的视频画面。
  • 学生视频窗口：显示学生的视频画面。
  • 教学组件：显示已开启的教学组件，如白板、云盘、花名册、计时器、答题器、投票器等。
  • 聊天组件：显示课堂中用户的聊天消息。
• 编辑主题：修改主题系统色为明亮或暗黑，并对不同系统色分别设置如下配色：
  • 品牌色：界面按钮的颜色，例如聊天组件中“发送”按钮的颜色。
  • 前景色：界面上填充的颜色，例如填充功能栏、白板的颜色。
  • 安全色：界面上弹出安全性提示信息时信息框的颜色。
  • 警告提示色：界面上弹出警告性提示信息时信息框的颜色。
  • 错误提示色：界面上弹出错误性提示信息时信息框的颜色。

设计画布

设计画布上实时显示你编辑的场景界面。当你添加功能模块、编辑主题后，你可以观察设计画布上场景界面的变化。

细节设置

细节设置面板有两种使用场景：

• 配合工具箱中的功能模块使用：当你点击某个模块，可以通过在细节设置中调整具体功能的开启。比如点击教学组件时，你可以在细节设置中开关白板、云盘等组件功能。
• 配合工具箱中的主题编辑使用：点你编辑主题时，可以通过在细节设置中调整系统色和其他配色。

设计步骤

1. 在我的项目中，选择待设计场景的项目，点击编辑，进入设计界面。

   

2. 在场景选项卡中，选中你要修改的场景。如你还未创建任何场景，点击新场景创建一个新的场景。

   

3. 在弹窗中，选择一个适合你的场景的模板，输入场景名称，点击选择这个模版完成创建。

   注意

   • 一个项目中，同一个模板只能用于一个场景。
   • 对于已创建的场景，你可以修改场景名称，或者删除场景。

4. 在设计全程你都可以进行以下操作：

   • 切换到电脑端或移动端视角
   • 切换到明亮/暗黑模式
   • 将设计画布上的场景界面自适应屏幕
   • 放大/缩小设计画布上的场景界面
   

5. 选中你要修改的场景，进入模块选项卡，将模块区域的功能模块拖拽到你的设计画布中。

   注意

   每个组件都有预设的放置位置。当你把组件拖拽到可放置位置时，该区域会显示为绿色。如果你拖拽到了不可放置的位置，该区域会显示为红色，并无法添加成功。

   

   添加后的组件会显示在概览区域。

6. 选中概览区域下的某个功能，在右侧的细节设置中通过勾选操作进行功能开关（默认勾选）。

   
   注意

   • 有些功能（如学生视频窗口中的下台）为动态变化，需要在预览场景时才能预览效果。
   • 有些功能（如白板）包含子功能，点击勾选框左侧的“设置”图标可设置子功能开关。

7. 点击工具箱中的主题选项卡，编辑场景的主题。你可以为暗黑和明亮模式下的场景界面分别设置界面配色。设置后，你可以实时看到效果。

   

后续步骤

设计场景后，你可以参考文档进行预览场景和部署场景。