Demo Gallery Notes：如何把项目做成可展示演示

Method Note · published · 2026-06-08

记录我如何用截图、步骤和公开链接把复杂系统整理成可快速理解的 Demo Gallery。

Cover

Demo Gallery Notes：如何把项目做成可展示演示 writing cover.

Why this matters

一个项目结构完整不等于访问者能理解它。conanxin-homepage 在 HP-14 时已经有了 Projects / Writing / Lab / Case Studies / Search / Tags / Map / About，但第一次访问的人可能不知道从哪里开始。

Demo Gallery 的作用就是降低这个理解成本。它不是替代现有的内容系统，而是给访问者一个"快速入口"——通过截图、步骤说明和公开链接，让人们在几分钟内了解这个站点能做什么。

我写这篇笔记的动机来自一个观察：很多个人作品集的问题是"内容很多，但入口混乱"。访客需要花很长时间才能理解站点的结构。Demo Gallery 是一种"策展"行为——从完整系统中提取最有代表性的能力，组织成可浏览的演示。

Core idea

Demo Gallery 的核心是"可理解性"而非"完整性"。它不需要展示所有功能，只需要展示最有代表性的能力，让访问者快速建立对系统的认知。

一个好的 Demo 应该包含：

• 截图：视觉证据，比文字描述更直接
• 步骤：操作流程，展示"如何使用"
• 公开链接：可验证的入口，让访问者自己探索
• 关联内容：连接到相关的项目、文章、实验和复盘

这些元素共同构成一个"可验证的展示"——不是我说系统能做什么，而是截图和链接本身证明了这些能力。

Notes

结构完整不等于可理解

conanxin-homepage 在 HP-14 时的结构：

• 8 个项目
• 6 篇文章
• 7 个实验
• 6 个复盘
• 28 条搜索索引
• 77 个标签
• 12 条内容关系

这个数字对第一次访问的人来说是压倒性的。Demo Gallery 的作用是把这堆数字转化为"5 个可浏览的演示"，每个演示展示一个系统能力。

Demo 是给第一次访问者的入口

Demo Gallery 的目标读者不是我自己（我已经知道系统能做什么），而是第一次访问的人。他们可能有以下问题：

• "这个站点是做什么的？"
• "有什么值得看的内容？"
• "这个系统的能力范围是什么？"
• "作者的技术水平如何？"

Demo Gallery 通过具体演示回答这些问题，而不是通过抽象描述。

截图、步骤和链接如何组成演示

HP-15 的 5 个 Demo 遵循统一的结构：

• 截图：首页、Projects、Map
• 步骤：首页概览 → 项目档案 → 知识地图
• 链接：首页、项目详情、项目复盘

• 截图：Search、Tags、Map
• 步骤：全站搜索 → 标签索引 → 知识地图
• 链接：搜索、标签、地图

这种结构的好处是"可预测"——每个 Demo 都有相同的元素，访问者知道在哪里找什么信息。

Demo 的安全边界

Demo Gallery 最容易出问题的是"链接边界"。在展示系统能力时，很容易不小心暴露私有链接。

HP-13 建立的链接可见性系统解决这个问题：

• public：可显示真实 URL（如 /search/ /tags/ /map/）
• private：显示 "Private repository"，不暴露 URL
• internal：显示 "Internal workflow"，不暴露 URL
• pending：显示 "Demo not public yet"
• unavailable：显示 "Not available"

Demo Gallery 只使用 public 链接，确保不泄露私有信息。

从截图到视频

HP-15 使用静态截图，因为截图是最稳定的演示形式：

• 可复用：一次捕获，多处使用
• 可验证：截图是系统状态的真实记录
• 轻量：不需要视频托管或播放器
• 可维护：系统更新后重新捕获即可

下一步可以考虑：

• GIF：展示交互流程（如搜索的实时响应）
• 短视频：展示更复杂的操作序列
• 交互式 walkthrough：点击引导，逐步展示功能

但这些是增强，不是替代。截图作为基础演示形式，仍然是最可靠的选择。

How I use it

Demo Gallery 的方法直接影响了 conanxin.com 的展示策略：

• 截图优先：每个重要功能都有截图证据
• 步骤说明：复杂功能分解为操作步骤
• 链接验证：所有公开链接都可点击验证
• 关联展示：Demo 连接到项目、文章、实验和复盘

Related

Next

• 为更多项目制作 Demo
• 探索 GIF 和视频演示
• 设计交互式 walkthrough