前三篇文章《从零开始做社交功能》、《从Instagram与Facebook研究Feed的基本功能》、《浅析Feed内容定位与趋势》，从宏观过渡到微观，今天开始落实到具体的页面设计，主要说说视频拍摄页面应该怎样设计。

基本的思路是：拍视频->查看视频

同样的，在前文中有提到，我们在了解一件事情的时候最先做的，应该是了解它的准确的定义。

那么什么是视频呢？

百度百科的理解：

视频泛指将一系列静态影像的方式加以捕捉、纪录、处理、储存、传送与重现的各种技术。连续的图像变化每秒超过24帧（frame）画面以上时，根据视觉暂留原理，人眼无法辨别单幅的静态画面；看上去是平滑连续的视觉效果，这样连续的画面叫做视频。

由以上定义我们可以知道视频最大的特征是有一个时间跨度。

针对这样的特征，拍摄视频界面的设计，主要需要注意以下几点：

1. 概念的理解：起始时间、终止时间、视频的长度
2. 查看方式：保存地点的提示，相册的缩略图显示（精彩点在哪就显示哪、）
3. 设备方面考虑：横竖屏切换、前后置摄像头的调换、闪光灯、画面的放大缩小
4. UI与动效的协助（这一点综合在以上三点中进行分析）。

1.概念的理解：起始时间、终止时间、视频的长度

视频的时间跨度意味着有起始时间点和终止时间点，以及拥有一个时间长短的属性。这些因素共同决定了，我们拍摄出来的视频会以怎样的形态呈现在用户面前。绝大多数视频是拍摄未来的一段视频，但市面上也出现一些回溯式的拍摄手法，也就是说拍摄的是操作动作之前的视频。

iOS系统自带的视频拍摄功能是最具代表性的拍摄界面。点击一下红色button开始录制，接着button变成停止的标志，再次点击则停止录制。录制的过程中在顶部会有闪动的小红点表示录制的状态，以及录制的时长显示。

可以看出它整个录制的过程中分为录制前、录制中、录制后三个状态，并且时间段表述得非常清晰。

再来看看Instagram和美拍的拍摄方式。两者的拍摄方式类似，但Instagram的操作方式更加简洁。美拍除了涉及到对视频画面的处理，还涉及到背景音乐、视频长短等等的编辑功能，从这些点出发，相比于Instagram，美拍更侧重于视频的编辑功能。当然这也是很重要的一部分，楼主会在以后的文章中专门去讲这一块的内容，今天就用Instagram去主要分析一下视频的拍摄页面的设计。

可以看得出，两者界面侧重点的不同是来源于产品的定位，Instagram偏向于支持用户产生出优质的内容，美拍更偏向于用特效去编辑视频产生更大的娱乐作用。

再来看看Instagram页面设计的出发点，相对于iOS拍摄，它支持镜头的转移，即多段短视频的衔接功能。相对于iOS沉闷的记录功能，该功能的改变的添加，使用户有更大的发挥空间。所以它抛弃掉iOS点击两下录制一段视频的操作，采用长按的方式进行录制，松开手停止录制的操作方式。

因为是短视频，有可能用户在频繁点击中可能混淆了录制中与未录制的状态，或者说让用户觉得比较混乱，也是因为时间短，长按的方式用户比较容易接受，对于录制的状态更加明了。反之，如果让用户去录制一个5分钟的视频，那就适合点击的方式去做，因为用户很有可能因为长时间的按屏幕产生手滑而误结束了视频的录制过程，这也是为什么美拍在选择录制5分钟视频时恢复成iOS的点击的方式进行操作了。

另外一个时间点，为什么Instagram在短视频中设置一个最短时间是3s？Facebook做过一个调查，当视频长度设置到3s的时候，90%的用户会将它当做一个Gif去看完，当设置为30s时，只有20%的人能看完了，而且在3s内可以讲完一个简短小的画面故事，于是Instagram将视频的最短时间设置为3s。当然也可能还有另外的原因。

2.查看方式：保存地点的提示

iOS录制完毕之后，在左下角的相册会有动效提示更新。画面由小到大表示有新的内容更新。它从拍摄的三个状态到查看视频，整体流程是按用户所熟悉的时间顺序进行操作的，用起来会觉得特别顺畅。

相对于视频，iOS的目的是让用户的注意力集中在拍摄界面，场景侧重于用户作为一个工具去记录一段时间维持较长连续发生的事情，而Instagram的拍摄功能是融合于发Feed过程中的一个环节，它更支持用户拍完就去分享，丰富Feed的内容，而查看也直接跳转到Feed。

有个小细节需要关注的是，在视频产生后的小动效，除了像iOS的表现之外，还有的在相册最上层覆盖一个转圈的小圆，比如改版前的VSCO，它比较适合在拍摄完之后，视频还有一个处理的等待时长的表达。还有的处理方式是将最后一帧画面缩到相册，这样表达更明显，缺点就是动效有点繁复，不适合连续拍摄短视频的场景。

相册的缩略图有可能是第一帧，有可能是最后一帧，也有可能是通过算法得出的视频中比较精彩的一帧，出发点就是能在这一帧上让用户马上想起来这个视频主要内容是什么，节约用户查看的时间。

3.设备方面考虑：横竖屏切换、前后置摄像头的调换、闪光灯、画面的放大缩小

在视频拍摄页面，比较特殊的一点就是，手机有横竖屏切换的情况，而且切换的频率还比较高。在这里除了要UI上尽量保持一致之外，还有一点需要考虑的是如果横竖屏都支持切换，那么产出物的最终形状和显示也要考虑进去。比方说如果短视频在拍摄过程中切换了镜头，第一个是比较高的长方形，第二个是比较宽的长方形，那么产出物应该怎样处理。在这个情况的处理方式上，Instagram和美拍是一致的，就是统一采用正方形进行取景，那么规整了产出的视频形状。

前后置摄像头的调换、闪光灯、画面的放大缩小这三项功能，并不一定都需要，还是根据PM对产品的定位来进行取舍。比如说iOS是基础的视频录制，并且使用人群跨度比较广，那么它功能齐全，UI简洁是最不会出错的一种选择。Instagram则只有前后置摄像头的调换功能，美拍则采用前后置摄像头的调换、闪光灯，出发点其实是都想支持自拍，毕竟社交需要自己面孔同朋友进行互动。

从这篇文章对具体单个页面的分析可以看出，所有的功能的出发点都是来自于产品的使用人群、使用场景，以及功能涉及到的特性和属性所来决定。比如上文中操作是点击还是长按，相册的动效表现形式，甚至是视频属性的长短等等，都是在综合各项因素的前提下进行决定了。

所以作为一个交互设计师，去主动了解并参与到项目前前后后的讨论、会议，是非常重要的，需要做到的是“窥一斑而知全豹”，当给予设计师一个功能时，能根据这一功能想周全到关于整个项目的相关事宜和定位。

下期更新内容，暂定方向为：Feed发送页面的设计。敬请期待~

相关阅读

《如何从零开始做产品的社交功能》

《从Instagram与Facebook研究Feed的基本功能》

《浅析Feed内容定位与趋势》

作者：Sophiallg，微信公众号：Sophia的玲珑阁

本文由 @Sophiallg 原创发布于人人都是产品经理。未经许可，禁止转载。