设计汇报的下一种形态不是PPT,是交互网页

《Fill In the Blank》是由同济大学大三的四位同学（董梓霖、刘幸彤、张炜煜、刘优赜）完成的上海站地区城市设计，主题为"城市裂缝的缝合与中心区价值重塑"。上海站铁路廊道及相关交通设施长期造成南北空间分隔，形成约 42 公顷联系不足、使用效率偏低的城市空间。项目中的"空白（Blank）"，指的正是这些需要被重新识别、组织与激活的空间。

他们的思路是一条很完整的"数智驱动"设计链：

• 问题识别：用蒙特卡洛随机场 + OD 出行数据，量化步行被铁路阻断最明显的"断点 / 死点"，并通过综合评分 S = 0.4·阻隔 + 0.3·需求 + 0.3·绕行 判断优先干预位置；
• 路径生成：用"羊毛算法"将直接连接关系转译为更连续、柔性的步行织补网络；
• 功能判断：通过 POI 密度分析识别"南密北疏"的空间分布特征，并据此推导功能分区；
• 成果整合：将总体规划、13 张方案图集、成本计算平台，以及四位成员各自深化的节点设计整合到同一套网页系统中。

设计成果本身已经较为完整，但更值得关注的是，他们将这套复杂的分析和设计过程，组织成了一个可以点击、滚动、播放和展开的网页系统。

02 交付的"载体"，正在变化

回头看设计行业的汇报方式，其实一直在变：

手绘图板 → CAD 出图 → PPT / PDF → 可交互网页。

很多人以为这只是"换个软件"。但更准确地说，这是汇报范式的变化

从"展示完成了什么"，转向"让你进入方案的信息结构中进行理解和验证"。

PPT 是单向的、静态的、线性的：观看者通常只能按照既定顺序阅读。 而网页是双向的、动态的、可探索的：观看者可以开关图层、拖动参数、点开细节，并在交互过程中理解设计逻辑。

对评委或甲方来说，这种可操作的汇报方式，能够提高信息透明度和方案说服力。

03 AI 降低了网页原型的制作门槛

你可能会说：做网站是程序员的工作，设计师未必有足够的时间和技术背景。

几年前确实是。但现在不是了。

AI 编程（也就是大家说的 vibe coding）的出现，让设计师可以用自然语言描述界面结构和交互逻辑，再由 AI 辅助生成网页原型：

"我要一张固定在左边的地图，右边滚动的时候，地图跟着切换不同的分析步骤……"

AI 就可以辅助搭建对应的页面结构和基础交互。

这组作业本身就是一个例子：几位并没有专业前端背景的学生，完成了较高完整度的网页表达。 在 AI 时代，"会不会从零写代码"不再是唯一门槛，更关键的是：能否把设计思考转译为清晰的信息结构和交互体验。

04 为不同设计信息选择合适的交互方式

这是这份作业最值得分析的部分。

他们并不是简单地把图纸截图放到网页上，而是针对不同类型的设计信息，分别选择了更适合的交互呈现方式。

下面逐项来看这些交互方法。

4.1｜多图层信息 → 图层开关，用于主动对比

上海站的交通分析里，有轨道封闭区、主要车流、地铁线路、步行穿越四套信息。

如果全部叠加在一张图上，信息会变得难以辨认；如果并排放四张分图，读者又需要在多张图之间反复对照。

他们的做法是：设置四个开关按钮。读者选择不同图层时，图例和旁边的解说文字会同步变化。

△ 多图层信息可以通过开关控制实现主动对比

4.2｜多步骤流程 → 固定地图与滚动叙事

"断点识别"这件事有整整 5 个步骤：构建路网 → 生成 OD 数据 → 撒采样点 → 算阻隔/需求指数 → 综合评分。

他们用了一种叫 scrollytelling（滚动叙事） 的手法：地图固定在左边不动，你往下滚，右边的步骤一个个推进，左边的地图内容跟着实时变化。

同一张底图承载完整逻辑链，叙事更连贯，也避免了反复跳页。

△ 同一张底图随步骤变化，流程逻辑连续展开

4.3｜抽象算法过程 → 可播放的步骤动画

OD 出行数据怎么生成的？这是个很抽象的过程：随机抽起点 O、终点 D，连欲望线，再算实际绕路。

静态箭头图很难解释清楚。他们将其做成了一个可以播放、可以逐步推进的动画，旁边还有实时数据卡，显示当前这一对的绕行率 η、路网距离、直线距离。

△ 将抽象的算法过程动画化、步骤化，降低理解难度

4.4｜多维数据 → 同底图切换，降低空间对照成本

每个断点有阻隔、需求、绕行、综合四个指标。

常规做法是放四张并排的热力图，但读者需要在不同图面之间进行空间对照，理解成本较高。

他们的做法是：在同一张地图上设置四个 Tab，点击后地图实时切换到对应指标的热力分布。 空间位置保持不变，只切换数据层，对比关系更加清楚。

△ 在同一底图上切换指标，比多张并排图更便于对照

4.5｜参数选择 → 用滑块呈现阈值变化

采样阈值的选择如果只用文字解释，理解成本较高。这里通过滑块控制评分阈值，散点图和地图上的采样点会同时实时筛选。读者可以通过操作直接理解阈值变化带来的影响。

△ 通过拖动参数观察结果变化，比静态截面更容易理解阈值含义

4.6｜生成过程 → 分阶段展示

肌理生成做成了三张卡片，点击任意一张，会弹出一个分阶段展示生成过程的图集，展示织补网络从初始条件到生成结果的演变过程。这个部分类似于 PPT 的连续播放，但保留了网页的主动选择能力。

△ 点开卡片，查看设计逻辑的阶段性生成过程

4.7｜多张成果图 → 轮播 + 灯箱

13 张方案图集如果全部平铺，会显著拉长页面。他们采用了轮播 + 点击放大灯箱：左右翻页浏览，点开任意一张查看高清细节，每张都配有对应的设计说明文字。

△ 轮播控制页面长度，灯箱保留图纸细节，说明文字与图像同步呈现

4.8｜方案可评估性 → 嵌入可计算工具

另一个值得注意的部分是：他们把一个可以实时计算的成本平台直接嵌入了网页。

"方案经济性"不再只是文字说明，而是被转化为一个可以操作和验证的小工具。这增强了方案的可评估性。

△ 将"经济性"从文字判断转化为可操作的计算工具

4.9｜图面局部说明 → 图片热点标注

到了个人深化设计，立面材料导则采用了热点标注：立面图上设置若干个可点击的标记点，点击后弹出对应位置的材料或界面说明。

△ 将说明直接绑定到图面位置，比图文分离更清楚

4.10｜文字 ↔ 模型联动高亮

还有一处很细致的设计：在功能分布导则中，当你 hover 表格中的某一楼层或某条设计原则时，旁边 3D 体量图上对应的楼层会同步高亮，从而建立文字说明与空间模型之间的对应关系。

△ 文字和三维体量同步高亮，使信息关系更加明确

05 方法论

好的汇报，不是把图搬上网，而是先问每一块信息：它本质是哪一类？

还可以继续扩展的方向

在此基础上，还可以继续扩展出更多交互方式：

• 拖动对比滑条：通过左右拖动分割线，对比改造前后的空间状态，比 hover 更可控；
• 3D 模型直接嵌网页：用 model-viewer / Three.js，让人旋转看体量，替代一堆轴测图；
• "What-if"参数推演：拖动容积率、绿化率等指标，观察方案指标的实时变化；
• 时间轴滑块：拖年份，看城市或方案的演变；
• 地图上手绘标注 / 留言：让评委或甲方直接在图面上标注反馈；
• 嵌入 AI 讲解模块：读者询问"这块为什么这么设计"时，页面可以返回对应解释。

这些能力在今天已经不再完全依赖专业前端开发，设计师也可以借助 AI 工具完成初步原型。

06 如何使用 vibe coding

最后给出一些相对可落地的建议：

1. 先定信息结构，再选交互。每一块内容先判断其信息类型，再决定是否需要图层、滑块、动画、热点或计算工具。
2. 让 AI 使用成熟的技术框架：地图用 Leaflet，图表用 ECharts / D3，滚动叙事用 IntersectionObserver。只要能说清"sticky 地图 + 右侧滚动步骤"这类交互范式，AI 就更容易生成有效原型。
3. 数据和表现分离：把分析结果（GH / Python 计算结果）先导出为 JSON / GeoJSON，再让 AI 编写渲染逻辑。这组作业也采用了类似方式。
4. 一次只搭一个组件：不要一开始就让 AI 生成整站。先把"图层切换"跑通，再做下一个模块，逐步调试。
5. 先定统一的视觉系统：用 CSS 变量定义设计令牌：颜色、字体、间距，并在各模块中复用，避免整站风格不统一。
6. 复杂工具用 iframe 嵌入：像成本计算器这类功能，可以单独做成小应用，再嵌入主叙事页面，降低相互干扰。
7. 链接化交付：部署到 GitHub 后，作品就可以通过诸如 vercel/notify 这样的免费前端部署工具，一个链接访问，便于跨端浏览和持续更新。

不要只把时间投入到图板和 PPT 排版上。工具在变，表达方式也在变。AI 时代，能把设计思考转译为清晰体验的人，会获得更强的表达优势。 你的下一份作品集/设计汇报，也许可以尝试以网页的形式呈现。

PolyLab 核心业务与服务范围

1. 留学申请指导：深耕建筑、城市设计、城市分析、交互设计及建筑交互等交叉专业，凭借对全球顶尖院校申请逻辑的深度洞察，从作品集主题定位、项目叙事梳理到视觉呈现优化，帮助申请者打造兼具个人特色与学术深度的作品集，冲刺理想院校。

2. 科研成果转化：为学术研究者提供学术会议论文、期刊论文投递支持，涵盖选题优化、文献梳理、论文撰写规范指导及投递策略分析等服务，助力研究成果高效对接优质学术平台，提升学术影响力。

3. 职业转型需求：简历润色专项服务，结合客户目标行业特性，挖掘个人项目亮点，优化经历表述逻辑，将过往项目经验与岗位需求精准匹配，打造更具竞争力的简历，为职业转型铺路。

4. 商业开发与交流业务：聚焦跨领域技术应用，为企业提供定制化技术解决方案开发，并搭建行业技术交流平台，促进产学研资源整合，推动技术成果落地与行业协同发展。