傅珩 · 视觉传达设计作品集
PORTFOLIO · VISUAL COMMUNICATION × COMPLEX SYSTEM UI
傅珩
视觉传达设计 × 复杂系统界面 —— 从年画色彩到全光家庭网络的状态视觉系统
重庆大学 设计学硕士 大连理工 视觉传达本科 求职意向：华为 ID 与 UX 设计师
杨家埠木版年画
色彩源头 · 杨家埠木版年画 / MET Open Access DP-17327-122 / CC0
01全光家庭网络异常诊断与恢复体验主项目 · 状态视觉系统
信息架构 / 原型实现
02MOTIF 车生活三端视觉系统跨端设计令牌
服务状态体系
03资本余量交易终端B 端交易风险工作台
状态建模 / 风险阻断
04杨家埠年画数字色库K-means 色彩聚类
数据驱动视觉决策
05企业级商业视觉交付中国一重 / 长安汽车
声像宣传 / 编辑设计
傅珩 · 视觉传达设计作品集自主概念作品 · 合成示例数据01 / 11
01

PROJECT 01

全光家庭网络异常诊断与恢复体验

C 端主项目 · 状态视觉系统 · 可运行原型

S0–S5 六状态
aria-live 播报
桌面 1440 / 移动 390
PROJECT 01 · 主项目
全光家庭网络异常诊断与恢复体验

业务问题

光纤到户后，家庭网络故障的"黑盒感"被放大：用户看到的是"断网了"，而系统里是四个节点、三种链路、六种状态的复杂拓扑。传统运维界面把技术状态直接抛给用户，普通人无法回答最基本的问题：坏没坏、坏在哪、谁来修、修好了没。

设计命题

把"概览 → 定位 → 解释 → 优化 → 恢复确认 → 人工兜底"六状态流程，翻译成任何家庭成员都能跟着走的界面语言——每一步先给结论、再给唯一下一步，失败路径永远可见。

边界声明：自主概念项目，使用合成示例数据；不含任何企业内部资料，不代表委托或上线产品。视觉系统取材自公有领域年画（CC0）。
我的角色
独立设计兼开发信息架构 / 交互 / 视觉 / 前端原型
时间
2026.08概念设计 + 实现 + 可用性自测
交付物
可运行原型HTML/CSS/JS · 桌面 1440 / 移动 390
状态模型
S0–S5 六状态含返回 / 取消 / 重试 / 重置支线
视觉系统
年画七色令牌K-means 提取 · WCAG AA 验证
可访问性
aria-live 播报键盘全路径 · reduced-motion
异常语义 · 印版朱 等待语义 · 藤黄 恢复语义 · 松烟青

原则一 · 先结论再行动

每一屏先回答「坏没坏、坏在哪」，主操作永远只有一个。

原则二 · 失败路径常驻

取消、重试、转人工入口始终可见，异常流程不锁死用户。

原则三 · 恢复可回退

恢复确认保留「回到概览」与重置路径，结果可复查、可回看。

PROJECT 01 · 全光家庭网络异常诊断与恢复体验自主概念 · 合成数据02 / 11
PROJECT 01 · 视觉语言系统
年画七色 → UI 语义令牌
画纸米
#F5EAD5
背景 / 纸面
底色 L=0.93
墨玄黑
#2A2622
正文 / 标题
12.59:1 AAA
印版朱
#C8442E
异常 / 警醒
白字 4.86:1 AA
朱深
#A53722
异常正文
5.56:1 AA
藤黄
#E8B84A
等待 / 进行中
装饰+ink 使用
松烟青
#3E7C6A
恢复 / 健康 / 主操作
白字 4.89:1 AA
纸灰金
#6E5F3C
辅助注记
5.23:1 AA
FAULT
异常 · 印版朱红年画中朱红用于"破"与警醒——门神铠甲、火焰、煞气。映射到 UI：只出现在故障节点、错误横幅、危险操作，任何非异常场景禁用。
#C8442Eink #A53722soft #F2D4C8
PROGRESS
等待 · 藤黄藤黄是年画的过渡色——晨光、麦浪、锦地。映射到 UI：优化进度、加载状态、进行中步骤；原色只作装饰，正文一律压在深 ink 上。
#E8B84Aink #755600soft #F5EBCE
RECOVERED
恢复 · 松烟青松烟绿在年画中用于"生"与"稳"——松枝、青袍、水纹。映射到 UI：恢复确认、健康节点、主操作按钮——健康态与操作一致，"恢复"本身就是一次成功的操作。
#3E7C6Aink #2D5C4Fsoft #E4EDE2

:root { --bg:#F5EAD5; --fault:#C8442E; --warn:#E8B84A; --ok:#3E7C6A; --ink:#2A2622; --muted:#6E5F3C } /* 同一套令牌，驱动本册排版与线上原型 — 设计规范不是文档，是代码 */

PROJECT 01 · 视觉语言系统K-means 七色 · WCAG AA 全验证03 / 11
PROJECT 01 · 核心界面
异常概览 · S0 首屏
fuheng-huawei-optical-v2.pages.dev — 可交互 · 点击「开始定位异常节点」走完整流程 · 框内可滚动 ↓LIVE
全光家庭网络 S0 概览
1
先结论后操作首屏一句话回答"坏没坏、坏在哪"，主操作只有一个：开始定位。
2
拓扑即色彩语义四个节点卡用语义色边框+图标底色区分状态，书房节点唯一着朱色。
3
等宽数据注记S0/06 状态码、节点类型用 mono 小注，像图纸边注一样可扫读。
4
兜底永远在场右下角人工服务兜底卡片常驻，自助失败前就知道有人工路径。
5
流程可见左侧六状态导轨高亮当前步，已访问节点留痕，路径可回溯。
6
纸面分层画纸米底 + 纸面卡 + 1px 界线，无阴影堆叠，层级靠明度与线。
PROJECT 01 · 核心界面视觉桌面 1440 · 与在线原型同源截图04 / 11
PROJECT 01 · 交互全景
六状态流程 × 跨端响应式
S0
概览
先看结论：书房节点响应异常
S1
定位节点
四节点可逐个查看，选择不改变场景
S2
异常解释
为什么只有书房受影响
S3
优化中
三阶段可观察，可取消
S4
恢复确认
其他节点未改动的绿色确认
S5
人工兜底
定位结论直接交给人工
返回上一步 —— 每个非首状态可用 取消诊断 / 取消优化 —— S2、S3 显式出口 未恢复？转人工 —— S3 常驻 重试自助恢复 —— S5 可返回 重置场景 —— 顶部常驻
S3 优化进行中
S3 恢复进行中 · 实时可玩：fuheng-huawei-optical-v2.pages.dev
移动端 390

实现与验收

  • HTML/CSS/JS 可运行原型，桌面 1440×900 / 移动 390×844 实测零横向溢出
  • aria-live 播报每次状态迁移；键盘 Enter/Space 全路径可操作
  • localStorage 持久化进度；reduced-motion 下自动缩短动画
  • 公开部署：fuheng-huawei-optical-v2.pages.dev
PROJECT 01 · 交互全景S0→S5 全路径 + 响应式05 / 11
02

PROJECT 02

MOTIF 车生活三端视觉系统

跨端设计令牌 · 服务状态体系

三端共用令牌
令牌三层架构
异常 / 降级路径
PROJECT 02 · MOTIF 车生活三端视觉系统
跨端设计令牌与服务状态体系
TIER 1 · 全局令牌 GLOBAL品牌语义层 · 三端唯一真源
色彩语义品牌主色、状态色（可用/繁忙/离线）、语义 ink/soft 变体，全部继承年画七色谱系
--fault
字体阶梯display/ body/ mono 三轴，三端共用同一字阶与行高，字号按端缩放
--font-display
间距与圆角4/8/12/16/24/32 间距尺；卡 8px / 控件 4px / 标签 2px 三级圆角
--radius-card
TIER 2 · 组件令牌 COMPONENT端组件层 · 消费全局令牌
APP（iOS/Android）预约卡片、车辆状态环、服务进度条——触控 44px 最小热区，令牌驱动深浅色
token: card/ appointment
小程序（WeChat）轻量预约流 + 追踪页，复用同一状态色阶，压缩层级到两步
token: track/ status
响应式 Web桌面工作台 + 移动降级，断点 980/720/420，网格从 12 列折叠到 1 列
token: grid/ breakpoint
TIER 3 · 服务状态 SERVICE STATE跨端共享的业务状态机
正常路径预约 → 追踪 → 完成；三端实时同步状态，任何一端发起另两端可见
state: ok
异常路径网络中断重连、提交失败重试、定位降级到手动输入——每条异常都有出口
state: fault
降级路径弱网下小程序保底只读追踪；Web 端离线缓存最后已知状态
state: degraded
能力证明点：不同项目，同一能力——把"跨端一致性"从口号落到令牌架构：全局层定真源，组件层做消费，状态层管业务。自主概念项目，合成数据。
PROJECT 02 · MOTIF 车生活三端视觉系统自主概念 · 合成数据06 / 11
03

PROJECT 03

资本余量交易终端

B 端交易风险工作台 · 高风险状态设计

60% / 80% 阈值
异常阻断 · 二段确认
实时联动
PROJECT 03 · 资本余量交易终端
B 端交易风险工作台：下单前就把风险说清楚
资本余量交易终端桌面端

业务命题

期货交易中，用户最需要的是在下单前知道"这笔操作会把风险推到什么位置"——权益、占用、下单后风险、阈值、委托构造必须同屏可读。

状态设计

60%/80% 风险阈值反馈、解除锁定、提交中、已提交与异常阻断——高风险场景的状态必须可预见、可回退、可阻断。

自主概念项目 · 演示数据 · 在线演示 fuheng-futures-risk-terminal.pages.dev
1
首屏即风险全景当前风险、下单后风险、60%/80% 阈值同屏呈现。
2
实时联动合约切换、手数调节、价格输入、买卖方向，风险结果实时重算。
3
异常阻断超阈值提交被阻断并给出原因，解除锁定需二段确认。
4
角色与交付独立设计兼开发：信息架构 / 交互 / 视觉 / 原型实现。
5
跨端可用桌面 1440 工作台 + 移动 390 精简视图，同一状态模型。
6
在线演示fuheng-futures-risk-terminal.pages.dev 可交互体验。
能力证明点：B 端高风险场景的设计纪律——复杂金融信息的信息架构、实时状态反馈、风险阻断与二段确认，与全光网络（C 端家庭）互补，证明"状态建模 + 复杂信息组织"方法横跨两类产品。
PROJECT 03 · 资本余量交易终端自主概念 · 演示数据07 / 11
04

PROJECT 04

杨家埠年画数字色库

硕士课题 · 数据驱动视觉决策

1372 → 7 组色
K-means 可复现
WCAG AA 全验证
PROJECT 04 · 杨家埠年画数字色库
1372 幅图像 → 7 组核心色
同一幅画 · 7 种颜色 · 真实聚类结果
样张 · MET Open Access DP-17327-122 · CC0
朱砂红 / 松烟绿 / 藤黄 / 宣纸底 / 墨线 —— 五大色系的原型载体
01 建库
整理 1372 幅杨家埠年画图像及田野资料，完成图像校准、分类与归档，建立可检索的研究素材结构。
02 聚类
Python + K-means（k=7，k-means++ 初始化）对年画色彩分布聚类，提取 7 组核心色及占比。
03 校正
针对漂白、褪色与扫描偏色做物理校正：漂白纸底→画纸米、饱和衰减的朱红→印版朱、发灰的松绿→松烟青。
04 映射
校正后的七色映射为 UI 语义令牌（异常/等待/恢复/底/墨/辅），全部通过 WCAG AA 对比度验证。
#E3BF89 纸底
47.2%
#D5AA7C 纸影
12.5%
#D68C6A 朱淡
11.1%
#F9F8FC 高光
10.1%
#AB8669 纸灰
9.3%
#7E715F 灰墨
5.3%
#7B9E80 松烟
4.5%
↑ 上图为本册样张的真实 K-means 聚类占比（k=7, seed=42, 239,355 采样像素）——过程可复现，数据可回查。
PROJECT 04 · 杨家埠年画数字色库硕士课题 · K-means 方法复现08 / 11
05

PROJECT 05

企业级商业视觉交付

声像宣传 × 编辑设计 · 真实交付纪律

5+ 部企业视频
10+ 款物料
100+ 份版式交付
PROJECT 05 · 企业级商业视觉交付
声像宣传 × 编辑设计
声像宣传与视觉传播中国一重 / 长安汽车等企业项目 · 2025.04–2025.08
  • 5+ 部企业宣传视频：剪辑、字幕包装、动态图形全流程
  • 10+ 款配套物料：主视觉、展板、海报、T 恤、冰箱贴
  • 素材资产化：按项目归档与版本管理
编辑设计服务（副业）作品集版式设计 · 2024–2026 · 100+ 份交付
  • 100+ 份作品集版式：封面、项目叙事、图文网格、印刷规格
  • 四大方向：视觉传达 / 环境 / 产品 / 数媒，横竖版双规格
  • 版式系统："问题→方法→产出→验证"四段式项目页模板
编辑设计样本一
样本一 · 色彩规格系统页：情绪版拼贴 + HEX/CMYK 色板规格
编辑设计样本二
样本二 · 调研信息页：时间轴 + 三栏图文网格
编辑设计样本三
样本三 · 数据版式页：图表网格 + 第三方数据源标注

编辑设计交付样本（客户匿名）：以上版式、网格与图文系统为本人设计；作品内容与品牌归属客户，已按授权边界匿名展示。

能力证明点：不同项目，同一能力——真实企业场景下的商业视觉交付：多甲方、多载体、严交付节点。编辑设计部分版式为本人成果，作品内容归属客户（已匿名）。
PROJECT 05 · 商业交付企业项目 / 编辑设计服务09 / 11
能力矩阵 · 对照华为 ID 与 UX 设计师 JD
岗位要求逐条对齐
JD 要求（节选）
本册证据
技能与工具
达成状态
界面视觉设计 · 主题设计 · 设计规范 · 组件库
P2–P5 全光状态视觉系统 + P6 跨端令牌 + P7 B端风险工作台
Figma / HTML / CSS / 设计令牌架构
✔ 主线证据
品牌视觉一致性 · 创意视觉
P3 年画七色语义系统 + P9 多载体品牌延展
PS / AI / 品牌系统思维
✔ 方法可迁移
美学素养 · 行业洞察
P8 K-means 色彩研究（硕士课题）
Python / 数据驱动设计
✔ 独有差异化
2D：PS / AI / Sketch；AE 动效；3D：C4D / Blender
P4–P5 动效原型（CSS/JS）+ P7 状态设计 + 技能自评
PS / AI / AE / PR / C4D / Blender（基础）
✔ 满足
AIGC 技能优先
全项目 AI 辅助工作流（拆解→生成→人工复核）
Stable Diffusion / ComfyUI / AI 编程
✔ 优先项命中
实习 / 竞赛获奖优先
云集 / 希音实习 + 大广赛国三省一 / 米兰设计周省三
—（详见简历）
✔ 优先项命中
声明：以上对照严格引用 JD 原文，不做无法证明的等级自称；"满足/命中"仅指 JD 明示条目，不代表任何内部评价。
能力矩阵 · JD 对照华为 ID 与 UX 设计师（视觉传达设计方向）10 / 11
傅珩
视觉传达设计 × 复杂系统界面 —— 让每一次异常与恢复，都有颜色的答案。
在线原型 · 全光家庭网络
fuheng-huawei-optical-v2.pages.dev
可交互六状态流程 · 桌面/移动响应式
联系方式
15794084495 · 445469671@qq.com
求职意向：华为 ID 与 UX 设计师 · 成都
真实性声明：本册 P2–P7 为自主概念项目（合成示例数据，不含企业内部资料）；P8 为真实企业项目与匿名化的编辑设计服务记录；年画素材来自 MET Open Access（CC0）。所有 K-means 数据可按本册参数复现。
傅珩 · 视觉传达设计作品集谢谢观看11 / 11