创意预览图

车载全液晶仪表车况健康监测页UI设计,800px×480px,圆角卡片轻量化布局,深色黑底主基调,主色冰蓝科技#00C6FF、琥珀警示色#FF9500、红色故障色#FF3A3A,无多余装饰,写实拟物+

用户头像

GD783509539

2026.06.02
参考原图的清新简约UI设计风格,生成设备运维APP首页界面: 1. 顶部状态栏:显示时间15:28,包含移动信号、WiFi和电量图标 2. 用户信息区:头像是紫色圆形标识,内含"超"字,账号名"超级管理员",所属部门"技术部・设备运维组",右上角有搜索按钮和消息通知按钮,消息按钮带红色角标显示"18" 3. 核心运行数据概览区:3张并列数据卡片,蓝色主题设备卡片显示"在线设备:18/21台 故障设备:3台",绿色主题安全卡片显示"AI值守摄像头:12路 今日安全事件:2起",橙色主题能耗卡片显示"今日用能:1,284 kWh 碳排量:0.73 t" 4. 常用功能入口区:2行4列宫格布局,共8个功能入口:第一行从左到右:设备管理、设备体检、楼宇态势、设备处置;第二行从左到右:设备维保、AI值守、设备巡检、能耗管理 5. 业务提醒横幅区:分类标签"安全值守",标题"AI摄像头布防提醒",说明文字"核对重点区域摄像头在线与告警状态",横向卡片横幅搭配监控场景背景图 6. 待办事项区:区域标题"待办事项",右侧带"流程中心 >"跳转入口,第一条待办工单(设备维保类)状态"待处置",工单名称"摄像头 CAM-023 年度维保",明细"编号 WB260506010、类型 零星维修、对应设备 摄像头 - 1",负责人"超级管理员",创建时间"2026-05-26 11:19",第二条仅露出"设备巡检"分类头部,内容被底部导航遮挡 7. 底部主导航栏:共5个Tab入口,当前停留在蓝色高亮的"首页",依次是:首页(当前选中)、设备、紫蓝渐变圆形主快捷按钮、工作台(右上角红点未读提示)、我的 整体保持清新干净的现代UI设计风格,浅蓝渐变背景,信息分区清晰,层次分明参考原图的清新简约UI设计风格,生成设备运维APP首页界面:
1. 顶部状态栏:显示时间15:28,包含移动信号、WiFi和电量图标
2. 用户信息区:头像是紫色圆形标识,内含"超"字,账号名"超级管理员",所属部门"技术部・设备运维组",右上角有搜索按钮和消息通知按钮,消息按钮带红色角标显示"18"
3. 核心运行数据概览区:3张并列数据卡片,蓝色主题设备卡片显示"在线设备:18/21台 故障设备:3台",绿色主题安全卡片显示"AI值守摄像头:12路 今日安全事件:2起",橙色主题能耗卡片显示"今日用能:1,284 kWh 碳排量:0.73 t"
4. 常用功能入口区:2行4列宫格布局,共8个功能入口:第一行从左到右:设备管理、设备体检、楼宇态势、设备处置;第二行从左到右:设备维保、AI值守、设备巡检、能耗管理
5. 业务提醒横幅区:分类标签"安全值守",标题"AI摄像头布防提醒",说明文字"核对重点区域摄像头在线与告警状态",横向卡片横幅搭配监控场景背景图
6. 待办事项区:区域标题"待办事项",右侧带"流程中心 >"跳转入口,第一条待办工单(设备维保类)状态"待处置",工单名称"摄像头 CAM-023 年度维保",明细"编号 WB260506010、类型 零星维修、对应设备 摄像头 - 1",负责人"超级管理员",创建时间"2026-05-26 11:19",第二条仅露出"设备巡检"分类头部,内容被底部导航遮挡
7. 底部主导航栏:共5个Tab入口,当前停留在蓝色高亮的"首页",依次是:首页(当前选中)、设备、紫蓝渐变圆形主快捷按钮、工作台(右上角红点未读提示)、我的
整体保持清新干净的现代UI设计风格,浅蓝渐变背景,信息分区清晰,层次分明
「图片1」### 顶部导航栏 - 左侧:返回箭头 `<` - 中间标题:**告警** - 右侧:更多菜单图标 `⋯` ### 2. 顶部 Tab 标签栏 当前页面处于告警管理相关模块,Tab 包括: - 控制 - 档案 - 动态 - 维保 - 巡检 - **告警**:当前高亮 - 生命周期 说明这是一个设备全生命周期管理系统,告警只是其中一个子模块。 --- ### 3. 告警概览区 位于页面顶部,用三个数字卡片展示告警统计: 表格 | 指标 | 数值 | 说明 | | --- | --- | --- | | 今日告警 | 2 | 当天产生的告警数量 | | 待确认 | 1 | 尚未处理确认的告警 | | 已恢复 | 1 | 已经恢复或关闭的告警 | 右上角有一个蓝色标签:**1 待确认**,提示当前有待处理告警。 --- ### 4. 告警明细区 这是页面核心内容,展示两条告警记录。 #### 第一条告警:画面遮挡告警 - 类型:**画面遮挡告警** - 时间:2026-06-09 10:23 - 状态:**待确认**,橙色 / 黄色标签 - 风险等级:**高** - 设备名称:暖通演示楼 / 2F / 二楼东侧 - 事件描述:AI 值守 核查遮挡摄像头角度 这条属于**视频 / 摄像头类智能告警**,系统识别到摄像头可能被遮挡,需要人工确认。 #### 第二条告警:心跳延迟告警 - 类型:**心跳延迟告警** - 时间:2026-06-08 18:30 - 状态:**已恢复**,绿色标签 - 风险等级:中 - 设备名称:设备名称 - 事件描述:设备心跳超时,离线后恢复 这条属于**设备联网状态告警**,说明设备曾经失联,后来重新上线。 --- ### 5. 处置记录区 - 标题:**处置记录** - 内容:已生成安全事件 - 状态:**待补充** 说明系统已经生成了事件记录,但处理备注或工单信息还没有完全填写。 --- ## 三、页面业务定位 这个页面主要用于**运维人员查看和处理设备告警**,核心作用是: 1. 快速了解今日告警数量 2. 判断哪些告警待处理 3. 查看告警类型、设备位置和风险等级 4. 确认摄像头遮挡、设备离线等异常事件 5. 记录后续处置结果 --- ## 四、页面信息结构总结 ``` 顶部导航:返回 / 告警标题 / 更多 ↓ Tab导航:控制 / 档案 / 动态 / 维保 / 巡检 / 告警 / 生命周期 ↓ 告警概览:今日告警 / 待确认 / 已恢复 ↓ 告警明细:画面遮挡告警 / 心跳延迟告警 ↓ 处置记录:已生成安全事件,待补充 帮我生成APP「图片1」###  顶部导航栏

- 左侧:返回箭头 `<`
- 中间标题:**告警**
- 右侧:更多菜单图标 `⋯`

### 2. 顶部 Tab 标签栏

当前页面处于告警管理相关模块,Tab 包括:

- 控制
- 档案
- 动态
- 维保
- 巡检
- **告警**:当前高亮
- 生命周期

说明这是一个设备全生命周期管理系统,告警只是其中一个子模块。

---

### 3. 告警概览区

位于页面顶部,用三个数字卡片展示告警统计:

表格

| 指标 | 数值 | 说明 |
| --- | --- | --- |
| 今日告警 | 2 | 当天产生的告警数量 |
| 待确认 | 1 | 尚未处理确认的告警 |
| 已恢复 | 1 | 已经恢复或关闭的告警 |

右上角有一个蓝色标签:**1 待确认**,提示当前有待处理告警。

---

### 4. 告警明细区

这是页面核心内容,展示两条告警记录。

#### 第一条告警:画面遮挡告警

- 类型:**画面遮挡告警**
- 时间:2026-06-09 10:23
- 状态:**待确认**,橙色 / 黄色标签
- 风险等级:**高**
- 设备名称:暖通演示楼 / 2F / 二楼东侧
- 事件描述:AI 值守 核查遮挡摄像头角度

这条属于**视频 / 摄像头类智能告警**,系统识别到摄像头可能被遮挡,需要人工确认。

#### 第二条告警:心跳延迟告警

- 类型:**心跳延迟告警**
- 时间:2026-06-08 18:30
- 状态:**已恢复**,绿色标签
- 风险等级:中
- 设备名称:设备名称
- 事件描述:设备心跳超时,离线后恢复

这条属于**设备联网状态告警**,说明设备曾经失联,后来重新上线。

---

### 5. 处置记录区

- 标题:**处置记录**
- 内容:已生成安全事件
- 状态:**待补充**

说明系统已经生成了事件记录,但处理备注或工单信息还没有完全填写。

---

## 三、页面业务定位

这个页面主要用于**运维人员查看和处理设备告警**,核心作用是:

1. 快速了解今日告警数量
2. 判断哪些告警待处理
3. 查看告警类型、设备位置和风险等级
4. 确认摄像头遮挡、设备离线等异常事件
5. 记录后续处置结果

---

## 四、页面信息结构总结

```
顶部导航:返回 / 告警标题 / 更多
↓
Tab导航:控制 / 档案 / 动态 / 维保 / 巡检 / 告警 / 生命周期
↓
告警概览:今日告警 / 待确认 / 已恢复
↓
告警明细:画面遮挡告警 / 心跳延迟告警
↓
处置记录:已生成安全事件,待补充
帮我生成APP
[第5屏] 核心功能实测屏-故障码读取与清除功能演示。本屏使用【图1】作为设备主体,配合手机APP界面展示。 [氛围/风格] 深色科技风,功能演示场景,真实操作感,专业可信。 [元素布局] 左侧是OBD诊断仪插在汽车OBD接口上的特写,右侧是手机屏幕显示APP界面:故障码列表(如P0300、P0420等)、清除按钮、实时数据流(转速、车速、水温、油耗);中间有蓝牙信号连线表示设备与手机连接;背景是汽车内部驾驶位局部场景;产品外观与输入图一致。 [光影质感] 车内环境光偏暗,手机屏幕发出蓝白光,设备指示灯亮绿光,整体光线真实自然,有车内氛围感。 [配色色系] 全局底色 #12182E 深蓝灰;主色 #1A2240 深靛蓝;辅助色 #00D4AA 青绿、#5B5BFF 蓝紫、#FF6B6B 故障红;文字白色。 [视角构图] 左右分栏+前后景层次,左设备右手机,阅读动线从设备连接到手机界面展示功能。 [文字版式] 顶部主标题「故障码 读清一体」,副标题「读取+清除 两步搞定」;手机界面内标注「实时故障码读取」「一键清除故障灯」「30+项数据流监测」「冻结帧数据查看」;底部有功能标签:「发动机故障」「排放系统」「燃油系统」「点火系统」。 [比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。 [负向提示词] 产品变形,APP界面虚构过度,水印,文字错乱,颜色偏差,场景杂乱。[第5屏] 核心功能实测屏-故障码读取与清除功能演示。本屏使用【图1】作为设备主体,配合手机APP界面展示。
[氛围/风格] 深色科技风,功能演示场景,真实操作感,专业可信。
[元素布局] 左侧是OBD诊断仪插在汽车OBD接口上的特写,右侧是手机屏幕显示APP界面:故障码列表(如P0300、P0420等)、清除按钮、实时数据流(转速、车速、水温、油耗);中间有蓝牙信号连线表示设备与手机连接;背景是汽车内部驾驶位局部场景;产品外观与输入图一致。
[光影质感] 车内环境光偏暗,手机屏幕发出蓝白光,设备指示灯亮绿光,整体光线真实自然,有车内氛围感。
[配色色系] 全局底色 #12182E 深蓝灰;主色 #1A2240 深靛蓝;辅助色 #00D4AA 青绿、#5B5BFF 蓝紫、#FF6B6B 故障红;文字白色。
[视角构图] 左右分栏+前后景层次,左设备右手机,阅读动线从设备连接到手机界面展示功能。
[文字版式] 顶部主标题「故障码 读清一体」,副标题「读取+清除 两步搞定」;手机界面内标注「实时故障码读取」「一键清除故障灯」「30+项数据流监测」「冻结帧数据查看」;底部有功能标签:「发动机故障」「排放系统」「燃油系统」「点火系统」。
[比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。
[负向提示词] 产品变形,APP界面虚构过度,水印,文字错乱,颜色偏差,场景杂乱。
[主图-3] GPS定位器功能展示图,主打历史轨迹回放和电子围栏报警; [氛围风格] 暗黑科技风格,功能清晰,专业可信; [画质] 商业摄影质感、光影通透层次分明,产品清晰真实,画面干净高级; [元素] 黑色GPS定位器居中展示,四周环绕拼接手机APP界面截图,虚拟显示历史轨迹地图和电子围栏设置页面,点缀手机图标和报警铃铛图标;保持GPS定位器外观(物理结构、材质质感、颜色)与输入产品图绝对一致,杜绝任何变形和色差,精细化处理;商品主体占比约60%,周围功能界面清晰可辨,整体布局饱满不拥挤; [光影] 中心产品主光突出,四周APP界面用均匀辅助光,背景深灰渐变,层次清晰,科技感强; [配色] 主背景深黑色,产品黑色,界面浅灰底配黑色文字,图标浅灰色点缀,文字白色,整体深色科技配色; [视角构图] 中心聚集式构图,产品在中心,功能界面环绕四周,信息层级分明; [文字版式] 主标题大字历史轨迹回放 电子围栏报警放置在画面顶部居中,白色大号粗体无衬线;副标题全天候监控 车离围栏立即报警 轨迹永不丢失放在主标题下方,白色小字大小约为主标题的1/3,文字不遮挡主体,清晰可辨; [比例分辨率] 1:1 比例,4k 分辨率;文字清晰锐利,画面超高清; [负向提示词] 变形,文字错乱,产品图模糊,背景杂乱,水印,电商平台Logo[主图-3] GPS定位器功能展示图,主打历史轨迹回放和电子围栏报警;
[氛围风格] 暗黑科技风格,功能清晰,专业可信;
[画质] 商业摄影质感、光影通透层次分明,产品清晰真实,画面干净高级;
[元素] 黑色GPS定位器居中展示,四周环绕拼接手机APP界面截图,虚拟显示历史轨迹地图和电子围栏设置页面,点缀手机图标和报警铃铛图标;保持GPS定位器外观(物理结构、材质质感、颜色)与输入产品图绝对一致,杜绝任何变形和色差,精细化处理;商品主体占比约60%,周围功能界面清晰可辨,整体布局饱满不拥挤;
[光影] 中心产品主光突出,四周APP界面用均匀辅助光,背景深灰渐变,层次清晰,科技感强;
[配色] 主背景深黑色,产品黑色,界面浅灰底配黑色文字,图标浅灰色点缀,文字白色,整体深色科技配色;
[视角构图] 中心聚集式构图,产品在中心,功能界面环绕四周,信息层级分明;
[文字版式] 主标题大字历史轨迹回放 电子围栏报警放置在画面顶部居中,白色大号粗体无衬线;副标题全天候监控 车离围栏立即报警 轨迹永不丢失放在主标题下方,白色小字大小约为主标题的1/3,文字不遮挡主体,清晰可辨;
[比例分辨率] 1:1 比例,4k 分辨率;文字清晰锐利,画面超高清;
[负向提示词] 变形,文字错乱,产品图模糊,背景杂乱,水印,电商平台Logo
设计“银龄·康语”小程序的健康档案功能界面,延续统一设计语言:白色背景,浅灰色分割,浅蓝色为基准色,红色和橙色作为强调色,保持信息极简聚焦核心,无多余装饰元素。从上到下布局:顶部导航,左侧返回箭头+“< 返回”文字,中央大标题“健康档案”旁配折线图图标;标题下方浅蓝色背景圆角大卡片核心数据总览,左右并列显示两个关键数据:左侧大号数字“132/85”,下方标签“最新血压”,数字下方红色向下箭头+小字“较昨日+2”;右侧大号数字“65.5kg”,下方标签“最新体重”,绿色向上箭头+小字“较昨日-0.3”;健康趋势分析模块,加粗模块标题“健康趋势”,下方两个大按钮标签“本周”(选中态浅蓝色填充)和“本月”(未选中态仅边框);趋势可视化区,血压趋势图为高度简化折线图,仅保留蓝色高压平滑曲线和坐标轴,曲线上最高点用醒目的红色圆点标注,引出标签框写“最高:152”;血压图下方为体重趋势图,简化柱状图,蓝色柱子表示体重,其中一根超高柱子用橙色填充,引出标签“68kg”;异常警报记录模块,模块标题“异常警报记录”左侧配红色铃铛图标,包含两条记录:第一条左侧红色感叹号圆形图标,中间文字“血压高压152”,右侧时间“10/21 上午”,整条背景带轻微红色高光;第二条左侧橙色感叹号圆形图标,中间文字“体重68kg”,右侧时间“10/18 下午”;每条记录下方灰色小字提示“点击查看AI建议”;屏幕底部固定浅灰色语音查询输入框,预设文字“您可以问‘我这一周血压怎么样?’”,右侧配麦克风图标。要求:趋势图去掉复杂网格和刻度,只保留核心线柱和异常点标注,严格颜色编码红色代表血压异常、橙色代表体重预警,清晰区分三个信息层级,高清写实UI数据仪表盘设计风格,和前两个界面保持系列统一性,专业级清晰度,图表和文字清晰可辨。设计“银龄·康语”小程序的健康档案功能界面,延续统一设计语言:白色背景,浅灰色分割,浅蓝色为基准色,红色和橙色作为强调色,保持信息极简聚焦核心,无多余装饰元素。从上到下布局:顶部导航,左侧返回箭头+“< 返回”文字,中央大标题“健康档案”旁配折线图图标;标题下方浅蓝色背景圆角大卡片核心数据总览,左右并列显示两个关键数据:左侧大号数字“132/85”,下方标签“最新血压”,数字下方红色向下箭头+小字“较昨日+2”;右侧大号数字“65.5kg”,下方标签“最新体重”,绿色向上箭头+小字“较昨日-0.3”;健康趋势分析模块,加粗模块标题“健康趋势”,下方两个大按钮标签“本周”(选中态浅蓝色填充)和“本月”(未选中态仅边框);趋势可视化区,血压趋势图为高度简化折线图,仅保留蓝色高压平滑曲线和坐标轴,曲线上最高点用醒目的红色圆点标注,引出标签框写“最高:152”;血压图下方为体重趋势图,简化柱状图,蓝色柱子表示体重,其中一根超高柱子用橙色填充,引出标签“68kg”;异常警报记录模块,模块标题“异常警报记录”左侧配红色铃铛图标,包含两条记录:第一条左侧红色感叹号圆形图标,中间文字“血压高压152”,右侧时间“10/21 上午”,整条背景带轻微红色高光;第二条左侧橙色感叹号圆形图标,中间文字“体重68kg”,右侧时间“10/18 下午”;每条记录下方灰色小字提示“点击查看AI建议”;屏幕底部固定浅灰色语音查询输入框,预设文字“您可以问‘我这一周血压怎么样?’”,右侧配麦克风图标。要求:趋势图去掉复杂网格和刻度,只保留核心线柱和异常点标注,严格颜色编码红色代表血压异常、橙色代表体重预警,清晰区分三个信息层级,高清写实UI数据仪表盘设计风格,和前两个界面保持系列统一性,专业级清晰度,图表和文字清晰可辨。