跳到正文
TV view聊聊吧
中文
全部作品

移动应用设计

Boomerang Video Editor. 短片段变成循环,视频始终可见

一款把短片段做成循环的 iPhone 剪辑应用,从项目网格一直设计到导出面板。深色界面只用一种亮粉色作点缀,让注意力留在素材上。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
原始设计文件中的 Boomerang 演示封面。
演示封面,来自原始文件。

来自原始 Figma 设计文件的页面,使用示例素材。

我的贡献

Boomerang Video Editor 是一款深色的 iPhone 应用,用短片段制作循环视频。首页上它叫作 Boomerang Maker,启动页用一行字概括了这个想法:“Create loops that Wow!”

我设计了从新手引导到导出的完整流程,中间经过首页、素材选择、付费墙、裁剪、编辑和滤镜。这个案例只讲编辑决策体现得最清楚的那几个页面。

录制自 Figma 原型。从启动页经过新手引导,到编辑器中打开的一个项目。
编辑页面,上方被一只霓虹光照下的手占满,时间线上有视频和音频轨道,下面一行工具,标着 Trim、Direction、Speed、Loops、Text、Voice 和 Music。
编辑:视频在上,轨道在下,底部是一行工具。

视频占据屏幕

在编辑页面上,视频铺满时间线以上的全部空间,控件放在一层从素材里延伸出来的深色渐变上。播放、撤销、重做、00:00 / 00:50 时间显示和全屏共用一行,就在它们所控制的轨道正上方。

它们下方,视频和音频共用一把标尺。工具排成单独一行,沿底部延伸并超出屏幕边缘:Trim、Direction、Speed、Loops、Text、Voice、Music 和 FXs。每个工具都是图标配文字,所以没有哪个工具只靠图标来表意。

Trim 页面,视频还是同一段,时间线上两个手柄之间的片段被高亮,底部有 Cancel 和 Save 按钮。
Trim:两个手柄决定要保留的片段,工具让位给 Cancel 和 Save。

一次只做一件事

Trim 只改变屏幕的下半部分。工具栏让位给 Cancel 和 Save,选中的片段位于时间线上的两个手柄之间。唯一还要决定的,是视频从哪里开始、到哪里结束。

My projects 页面,有两列视频缩略图网格,显示时长,粉色的 New Project 按钮,顶部有一个 Become a PRO 按钮。
首页:项目排成两列网格,New Project 始终触手可及。
Export video 卡片,有视频预览、HD、Full HD 或 4K 的选项、四个社交网络图标,以及 Cancel 和 Export 按钮。
导出:选择分辨率和发布到哪里。

编辑前后

首页用两列网格显示项目和它们的时长,网格上方是一个固定在内容之上的 New Project 按钮。在另一端,导出面板问了两件事:分辨率,其中 4K 用一个小皇冠标出,以及要发布到哪些应用。

粉色始终跟着下一步:New Project、Save、Export。它也用来标记 Become a PRO,这是首页上唯一处在编辑流程之外的操作。

演示图片,有应用的粉色和蓝色环形标志,旁边是两部倾斜的手机,显示首页和编辑页面。
演示 Frame,有环形的应用标志、首页和编辑器。