如何制作良好的UI演示视频、视频录制

作者:丁晓峰  发布时间:2020-05-06 22:12:32

  无论是演示现有功能,录制“操作方法”还是产品发布,录制的演示视频的质量都很重要。

  这里是一些最佳实践的列表,这些最佳实践是从录制了大量发布视频后收集的。提示的范围从避免光标移出画布停止录制到确保为视频获得良好的剪裁。希望他们在您进行视频录制之旅时也能为您提供帮助!

  1.设置黑色背景

  您使用的操作系统可能会在浏览器窗口后面添加阴影。这些阴影是黑色的,因此,如果将它们融合到黑色背景中,则可以更好地裁剪视频。

  2.清理浏览器

  隐藏所有扩展程序,这不是您要演示的内容。可以使用任何喜欢的浏览器,没关系-只需尝试对所有视频使用相同的浏览器。

  在用户界面周围显示浏览器本身既是构建视频框架的一种好方法,但也可以帮助实现上下文关联并提供大小相关性。这与显示模拟智能手机框架如何帮助上下文化移动UI相同。

  温馨提示:Chrome的移动检查器甚至可以为您添加该设备框架-如果您对显示的设备不太挑剔的话。只需点击F12,然后切换设备工具栏,然后在溢出菜单中选择“显示设备框架”。

  3.创建一致的“捕捉区域”

  BetterSnapTool使您可以创建捕捉区域,这些捕捉区域可以通过屏幕放置区或键盘快捷键来调整浏览器窗口的大小和位置。创建这些文件,使您的浏览器在演示视频中的大小和位置始终相同。确保捕捉区域是偶数像素值,即1234×688而不是1233×689,这对于以后的GIF制作很重要。

  BetterSnapTools中的“捕捉区域”。

  4.使用“Screeny”进行记录

  在App Store上的Screeny:如果将其与技巧3配对,则可以记录屏幕的预设部分。这种组合的优点在于,您可以将Screeny捕获窗口的大小调整为BetterSnapTool捕获区域。

  作为一种免费的替代方法,内置的QuickTime也非常适合录制全屏甚至其中的一部分,但是您每次都必须仔细调整部分的大小。

  5.演示最新版本

  如果要演示软件,请演示最新版本。考虑甚至演示将来的版本。UI视频的保质期会稍长一些,您将了解开发过程。

  6.创建良好的虚拟内容

  演示创意软件时,请创建良好的虚拟内容,如果适用,请创建精美的布局。即使您的目标是入门视频,讲故事,启发灵感也始终很重要。明显的演示内容,否则只会散发出虚假的氛围。

  您可以包括一些来自Pexels的漂亮照片。围绕通用主题选择照片。不要混合样式:要么做所有自然照片,要么全部抽象照片,要么全部插图,要么所有面孔,尽量不要混合和匹配。

  7.将大字体用于您希望人们阅读的事物

  这主要适用于演示内容。相反,不要害怕使用小文本来处理与您讲的故事无关的事情。

  8.记住录制快捷方式

  如果使用Screeny,则开始和停止录制的键盘快捷键是1。这样,您无需看到鼠标移出记录区域即可停止视频记录。

  另一种方法是在演示内容前后加上几秒钟的额外填充来录制视频,然后可以使用视频编辑工具将其剪裁出来。。

  9.在触控板上滚动

  大多数现代触控板均具有丝般平滑的滚动效果,可防止屏幕跳动。这提供了一个更加平静的演示视频。

  10.将.mov文件转换为.mp4

  在命令行上执行此操作的一种简单方法是安装FFMPEG:brew install ffmpeg。然后,您可以ffmpeg -i file.mov file.mp4在命令行上使用转换视频。

  为什么要转换?由于FFMPEG生成的mp4文件具有更高的可移植性和兼容性,因此更可能在您将它们放入幻灯片,网站,其他文档的任何环境中使用。

  11.通过ImageOptim运行GIF

  当您知道视频准备就绪时,请始终将其作为最后一步。尝试使用完整的帧率和分辨率以获得最漂亮的结果,然后在需要进一步减小文件大小时向后拉。最后,通过ImageOptim运行GIF ,它将节省比您想象的更多的字节。

  在录制时使用均匀尺寸。这是因为,在撰写本文时,如果您尝试转换尺寸不均的视频,则GIF Brewery中存在一个错误,该错误会导致各种错误。

  如果要从一开始就制作GIF来录制视频,请不要使用高细节摄影,而应使用减少色彩的平面插图以确保文件大小易于管理。



转载请注明来自:http://www.dingxiaofeng.com/design/125.html

相关文章阅读

如何使用设计思维来解决营销问题

平面设计简介以及基本结构单位

如何模拟UX编写

如何制作良好的UI演示视频、视频录制

理想的设计工作流程

Top