智能家居的 AI UI 生成：设备控制的自然交互与场景化界面设计-尧图网络科技

智能家居的 AI UI 生成：设备控制的自然交互与场景化界面设计

一、引子：当灯光开关成为一个哲学问题

家里的智能灯泡从三个涨到了三十七个。每个灯泡都有色温、亮度、场景模式，还有那个永远记不住叫什么名字的 "阅读模式3"。手机屏幕上密密麻麻的设备卡片，像极了毕业设计展览上贴满便签的白墙——信息是存在的，但意义被淹没了。

智能家居界面设计的核心困境不在技术，而在认知。每次打开 App 控制一盏灯，用户需要完成：识别设备名称、理解当前状态、定位控制入口、执行操作、确认反馈。这五个步骤中，任何一个环节的摩擦都会让 "智能" 变成 "智障"。传统的手动布局方式假设用户能记住每个设备的位置，而现实是用户连昨天晚饭吃了什么都得翻外卖记录。

AI UI 生成在这类场景中的价值被严重低估了。多数讨论停留在 "AI 能不能画图标"，真正的战场是 "AI 能不能理解空间、时间、意图三个维度，动态构建出最合理的控制界面"。这不是画布生成问题，是信息架构的实时编排问题。

二、底层机制：空间-时间-意图三维模型

智能家居 AI UI 生成需要解决的核心问题是：在给定的空间上下文、时间窗口和意图判断下，动态决定界面应该呈现哪些控件，以及它们的优先级排列。

三维模型的每一层都有独立的技术挑战。空间感知层依赖 UWB 定位、蓝牙信标或 WiFi RSSI 指纹，误差在 1-3 米范围内波动。时间感知层需要构建用户的行为时间序列模型，区分工作日与休息日的模式差异。意图推理层最复杂——用户说 "太亮了" 时，AI 需要判断是调节单个设备还是全局场景。

融合引擎的输出是一个有序的 UI 组件列表，每个组件带有置信度分数和渲染参数。置信度低于阈值的组件会被折叠到二级菜单，避免信息过载。

三、生产级代码：意图驱动的 UI 生成器

下面的代码实现了一个轻量级的意图-UI 映射引擎。核心思路是：将设备状态、用户意图和环境参数转化为结构化的 UI 描述，再由渲染层消费。

/** * 智能家居 AI UI 生成器的核心类型定义与推理引擎 * 基于意图识别的控件优先级排序算法 */ // 设备基础模型 interface SmartDevice { id: string; name: string; type: 'light' | 'thermostat' | 'lock' | 'curtain' | 'speaker' | 'camera'; room: string; capabilities: string[]; // 如 ['brightness', 'colorTemp', 'onOff'] state: Record<string, number | boolean | string>; position: { x: number; y: number; z: number }; // 相对房间坐标系 } // UI 控件生成类型 interface UIControl { deviceId: string; controlType: 'toggle' | 'slider' | 'colorPicker' | 'sceneCard' | 'statusBadge'; priority: number; // 0-1，越高越靠前 layout: 'primary' | 'secondary' | 'collapsed'; params: Record<string, unknown>; } // 意图类型扩展 type UserIntent = | { type: 'adjust'; target: string; property: string; value: number } | { type: 'scene'; sceneName: string } | { type: 'query'; device: string; property: string } | { type: 'routine'; action: string }; /** * 核心：基于三维上下文的控件优先级计算 * * 空间权重（spatialWeight）：用户所在房间的设备优先 * 时间权重（temporalWeight）：当前时段常用设备优先 * 意图权重（intentWeight）：匹配意图的设备获得最高权重 */ function calculateControlPriority( device: SmartDevice, context: { userRoom: string; timeOfDay: 'morning' | 'afternoon' | 'evening' | 'night'; intent?: UserIntent; usageHistory: Map<string, number>; // deviceId -> 使用频次 } ): number { // 空间权重：同房间 0.4，相邻房间 0.2，其余 0.05 const spatialWeight = device.room === context.userRoom ? 0.4 : isAdjacentRoom(device.room, context.userRoom) ? 0.2 : 0.05; // 时间权重：基于时段的历史使用模式 const hourPattern = getHourlyUsagePattern(device.id, context.timeOfDay); const temporalWeight = hourPattern > 0.3 ? 0.35 : 0.1; // 意图权重：直接匹配最高 let intentWeight = 0; if (context.intent) { if (context.intent.type === 'adjust' && context.intent.target === device.id) { intentWeight = 0.5; } else if (context.intent.type === 'scene') { const sceneDevices = getSceneDevices(context.intent.sceneName); intentWeight = sceneDevices.has(device.id) ? 0.3 : 0; } } // 复合权重，空间 > 意图 > 时间（可调整系数） return spatialWeight * 0.45 + temporalWeight * 0.15 + intentWeight * 0.4; } // 辅助函数：判断相邻房间 function isAdjacentRoom(roomA: string, roomB: string): boolean { const adjacencyMap: Record<string, string[]> = { '客厅': ['餐厅', '玄关', '阳台'], '卧室': ['卫生间', '衣帽间'], '厨房': ['餐厅', '阳台'], }; return adjacencyMap[roomA]?.includes(roomB) ?? false; } // 辅助函数：获取时段使用模式 function getHourlyUsagePattern( deviceId: string, timeOfDay: string ): number { const patterns: Record<string, number> = { 'morning': 0.25, 'afternoon': 0.15, 'evening': 0.6, 'night': 0.1, }; return patterns[timeOfDay] || 0; } // 辅助函数：获取场景关联设备集合 function getSceneDevices(sceneName: string): Set<string> { const sceneMap: Record<string, string[]> = { '影音模式': ['tv-light', 'speaker-main', 'curtain-living'], '睡眠模式': ['bedroom-light', 'bedroom-curtain', 'thermostat-main'], '离家模式': ['lock-front', 'all-lights', 'all-curtains'], }; return new Set(sceneMap[sceneName] || []); } /** * 主入口：根据上下文生成 UI 控件列表 * 按优先级降序排列，前 3 个为 primary，4-6 为 secondary，其余 collapsed */ function generateAdaptiveUI( devices: SmartDevice[], context: Parameters<typeof calculateControlPriority>[1] ): UIControl[] { // 计算所有设备的优先级 const scored = devices.map((device) => ({ device, priority: calculateControlPriority(device, context), })); // 按优先级降序排列 scored.sort((a, b) => b.priority - a.priority); // 过滤低相关度设备（阈值 0.15） const relevant = scored.filter((s) => s.priority > 0.15); // 映射为 UI 控件 return relevant.map((scored, index) => { const { device, priority } = scored; // 根据优先级划分展示层级 let layout: UIControl['layout']; if (index < 3) layout = 'primary'; else if (index < 7) layout = 'secondary'; else layout = 'collapsed'; // 根据设备类型选择最佳控件 const controlType = deriveControlType(device, context.intent); return { deviceId: device.id, controlType, priority, layout, params: buildControlParams(device, controlType), }; }); } // 根据设备能力和意图推导最佳控件类型 function deriveControlType( device: SmartDevice, intent?: UserIntent ): UIControl['controlType'] { // 意图驱动的类型选择 if (intent?.type === 'adjust' && intent.target === device.id) { if (intent.property === 'brightness') return 'slider'; if (intent.property === 'colorTemp') return 'colorPicker'; } // 基于设备能力的默认映射 if (device.type === 'light' && device.capabilities.includes('colorTemp')) { return 'colorPicker'; } if (device.type === 'thermostat') return 'slider'; if (device.type === 'lock' || device.type === 'camera') return 'statusBadge'; return 'toggle'; } // 构建控件渲染参数 function buildControlParams( device: SmartDevice, controlType: UIControl['controlType'] ): Record<string, unknown> { return { label: device.name, room: device.room, currentState: device.state, minValue: 0, maxValue: controlType === 'slider' ? 100 : undefined, step: controlType === 'slider' ? 1 : undefined, }; }

这套代码的核心设计决策在于权重的可调性。生产环境中，空间权重、时间权重和意图权重的系数应该通过 A/B 测试数据持续优化。初次部署时使用预设值，运行一周后收集用户的实际操作数据，用线性回归反推最优系数。