视频编辑器 App 设计：编辑页重设计前后对比

视频编辑器只有一份工作：让人一边看着视频，一边把它剪出形状。下面的初稿里，创作者能想到的工具一应俱全，但画面小小地夹在黑边之间，十四个小工具抢着让拇指去点，轨道没有名字，还有一条标签栏占着一个根本没人想离开的页面。

修改后的版本保留了所有功能，把空间还给视频。它参考了 Instagram Edits 应用里的编辑器，下面每一处改动你都可以照搬。

整个页面的前后对比

新手初稿

修改后

左边，视频是屏幕上最小的东西。画面只是黑边之间一条 164 px 宽的细条，其余几乎全是控件：四个下拉菜单、十四个工具、五个按钮、五个滑块、一排媒体和一个升级横幅。

右边，页面从上到下的阅读顺序正是创作者的工作顺序：离开或导出、看画面、移动播放头、选片段、对它操作。预览是 390 乘 404，文字从 11 到 17 px，而初稿只有 7 到 11 px，并且没有标签栏。

改了什么，用数字说话

修改 1：顶栏只留必要的东西

之前

之后

返回箭头、Cutline 字标、名称 Untitled Project 1（已编辑），接着是撤销、重做、帮助和设置图标，以及一个小小的橙色 EXPORT 1080P 按钮。对比之下：一个朴素的关闭图标、带下拉箭头的名称 Road trip、1080p，以及一个更大的珊瑚色导出按钮。

初稿的顶栏在 26 px 的高度里塞了八样东西，项目名还被一个没人需要的字标挤得喘不过气。导出是屏幕上最重要的按钮，却也是最小的之一，一颗缩在角落里的小药丸。

修改后的顶栏只留四样：关闭、名称、画质和导出。导出按钮高 33 px，一块珊瑚色填充，所以它是顶部唯一显眼的东西。名称旁的箭头会打开项目菜单，帮助、设置、循环和升级现在都收在这里。撤销和重做挪到了播放头旁边，那是手本来就在的地方。

可复用的规则：顶栏只回答“我在哪、怎么完成”。其他一切都放到名称后面。

修改 2：把整个宽度交给视频

之前

之后

一个矮矮的画框，两侧是黑边，中间是一辆橙色面包车的竖版画面，只有 164 px 宽。对比之下，同一个画面铺满全宽，390 px 宽、404 高，直角，上面没有任何控件。

把视频显示得很小的视频编辑器，是误解了自己的工作。初稿里画框是 16:9，画面却是竖版，黑边吃掉了一半以上的宽度。画框还带边框、圆角，以及画在图像上的水印和时间码药丸。

修改后让预览铺满屏幕宽度，没有圆角，没有边框，上面什么都没有。你看到的就是正在剪的那一帧，大小足以判断对焦和构图。时间码挪到了预览下面，水印也从编辑器里移除了。

可复用的规则：用户来改什么，什么就应该是屏幕上最大的东西，而且上面不要画任何东西。

修改 3：只显示你所选片段的工具

之前

之后

四个下拉菜单：画幅 16:9、画质 1080p、帧率 30 和色彩 Rec.709，然后是分两行、每行七个的十四个小工具，标签 8 px：修剪、分割、速度、音量、滤镜、调整、裁剪、文字、贴纸、特效、音乐、配音、蒙版和旋转，外加一个“片段 2”标签，带删除、复制、拷贝、替换和倒放。对比之下，只有一排五个大工具：分割、音量、速度、特效和删除，左边有一个返回箭头，右侧延伸出屏幕边缘。

初稿把所有工具一次性摆在屏幕上，不管它们适不适用于你选中的东西。十四个 16 px 图标配 8 px 标签，读起来费劲，点起来更费劲，而片段按钮还单独挤在它们下面的一行。

修改后有两种状态。选中片段时，一排扁平工具显示你能对它做什么：分割、音量、速度、特效、删除和调整，这一排延伸出边缘，提示你可以滑动。左边的箭头返回主工具行，里面有文字、贴纸、音乐、配音、滤镜、裁剪、旋转和蒙版。图标放大到 22 px 粗体，标签放大到 12 px。

什么都没有被砍掉。修剪现在就是片段本身上的黄色把手，片段属性收在“调整”后面，画幅、帧率和色彩收在顶栏的画质按钮后面。

可复用的规则：为被选中的对象显示工具。无法作用于当前选择的工具就是噪音。

修改 4：让时间线可读

之前

之后

一把从 00:00 到 00:40 的标尺，五张静帧组成的小胶片条，一条紫色轨道、一条绿色轨道和一条绿色波形，都没有名字，还有一根 1 px 的红色播放头。对比之下：缩放更精细的标尺，名为 Film Grain 的轨道，名为 Road trip 的珊瑚色文字轨道，名为 Golden Hour、带波形的洋红色音乐轨道，两端都延伸出屏幕边缘的胶片条，选中片段上有黄色把手和 10.0s 标签，以及一根贯穿所有轨道的 3 px 白色播放头。

这里才是编辑器真正的栖身之地，而初稿把它当成了装饰。四条轨道只有 18 px 高，没有标签，不逐个点开就分不清哪条是文字、哪条是音乐、哪条是特效。播放头只有 1 px 宽，胶片条带着圆角缩略图和间隙，看起来像一排贴纸。

修改后的时间线有了带名字的轨道：Film Grain、名为 Road trip 的文字轨道和名为 Golden Hour 的音乐轨道。每条高 24 到 36 px，从边到边铺开，没有圆角，彼此间隔 4 px。

胶片条高 58 px，看起来就是一整段素材。选中的片段有一个带箭头和时长标签的黄色把手，一根 3 px 的白色播放头横穿一切。

时间也是老实的。缩放是每秒 153 pt，所以播放头停在刚过 12 秒的位置，两行时间显示 00:12 over 00:48。

可复用的规则：没有名字的轨道就是个谜。给每条轨道加标签，并给选中项一个醒目的颜色。

那些更小的修改

• 没有标签栏。 编辑器是你停留的地方，所以首页、项目、编辑器、模板和个人中心占掉 72 px，换来一条剪辑时没人点的栏。
• 每个任务一个强调色。 珊瑚色标记导出和文字轨道，黄色标记选中的片段。初稿把橙、紫、绿、红都花在了说不清自己是什么的轨道上。
• 朴素的控件。 播放、撤销和重做背后的圆圈没了。朴素的图标在深色背景上更干净。
• 水印和时间码药丸移出预览。 时间放在画面下方，水印提示连同升级链接一起移到了项目菜单。
• 缩放就是捏合。 缩放滑块以及它的加减按钮占了整整一行，而在时间线上捏合就能完成同样的事。
• 跳转就是拖动。 跳转按钮没了，因为拖动时间线就能移动播放头。
• 添加媒体是胶片条上的加号。 没有选中片段时才显示。
• 字号体系。 文字从 11 到 17 px，取代原来的 7 到 11 px，时间线标尺使用 11 px 的等宽字体，数字不会跳动。

审视你自己的编辑器

获取 Figma 文件

免费文件里有新手初稿、修改后的页面，以及每个部件的组件。

免费 Figma 文件

视频编辑页重设计，前后对比

两个页面以及每个部件的 Figma 组件。免费，仅可查看，复制到你的草稿即可使用。

在 Figma 中打开

常见问题

移动端视频编辑页应该怎么设计？

让预览占满屏幕宽度，顶栏只留关闭按钮、项目名、画质和一个导出按钮，并把选中片段的工具放在一排扁平的行里。再加一条有命名轨道和一根播放头的时间线。

视频编辑 App 里的预览应该多大？

在屏幕允许的范围内尽量大，最好是全宽，没有圆角，上面也不画任何东西。画面小小地夹在黑边之间，会让人很难判断构图和对焦。

视频编辑器需要标签栏吗？

通常不需要。正在剪视频的人并不想离开，所以标签栏会把大约 72 px 花在他们用不到的导航上。把首页、项目和模板放到项目名或关闭按钮后面。

视频编辑器怎样展示工具才不显得杂乱？

只显示适用于所选对象的工具。选中片段时，一排分割、音量、速度、特效、删除和调整就够了，一个箭头可以返回文字、贴纸、音乐、配音和滤镜组成的主工具行。

视频时间线界面应该是什么样？

一把带时间标签的标尺，为文字、音乐和特效设置的命名轨道，从边到边铺开的胶片条，选中片段上的把手，以及一根贯穿所有轨道的宽播放头。

来源

• 两个页面都是我们自己在 Figma 中设计并测量的。应用 Cutline、项目和轨道都是虚构的。时间线参照了 Instagram Edits 应用编辑器的两张真实 iPhone 截图，使用它自己的缩放：每秒 153 pt。
• 图标来自 Phosphor (MIT)。状态栏根据一张实测的真实 iPhone 截图绘制。
• 照片来自 Pexels：Roman Odintsov、Hector Perez、Thang-Nhat Tran、Airam Dato-on 和 Sokil。
• 最初以轮播图形式发布在 App Brainy。