怎样把网站录下来放进作品集？

• 上线的网站，而不是设计稿。 真实的内容、真实的图片、真实的字体渲染。如果客户后来改过，就用现在的版本，或者录你存档的构建版本。
• 先录桌面版，再录手机版。 桌面和手机两段视频并排放着，比任何说明文字都更能体现响应式设计。手机版要按手机宽度读取，网站才会返回它真正的移动版式。
• 如果你同时设计了浅色和深色，两种都录。 直接强制指定配色方案，而不是每录一条就去改一次系统设置。
• 你得意的那些交互。 让光标指向你设计过悬停状态的卡片和按钮，它们就会在视频里播放。

浏览作品集的人，给每个项目的时间只有几秒，然后就决定是否留下来。一开始就动起来，或者在首屏停留一秒左右再动，整段滚动控制在 10 到 20 秒之间。

对作品集视频来说，停顿比什么都管用。在每个体现了设计决策的区块上停一两秒：首屏、功能网格、价格表。一段视频最多可以放 6 处停顿，每处 0.5 到 5 秒。如果页面很长，就把滚动裁到页脚之前结束，而不是把整体速度加快。

导出 4K 之前，先查一下各平台自己的上传限制：凡是上传后会被重新编码的地方，1080p 的文件通常更稳妥。

十二个项目用十二种方式录，看起来就像十二个人的作品。把呈现方式定一次，然后一直沿用。

• 一种外框。 Safari 或 Chrome 窗口，浅色或深色，或者一圈简单的边框。每个项目都用同一种。
• 一种背景。 纯色、渐变、36 个预设之一，或者在窗口后面放你自己的图片；如果是照片，就加点模糊和颗粒让它柔和下来。
• 一种运动方式、一种速度。 同样的缓动，页面每一屏大致相同的秒数。
• 留白、圆角和阴影只设一次，让窗口在每一帧里都以同样的方式摆放。

一段静音循环的视频，表现得就像一张动图，在所有现代浏览器里都会自动播放，只要它是静音的、并且允许内联播放。把播放设为「往返滚动」，最后一帧和第一帧就能对上，循环不会跳。

<video autoplay muted loop playsinline preload="metadata"
       poster="project-poster.jpg" width="1920" height="1080">
  <source src="project.webm" type="video/webm" />
  <source src="project.mp4" type="video/mp4" />
</video>

宽度和高度能防止文件加载时版式跳动，封面图则让这块位置在第一帧到来之前有东西可显示。