2024 — 2025 · 全流程 UX/UI 设计

郑州市房屋安全
信息化监管平台

体验升级设计 · 守护 ~2506 万幢既有房屋的数字化安全防线

~2506万
幢既有房屋
12
个章节
APP+PC
双端体验
4
大设计策略
团队唯一设计师 · 全流程 UX/UI 设计
向下滚动探索
CH1 · 背景与研究

背景与挑战

截至 2024 年,郑州市排查录入的房屋总数约 2506 万幢。住建部要求推进既有房屋安全管理信息化,实现排查数据的统一采集、动态更新与风险预警。

"排查员在烈日下拿着纸质表格逐户登记,回到办公室再手动录入系统,一次排查要花两天。"

— 一线排查员访谈

效率低下

排查员需要 2~3 步跳转才能开始工作,纸质表格 + 手动录入双重负担

数据孤岛

APP、PC、GIS 多系统割裂,数据不互通,管理人员无法全局掌控

角色复杂

排查员、管理层、决策层三类用户需求差异大,一套界面无法满足

3 类用户角色|2506 万幢房屋|70+ 字段表单|4 大核心系统
CH1 · 用户研究

三类核心用户

通过现场观察、深度访谈与问卷调研,梳理出三类关键角色的使用场景与核心痛点。

👷

王师傅

Primary

APP 端排查员

"我只想快点拍完照片提交,别让我填那么多表。"

日均排查 20+ 栋房屋,在烈日/雨天户外作业。核心诉求:快、准、少打字。

📊

李科长

Secondary

PC 端管理人员

"我需要看到所有街道的排查进度,哪里没完成一目了然。"

管理 3~5 个街道的排查任务,需要进度追踪与异常预警。

🏛️

张局长

Decision

决策层用户

"我想知道哪些房屋是 C/D 级,风险最高的在哪里。"

关注全局风险态势,需要直观的数据大屏与风险热力图。

CH2 · 策略与方向

四大设计策略

North Star Metric

排查员完成一栋房屋排查的时间
45 分钟降至 15 分钟

降低 67%,释放人力处理更多房屋

S1

地理赋能

矢量图斑 + 图层筛选 + 离线瓦片,用测绘底库的 GIS 能力解决排查员「找不到房子」的根本痛点。

S2

任务驱动

从"找功能"到"做任务"的范式转变。系统主动推送今日待办,按紧急度排序,点击即开始。

S3

信息分层

按角色、场景动态展示信息密度。排查员看任务卡片,管理层看进度报表,决策层看风险态势。

S4

防错设计

系统预填 + 逻辑校验减少人工失误。关键字段自动带入历史数据,异常值实时拦截提醒。

CH2 · 信息架构

信息架构重塑

旧系统采用 4 个平级 Tab 作为首屏入口,新架构以任务驱动首页为核心,将高频操作前置。

Before旧版首页
4 个平级 Tab 图标
空白首页,无任务感知
2~3 步跳转才能开始工作
无进度反馈
After新版首页
任务驱动型工作台
待办按紧急度排序
1 步直达核心操作
顶部 KPI 实时反馈
CH3 · 解决方案

APP 首页:任务驱动工作台

从「空白入口页」到「今日待办驱动」— 打开即见任务,减少无效跳转

上下滑动查看

S2 任务驱动核心原则

系统主动推送「今天该做什么」,而非用户被动寻找入口。待办按紧急度排序(C/D 级危房置顶),每张卡片含位置信息和一键进入按钮。

解决的启发式问题

H2 效率性:2~3 次跳转 → 1 步直达

H3 认知负荷:70 字段无引导 → 首页告知目标和数量

H8 反馈缺失:无进度感知 → 顶部数据一目了然

核心设计决策

待办排序紧急度 > 时间 — C/D 级不等人
顶部 KPI3 项 — Fitts 定律 ±3
快捷入口4 格 — Hick 定律 90% 覆盖
卡片颜色红 > 橙 > 绿 — Von Restorff 效应
CH3 · 解决方案

引导式排查

70 字段 → 5 步引导,每步 ≤14 字段

旧版排查表单是一张包含 70+ 字段的巨型表,排查员需要反复翻页填写。新版将其拆分为 5 个逻辑步骤,系统预填已知信息,实时校验减少返工。

1

房屋确认

扫码 / 地图选点
自动带入地址信息

2

外观检查

结构类型 + 损伤等级
选择式交互

3

照片采集

必拍清单 + AI 补全
确保数据完整

4

数据补录

仅填写变更字段
智能差异检测

5

确认提交

汇总预览 + 一键提交
离线缓存保障

Step 1 · 基础信息确认
Step 2 · 安全状况判断
Step 3 · 现场拍照
CH3 · S1 地理赋能

GIS 地图排查模式

排查员反映最多的不是「表单太复杂」,而是找不到房子。城中村、农村的房屋既无门牌又无导航,光靠地址文字列表在现场毫无用处。既然公司有测绘图斑底库 + 自研空间引擎,就应该把这个能力用来解这个最难的痛点。

矢量图斑 + 离线瓦片 + 图层筛选 — 用测绘基因解决空间定位问题

矢量图斑

真实房屋轮廓多边形替代圆点标记,四色状态编码(绿/红/橙/虚线),GPS+图斑双重定位 ≤2m

图层筛选

按状态/危房等级筛选图层,锁定高优先级区域,目视规划最优排查路线

离线瓦片

全区瓦片本地预载,断网无感知切换,覆盖约 30% 信号弱区

CH3 · S3 信息分层

PC 端管理后台

面向管理人员的全局视图:街道级进度追踪、C/D 级房屋预警、数据报表导出。

housing-platform.zhengzhou.gov.cn/dashboard
数据概览 — 街道级进度追踪 + C/D 级预警面板
房屋详情 — 排查记录与审核状态
CH3 · S4 防错设计

销号审核流程

针对危房销号的高风险操作,设计多级审核机制,防止误操作导致安全隐患遗漏。

audit/hazard-ledger
隐患台账 — 全量隐患列表与状态追踪
audit/rectification-report
整治填报 — 隐患信息录入与整改提交
audit/detail-review
审核详情 — 逐项核验与批注确认
audit/cancellation-review
销号审核 — 多级审批与风险控制

设计说明

S3

信息分层 · 14列→7列

原始表格 14 列信息密度超标,排查员需横向滚动才能获取关键信息。重新梳理字段优先级后,将核心字段压缩至 7 列:地址 + 危险等级 + 当前状态 + 整治进度 + 剩余天数 + 操作。辅助字段(排查日期、排查员、房屋结构等)收纳至详情页,按需展开。

S4

防错设计 · 前置校验规则

销号审核是高风险操作,误销可能导致安全隐患遗漏。设计三重防错机制:① 系统自动校验整改完成度,未达标禁止提交;② 关键字段(鉴定等级、整改照片)强制填写;③ 审核意见预设模板 + 自由输入,降低漏审概率。

S2

任务驱动 · 内联筛选器

审核工作台的核心场景是「批量审核」,而非「逐条查找」。将筛选器(等级、状态、区域、时间范围)内联至表格顶部,审核员无需跳转页面即可快速定位待审批次。筛选条件实时生效,支持组合查询。

UX

交互优化 · 状态可见性

每个审核节点的状态用颜色编码(黄=待审、蓝=审核中、绿=通过、红=驳回),审核员一眼识别批次优先级。进度条可视化整治完成度,剩余天数用红/橙/灰三色预警,避免超期遗漏。

CH3 · 设计系统

设计系统

统一的视觉语言与交互规范 — 基于 APP首页、GIS地图、引导式排查、PC-Desktop、PC-Desktop-Detail 五组设计稿归纳提炼

1配色系统

背景色
Page BG
#fafafa
Page BG Alt
#f3f4f6
Section BG
#efefef
Card BG
#ffffff
文字色阶
Primary
#1a1a1a
Body
#333333
Secondary
#5e6166
Muted
#6e6e73
Placeholder
#94a3b8
Disabled
#b9babc
语义色
Danger
#ff3b30
Warning
#ff9500
Success
#34c759
Info
#007aff
语义色淡底
Red
Orange
Green
Blue

2字体系统

字体家族
PingFang SC — 主字体
自建房安全监管平台
Space Mono — Tab栏/数字
0123456789 ABCD
字号阶梯
10px
Tab栏标签 · 首页 地图 任务 我的
12px
辅助文字 · Badge · 标签 · 已拍 · 待排查
14px
表单标签 · 正文内容 · 房屋名称 建筑地址
16px
次级标题 · 任务卡片标题
18px
页面标题 · 信息采集
22px
A B C D 等级
32px
1,247

3圆角系统

核心风格: 移动端以 2px 为默认圆角;PC 端更激进,大量使用 1px。仅 Badge/Pill 使用全圆角。
0
1px
2px
6px
9999px

11阴影系统

shadow-sm
shadow-float
shadow-card
shadow-elevated
边框色
Light
#e0e0e0
Default
#cccccc
Muted
#eeeeee
PC Card
#e5e5e5

4按钮

主要按钮
次要按钮
尺寸

5Badge / Tag

实心 Badge
常规排查待补拍C级危房已拍进行中
描边 Badge
C级隐患B级隐患A级安全
矩形 Tag
地基基础异常承重墙体开裂结构变形

6Tabs

下划线 Tabs (PC端)
全部
排查
鉴定
整治
内容区域
步骤指示器 (移动端)

10表单

输入框
请填写到门牌号
安全等级选择
A
B
C
D
下拉选择

7卡片

基础卡片
排查记录
3 条
3
第三次排查 · C级隐患
已整改完成
加固施工中45%

9图标

常用图标
搜索
定位
文档
时间
检查
通知
用户
警告
SVG 线性图标 · stroke-width: 1.5-2px

13PC 侧边栏导航

房屋安全监管
数据概览
房屋管理
排查任务
排查人员

14PC 统计卡片

已排查房屋
1,247
12%
危房数量
7
-2
待处理任务
23
5%
完成率
89%
3%
CH4 · 验证与反思

验证成果

67%

排查时间缩短

45min → 15min

4.3

用户满意度 /5

原 2.1 → 4.3

60%

完成率提升

一次提交成功率

验证方法

可用性测试

招募 8 名真实排查员进行任务测试,记录完成时间、错误率与满意度评分。

启发式评估

基于 Nielsen 10 项启发式原则逐条评估,验证设计决策的问题解决度。

A/B 方案对比

首页改版前后对照测试,量化任务驱动 vs 功能入口的效率差异。

专家走查

邀请 3 名 UX 专家进行认知走查,识别潜在交互盲点。

项目反思

政务系统设计需要在规范性与易用性之间找到平衡点——既满足上级数据报送要求,又不让基层人员疲于填表。

现场网络环境差是政务 APP 的常见痛点,离线缓存 + 增量同步的方案极大提升了数据可靠性。

多角色系统的信息架构需要角色感知的动态界面——同一入口,不同角色看到不同内容。