简介
界面设计是 Yealink Room Designer 的可视化交互设计模块。用户无需编写代码,通过可视化组件拖拽与指令集绑定,即可为会议室触控面板(如 CTP25、MTouch Plus 等)快速定制控制界面,实现对音频、视频等设备的集中控制。通过界面设计,你可以在虚拟画布上完成所有界面设计,并通过运行模式推送到真实触控屏上使用。
页面管理
一个 UI 设计可包含多个页面,用于不同场景。
管理页面
点击页面区域顶部的新建页面,即可新增一个空白页面。最多支持 100 个页面。
右键点击已存在的页面,选择复制,将生成一个包含相同组件和配置的页面副本。
右键点击已存在的页面,选择重命名,可对页面名称进行重命名。
右键点击页面,选择删除。
设置页面属性
选中页面(不选中任何组件)后,右侧页面信息属性区可配置:
参数
说明
页面名称
唯一标识,便于在映射或跳转时识别。
控制屏
绑定控制屏的实际型号(如 CTP25、MTouch Plus)。不同型号的屏幕尺寸和分辨率不同,选择后,页面尺寸会自动适配。也可自定义控制屏的尺寸。
页面大小
宽度 × 高度(像素)。通常由控制屏自动确定,也可自定义控制屏的尺寸。
页面样式
背景颜色(纯色)或背景图片(支持 .jpeg、.png、.svg,最大 2MB)。背景图片可设置填充方式(适应、填充、拉伸)。
图层管理
图层管理以树形结构显示当前页面中的所有组件,帮助你快速定位组件、调整显示层级和控制可见性。
定位组件:点击大纲中的组件名称,视图区自动聚焦并高亮该组件。
调整层级:拖拽大纲条目上下移动,或右键选择排列(置于顶层/底层/上移一层/下移一层)。
显示/隐藏:点击组件右侧的图标,可临时隐藏组件(隐藏后不在视图区显示,但保留配置)。
锁定/解锁:点击组件右侧的图标,锁定后,无法在视图区移动或修改。
动作指令
动作命令是界面设计的核心,用于定义组件交互后触发的行为。系统提供四大指令分类,覆盖从设备控制到界面逻辑的全部需求。动作命令区位于 Designer 底部,左侧列出可用指令,右侧为配置区,可以将指令拖拽到配置区并设定参数。
模块
项
说明
设备驱动
状态
状态指令主要用于状态展示、状态同步和状态控制,用于建立设备真实状态与系统状态之间的对应关系。其中标记只读状态的指令只能作为条件判断,未标记状态的指令具备可读可写能力,既能作为条件判断也能单独作为指令使用。
功能
功能指令用于定义设备可执行的控制指令或操作能力,不直接作为状态进行管理。主要用于触发某项控制行为或执行某个操作过程。
智能场景
预设动作集
将多个设备/界面操作整合为可执行的动作集合 。触发预设命令的顺序执行(如开始会议 = 静音麦克风 + 切换摄像头 + 开启投屏模式 ),简化复杂流程,通过一键操作完成多步任务。
自动化
定义基于规则的自动化工作流。当特定条件满足时执行动作(例如,“如会议室人数 > 1,则打开投影仪”)。支持启用/禁用规则,并根据系统/设备数据动态调整状态,实现无人值守的智能响应。
界面变化
页面跳转
管理界面页面之间的跳转。触发跳转到指定页面,进行多屏交互的逻辑流程,让用户操作连贯顺畅。
切换组件状态
调整UI组件的视觉状态。更改组件状态或触发相关行为(如切换开关按钮的开/关视觉反馈 ),让界面交互贴合操作意图。
隐藏/显示组件
控制 UI 组件的显示/隐藏 。依据条件展示或隐藏组件,动态修改界面布局,适配用户操作或系统状态变化,优化界面简洁性与关联性。
系统
局部变量
变量是容器,允许存储文本和数字,以便后续使用。通过引入局部变量,可减少单独指令的重复配置或控制状态,尤其适用于需要频繁切换状态或拥有多模式的控制逻辑设计。局部变量支持多种类型,包括枚举、数值和字符串,以满足不同的控制场景和数据表达需求。
逻辑函数
用于对执行流程进行条件约束的分流控制单元(如 IF 语句)。本身不存储任何数据或状态值,专门用于校验硬件状态或局部变量是否满足预设规则,从而决定是否触发其包裹的内部控制指令。
手动生成界面
为组件绑定指令
选中组件:在视图区或图层中,单击选中需要配置交互的组件。
选择指令:在左侧列表中找到所需指令。
拖拽到配置区:将选中的指令拖拽至组件的事件触发区。
配置参数:在已添加的指令的下拉菜单或输入框中设置参数。
如需先判断设备状态,可先拖拽一个逻辑函数,然后在其 if/else 分支内拖拽动作指令。
可以为一个事件添加多个指令,按顺序执行。拖拽指令可调整执行顺序。
设置多状态视觉反馈
许多组件(按钮、开关、图标)支持多个视觉状态(如默认、按下、禁用、选中)。你可以针对不同状态分别配置样式,并在动作指令中动态切换状态,实现丰富的交互反馈。例如:麦克风静音时,按钮变为红色并显示“已静音”;取消静音时,按钮恢复绿色并显示“未静音”。
选中组件,在右侧属性区的组件状态,点击添加状态。最多支持 10 个状态。
在新增的状态下,修改组件的样式(背景色、文字颜色、图标等)。
在底部动作指令区,切换到视觉反馈页签。
从左侧指令库中找到目标设备的状态指令。
将该指令拖拽到右侧的视觉反馈配置区域。参数区域会显示该指令可能的取值。
选择状态对应的取值。
配置后,当设备的状态发生变化时,该组件的样式会切换到对应的视觉状态。
指令配置举例
例 1:点击按钮控件关闭 CM50 的降噪
点击按钮控件。
在左侧设备列表中选择 CM50。
点击状态并选择 Noise Reduction 命令,将其拖入右侧单击配置区。
在配置区将Value设置为 Off。
例 2:点击按钮组件切换 CM50 降噪状态
点击按钮组件。
在下方配置区点击IF语句,添加条件语句。
在左侧设备列表中选择 CM50。
点击状态,选择 Noise Reduction 命令,并拖动到右侧的IF语句配置区域。
配置IF语句的 Value为 equals, On。参考示例 1,将静音命令拖入IF语句的命令区域,并将 Value设为 Off。
点击 添加ELSE 条件语句。同样参考示例 1,将静音命令拖入ELSE IF语句的命令区域,并将 Value设为 On。
该语句表示:当 CM50 的降噪状态为降噪时,点击按钮将取消降噪;当降噪状态为未降噪时,点击按钮将设置为降噪。
例3:点击按钮组件到另一个页面
点击按钮组件。
在左侧设备列表中选择界面变化 > 页面跳转。
将要跳转的页面拖动到右侧的单击配置区域。
自动生成界面
如果你已经在链路设计中完成了设备连接和配置,可以使用自动设计功能让系统自动生成一套基础控制界面,大幅提升设计效率。系统会分析当前项目中的所有设备,自动创建多个页面(如主页、音频控制、摄像头控制等),添加对应的控制组件并自动绑定额定的动作指令。
点击顶部工具栏的自动设计按钮。
自动设计会覆盖当前页面的所有内容。如果已有手动设计的内容,建议先复制页面或备份项目。
生成后的页面、组件和指令均可手动调整。
使用自动生成后,建议检查所有绑定关系是否正确,并根据会议室的具体需求微调。
预览与调试
在推送到真实设备之前,可以在 Designer 内部对界面交互进行调试。
设计模式预览:点击顶部工具栏的调试按钮,弹出模拟窗口,可以点击按钮、滑动滑条,验证动作指令的逻辑是否正确(但不会实际控制设备)。这是发现逻辑错误的首选方式。
运行模式调试:先进入运行模式,然后在顶部工具栏点击调试,此时按钮等组件会真实控制会议室设备,同时界面的视觉反馈(如按钮状态联动)也会实时更新。这是验证完整交互闭环的最佳方式。