UI/UX Portfolio · 政务与产业数字化

向慧

资深视觉 / UI 设计师 · 政务与产业数字化方向
9 年从业经验
本科学历
全链路大屏 · Web · 移动端
数据可视化大屏 · 强项 擅长 · 政务方向 工具演进 · PS → Figma 组件化 → AI
SCROLL
01 CAPABILITIES

擅长什么

五大能力标签——第一项是长期打磨的强项。
核心强项

数据可视化大屏

政务驾驶舱、指挥调度、预警决策大屏,深色科技风 + 层级平衡,面向 1080P 至 11520×2160 超宽远读,决策者「一眼可达」。

盐城驾驶舱四川地灾决策智慧交通调度
代表作品 · 向下滑动查看项目 01/04/05
C2

政务 B 端后台

复杂业务表单、审批流、地图联动,兼顾效率与业务理解。

用途管制 · 资产清查 · 三维地籍
C3

移动端 APP

确权登记、住房保障、外业采集、执法巡查,适配真实作业场景。

政务确权 · 地灾监测 · 消防巡检
C4

图标与设计规范

主导 GL_WebUI V3·V4 与 SuperMap 规范,色彩 / 布局 / 组件体系完整。

GL_Web V3→V4 · SuperMap V1.0
C5

Figma 组件化 · AI 辅助设计

组件库 + AI 生图融入真实流程,更快地交付高质量界面。

Figma 团队库 · Figma AI · 即梦 AI
02 EVOLUTION

工具演进 · 完整的迁移实证

Tool Evolution with full migration proof
2020→2025 完整迁移,每一步都有落地项目背书。
2020 — 2023
Phase 1 · 传统出图

PS 为主

以 Photoshop 为核心出图,兼顾 Axure 原型与蓝湖协作,打牢设计基本功。

PhotoshopAxure蓝湖
2024
Phase 2 · 组件化转型

Figma 组件化 / 自动布局

完成 PS → Figma 全流程迁移,以设计系统支撑多项目并行交付。

Figma 组件自动布局团队库
2025
Phase 3 · AI 提效

Figma AI / 即梦 AI

将 AI 辅助生图融入实际设计流程,探索「AI 提效 + 人工精修」新工作流。

Figma AI即梦 AI 生图低代码平台落地
完整迁移实证

贯穿 2020→2025 的工具演进,每步都有落地的真实项目背书。

  • 蓝湖 → Figma 协作模式过渡
  • 临沂地籍项目 · 组件抽取复用
  • 低代码平台登录页 · AI 生图落地
  • 数据中台图标 · AI 辅助生成
PROJECT 01 — 数据可视化大屏
盐城市城市驾驶舱
政务大数据可视化 · 资源分舱设计
⤢ 点击放大盐城城市驾驶舱-总舱
政务大数据可视化 · 一屏统览自然"资源全域态势"
「总舱 + 分舱」体系化设计,覆盖六大自然资源,解出地下管线、调查监测、确权登记、空间规划等分舱,形成可复用的政务大屏语言。

业务需求

面向决策层一屏统览全市自然资源家底:数据多维、层级深、政务大屏远距离阅读需保持清晰。
01

海量数据

六大资源、多区县点位、实时案件

02

深层级

总舱 → 分舱 → 专题逐层钻取

03

大屏远读

远距离阅读,信息「一眼可达」

04

统一语言

多分舱共享同一套视觉与组件规范

设计目标

建立体系

总舱+分舱统一视觉框架,多专题可扩展复用

突出数据

弱化装饰、强化数值,图表服务于决策

地图为核心

市域地图为信息主轴,点位+统计联动

远读可用

大字号高对比,满足 1080P 大屏远观

分舱体系展示

九个分舱共享同一套配色、图表样式与版式骨架——点击任意一张放大查看。

地下管线分舱 · 管网监测11520×2160 超宽
调查监测分舱
确权登记分舱
空间规划分舱
生态修复分舱
用途管制分舱
耕地保护分舱
开发利用分舱

设计亮点

体系化分舱设计语言

9 屏分舱共享同一套配色、图表样式与版式骨架,专题扩展只需替换数据模块,保证多舱视觉高度统一。

地图 + 统计双主轴

中央市域地图承载空间信息,两侧面板承载统计与案件列表,空间维度与数值维度互为补充。

超宽屏适配

面向 11520×2160 拼接大屏设计,模块化栅格保证任意裁切段都可独立阅读。

数据分级配色

建立 8 色数据配色规范(#468BFF / #2FC688 / #FFA666 / #F06D66 等),超 8 项循环复用,避免颜色杂乱。

PROJECT 02 — 三维 GIS 系统
三维地籍管理平台
三维地籍 · 实景三维 · 空间分析
⤢ 点击放大三维地籍管理平台
基于实景三维地图的「宗地 — 房屋 — 户室」立体管理,支撑合肥、亳州等确权登记项目落地。
资源目录 · 分层加载与图层控制
权属变更 · 历史关系图 / 图形对比
空间分析 · 批而未供专题分析
不动产信息 · 立体管理
三维分析 · 坡度坡向分析

业务需求与设计思路

三维空间管理在实景三维地图上叠加宗地、房屋、户室实体,支持空间分析、属性识别、专题统计
分析工具集上传 / 手绘 / 多边形划定分析范围,按不动产单元多维统计
深色科技风格对比竞品、明确需求后确定深色三维风格,突出模型本体与数据层次
从原型到落地完成整套产品页面设计,配合开发切图标注,合肥 / 亳州项目按期上线
PROJECT 03 — 复杂业务系统
地籍 · 资产清查 · 用途管制
地籍 · 资产清查 · 用途管制 · 政务业务域设计矩阵
同一政务域下多个大型系统,覆盖自然资源资产管理与国土用途管制全流程审批。

广东省自然资源厅 · 国土空间用途管制

从策划生成到竣工验收的全流程审批状态可视化,支持合卷、会审、补正、退件等复杂流转。

项目全流程审批 · 全阶段状态流转(广湛高铁)
综合受理窗口
国家指标总览 · 计划指标管控
工作中心 · 经办任务

全民所有自然资源资产信息管理平台

土地资产分析
矿产资源资产分析
PROJECT 04 — 预警决策大屏
四川省地质灾害决策支持系统
风险隐患 · 监测预警 · 应急支撑
⤢ 点击放大
以四川全域地图为核心,集成隐患 / 灾情 / 责任 / 突发四大模块 + 预报预警,实现「监测—预警—响应」闭环。

隐患立体感知

隐患点 19,381 处、威胁人数 90.53 万,全量纳入一屏管理

专业监测

监测点 9,721 个、设备 28,077 台,在线率实时可见

四级预警

红 / 橙 / 黄 / 蓝等级预报与覆盖区域联动

响应闭环

预警短信、隐患排查、转移人员、预警抽查全链路跟踪

预警响应详情 · 预警短信与转移人员跟踪
PROJECT 05 — 指挥调度大屏
智慧交通指挥调度
城市级交通应急指挥调度
⤢ 点击放大
城市级交通应急指挥:事件监测、预案管理、缉查布控、警力调度一体化,3440px 超宽大屏。
事件处置与预案联动
警力资源与任务执行状态
PROJECT 06 — 平台型产品 · AI 提效
智能低代码应用构建平台
2025 · AI 辅助生图落地
2025 最新项目,浅色体系 + AI 辅助生图落地,探索「AI 提效 + 人工精修」新工作流。
登录页 · AI 辅助生图即梦 AI
首页 · 平台整体布局
应用中心
数据管理
大屏组件库GEN-VIZ
服务编排
PROJECT 07 — 数据中台
江苏省规划设计集团数据中台
2025 · 数据资产全生命周期管理
⤢ 点击放大
统筹九大能力域的数据中台,以「数据资源一张图」支撑全域数据治理与业务赋能。

六类资源统筹

数据 / 服务 / 指标 / 算子 / 模型 / 应用统一管理

表级血缘

数据血缘关系模型,追踪来源与流向

全域检索

跨域数据 / 服务 / 知识统一检索

应用搭建

低代码搭建可视化应用,自助取数

资产统计 · 5.2TB
关系模型 · 表级血缘
全域检索
资产管理
应用搭建
登录页 · 品牌首屏
08 MOBILE

移动端 · 场景化 APP 设计

Mobile Applications for real field work
覆盖确权 / 住房 / 地灾 / 巡检等真实作业场景。

住房保障服务平台

保障首页
一房一价列表
房源详情

互联网 + 农房确权(政务 APP)

确权首页
户主信息填报
地籍调查信息

地质灾害防治移动端

管理版总览
雨量预警信息
群测群防巡排查

消防巡检 APP

巡检首页
设备管理
NFC 巡检任务
09 DESIGN SYSTEM

设计规范 · 体系的搭建者

GL_Web UI V3·V4 / SuperMap UI
主导 GL_WebUI V3→V4 与参与 SuperMap 统一规范,全体系组件。

GL_Web UI 设计规范 · V3 / V4

覆盖全局样式、色彩体系、布局体系与组件规范,作为 UI 设计师与前端工程师的共同语言,保障多产品线视觉一致性。

色彩体系

品牌色
#337AF0
成功
#2FC688
错误
#F14444
警告
#FFA400
信息
#1B72E3
标题
#191C23
中性灰
#BCBFC3

功能色专色专用:蓝=进行/信息,绿=成功/通过,橙=警告/暂停,红=错误/退回。文字层次由标题 → 正文 → 次要 → 禁用逐级降透明度。

布局体系

L

自适应布局

12 栅格,左侧菜单 226px,顶栏 64px

I

图标菜单布局

适配 1920 / 1440 / 1366

SuperMap 统一 UI 设计规范 · V1.0

以「全局组件」为核心基础设施,跨产品、跨平台标准化复用,覆盖设计原则、设计语言、系统布局、颜色、字体、按钮、图标等全局性标准。

F

固定宽度布局

门户 / 资讯站点

R

栅格与间距

8px 基准,整齐可预测

全局组件 · 统一设计语言定义
颜色体系 · 品牌色与功能色
字体体系 · 字号与字重层级
导航组件 · 菜单与分页
数据录入组件 · 输入框 / 表单
数据展示组件 · 表格 / 图表
反馈组件 · 进度 / 提示 / 对话框
10 WORKFLOW

组件化与效率 · 关于我的工作方式

Component-driven Efficiency & About
9 年专注政务与产业数字化,累计支撑 50+ 项目落地。

组件抽取复用

从地籍项目页面抽取可复用组件,快速适配到临沂地籍新项目,高效高质量完成交付

Figma 团队协作

完成蓝湖 → Figma 协作模式过渡,设计 / 交付 / 开发全流程高效协同

AI 辅助设计

Figma AI、即梦 AI 生图融入日常设计:组件图标、登录页插图等场景落地

设计资产库

沉淀 G 端产品 UI 设计资产库(Figma 团队库),多项目共享

THANKS FOR WATCHING

保持热爱 · 全力以赴

Thanks for Watching · Xiang Hui · UI/UX Designer · 2025
UI PORTFOLIO · XIANG HUI · 2025