01 / Performance case

复杂系统的
清晰化实验

这不是正式项目内容，而是一张接近真实作品集长度与图片密度的测试页。页面使用30张本地图片，验证首屏、懒加载、滚动动效和移动端浏览。

Role: Product Experience Designer
Scope: Research · UX · UI · Prototype
Test: 30 images · Responsive · Motion

Live loading monitor

页面加载观察

0/ 30 images loaded

0.00MB transferred*

* 浏览器支持时读取本页图片传输量；数据随滚动和缓存状态变化。

01 / Context

先让观看者快速理解，
再决定是否深入。

作品集不是PDF逐页搬运。页面需要把核心判断放在前面，把过程证据放在后面，并且让30张图片不会阻塞第一次打开。

建筑空间测试图片 1 — 背景与业务
图片证据 01 · 响应式 WebP

建筑空间测试图片 2 — 背景与业务
图片证据 02 · 响应式 WebP

建筑空间测试图片 3 — 背景与业务
图片证据 03 · 响应式 WebP

建筑空间测试图片 4 — 背景与业务
图片证据 04 · 响应式 WebP

建筑空间测试图片 5 — 背景与业务
图片证据 05 · 响应式 WebP

建筑空间测试图片 6 — 背景与业务
图片证据 06 · 响应式 WebP

建筑空间测试图片 7 — 背景与业务
图片证据 07 · 响应式 WebP

建筑空间测试图片 8 — 背景与业务
图片证据 08 · 响应式 WebP

建筑空间测试图片 9 — 结构与系统
图片证据 09 · 响应式 WebP

建筑空间测试图片 10 — 结构与系统
图片证据 10 · 响应式 WebP

建筑空间测试图片 11 — 结构与系统
图片证据 11 · 响应式 WebP

建筑空间测试图片 12 — 结构与系统
图片证据 12 · 响应式 WebP

建筑空间测试图片 13 — 结构与系统
图片证据 13 · 响应式 WebP

建筑空间测试图片 14 — 结构与系统
图片证据 14 · 响应式 WebP

建筑空间测试图片 15 — 结构与系统
图片证据 15 · 响应式 WebP

建筑空间测试图片 16 — 结构与系统
图片证据 16 · 响应式 WebP

建筑空间测试图片 17 — 结构与系统
图片证据 17 · 响应式 WebP

建筑空间测试图片 18 — 结构与系统
图片证据 18 · 响应式 WebP

建筑空间测试图片 19 — 结构与系统
图片证据 19 · 响应式 WebP

建筑空间测试图片 20 — 结构与系统
图片证据 20 · 响应式 WebP

建筑空间测试图片 21 — 结果与证据
图片证据 21 · 响应式 WebP

建筑空间测试图片 22 — 结果与证据
图片证据 22 · 响应式 WebP

建筑空间测试图片 23 — 结果与证据
图片证据 23 · 响应式 WebP

建筑空间测试图片 24 — 结果与证据
图片证据 24 · 响应式 WebP

建筑空间测试图片 25 — 结果与证据
图片证据 25 · 响应式 WebP

建筑空间测试图片 26 — 结果与证据
图片证据 26 · 响应式 WebP

建筑空间测试图片 27 — 结果与证据
图片证据 27 · 响应式 WebP

建筑空间测试图片 28 — 结果与证据
图片证据 28 · 响应式 WebP

建筑空间测试图片 29 — 结果与证据
图片证据 29 · 响应式 WebP

建筑空间测试图片 30 — 结果与证据
图片证据 30 · 响应式 WebP

End of speed test · 测试图片来源：Wikimedia Commons「Brutalist architecture」公开分类，来源清单保存在站点素材目录。

回到首页 ↗