拖动浏览,滚动或双指缩放。打开帮助查看键盘操作。

Yan
开放
合作
聊聊吧
Yan Fontão Boring view
All work

Case 008移动应用设计

Boomerang Video Editor

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

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

01

我的贡献

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

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

编辑页面,上方被一只霓虹光照下的手占满,时间线上有视频和音频轨道,下面一行工具,标着 Trim、Direction、Speed、Loops、Text、Voice 和 Music。
Trim 页面,视频还是同一段,时间线上两个手柄之间的片段被高亮,底部有 Cancel 和 Save 按钮。
录制自 Figma 原型。从启动页经过新手引导,到编辑器中打开的一个项目。 编辑:视频在上,轨道在下,底部是一行工具。 Trim:两个手柄决定要保留的片段,工具让位给 Cancel 和 Save。

02

视频占据屏幕

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

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

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

03

一次只做一件事

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

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

04

编辑前后

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

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

000

使用说明

Yan Fontão
轻点
打开一个屏幕
点击
打开一个屏幕
拖动
浏览项目墙
滚轮
鼠标缩放,触控板移动,双指缩放
− +
拉远查看整面项目墙,或拉近
方向键
在案例中:↑↓ 切换案例,←→ 切换媒体。在项目墙上:移动
空格
打开或返回
Enter
打开
Esc Backspace
返回
Home
回到中心,再回到开场
PgUp PgDn
上一个或下一个频道
Tab
依次浏览项目和链接
R
随机项目
0–9
输入频道号,1–61
?
本页
快捷键

项目墙背景音乐

文件已为网页压缩并统一音量。

开放
合作
聊聊吧

给 Yan 发消息

告诉我你是谁,我会尽快回复。

000

关于 Yan

你好,我是 Yan

产品设计师/ 设计工程师

大多数产品都会在设计和代码之间丢掉一些东西。我的不会:我研究问题、设计产品,并亲手把界面上线,所以你批准的,正是用户最终拿到的。

  • 2018开始软件开发
  • UI + code设计与实现

合作过 Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

巴西 · 可远程、混合或驻场

Yan Fontão 的坐姿肖像:穿绿色毛衣、戴眼镜,手持麦克风。
开放
合作
聊聊吧
开放
合作
聊聊吧
000

加密频道

受保密协议约束

请输入访问码

向 Yan 索取访问码 ↗
开放
合作
聊聊吧
YAN FONTÃO 完整案例

频道 08 移动应用设计

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,有环形的应用标志、首页和编辑器。