← 返回目录 INDEX 04 / 04 深蓝 DEEP BLUE
04

建筑作品集网页化:把 A4 横版图纸变成一条链接

Portfolio as a Website — Information Architecture & Front-end

类型
自建静态站点
时间
2026.10
负责
信息架构 / 视觉 / 前端
目录:八件作品并列Zoom

FIG. 04.1 — 目录 INDEX

图纸印出来只能给一个人看,链接可以给所有人看

这是本科八件作品的网页版:从 InDesign 的 A4 横版里拆出来,重排成发出去就能打开的站点——每件作品独立成页,其余收进速览,封面、目录、关于、联系各自成立。风格走斜切(纯黑白、超大粗体、斜纹带),图组全部去掉了边框,让画面自己说话。

技术上不引框架,一套 CSS 变量管住深浅两套配色;灯箱支持滚轮缩放、拖拽和 1:1 原尺寸,A3 图板放大后能读清标注——这是作品集真正的价值所在,放大看图纸,而不是看缩略图。改完版式跑一遍无头浏览器自检,查 JS 报错、破图、横向溢出,五个页面全绿才算完。

这件事最像运营的地方在取舍:不是把所有图都放上去,而是决定谁进目录、谁进速览、每页留几张。判断标准只有一条——招聘方在十秒内能不能看出我会干什么。这次投群核,我又按「AI 产品 · 行业运营」的叙事重排了一版(就是你正在看的这一版),底层结构复用,四个项目的顺序重定。

个人负责 — 全部(信息架构、视觉系统、前端实现、自检、部署)
转化到岗位 — 手上有一堆素材、没有现成模板时,先定结构再谈样式;能自己动手做出来,就不用等排期。

项目页:元信息、图号与整板图纸Zoom

FIG. 04.2 — 项目页 PROJECT PAGE

灯箱:适应 / 1:1 / PREV / NEXT / CLOSEZoom

FIG. 04.3 — 灯箱 LIGHTBOX

图墙:其余作品Zoom

FIG. 04.4 — 图墙 WORKS

移动端:目录转单列Zoom

FIG. 04.5 — 移动端 MOBILE

断点不是缩小版

1100px 以下图组降列,820px 以下全部单列、图纸条转竖向堆叠,移动端隐藏目录缩略图和竖排字——手机上没有一行是桌面版缩小出来的。

总入口