PORTFOLIO / 2021–2025 · UI / UX 设计师
作品概览
从产品界面，到数据体验。
围绕企业产品、移动体验、数据可视化与运营视觉，探索信息层级、设计系统与交互路径。
设计表达
- 01建立一致的设计规范，梳理复杂的产品信息。
- 02通过清晰的层级和操作路径，让界面更易使用。
- 03让数据图表、产品页面与视觉传播各有表达。
用 15 秒认识我的设计，再打开作品体验。
运营海报设计
WAIYEE DESIGN UI / UX 作品集
从产品界面， 到数据体验。
围绕企业产品、移动体验、数据可视化与运营视觉，探索信息层级、设计系统与交互路径。
2021–2025 · 作品实践
精选作品
四个设计领域。
00 / UI / UX DESIGNER
从产品界面，到数据体验。
围绕企业产品、移动体验、数据可视化与运营视觉，探索信息层级、设计系统与交互路径。
01
建立一致的设计规范，梳理复杂的产品信息。
02
通过清晰的层级和操作路径，让界面更易使用。
03
让数据图表、产品页面与视觉传播各有表达。
用 15 秒认识我的设计，再打开作品体验。
研发总览
成员总数128个
需求总数480个
任务总数860个
缺陷总数136个
迭代总数24个
应用总数18个
服务总数36个
制品总数240个
构建总数628个
部署总数315个
研发进度情况
未开始迭代 12进行中迭代 8已完成迭代 4
超期未完成迭代
◷
应用体验优化演示项目 · 本期迭代
45%◷
组件规范迭代演示项目 · 本期迭代
57%◷
测试流程优化演示项目 · 本期迭代
69%◷
交付协作迭代演示项目 · 本期迭代
81%缺陷严重程度
缺陷修复情况
92%修复率
一次修复
二次修复
三次修复
四次及以上
代码提交情况
代码扫描情况
96.8%质量门禁通过率
我的项目
我的工作项
标题优先级所属项目状态
代码库与合并请求
sample-apishared-componentsmobile-clientdelivery-tools
当前环境中的工作负载
api-service部署中
接口服务
更新于本次演示2 / 4
batch-worker部署成功
批处理服务
更新于本次演示2 / 4
event-collector部署成功
事件采集
更新于本次演示2 / 4
cache-service部署中
缓存服务
更新于本次演示2 / 4
scheduled-job部署成功
定时任务
更新于本次演示2 / 4
backup-worker部署成功
备份服务
更新于本次演示2 / 4
- 1填写基本信息
- 2代码库初始化
- 3制品仓库初始化
演示项目已创建
未开始2
进行中3
待验收2
已完成2
09:42:01 INFO Initializing sample workload 09:42:02 INFO Loading container configuration 09:42:03 INFO Health check passed 09:42:04 INFO Deployment ready · 2 running instances
UI × UX DESIGN
为什么改版
用户反馈，内部自查。从定义问题出发，将体验问题归纳到三个方向。
01
设计规范缺失，体验一致性差
02
层级布局乱，用户认知负担重
03
缺乏人性化引导和流畅交互体验
用户反馈页面加载慢界面复杂，操作繁琐不知道怎么用视觉规范不统一布局太乱了
设计目标
体验一致性
提高阅读效率
优化层级 信息降噪
提高查找效率
缩短路径 简化操作
提高操作效率
KR1沉淀新的设计语言，定义基础 Token
颜色 / 字体
品牌色#0060F0
#18B274#ED7B2F#E34D59
#161A1D#6A6D6F#A2A3A4#C6C8C9
中文苹方体
数字 / 英文Helvetica Neue
28 20 16 14 12 Regular · Medium · Semibold
进行中D
KR2优化层级，信息降噪
01
建立清晰框架，导航层级优化
全局模块与项目内导航分层，让扩展后的功能仍然易于定位。
02
工作台重构，视觉动线与信息聚类
“我的项目”置于左上；需求、任务、缺陷聚合为同一个模块，以标签页切换。
03
强化信号，弱化噪声
减少高饱和度状态色，让关键状态和主要操作获得更清楚的视觉权重。
1.0
→2.0
我的项目我的工作项 · 标签聚合迭代计划
KR3缩短路径，简化操作
01
操作直觉化
项目看板
02
高效获取，浏览与录入信息
右侧详情 + 底部日志
03
按需显示信息
基本信息 → 代码库 → 制品库
在“界面体验”中，可以实际切换工作台、查看部署详情和日志、完成三步项目创建。
协同产品
安全 · 高效 · 智能
研发管理平台
连接需求、协作与交付，让研发过程清晰有序。
覆盖项目、需求、任务、代码、测试与集成，在统一的工作空间里组织团队协作。
具体功能
工作台
工作任务，集中呈现
查看需求、任务与缺陷的待办，浏览参与的项目和代码仓库，让工作从一个清晰的入口开始。
待办与项目聚合，明确当前工作重点。
协作管理平台⌘
工作台示例项目
我的项目
项目 A
项目 B
项目 C
我的工作项需求 23任务 8缺陷 3
| 标题 | 优先级 | 所属项目 | 状态 |
|---|---|---|---|
| 完善首页信息层级 | 高 | 示例项目 A | 进行中 |
| 补充组件状态 | 中 | 示例项目 B | 未开始 |
| 检查关键交互反馈 | 中 | 示例项目 A | 已完成 |
需求、任务、缺陷的待办
| 标题 | 优先级 | 所属项目 | 状态 |
|---|---|---|---|
| 完善首页信息层级 | 高 | 示例项目 A | 进行中 |
| 补充组件状态 | 中 | 示例项目 B | 未开始 |
| 检查关键交互反馈 | 中 | 示例项目 A | 已完成 |
查看需求、任务、缺陷的待办
需求管理
覆盖协作的完整流程
将需求、评审、迭代与任务放在同一视图中，结合进度与详情，梳理团队协作过程。
需求与任务关联，进度可视化呈现。
协作管理平台⌘
需求管理示例项目
项目概况需求需求评审迭代任务
需求管理全部需求 · 24
| 需求标题 | 优先级 | 迭代 | 状态 |
|---|---|---|---|
| 导航结构优化 | 高 | 迭代 01 | 评审中 |
| 数据展示规范 | 中 | 迭代 02 | 开发中 |
| 异常状态反馈 | 中 | 迭代 02 | 已验收 |
需求 → 评审 → 迭代 → 任务
可视化项目进度
2025
040506070809
规划评审
交互设计
开发实现
验收发布
计划周期已完成进度
基本信息
- 项目名称
- 示例项目 A
- 项目状态
- 进行中
- 所属迭代
- 迭代 01
- 开始时间
- 2025-04-01
- 结束时间
- 2025-09-30
- 负责人
- 成员 A
需求全生命周期 · 可视化项目进度
测试管理
从计划到结果，清晰可见
在统一结构中组织测试计划、用例、任务与报告，让测试活动有明确的入口与状态。
用例、执行记录与结果保持关联。
协作管理平台⌘
测试管理示例项目
测试计划测试用例提测管理测试任务测试报告
测试用例全部 · 12
功能测试接口测试性能测试
| 用例标题 | 优先级 | 执行结果 |
|---|---|---|
| 登录与权限检查 | P1 | 通过 |
| 表单必填校验 | P1 | 未执行 |
| 空状态展示 | P2 | 通过 |
| 分页与筛选 | P2 | 需复测 |
测试用例详情
表单必填校验P1 · 未执行
- 前置条件
- 已打开创建页面
- 测试类型
- 功能测试
- 执行环境
- 测试环境
测试步骤 / 预期结果
- 留空必填项，提交表单。
- 展示校验提示，保留已输入信息。
测试计划、用例、任务与报告
代码管理
代码资产，统一管理
以仓库和分支组织代码资产，结合提交记录与合并流程，让代码管理的信息更容易浏览。
仓库与提交记录形成连续的阅读路径。
协作管理平台⌘
代码管理示例项目
代码仓库
⌄design-app
- README.md
- package.json
- src/
- components/
- tokens/
›ui-system
›client-service
design-app分支 · preview
preview3次提交
更新界面组件
a31f08 · 成员 A · 1小时前补充交互状态
b82d16 · 成员 B · 2小时前整理样式变量
c94e20 · 成员 A · 3小时前README.mdpackage.jsonsrc/
提交记录 · preview
更新界面组件
a31f08 · 成员 A · 1小时前补充交互状态
b82d16 · 成员 B · 2小时前整理样式变量
c94e20 · 成员 A · 3小时前代码仓库树 · 分支与提交记录
代码安全
风险信息，分层查看
将检查结果按类型和状态归类，先查看风险概览，再深入具体问题与处理记录。
重点信号突出，详细结果按需展开。
协作管理平台⌘
代码安全示例项目
高风险3
中风险8
低风险12
代码检查记录
| 检查对象 | 检查类型 | 问题数 | 状态 |
|---|---|---|---|
| design-app | 静态检查 | 8 | 已完成 |
| ui-system | 依赖检查 | 3 | 处理中 |
| client-service | 配置检查 | 12 | 已完成 |
检查结果分层查看
输入校验高风险
依赖版本检查中风险
配置完整性低风险
风险概览 · 分层查看检查结果
集成管理
流水线过程，一目了然
用阶段与执行记录表达集成过程，在保留流程上下文的同时查看详细日志。
阶段与执行状态对应，支持细节排查。
协作管理平台⌘
集成管理示例项目
流水线执行执行 #028 · 手动触发
✓开始
→✓克隆代码
→◷构建编译
→✓推送制品
→✓结束
| 执行记录 | 触发方式 | 用时 | 结果 |
|---|---|---|---|
| #028 | 手动触发 | 02:18 | 运行中 |
| #027 | 代码提交 | 03:42 | 成功 |
| #026 | 定时执行 | 03:15 | 成功 |
执行日志 · 构建编译
09:42:01 INFO Repository ready 09:42:02 INFO Loading build configuration 09:42:03 PASS Validation complete 09:42:04 INFO Creating sample artifact
流水线阶段 · 详细执行日志
研发管理
计划与协作，有序连接
以项目维度连接计划、任务与交付信息，让团队从概览进入每一项具体工作。
统一项目入口，减少模块间的重复切换。
协作管理平台⌘
研发管理示例项目
项目总览本期迭代 · 03
需求 12任务 8
68%需求 18任务 14
42%需求 6任务 5
85%01需求规划
→02开发进行中
→03测试验收
→04发布交付
迭代计划与交付
计划需求24
完成需求18
待验收6
规划开发测试交付
项目、迭代与交付过程
用户中心
角色与权限，清楚区分
将成员、角色与权限分层组织，以一致的列表和详情结构表达用户管理。
角色与权限关联，管理内容分层呈现。
协作管理平台⌘
用户中心示例项目
管理员2
开发成员12
测试成员6
成员与角色
| 成员 | 角色 | 权限范围 | 状态 |
|---|---|---|---|
| 成员 A | 管理员 | 全部项目 | 启用 |
| 成员 B | 开发成员 | 项目 A / B | 启用 |
| 成员 C | 测试成员 | 测试模块 | 启用 |
角色权限
| 模块 | 查看 | 编辑 |
|---|---|---|
| 项目 | ✓ | ✓ |
| 代码 | ✓ | ✓ |
| 测试 | ✓ | — |
成员、角色与权限范围
特色优势
在同一平台连接工作流程，以统一的结构支持协作。
研发全生命周期管理
连接需求、计划、任务与交付，形成可浏览的工作总览。
开发成果便捷发布
将工作入口与信息状态放在一起，让团队及时理解当前进展。
工作进度可视管理
以记录、状态和关联信息，建立连续的研发过程视图。
多种环境灵活部署
将不同能力组织为一致的模块，保持体验与操作逻辑连贯。
4大产品优势
技术框架
应用前端
工作台需求管理测试管理代码管理集成管理研发管理
接入层
统一入口请求转发权限验证
应用服务
协作服务任务服务测试服务代码服务流水线服务制品服务
数据层
业务数据缓存服务文件存储
基础设施
计算资源存储资源运行环境
安全管理运行管理
开发环境
测试环境
生产环境
02 / WEB DESIGN · PRODUCT STORYTELLING
从产品认知，到功能理解。
以首屏产品介绍建立认知，再通过功能、特色优势与技术框架，逐层展开平台的能力与价值。
01
淡蓝科技首屏与产品能力导航
02
左右交错图文、叠层界面细节
03
四项优势与分层技术架构
切换产品能力，查看不同功能的界面表达。
区域数据服务
一屏看见，
协同服务。
区域概览
场景应用
区域核心经济指标
示例季度社会消费品零售总额269.50亿元
同比增长↑ 4.2%
进出口总额146.20亿元
同比增长↑ 2.8%
一般公共预算收入31.60亿元
同比增长↓ 1.6%
居民消费价格指数101.20%
同比增长↑ 1.2%
固定资产投资额96.80亿元
同比增长↑ 5.1%
重点项目开展情况
示例季度总投资额420.0亿元
年度计划投资额84.0亿元
完成投资额63.0亿元
完成年度计划75.0%
各区域生产总值
示例季度八大产业
今年趋势
发展趋势34.20亿元示例年度
实时趋势
水库预警1个
河道预警2个
| 序号 | 区域 | 站点 | 降雨量 | 状态 |
|---|---|---|---|---|
| 1 | 区域A | 站点01 | 0.0mm | 无降雨 |
| 2 | 区域A | 站点02 | 2.4mm | 小雨 |
| 3 | 区域B | 站点03 | 12.0mm | 中雨 |
| 4 | 区域B | 站点04 | 28.0mm | 大雨 |
| 5 | 区域C | 站点05 | 0.0mm | 无降雨 |
| 6 | 区域C | 站点06 | 6.8mm | 小雨 |
| 7 | 区域D | 站点07 | 54.0mm | 暴雨 |
| 序号 | 区域 | 站点 | 水位 | 状态 |
|---|---|---|---|---|
| 1 | 区域A | 站点01 | 16.2m | 正常 |
| 2 | 区域A | 站点02 | 18.4m | 正常 |
| 3 | 区域B | 站点03 | 22.7m | 关注 |
| 4 | 区域C | 站点04 | 14.8m | 正常 |
| 5 | 区域D | 站点05 | 26.5m | 预警 |
| 序号 | 区域 | 站点 | 河道水位 | 状态 |
|---|---|---|---|---|
| 1 | 区域A | 站点01 | 3.2m | 正常 |
| 2 | 区域A | 站点02 | 3.6m | 正常 |
| 3 | 区域B | 站点03 | 5.4m | 关注 |
| 4 | 区域C | 站点04 | 6.8m | 预警 |
| 5 | 区域D | 站点05 | 4.3m | 正常 |
降雨状态无降雨小雨中雨大雨暴雨
气象灾害预警
| 序号 | 预警类型 | 预警区域 | 发布时间 |
|---|---|---|---|
| 1 | 高温预警 | 区域A | 08:30 |
| 2 | 大雨预警 | 区域B | 09:15 |
| 3 | 雷电预警 | 区域D | 10:00 |
水安全
水库预警1个
河道预警2个
水工程
水库总蓄水量23.80万m³
较去年同期↑ 2.4%
大中型水库蓄水量13.60万m³
较昨日↑ 0.8%
水生态
监测点 A
水质评价Ⅱ类
达标评价达标
监测点 B
水质评价Ⅲ类
达标评价需关注
水环境
巡河问题160
已处理问题144
已办结76
未办结4
- TOP 1区域 A128h
- TOP 2区域 B112h
- TOP 3区域 C96h
- TOP 4区域 D84h
- TOP 5区域 E72h
景区 A
今日实时客流8,400
7日平均客流9,600
游客来源
8,400总人数
本地40%
周边30%
外地20%
其他10%
客流来源 TOP5
- TOP 1来源区域 A2,400
- TOP 2来源区域 B1,800
- TOP 3来源区域 C1,600
- TOP 4来源区域 D1,400
- TOP 5来源区域 E1,200
酒店住宿
酒店民宿180家
房间总数8,600
42001
72002
54003
102004
86405
57606
76807
热门景区 TOP5
- TOP 1景区 A4,200
- TOP 2景区 B3,500
- TOP 3景区 C2,800
- TOP 4景区 D2,100
- TOP 5景区 E1,400
运营车辆
公开示例出租车
日均运营1.80万人次
GPS在线数180
GPS在线率96%
车辆总数190
驾驶员数260
地面公交
日均运营2.40万人次
公交车辆120
驾驶员180
线路总数24
站点总数160
重点运输服务
班线客运
车辆总数90驾驶员数120
旅游包车
车辆总数60驾驶员数80
危险品车
车辆总数40驾驶员数60
重型货车
车辆总数180驾驶员数240
交通运输量
示例年度客运量180.50万人次
货运量22.80万吨
近6个月接种人数趋势
接种人群年龄分布
12,000示例总人数
12岁以下1,200
12–17岁1,800
18–59岁6,000
60岁以上3,000
社区接种情况
| 社区 | 居民人数 | 第一针 | 第二针 |
|---|---|---|---|
| 社区A | 820 | 760 | 730 |
| 社区B | 960 | 920 | 860 |
| 社区C | 1100 | 1040 | 980 |
| 社区D | 780 | 720 | 690 |
正在处理事件统计
正在处理事件总数
80- 巡查事件32
- 社区服务24
- 设施维护16
- 其他事项8
公开示例数据 · 可切换专题与图表
03 / APP DESIGN · DATA DISPLAY
丰富的数据，清晰的小屏阅读。
将经济运行、应急防控、文旅、水务与交通等业务专题，转化为层级清晰的移动端界面。以指标卡、图表和专题入口组织内容。
01
核心指标优先，双列信息卡分组
02
专题切换与分层数据阅读
03
图表、预警、排名与问题处理状态
进入专题，切换经济、应急、水务等页面。
城市运行管理平台
区域态势
当前区域区域 A
运行指数92.4
监测节点128
虚构地图 · 全部数值为示例
交互预览 · 匿名区域与示例数据
04 / DATA DASHBOARD · SITUATIONAL AWARENESS
将复杂城市信息，组织为可读的态势。
根据用户反馈重构大屏风格，定义图表样式与页面层级。以中心态势地图、多面板指标和统一图表，呈现运行管理信息。
01
蓝青暗色界面与中心态势地图
02
多面板指标、风险排行与交通图表
03
统一图表样式与动态状态
切换专题或选择地图节点，展开运行信息。
城市运行指挥调度中心
区域态势
当前区域区域 A
运行指数92.4
监测节点128
虚构地图 · 全部数值为示例
示例面积
1,280km²
常住人口
56万
分区数量
8个
交互预览 · 匿名区域与示例数据
05 / DATA DASHBOARD · COMMAND & DISPATCH
信息有序呈现，支持全局观察。
确定大屏视觉风格，整理字体、色值与布局规范。将建设、民生、经济等专题指标，围绕中心态势组织为统一界面。
01
深蓝空间、密集指标与中心轨道
02
专题信息分区与图表规范
03
状态变化与动态信息提示
选择专题，查看指标与态势的变化。
城市运行态势平台
区域态势
当前区域区域 A
运行指数92.4
监测节点128
虚构地图 · 全部数值为示例
交互预览 · 匿名区域与示例数据
06 / DATA DASHBOARD · CITY MANAGEMENT
科技视觉承载，城市运行信息。
以墨绿科技视觉建立项目风格，通过大地图、环形指标和多线图表，组织经济、政务、文旅与水务等专题数据。
01
墨绿高光、环形图形与中心地图
02
左右专题与多类型图表
03
统一科技边框与层级
点击专题与地图节点，探索数据分区。
一站式研发协作
协同研发
一体化云平台
将开发、测试、集成与运行资源连接在一起。以统一的平台组织研发流程，让工具、信息与协作形成连贯的体验。
01
产品介绍
面向研发全过程，将需求、代码、测试与部署等内容集中呈现。以统一入口和清晰层级，组织不同环节的工具与信息。
02
产品亮点
多环境，协同运行
支持不同开发与运行环境，将工具和资源集中组织，为研发过程提供统一的工作基础。
公共能力，一站集成
将常用能力放入同一平台，通过一致的入口和模块结构，串联开发、测试与协作内容。
安全能力，贯穿流程
在需求、开发、测试与交付等环节中呈现安全控制与检查信息，让风险与状态清晰可见。
研发管理，有序交付
以需求、计划、任务和成果记录连接研发活动，结合状态与进度，表达连续的工作过程。
03
核心服务
研发协作
测试集成
安全管理
让数据流转，始终清晰可控
数据安全系统
从信息采集到数据交换，安全贯穿全过程
政策解读
围绕数据保护、访问控制与安全管理，将安全能力融入数据的采集、传输、存储、处理和交换。通过清晰的分区与状态，建立可理解的防护过程。
01
产品能力
解决数据流转中的关键痛点
数据共享的安全边界
存在痛点 01
传输与存储信息分散，访问权限和处理状态难以同时查看。
解决思路
统一呈现访问验证、传输保护与数据完整性状态。
重要数据的分类管理
存在痛点 02
不同类型的数据缺少清晰分组，保护要求与处理记录难以关联。
解决思路
以分类、标签与关联信息，表达不同数据的管理层级。
贯穿流程的可信处理
存在痛点 03
处理环节和安全控制难以追踪，用户缺少完整的流程视图。
解决思路
连接每个处理节点，保留过程状态与明确的控制信息。
采集安全
传输安全
存储安全
处理安全
交换安全
02
适用场景
场景：共享数据防护
业务应用→
质量检查→
数据处理→
保护控制→
中心存储
一起学习，一起成长
成长教练
招募活动
课程学习 + 项目实践
共同开启
活动介绍
以研发管理的思想与方法为起点，结合课程学习、项目实践和经验交流，连接产品、设计、研发与测试等协作环节。
学习方法 · 实践协作 · 交流经验
- 研究研发管理的思想和方法
- 学习需求分析与协作流程
- 理解规范与持续交付实践
- 参与演练、研讨与经验分享
01
参与内容
课程学习
项目实践
经验交流
01需求与任务的组织
02协作流程与交付节奏
03质量检查与过程反馈
把方法带入实践，把经验带回团队。
07 / CAMPAIGN DESIGN · VISUAL EXPRESSION
用视觉层次，建立内容的吸引力。
产品宣传长图与招募活动海报。通过蓝色科技视觉、立体构成、强标题和分层内容，建立不同主题的视觉表达。
01
云平台产品宣传与等距窗口构成
02
数据安全长图与盾牌视觉
03
招募活动的舞台与信息编排
切换海报主题，查看不同的原生视觉构成。