基层政务管理系统 · WEB 端 — JO 作品集案例

Gov · Web · Data

Grassroots Government

Grassroots
Government

Multiple systems and many roles, brought into one unified workspace.

One portal for every village office.

基层政务管理系统 · WEB 端

UI/UX Design · 2024 — 2025

Scroll to explore ↓

01

Project
Overview

需求背景

「 一个入口 · 一个底座 · 一个出口;
让基层的数据自己会说话。」

面向基层党政机关的数字化办公协同平台。基层办公长期被三个「老难题」困住:党建、表单、文件、台账散落在不同系统里,一人多账号反复登录,找不到「现在该办什么」;上级要数据、基层手工填,同一份数据在不同科室反复录入,口径不一、汇总靠人;采集上来的数据堆在表格里没有沉淀,缺少能看的驾驶舱。

平台用「统一门户 + 低代码表单 + 数据底座 + 可视化大屏」把这三点逐一拆掉。登录即看到工作台:数据概览、通知公告、公示公告、待办协同、我的日程与督办排名在同一页面上横向铺开,多端进入统一一致;事项办结、数据上报从数天压缩到分钟级,报表汇总由系统代劳。

客户 · 叶盛镇 · 基层政务数字化平台

My Role
UI Designer
Year
2024 — 2025
Type
政务协同 · 低代码
Platform
Web 控制台 + 可视化大屏

Core Concept · 与 ERP 的差异

Unified
workspace.

从多个系统 → 一个统一工作台

01

Dashboard

数据概览:一屏看到全镇态势与关键指标。

02

Tasks

待办协同:现在该办什么,按角色排序呈现。

03

Messages

通知公告与公示公告:同一入口,分类触达。

04

Calendar

我的日程:会议、督办与上报节点统一排期。

05

Applications

事项办理:低代码表单收口到统一门户。

06

Data

督办排名与驾驶舱:沉淀数据,替代人工汇总。

这个项目的难点不是业务复杂度,而是「信息 + 角色」的双重复杂:同一个入口,不同角色看到不同工作台,底层数据始终同源。

Design Focus · 设计重点

  1. 01

    Navigation & Hierarchy

    应用多、层级深,干部找不到「现在该办什么」。

    统一工作台把待办、消息、常用应用横向铺开,一级直达。

  2. 02

    Form Consistency

    低代码自建表单,业务科室一多样式就失控。

    表单引擎统一默认组件与字段规范,自建应用自动继承。

  3. 03

    Data Readability

    工作台与大屏数据口径不一,容易被误读。

    指标卡统一「数值 + 同比 + 单位」,只有异常才用色。

统一门户
党建、表单、文件、台账收进一个工作台,「待办、消息、常用应用」一眼可见,干部不再跨系统找入口。
低代码底座
数据字典 + 表单引擎 + 数据源连接,业务科室不写代码也能搭出采集与上报应用,重复填表变成一键复用。
大屏出口
采集的数据沉淀成台账,一键接入可视化大屏,把表格变成能看、能讲、能辅助决策的驾驶舱。
工作台 · 首页模式
01 / Workbench工作台 · 首页模式 —— 数据概览 / 通知公告 / 公示公告 / 待办协同 / 我的日程 / 督办排名同屏铺开
工作台 · 大屏模式
02 / Big Screen工作台 · 大屏模式 —— 横向进度 115 / 468 / 72,模块布局自适应大屏终端

From scattered
tools to one portal.

02

Core
Capabilities

平台能力全景

One portal.
Eight modules.

「 一套平台 · 八大模块 」
平台围绕「入口统一、数据贯通」组织模块:门户收拢高频应用,表单引擎承接基层上报,数据源与可视化让台账真正会说话。从登录到办结,每一次操作都落在统一的菜单与权限框架内——减负而不减监管。

  1. 01
    统一门户

    登录认证 · 菜单框架 · 组织与权限,一个入口进全部应用

  2. 02
    应用中心

    应用聚合 · 按需开通 · 统一授权,各区县乡镇按角色可见

  3. 03
    党员在线

    党组织上图 · 关怀对象 · 学习与活动留痕

  4. 04
    低代码表单

    表单管理 · 字段配置 · 数据字典,业务科室自建自助

  5. 05
    数据源连接

    库表接入 · Excel 导入 · 字段映射与连接管理

  6. 06
    可视化大屏

    图表组装 · 多屏驾驶舱 · 时间/地区/文本/条件下钻

  7. 07
    文件协同

    云盘台账 · 共享目录 · 权限隔离 · 更新留痕

  8. 08
    智能问数

    菜师兄公智分析 · 后稷大模型 · 预测报告 PDF 下载

03

Design
Principles

设计思路

01

One entry,
one login.

一个入口

统一登录与门户框架:工作台整合「待办、消息、常用应用」,登录即见当天要办的事。账号体系统一后,干部一次登录即可进入全部已开通应用,配合新式顶部导航形成「登录 — 门户 — 应用」的完整体验链路。

02

One foundation,
no code.

一套底座

数据字典 + 低代码表单 + 数据源连接,让业务科室不写代码也能搭出采集与上报应用。表单管理、字段配置、数据字典到数据预览全链路自助,业务方自行搭表、发布、看数据,不再依赖开发排期。

03

One exit,
a dashboard.

一个出口

数据沉淀后一键接入可视化大屏,把台账变成能看、能讲、能辅助决策的驾驶舱。基于「预警标准表 + 区域积温与气象数据」还能搭出专题页,网格员对照条件即可判断当前是否进入孢子萌发期。

04

Errors,
handled well.

出错也体面

面向不一定熟悉系统的基层干部,404 与空态页需要「说明原因 + 给出出路」:404 保留品牌元素并引导返回门户;空态插画让「还没有数据」不再是冰冷的一行字,而是一句带着下一步动作的提示。

04

The
Interface

界面走查

「 从登录到办结,一步不多 」

每一次操作都落在同一套菜单与权限框架内。

01 · Login

Login &
portal.

统一登录 · 单点进门户

登录页承载平台的第一印象:红金政务底纹与国徽元素传递严肃可靠的气质,并提供微信扫码与账号密码两种登录方式。

账号体系统一后,干部一次登录即可进入全部已开通应用,配合新式顶部导航形成「登录 — 门户 — 应用」的完整体验链路。

登录页 · 微信扫码版
登录页 · 账号密码版
顶部导航栏(新版)

登录页 · 微信扫码版 —— 微信扫码登录 · 叶盛镇平台

登录页 · 账号密码版 —— 国徽红金底纹 · 账号密码登录

顶部导航栏(新版) —— 一级菜单横向展开 / 收起,可切换竖排布局

02 · Framework

Menu
framework.

菜单框架 · 让层级一目了然

一级菜单横向展开 / 收起、可切换竖排布局;进入二级菜单后采用统一的功能页容器,列表、筛选、操作按钮位置一致。

干部在不同业务间切换时,操作成本趋近于零——不用重新学习每个模块的界面语言。

框架 · 一级菜单收起
框架 · 二级菜单 框架 · 二级功能页面

框架 · 一级菜单收起 —— 收起态为内容区让出更多空间

框架 · 二级菜单 —— 分组承载各业务子模块

框架 · 二级功能页面 —— 工作库 · 信息采集,统一的功能页容器

03 · Workbench

Today’s
to-do.

统一工作台 · 一屏直达当天要做的事

「 首页模式 / 大屏模式自适应 」数据概览、通知公告、公示公告、待办协同、我的日程与督办排名在同一页面上横向铺开,多端进入统一一致。

无论是挂在办公室显示器还是政务服务大厅大屏,模块布局自适应终端,让乡镇干部不切应用也能一站办结。

工作台 · 门户框架
框架 · 竖排布局测试 应用系统 · 列表管理

框架 · 一级菜单展开 —— 展开态完整展示职能模块,一级菜单即「工作台」

框架 · 竖排布局测试 —— 大屏 · 竖排导航测试

应用中心 · 应用系统列表 —— 系统名称 / 状态 / 创建人统一维护

05

Complete
System

界面全览

Every module.
One system.

门户、党建、表单、底座、大屏、文件与 AI——每个模块都共用同一套菜单与权限框架,后台维护清单、前端按角色呈现,数据只录一次、多端复用。

Applications & Party Building · 应用01

应用中心 · 党员在线

「 按需开通 · 统一授权 」平台内置党建、政务、业务等多个领域的标准化应用,各区县 / 乡镇按需开通、统一授权。后台「应用系统」集中维护应用清单,按名称、状态与创建人检索,新增 / 编辑 / 停用均带二次确认。

「党员在线」是平台首个高频应用:党组织、党员、流动党员与关怀对象统一上图,年龄结构、党籍分布一目了然。红色系标识在整套蓝色系统中承担「党建优先」的强调语义,让党建管理从纸质台账走向数据化、常态化。

应用系统 · 列表管理
01 / Apps应用系统 · 列表管理 —— 系统名称 / 状态 / 创建人统一维护
应用系统 · 编辑与确认弹窗
02 / Dialog应用系统 · 编辑与确认弹窗 —— 新增 / 编辑系统 + 停用删除二次确认
党员在线 · 党建数据面板
03 / Party党员在线 · 党建数据面板 —— 党员数据概览与群体结构
党员在线 · 关怀对象空态
04 / Empty党员在线 · 关怀对象空态 —— 列表不足时以插画空态承接

Forms Engine · 表单02

表单引擎 · 采集不求人

「 面向基层最频繁的填表场景 」表单管理、字段配置、数据字典到数据预览全链路低代码:选表后配置字段别名、类型与是否显示,回收数据实时可查。业务科室自行搭表、发布、看数据,不再依赖开发排期。

上级要数据时,基层不再手工填第二遍——同一份数据在不同科室之间一键复用,口径由数据字典统一,汇总由系统代劳。

  1. 01
    表单管理

    表单列表与状态 · 添加成员与权限 · 发布即用

  2. 02
    字段配置

    选表后配置字段别名 / 类型 / 是否显示

  3. 03
    数据字典

    统一口径 · 新增与维护字典项

  4. 04
    信息采集

    我发布的 / 我参与的,采集任务分 Tab 管理

  5. 05
    进度跟踪

    采集详情 · 进度全览,谁交了、谁没交一目了然

  6. 06
    数据预览

    空态给出刷新入口与引导,回数后按列展开明细

表单管理 · 应用列表
01 / Forms表单管理 · 应用列表 —— 表单与状态一览
表单管理 · 添加成员弹窗
02 / Members表单管理 · 添加成员弹窗 —— 谁可以填、谁可以看
信息采集 · 我发布的
03 / Collect信息采集 · 我发布的 —— 采集任务分 Tab 管理
信息采集 · 详情及进度
04 / Progress信息采集 · 详情及进度 —— 进度全览
数据字典 · 新增
05 / Dictionary数据字典 · 新增 —— 口径统一,重复填表变一键复用
数据表单 · 字段配置
06 / Fields数据表单 · 字段配置 —— 别名 / 类型 / 是否显示
数据预览 · 空态
07 / Empty数据预览 · 空态 —— 尚未回数时给出刷新入口与引导
数据预览 · 明细
08 / Preview数据预览 · 明细 —— 字段按列展开,回收数据实时可查

Data Foundation · 底座03

数据底座 · 连接即用

「 采集只是开始 」通过数据源向导接入现有业务库或表单,数据即可统一汇聚、统一口径,为后续统计分析、大屏展示提供实时、可信的数据底座。数据库接入与 Excel 导入两条建仓路径并列。

新建数据源 · 类型选择
01 / Source新建数据源 · 类型选择 —— 数据库接入 / Excel 导入两条路径
新建数据源 · 内容设置
02 / Map新建数据源 · 内容设置 —— 选表后配置字段别名 / 关联 / 预览
数据连接 · 连接管理
03 / Connect数据连接 · 连接管理 —— 多数据源统一维护,名称 / 类型 / 状态可查

Data Screen · 大屏04

可视化大屏 · 台账变驾驶舱

「 一屏讲清辖区情况 」基于沉淀的数据底座搭建专题大屏:批量配置、模板复用、逐屏编排。大屏上的每个图表都支持按 时间 / 地区 / 文本 / 条件 四类维度做数据筛选,先圈定范围再层层下钻,确认后立即回写图表。

专题大屏还能承接业务知识:基于「预警标准表 + 区域积温与气象数据」把发病机理(湿度 × 温度 × 持续时间)、分阶段防治预案与图像素材整理成一屏可讲的报告,配合长文目录导航,网格员对照条件即可判断当前是否进入孢子萌发期 / 病害爆发期。

01
批量配置
02
模板复用
03
逐屏编排
04
时间筛选
05
地区筛选
06
文本筛选
07
条件筛选
08
图表下钻
09
数据回写
大屏设置 · 画布编辑器
01 / Canvas大屏设置 · 画布编辑器 —— 画布与批量配置
大屏设置 · 图表状态
02 / Chart大屏设置 · 图表状态 —— 选中折线图组件,未挂数据时的画布态
晚疫病 · 发病条件预警页
03 / Alert晚疫病 · 发病条件预警页 —— 各病情阶段的湿度 / 温度 / 持续时间阈值
晚疫病 · 全篇幅预警报告
04 / Report晚疫病 · 全篇幅预警报告 —— 预防措施 + 初/后期防治 + 循环侵染图 + 症状图
数据筛选 · 时间范围
05 / Time时间筛选 —— 年 / 月 / 月日、粒度与快速范围配置
数据筛选 · 地区范围
06 / Region地区筛选 —— 全部区域 / 指定区域
数据筛选 · 文本筛选
07 / Text文本筛选 —— 包含 / 排除 + 关键字录入
数据筛选 · 条件筛选
08 / Condition条件筛选 —— 字段比较与多条件组合

File Collaboration · 协同05

文件协同 · 流转留痕

「 替代微信传文件的口径混乱 」街道、社区间的通知、台账与材料通过共享文件在线流转:组织内共享空间、文件夹详情、动态留痕与「我的文件」收藏。干部可按项目或主题把常用文件夹归入左侧分组,右侧列表配合搜索与新建文件夹,让台账、照片、报告按个人节奏归档。

配合公开范围配置,文件同时支持部门共享、个人持有、按小组可见等多种管理方式,谁上传、谁查看都有留痕。

共享文件 · 组织目录
01 / Shared共享文件 · 组织目录 —— 按科室组织共享空间
共享文件 · 目录视图
02 / Topic共享文件 · 目录视图 —— 主题分组
文件夹 · 全部文件
03 / Files文件夹 · 全部文件 —— 材料按文件夹归拢
文件夹 · 全部动态
04 / Activity文件夹 · 全部动态 —— 谁上传、谁查看,动态留痕
我的文件
05 / Mine我的文件 · 列表 —— 个人持有与收藏
云盘 · 我的文件 · 分组树视图
06 / Groups云盘 · 我的文件 · 分组树视图 —— 自定义分组归档
共享文件 · 执行列表
07 / Access共享文件 · 执行列表 —— 成员对共享文件夹的访问与操作明细
我的文件 · 新建/重命名弹窗
08 / Dialog我的文件 · 新建 / 重命名弹窗 —— 轻量操作不跳页

AI Assistant · 问数06

菜师兄 · 智能问数

「 问一句就拿到答案 」当数据沉淀到台账之后,最自然的交互是提问。平台在「AI 问」入口内置两套智能体:面向政务的「菜师兄公智分析」与面向农业的「菜师兄公智大模型」(联合中国农业大学后稷大模型)。前者把政策拟稿、数据问数、知识库查询做成一问一答;后者按「城镇 × 作物」自动生成番茄、马铃薯、玉米等作物病虫害与产量预测报告。

干部只需要选择「城镇 + 作物」,模型自动生成结构化报告,支持在线查看、历史回顾与 PDF 下载存档,把田间数据变成可归档、可汇报、可决策的成果。

菜师兄公智大模型 · 农业分析
01 / Model菜师兄公智大模型 · 农业分析 —— 左侧常用功能可重命名 / 删除;右侧三段式问答:问题 + 提交数据 + AI 回答
菜师兄公智分析 · 智能问答主入口
02 / Entry智分析 · 主入口 —— 政务问答 / 知识库查询
智分析 · 对话与代码块输出
03 / Chat智分析 · 对话与代码块输出 —— 数据分析过程透明可查
病虫害预测报告 · 城镇与作物选择
04 / Select病虫害预测报告 · 选择 —— 「请选择城镇 + 请输入或选择作物」+ 查询 / 下载 PDF / 重置
病虫害预测报告 · 生成
05 / Report病虫害预测报告 · 生成 —— 病害与虫害两套模板,自动生成报告卡片网格

States · 空态07

异常与空态 · 出错也体面

「 说明原因 + 给出出路 」面向不一定熟悉系统的基层干部,404 页面保留品牌元素并引导返回门户;空态插画让「还没有数据」不再是冰冷的一行字。统一插画语言贯穿各模块空态,语气亲切、给出下一步动作建议,大屏图表组件未绑定数据时同样以占位说明避免留白。

404 · 引导页
01 / 404404 · 引导页 —— 大标题 + 插画 + GO HOME 返回门户
暂无记录空态插画
02 / Empty暂无记录 · 插画空态 —— 统一插画语言,给出下一步动作建议
大屏图表 · 无数据空态
03 / Screen大屏图表 · 无数据空态 —— 图表未绑定数据时的占位说明

06

A Moment
in the Day

基层干部的一天

08:30

从打开工作台开始

乡镇干部的一天从工作台开始:先看数据概览与通知公告,再认领待办协同与督办排名,最后把当天的采集任务分包给各科室——所有动作都在同一套菜单与权限框架里完成。原先要在三四个系统之间来回登录、手工誊抄的流程,现在压缩在一屏之内。

01工作台 · 数据概览 / 通知公告 / 待办协同同屏铺开
02应用中心 · 按需开通的标准化应用,按角色可见
03信息采集 · 分包到科室,进度与办结实时可查

Step 01 · Workbench

打开工作台

今天该办什么,登录即见:待办、通知、日程与督办排名在同一屏。

工作台 · 首页模式

Step 02 · Assign

发布采集任务

用表单引擎搭好采集表,一键发布给各科室;谁可以填、谁可以看由成员权限决定。

信息采集 · 我发布的

Step 03 · Collect & Report

跟进进度、汇总上报

回收数据实时可查,报表由系统自动汇总,需要时投上大屏讲给领导听。

信息采集 · 详情及进度

07

Outcome

成果与沉淀

Less paperwork.
More insight.

上线后,党建、采集与办公从「纸质台账 + 手工汇总」转向在线闭环:事项办结与数据上报从数天压缩到分钟级,基层重复填表的次数被系统抹平,沉淀下来的台账又能重新服务于决策。

党建在线化
组织生活、党员学习从台账走向常态在线,党组织与党员上图,指尖即可完成。
报表少跑腿
数据字典统一口径、表单自建自助、采集自动汇总,释放基层人力。
数据会说话
表单与数据源沉淀出真实台账,可视化大屏让治理成效看得见、讲得清。

More Screens · 更多界面走查08

台账数据 · 结构化与留痕

云盘里的农作物经济台账把数据按地区与农林牧渔分项产值结构化展示,每条数据都记录更新前值 / 更新后值 / 来源 / 更新人,既看得懂,也追得到。

云盘 · 农作物经济台账 · 数据预览
01 / Ledger云盘 · 农作物经济台账 · 数据预览 —— 按地区 / 农林牧渔分项产值结构化展示
云盘 · 农作物经济台账 · 更新说明
02 / Trace云盘 · 农作物经济台账 · 更新说明 —— 更新前值 / 更新后值 / 来源 / 更新人留痕