移动端数据驾驶舱UI设计,电子证照管理移动端看板,政务蓝浅色风… - 图片创意预览

移动端数据驾驶舱UI设计,电子证照管理移动端看板,政务蓝浅色风…

移动端数据驾驶舱UI设计,电子证照管理移动端看板,政务蓝浅色风格,白色背景,蓝色主色调,竖屏9:16比例。顶部导航栏写"证照驾驶舱",带返回和消息图标。页面从上到下滚动布局:第一部分是证照统计概览,四

用户头像

可乐龙虾

2026.09.23
「图片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
A professional financial voucher anomaly quality inspection dashboard UI design, titled "财务凭证异常质检看板" at the top left in bold dark text. Light modern business SaaS style, pure white and very light gray background, clean and fresh. Bento grid layout with well-organized modules, Figma top-tier design, high definition, professional financial software. Top filter bar: Four dropdown filter controls in a row - "公司代码", "会计年月", "分组", "凭证号", each with a clean dropdown arrow and light gray border. Upper metrics section: 3 white rounded cards with soft shadows. Card 1: total voucher count with blue icon. Card 2: anomaly voucher count with red warning icon #FF4D4F. Card 3: anomaly ratio percentage with orange icon. Each card has bold black large numbers and gray description text below. Middle charts section (bento grid): Left side - a donut/ring chart showing status distribution with three segments: 待确认 (pending - yellow/orange), 已修改 (modified - blue), 确认无误 (confirmed correct - green #52C41A), with clear legend on the right. Right side - a line chart showing anomaly count trend across fiscal months, smooth curve with soft blue gradient area fill below the line, x-axis labeled with months, y-axis with count numbers. Bottom section: A clean data table with rounded corners and very thin light gray borders, showing voucher-level detail list. Table columns: 公司代码, 公司名称, 会计年度, 会计月份, 过账日期, 分组, 凭证号 (as clickable blue hyperlink with underline hint), 未通过检查项 (showing specific issues like tax rate error/account error in red tag style), 入账人员用户名, 数据更新时间, 数据来源. Subtle row hover highlight effect with light blue background. Table header with light gray background and bold text. Overall style: modern minimalist, plenty of white space, rigorous typography, B-end product design. Accent colors: warning red #FF4D4F for anomalies, safety green #52C41A for confirmed, primary blue #1890FF for links and charts. Ultra detailed UI, 16:9 landscape aspect ratio.A professional financial voucher anomaly quality inspection dashboard UI design, titled "财务凭证异常质检看板" at the top left in bold dark text. Light modern business SaaS style, pure white and very light gray background, clean and fresh. Bento grid layout with well-organized modules, Figma top-tier design, high definition, professional financial software.

Top filter bar: Four dropdown filter controls in a row - "公司代码", "会计年月", "分组", "凭证号", each with a clean dropdown arrow and light gray border.

Upper metrics section: 3 white rounded cards with soft shadows. Card 1: total voucher count with blue icon. Card 2: anomaly voucher count with red warning icon #FF4D4F. Card 3: anomaly ratio percentage with orange icon. Each card has bold black large numbers and gray description text below.

Middle charts section (bento grid): Left side - a donut/ring chart showing status distribution with three segments: 待确认 (pending - yellow/orange), 已修改 (modified - blue), 确认无误 (confirmed correct - green #52C41A), with clear legend on the right. Right side - a line chart showing anomaly count trend across fiscal months, smooth curve with soft blue gradient area fill below the line, x-axis labeled with months, y-axis with count numbers.

Bottom section: A clean data table with rounded corners and very thin light gray borders, showing voucher-level detail list. Table columns: 公司代码, 公司名称, 会计年度, 会计月份, 过账日期, 分组, 凭证号 (as clickable blue hyperlink with underline hint), 未通过检查项 (showing specific issues like tax rate error/account error in red tag style), 入账人员用户名, 数据更新时间, 数据来源. Subtle row hover highlight effect with light blue background. Table header with light gray background and bold text.

Overall style: modern minimalist, plenty of white space, rigorous typography, B-end product design. Accent colors: warning red #FF4D4F for anomalies, safety green #52C41A for confirmed, primary blue #1890FF for links and charts. Ultra detailed UI, 16:9 landscape aspect ratio.
[商品] 使用【图7】牧运通运输备案管理APP界面截图(车辆管理等功能入口);保留"运输备案管理"标题、车辆管理/承运人管理/贩运主体管理/车辆跟踪四个图标、台账登记模块;界面真实功能为运输备案管理操作。 [画面] 目标:APP操作演示,展示一键开检疫等便捷功能。构图:左右结构,左侧手机APP界面,右侧功能步骤说明。主体位置:左侧手机界面占画面45%,右侧4步操作流程。景别:APP界面近景+步骤说明中景。阅读动线:左侧手机界面→右侧步骤说明。前中后景:前景深蓝渐变底,中景手机模型+步骤卡片,背景抽象操作流程线+图标动效。 [视觉] 套系策略:风格=深色科技性能型商业详情页;标题字=粗黑体无衬线大字;正文字=简洁无衬线中黑体;主色=深蓝科技蓝(#0A2463);背景延展=基于深蓝做深浅渐变、同色系流程连接线、功能图标光晕;强调色=亮青蓝色(#00D4FF),用于步骤序号和连接线;标题色=纯白色;正文色=浅灰蓝色;组件=圆角手机模型、发光步骤序号、流程连接线;光影=冷调科技光,手机屏幕发光,界面清晰。 [文字] 右侧顶部主标题"一键开检疫 操作简单",副标题"4步完成备案申请"。4个步骤:1."车辆管理 添加车辆" 2."填写备案信息" 3."定位器测试通过" 4."一键生成检疫单"。步骤用数字序号+连接线串联。底部小字"支持车辆跟踪 实时查看位置"。文字全部横向排版。 [规格] 比例9:16竖版,分辨率2K,避免变形、错字、文字过小、界面信息错乱、极限词。[商品] 使用【图7】牧运通运输备案管理APP界面截图(车辆管理等功能入口);保留"运输备案管理"标题、车辆管理/承运人管理/贩运主体管理/车辆跟踪四个图标、台账登记模块;界面真实功能为运输备案管理操作。
[画面] 目标:APP操作演示,展示一键开检疫等便捷功能。构图:左右结构,左侧手机APP界面,右侧功能步骤说明。主体位置:左侧手机界面占画面45%,右侧4步操作流程。景别:APP界面近景+步骤说明中景。阅读动线:左侧手机界面→右侧步骤说明。前中后景:前景深蓝渐变底,中景手机模型+步骤卡片,背景抽象操作流程线+图标动效。
[视觉] 套系策略:风格=深色科技性能型商业详情页;标题字=粗黑体无衬线大字;正文字=简洁无衬线中黑体;主色=深蓝科技蓝(#0A2463);背景延展=基于深蓝做深浅渐变、同色系流程连接线、功能图标光晕;强调色=亮青蓝色(#00D4FF),用于步骤序号和连接线;标题色=纯白色;正文色=浅灰蓝色;组件=圆角手机模型、发光步骤序号、流程连接线;光影=冷调科技光,手机屏幕发光,界面清晰。
[文字] 右侧顶部主标题"一键开检疫 操作简单",副标题"4步完成备案申请"。4个步骤:1."车辆管理 添加车辆" 2."填写备案信息" 3."定位器测试通过" 4."一键生成检疫单"。步骤用数字序号+连接线串联。底部小字"支持车辆跟踪 实时查看位置"。文字全部横向排版。
[规格] 比例9:16竖版,分辨率2K,避免变形、错字、文字过小、界面信息错乱、极限词。
参考原图的清新简约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设计风格,浅蓝渐变背景,信息分区清晰,层次分明
参考图片的清新浅蓝渐变天空白云、圆角卡片、青蓝渐变主色调、轻盈通透的APP界面风格,重新生成一个智慧园区设备管理APP页面,手机竖屏界面,顶部状态栏显示时间9:41和信号电量图标。 页面结构如下: 1. 顶部横向Tab栏:区分三大业务模块「设备」「安全」「能耗」,当前停留「设备」板块并高亮显示。 2. 顶部筛选信息栏(蓝色通栏卡片): - 空间选择器:演示园区 / 1号楼 / 3层,带下拉箭头可切换楼栋楼层 - 运行等级:A级 - 数据更新时间:06-24 15:36 - 统计周期切换:今日 / 近7天 / 近30天,默认选中「今日」高亮 - 右上角有刷新按钮 3. 核心指标四宫格(关键KPI卡片,圆角白色卡片): - 设备总数:126台,小字说明当前空间纳管全部设备数量 - 在线率:94.4%,小字标注较昨日上升1.2%(绿色向上箭头代表向好) - 故障设备:7台,小字标注其中2台待处理(红色警示,重点工单) - 离线设备:5台,小字标注最长离线时长41天(黄色预警) 4. 设备状态分布·环形饼图模块: - 标题:设备状态分布 - 环形饼图展示四类状态占比:在线119台(绿色主体)、维保中8台(橙色)、故障7台(红色)、离线5台(浅灰色) - 右侧图文对照图例说明 5. 设备事件趋势柱状图模块: - 标题:设备事件趋势(今日) - 不同颜色柱子区分事件类型,展示全天不同时段设备事件发生频次,红色柱体有明显峰值代表故障类事件集中时段 色彩预警体系:绿色代表正常向好,橙色代表维保提醒,红色代表故障高危,灰色代表离线闲置。整体保持参考图的清新柔和、圆角卡片、渐变色彩、轻盈通透的UI设计风格,界面简洁现代,数据清晰易读,符合运维人员浏览习惯。参考图片的清新浅蓝渐变天空白云、圆角卡片、青蓝渐变主色调、轻盈通透的APP界面风格,重新生成一个智慧园区设备管理APP页面,手机竖屏界面,顶部状态栏显示时间9:41和信号电量图标。

页面结构如下:
1. 顶部横向Tab栏:区分三大业务模块「设备」「安全」「能耗」,当前停留「设备」板块并高亮显示。
2. 顶部筛选信息栏(蓝色通栏卡片):
   - 空间选择器:演示园区 / 1号楼 / 3层,带下拉箭头可切换楼栋楼层
   - 运行等级:A级
   - 数据更新时间:06-24 15:36
   - 统计周期切换:今日 / 近7天 / 近30天,默认选中「今日」高亮
   - 右上角有刷新按钮
3. 核心指标四宫格(关键KPI卡片,圆角白色卡片):
   - 设备总数:126台,小字说明当前空间纳管全部设备数量
   - 在线率:94.4%,小字标注较昨日上升1.2%(绿色向上箭头代表向好)
   - 故障设备:7台,小字标注其中2台待处理(红色警示,重点工单)
   - 离线设备:5台,小字标注最长离线时长41天(黄色预警)
4. 设备状态分布·环形饼图模块:
   - 标题:设备状态分布
   - 环形饼图展示四类状态占比:在线119台(绿色主体)、维保中8台(橙色)、故障7台(红色)、离线5台(浅灰色)
   - 右侧图文对照图例说明
5. 设备事件趋势柱状图模块:
   - 标题:设备事件趋势(今日)
   - 不同颜色柱子区分事件类型,展示全天不同时段设备事件发生频次,红色柱体有明显峰值代表故障类事件集中时段

色彩预警体系:绿色代表正常向好,橙色代表维保提醒,红色代表故障高危,灰色代表离线闲置。整体保持参考图的清新柔和、圆角卡片、渐变色彩、轻盈通透的UI设计风格,界面简洁现代,数据清晰易读,符合运维人员浏览习惯。