Matrix 首页推荐
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
这是订阅管理 App「知续」的一段展示视频。画面里包含了语音实时识别功能的演示片段，同时加上了「知续」的 Logo 和品牌名称。
这类视频很适合发在社交媒体、官网、产品发布页，或者用在版本更新介绍里。相比直接丢一段录屏，它能更快让用户看明白产品的界面、功能和整体气质。
那么，我是如何在 3 分钟内，只用一个网页，就完成这段视频制作和导出的呢？
今天的主角：Mockup Studio
MockupStudio 是一个用来制作产品展示视频的网站。它可以把普通录屏放进设备样机里，再加上背景、阴影、Logo、产品名称等元素，快速生成一条适合发布的展示视频。
使用过程很简单，基本只需要三步：拖入录屏、调整样式、导出成品。
这类工具很适合开发者、独立开发者、产品经理和运营同事使用。无论是 App 功能展示、版本更新说明、官网素材，还是社交媒体内容，都可以用它快速完成。
一拖
第一步，把录制好的视频文件直接拖到网站中间的视频区域。
拖入之后，页面会立刻预览最终效果。你可以直接看到录屏放进设备样机之后的样子，包括背景颜色、设备位置、画面比例和整体构图。
这一步很直观，不需要先创建项目，也不用理解复杂的时间线。素材拖进去之后，就能马上判断这段录屏适不适合做成展示视频。
二配
第二步，配置视频里的各种元素和样式。
你可以调整背景颜色、设备机型、阴影效果、画幅比例，也可以添加品牌 Logo 和产品名称。设备模型的位置、大小和画面构图，也都可以继续微调。
这些配置基本覆盖了一条产品展示视频最常见的制作需求。很多时候，不需要再打开剪辑软件，也能做出一条看起来完整、干净的展示视频。
三导出
第三步，导出成品。
完成配置之后，点击底部的「图片」或者「视频」导出按钮，就可以直接下载文件。如果你只是想做一张产品展示图，可以导出图片。如果你要发社交媒体、官网或者产品介绍页，就可以直接导出视频。
整个过程就是拖入素材、调整样式、导出成品。对于经常需要做产品展示内容的人来说，这能省下很多重复操作。
创造 Mockup Studio 的契机
我曾经是 Rotato 的早期用户，也很早就购买了它的终身 license（可惜后来开发商改成了年付订阅）。在很长一段时间里，我都用 Rotato 给自己的 App 制作展示视频。总体来说，Rotato 的功能很完整，设备样机很多，也有时间线系统，可以配置各种动画效果。用它来做 App Store 演示视频，确实能做出不错的效果。
但用得多了之后，我也遇到了一些明显的问题。
首先，动画系统和时间线管理有一定学习门槛。如果你没有剪辑经验，刚开始用会比较吃力。很多时候，我只是想快速做一条产品展示视频，并不想花太多时间去调动画节奏。
其次，部分设备样机的视觉效果不够理想。尤其是反光和材质效果，看起来会有点粗糙。对产品展示视频来说，设备样机本身会直接影响成片质感。
再就是订阅成本。如果想持续使用新的设备模型，就需要跟着年度订阅继续付费。对个人开发者来说，这也是一笔需要考虑的开销。
最后，Rotato 需要安装客户端，而且只支持 macOS。对我自己来说影响不大，但如果想让更多朋友、开发者或者运营同事快速使用，这个门槛就比较明显。
Rotato 依然是一个很强的工具，但它的出品更像是一块经过精细打磨的原胚，依然需要用户使用剪辑工具对他进行二次剪辑。对很多独立开发者来说，大家更需要一个打开就能用、几分钟内能导出成品的工具。
于是我开始做 MockupStudio，我希望它更轻量，也更直接。你不需要懂动画，不需要管理复杂时间线，也不需要安装客户端。只要有一段录屏，就可以在浏览器里快速完成套壳、配置和导出。
MockupStudio 目前主要解决这几个问题：
- 不需要动画和时间线知识，也能快速完成视频创建和导出；
- 使用实时更新的设备样机框架，后续可以持续加入新的设备和展示样式；
- 免费版可以使用大部分基础功能，只会在导出视频上附带 MockupStudio 水印；
- 不需要安装任何客户端，直接在网页里完成所有操作。无论是在 Mac、Windows，还是 iPad 上，都可以打开网页直接使用。
后续发展
MockupStudio 目前的基础功能已经比较完整，已经能覆盖我日常做宣传、运营素材的大部分需求。
最开始做它，是因为我自己经常需要给 App 做展示视频。每次都要找设备样机、录屏、调整画面比例、处理背景和动画，流程很碎，也很耗时间。后来我干脆把这些常用步骤整理成一个工具，让一段普通录屏也能更快变成适合发布的 showcase 视频。
过去这段时间，MockupStudio 已经帮我和一些开发者朋友做出了不少展示视频。这些视频被用在国内外的社交媒体、官网、产品发布页面里，整体反馈都还不错。对独立开发者来说，它最大的价值在于减少重复劳动，把原本零散、琐碎、容易拖延的素材制作流程，整理成一个更稳定、更省事的工作流。
接下来我会继续打磨 MockupStudio。后续会补充更多 Mockup 模板，覆盖更多设备、比例和展示场景；也会加入配乐功能，让视频在发布前可以完成更完整的包装。
另外，目前我也在开发模板配置保存功能。现在每次做视频，还需要重新拖入素材、调整位置、设置背景和参数。等这个功能完成后，你可以把常用配置保存下来，下次只需要替换录屏或图片，就能快速生成一条新的展示视频。
对于经常发布产品更新、功能演示、版本预告的开发者来说，这个功能会很实用。尤其是同一个产品需要长期做内容时，统一的模板配置也能让视频风格更稳定。
MockupStudio 后续还会继续保持轻量和直接的使用方式。我希望它能成为一个适合日常使用的产品展示工具：不用安装客户端，不用学习复杂剪辑，也不用为了一条简单的展示视频折腾半天。打开网页，拖入素材，简单配置，就能导出一条可以发布的成品。
> 关注 少数派小红书，感受精彩数字生活 🍃
> 实用、好用的 正版软件，少数派为你呈现 🚀
