构建交互式应用指南
支持团队在处理从未安装过的应用时经常感到棘手。
使用带有截图的 PDF 是标准解决方案。但大多数人并不看 PDF。我想做点更好的东西。我想要一个感觉就像真实应用一样的指南。你可以看到主屏幕，点击一个按钮，然后下一个屏幕就会出现。
我利用真实的截图和可点击的热点（hotspots）构建了一个交互式指南。
工作原理
我使用 Firebase Storage 存储图片，使用原生 JavaScript 处理逻辑。没有使用任何外部库。
- 每个屏幕都是一张完整的图片。
- 我在图片上方放置不可见的矩形，称为热点（hotspots）。
- 这些热点使用百分比而不是像素。这使得它们在窗口大小改变时仍能保持对齐。
- 使用一个简单的状态机来处理导航。每个屏幕都有一个 ID、一张图片和一个热点列表。
编辑器
手动测量坐标太慢了。我构建了一个独立的 HTML 编辑器来加速这一过程。
- 上传截图。
- 拖动鼠标绘制热点。
- 将热点链接到目标屏幕。
- 直接导出代码。
设计选择
并非每个屏幕都有完整的导航功能。为了防止混淆，我为可点击区域添加了脉冲式的蓝色光晕。这能准确地向用户展示他们可以在哪里点击。
关键技术经验
- Firebase Storage：不要手动构建 URL。使用 SDK 方法
getDownloadURL。这包含了绕过安全规则所需的身份验证令牌（auth token）。 - CSS Flexbox：如果你在列布局中使用
flex: 1，父元素必须具有明确的高度。在子元素上设置min-height: 0以防止溢出。 - 性能：每次点击都调用 Firebase 会导致延迟。我实现了一个内存缓存，并在模态框（modal）打开时预加载所有图片。这使得导航变得瞬时完成。
- 缩放：使用 CSS
transform: scale()属性。这确保了无论屏幕尺寸如何，图片和热点都能保持完美对齐。
成果
- 20 个屏幕的导航体验如同真实手机。
- 52 个带有视觉提示的热点。
- 通过预加载和缓存实现瞬时加载。
- 适配任何模态框尺寸的响应式设计。