CONTENTS页面目录
01代表项目↘02更多实践↘03早期视觉档案↘04作品切片↘05AI 原型实验室↘06设计方法↘07HMI 能力迁移↘08关于丁赛雅↘
UI / UX 交互设计师中国 · 上海求职方向：智能座舱 HMI

复杂系统清晰体验COMPLEX SYSTEMS
CLEAR EXPERIENCE

丁赛雅，一名理解业务也在意细节的交互设计师。专注制造业复杂系统、多终端体验与数据可视化，正在驶向智能座舱 HMI。

查看项目关于我 ↗
智能座舱 HMI · 工业交互 · 多终端体验 · 数据可视化 · 复杂业务梳理 · 信息架构 · 状态与反馈 · 设计系统 · AI 原型验证 · 研发走查 · 测试闭环 ·
/ 设计定位

我不把“高级感”停留在视觉表面。面对复杂业务，先理解人、任务、环境和状态，再用清晰层级、即时反馈和可复用规则，建立可信赖的体验。

05类终端经验
全流程需求到验证
AI+原型加速
READING PATH

这份作品集如何阅读

01项目证据

我做过什么，如何解决问题

02方法与工具

如何思考、验证并推动落地

03能力迁移

为什么能够进入智能座舱 HMI

/ CH 01 代表项目

不是页面合集，
是问题如何被解决。

P01MES · MULTI-DEVICE2025—2026
智能制造一体化业务系统
01

智能制造一体化业务系统

把多角色、多状态、多终端的制造流程，压缩成现场人员能够快速理解和执行的操作路径。

PC 管理端车间触控平板PDA / 移动端需求到验证
THE CHALLENGE

生产、设备、质量、计划等业务相互关联；办公室与车间用户关注的信息不同，且现场操作强调效率、可读性与及时反馈。

MY RESPONSE

参与需求研讨和流程梳理，建立任务流与信息层级；围绕开工、完工、用料、质检和异常等关键状态设计界面，并跟进研发还原与功能测试。

01/03
项目背景与范围
核心用户
计划员、车间班组、设备与质量人员、管理人员
设计范围
MOM 生产协同、EAM 设备资产、计划、质量与供应商等模块
关键任务流
任务进入 → 查看派工 → 开工与用料 → 质检 / 异常 → 完工反馈
关键设计决策
01

把高频任务前置，减少跨页寻找

02

用状态与动作配对，避免只靠颜色判断

03

按触控距离放大热区与关键数据

04

让 PC、平板和移动端共享语义而非复制布局

状态系统

界面不是静态画面，
而是一组持续变化的状态。

待处理进行中暂停异常待质检已完成
完整案例分析

从理解问题，
到验证设计。

以下内容来自项目过程与现有工作材料的交叉整理，重点说明我如何思考和推进，而不是只展示最终界面。

01
业务理解

先区分计划员、班组、设备与质量人员的目标，再把生产任务、物料、工序、质检和异常之间的依赖关系画成流程，避免直接从菜单和页面开始设计。

02
信息架构

PC 端保留全量管理与配置能力；车间平板聚焦当前任务、关键数量和现场动作；移动端突出查询、扫码与轻量处理，保证同一业务对象在不同终端语义一致。

03
关键交互

把开工、暂停、完工等动作与当前状态绑定；对不可用入口给出原因，对异常和缺失条件提供明确反馈，减少现场人员反复试错。

04
验证与复盘

通过 HTML 原型、设计走查和测试验证关键路径，重点检查权限、动态状态、输入边界、适配与研发还原；将共性问题回写到组件和交互约定。

证据与保密边界

现有资料包含生产派工、工序控制、移动端工时、按钮入口状态、EAM 资产管理以及完整的多端设计规范与交互约定。

为保护项目隐私，网站仅展示已脱敏界面与方法总结；不公开客户账号、生产数据、内部地址和未授权文档。
P02DATA · VISUALIZATION2025—2026
工厂生产可视化管控平台
02

工厂生产可视化管控平台

让管理者一眼看到全局态势，也能沿异常信号继续下钻到区域、设备与指标。

超大显示屏PC 精细配置移动端轻量查看状态告警 / 下钻
THE CHALLENGE

同一组业务数据需要服务不同距离、不同频率和不同决策角色，不能只是把 PC 页面等比例放大。

MY RESPONSE

按大屏全局监控、PC 精细操作、移动端快速查看重新分配信息权重，统一图表、状态、告警与色彩规则，并处理多分辨率适配。

02/03
项目背景与范围
核心用户
管理层、车间负责人、设备与能源管理人员
设计范围
集团能耗、区域与设备状态、生产进度、质量、AGV 与异常信息
关键任务流
总览发现偏差 → 定位区域 → 下钻设备 / 指标 → 判断状态 → 跟进异常
关键设计决策
01

按观看距离控制字号、密度与对比

02

总览优先趋势和异常，不堆砌装饰

03

建立总览—区域—设备三级下钻

04

统一运行、离线、告警等状态语义

状态系统

界面不是静态画面，
而是一组持续变化的状态。

正常运行待机离线告警无数据数据延迟
完整案例分析

从理解问题，
到验证设计。

以下内容来自项目过程与现有工作材料的交叉整理，重点说明我如何思考和推进，而不是只展示最终界面。

01
观看任务

将信息拆成全局态势、趋势变化、异常定位和设备详情四类任务，明确管理层看方向、车间负责人看偏差、设备人员看处置线索。

02
层级策略

集团层回答‘哪里有问题’，区域层回答‘问题集中在哪’，设备层回答‘当前状态与下一步行动’，避免每一屏重复同一组指标。

03
视觉编码

减少装饰性图表，使用位置、长度和趋势作为主要编码；告警色只服务异常，并为无数据、延迟和离线状态提供独立表达。

04
适配与验证

根据观看距离、分辨率和展示时长校验字号与密度；与研发核对动态数据、轮播、缩放和下钻逻辑，防止静态稿好看但上线失真。

信息架构

从全局态势
逐层走向现场细节。

同一套视觉语言覆盖总览、车间与设备，但每一层只回答该层最重要的问题。右图为工作资料中的车间设备空间关系图，公开展示时已脱离客户实时数据。

车间设备空间关系图
证据与保密边界

现有资料覆盖集团能耗、车间与单设备看板、生产进度、氢破集控、AGV、环境监测等多个真实设计方向。

为保护项目隐私，网站仅展示已脱敏界面与方法总结；不公开客户账号、生产数据、内部地址和未授权文档。
P03SYSTEM · DELIVERY2025—2026
设计系统与交付闭环
03
DESIGN OPERATIONS

从组件状态、需求评审到多端交付与测试回归，展示设计如何进入真实研发流程。

设计系统与交付闭环

不只交付页面，也交付能被团队理解、复用和验证的设计规则。

组件规范多端适配界面评审测试闭环
THE CHALLENGE

复杂产品长期迭代容易出现组件分叉、信息密度失控与开发还原偏差，单次稿件无法解决系统性问题。

MY RESPONSE

沉淀组件与交互状态，持续做设计走查、界面评审和测试验证；将共性问题转为规则、清单与团队培训内容。

03/03
项目背景与范围
核心用户
设计、产品、前端、测试与实施团队
设计范围
按钮、导航、数据录入、数据展示、反馈、表格与移动端组件
关键任务流
发现体验问题 → 识别共性 → 定义规则 → 原型验证 → 开发走查 → 测试回归
关键设计决策
01

组件状态与业务状态分层管理

02

用交互契约明确入口、权限和边界

03

把评审结论沉淀为可复用规则

04

以 HTML 原型降低静态稿沟通损耗

状态系统

界面不是静态画面，
而是一组持续变化的状态。

默认悬停按下禁用加载成功 / 失败
完整案例分析

从理解问题，
到验证设计。

以下内容来自项目过程与现有工作材料的交叉整理，重点说明我如何思考和推进，而不是只展示最终界面。

01
问题归类

把评审问题区分为视觉偏差、组件误用、状态缺失、交互边界和多端适配，避免所有问题都通过‘再调一下样式’处理。

02
规则沉淀

围绕按钮、输入、表格、导航、反馈与移动端控件建立结构、尺寸、状态和使用条件，使规范能够回答‘什么时候用、为什么这样用’。

03
协作机制

用交互契约和可运行原型明确入口、权限、默认值、空状态及异常反馈，让产品、研发和测试基于同一份可验证对象讨论。

04
质量闭环

在开发走查和测试阶段记录偏差，识别重复出现的问题并更新组件或检查项，让一次项目修正逐步变成团队可复用能力。

证据与保密边界

现有资料包含网页端与移动端 Sketch 规范、图标组件库、组件清单、样式差距审计、视觉评审与多端交互契约。

为保护项目隐私，网站仅展示已脱敏界面与方法总结；不公开客户账号、生产数据、内部地址和未授权文档。
/ CH 02 更多实践

从核心项目，
延伸到系统化能力。

S01资产全生命周期 / B 端系统
EAM 资产管理体验重构 项目画面S01

EAM 资产管理体验重构

围绕资产台账、预防性维护、任务执行与状态反馈，梳理复杂字段、层级与操作入口。

我的工作
需求理解、信息架构、PC 与移动端交互、原型验证
主要产出
PRD 对照、页面映射、组件约束、交付状态追踪
能力价值
体现对长流程、强状态和跨角色协作的处理能力。
S02PC · 平板 · 移动端
生产派工多端协同 项目画面S02

生产派工多端协同

针对派工列表、工序详情、工时记录和按钮入口，建立不同终端的一致语义与差异化操作。

我的工作
任务流、入口状态、触控交互、多端适配
主要产出
平板与移动端原型、交互契约、状态决策记录
能力价值
体现现场操作、有限注意力和即时反馈设计能力。
S03能源 · 设备 · 生产 · AGV
工业可视化看板矩阵 项目画面S03

工业可视化看板矩阵

从集团能耗总览延伸到车间、设备、进度和异常监控，形成多层级看板设计方法。

我的工作
信息分级、图表选型、状态色、动态展示
主要产出
总览 / 区域 / 单设备页面与可复用视觉组件
能力价值
体现数据叙事、远距离阅读和态势感知能力。
S04内容产品 / 前端协作
设计研习月刊平台 项目画面S04

设计研习月刊平台

将设计技巧、问题复盘、优秀案例与互动演示组织成可持续更新的内部学习平台。

我的工作
内容架构、界面设计、互动模块、持续迭代
主要产出
响应式站点、内容模块、管理与历史查看能力
能力价值
体现内容策划、知识沉淀与产品化表达能力。
S05流程优化 / 质量闭环
体验创新与测试效率 项目画面S05

体验创新与测试效率

持续记录 UI、体验与测试环节中的共性问题，把零散反馈转成可复用建议和检查机制。

我的工作
问题发现、归因分析、规范建议、协作推动
主要产出
月度创新成果、体验建议、测试效率方案
能力价值
体现主动发现问题和推动组织改进的意识。
S06LIMS · EAM · 稀土数字化
竞品与行业研究 项目画面S06

竞品与行业研究

围绕设备、资产、实验室与稀土行业产品进行功能、流程和体验拆解，为方案定义提供依据。

我的工作
竞品框架、流程对比、体验审计、机会点提炼
主要产出
专题分析报告、行业研究与产品优化建议
能力价值
体现从研究证据进入设计决策的能力。
S07兼职商业项目 / 已上线
云途物流网络货运平台官网 项目画面S07

云途物流网络货运平台官网

面向物流企业客户的真实官网项目，以业务规模、行业方案、运输场景和合作能力为核心，建立可信赖的品牌与业务表达。

我的工作
官网信息架构、视觉方向、核心页面设计、业务内容组织
主要产出
首页与多栏目页面、数据展示、业务场景和响应式交付
能力价值
体现从客户需求、商业信息到真实上线页面的完整设计能力。
查看已上线官网 ↗
S08移动端 / 工单系统
运维工单管理小程序 项目画面S08

运维工单管理小程序

覆盖登录、首页、工单报障、流程发起、统计、服务、资产台账、知识库与个人中心等移动业务场景。

我的工作
功能梳理、移动端信息架构、页面体系与状态反馈
主要产出
20+ 业务页面、工单流程、统计视图与账户管理界面
能力价值
体现将复杂后台业务压缩为移动端高频任务的能力。
S09兼职商业项目 / 电商视觉
淘宝商品视觉与详情页 项目画面S09

淘宝商品视觉与详情页

为泡酒药材商品完成 SKU 图、两种尺寸主图与完整详情页，围绕卖点、规格、使用场景与信任信息组织商品转化路径。

我的工作
SKU 图、主图版式、详情页信息分层、商品卖点与视觉一致性
主要产出
多规格 SKU 图、两套尺寸主图、商品详情页与店铺视觉素材
能力价值
体现从单张主图到详情页信息节奏的电商转化设计能力。
查看商品页 ↗
/ CH 03 早期视觉档案

旧作品不照搬，
用今天的方法重新审视。

选自大学毕业阶段的 UI、平面与电商作品。这里保留真实视觉探索，同时补充我现在对产品目标、信息层级和交互验证的复盘。

A01

书缘小说 App

移动阅读 / 产品设计−
书缘小说 AppORIGINAL WORK / REFRAMED
当时完成

从用户定位、竞品分析到任务流、色彩与高保真界面的完整移动产品练习。

今天的复盘

今天会进一步收敛功能入口、补齐空状态与阅读过程中的连续反馈，并用可点击原型验证找书—收藏—阅读的主路径。

A02

情感共鸣网站

内容社区 / Web＋
情感共鸣网站ORIGINAL WORK / REFRAMED
当时完成

围绕内容浏览、视觉氛围与社区表达搭建网页端产品结构。

今天的复盘

保留原方案的情绪氛围，同时重新审视内容层级、可访问性与社区安全边界，让视觉表达服务于阅读与交流。

A03

数据可视化界面

数据叙事 / Dashboard＋
数据可视化界面ORIGINAL WORK / REFRAMED
当时完成

早期对指标卡、地图、趋势和排行等信息模块的系统化探索。

今天的复盘

这组练习成为后来工业大屏工作的起点；现在会先定义决策问题，再选择图表，减少装饰并补齐异常、无数据与延迟状态。

A04

AIGC 国风视觉

AI 辅助 / 视觉实验＋
AIGC 国风视觉ORIGINAL WORK / REFRAMED
当时完成

使用生成式工具探索国风建筑、神话叙事与角色形象，并进行人工筛选与版式整理。

今天的复盘

不把生成结果当作终稿；通过提示词控制、版本比较、人工修正和一致性复核，让 AI 成为快速探索视觉方向的媒介。

A05

商业视觉与海报

平面 / 电商 / 品牌＋
商业视觉与海报ORIGINAL WORK / REFRAMED
当时完成

覆盖餐饮、活动、品牌与电商场景，体现版式、色彩和商业信息表达基础。

今天的复盘

这些训练强化了视觉节奏与传播意识；转向 UX 后，更关注信息是否被快速理解、动作是否明确，以及品牌语气能否跨触点保持一致。

/ CH 04 作品切片

从研究过程，
到完整视觉结果。

16 组真实作品画面，覆盖产品研究、任务流程、界面系统、数据可视化、AI 视觉与商业设计。点击任意作品查看完整大图。

/ CH 05 AI 原型实验室

AI 不是噱头，
是更快验证想法的媒介。

AI 交互原型工作流
任务指令 / 01

将复杂需求拆成可验证的用户任务流

01输入原始需求02拆解角色与任务03生成可点击原型04复核业务与边界
AI+

在实际工作中，我使用 ChatGPT 等工具辅助创意发散、方案探索和 HTML 交互原型。重点不是“一键生成页面”，而是缩短从问题到可讨论方案的距离，并由设计判断负责最终质量。

  • 01 需求澄清与边界拆解
  • 02 多方案快速试错
  • 03 可点击原型与研发沟通
  • 04 人工复核业务、交互与视觉
AI CAPABILITY MAP

从视觉探索，
到系统与质量闭环。

AI 负责加速收集、拆解和验证，我负责业务判断、结果复核与最终质量。

/ CH 06 设计方法

从模糊需求到
可落地体验。

HMI
信息优先级驾驶注意力状态与反馈安全场景
/ CH 07 能力迁移

从工业现场，
到智能座舱。

车间与座舱都不是“安静地浏览页面”：用户注意力有限、状态持续变化、错误成本更高。多终端信息分级、现场操作与异常反馈经验，是我进入 HMI 的真实起点。

本科毕业设计围绕车联网自动跟车方向展开。商业量产车载经验仍在建立中，因此这里清楚区分已完成经验与正在迁移的能力。

/ CH 08 关于丁赛雅

清醒地理解复杂，
温柔地观察日常。

丁赛雅的生活照
光影、空间与安静的观察
糯米和团子两只小猫
糯米 & 团子 / 我的两位生活观察员

计算机科学与技术本科，近 2 年 UI/UX 设计经验。熟悉 Figma、即时设计、Adobe XD、Axure、Photoshop、Illustrator 与 Sketch，可使用 AE 完成基础界面动效。

工作之外，我喜欢记录光影、空间与生活里的微小反馈，也和两只小猫——糯米、团子一起生活。对情绪、行为和细节的长期观察，也构成了我理解用户的一部分。

曾获中国高校计算机大赛人工智能创意赛全国总决赛三等奖、山东省大学生计算机设计大赛三等奖。

关于我 ↗16699194148 ↗saiya.ding@icloud.com ↗
全部作品