前三篇文章《從零開(kāi)始做社交功能》、《從Instagram與Facebook研究Feed的基本功能》、《淺析Feed內(nèi)容定位與趨勢(shì)》，從宏觀過(guò)渡到微觀，今天開(kāi)始落實(shí)到具體的頁(yè)面設(shè)計(jì)，主要說(shuō)說(shuō)視頻拍攝頁(yè)面應(yīng)該怎樣設(shè)計(jì)。

基本的思路是：拍視頻->查看視頻

同樣的，在前文中有提到，我們?cè)诹私庖患虑榈臅r(shí)候最先做的，應(yīng)該是了解它的準(zhǔn)確的定義。

那么什么是視頻呢？

百度百科的理解：

視頻泛指將一系列靜態(tài)影像的方式加以捕捉、紀(jì)錄、處理、儲(chǔ)存、傳送與重現(xiàn)的各種技術(shù)。連續(xù)的圖像變化每秒超過(guò)24幀（frame）畫(huà)面以上時(shí)，根據(jù)視覺(jué)暫留原理，人眼無(wú)法辨別單幅的靜態(tài)畫(huà)面；看上去是平滑連續(xù)的視覺(jué)效果，這樣連續(xù)的畫(huà)面叫做視頻。

由以上定義我們可以知道視頻最大的特征是有一個(gè)時(shí)間跨度。

針對(duì)這樣的特征，拍攝視頻界面的設(shè)計(jì)，主要需要注意以下幾點(diǎn)：

1. 概念的理解：起始時(shí)間、終止時(shí)間、視頻的長(zhǎng)度
2. 查看方式：保存地點(diǎn)的提示，相冊(cè)的縮略圖顯示（精彩點(diǎn)在哪就顯示哪、）
3. 設(shè)備方面考慮：橫豎屏切換、前后置攝像頭的調(diào)換、閃光燈、畫(huà)面的放大縮小
4. UI與動(dòng)效的協(xié)助（這一點(diǎn)綜合在以上三點(diǎn)中進(jìn)行分析）。

1.概念的理解：起始時(shí)間、終止時(shí)間、視頻的長(zhǎng)度

視頻的時(shí)間跨度意味著有起始時(shí)間點(diǎn)和終止時(shí)間點(diǎn)，以及擁有一個(gè)時(shí)間長(zhǎng)短的屬性。這些因素共同決定了，我們拍攝出來(lái)的視頻會(huì)以怎樣的形態(tài)呈現(xiàn)在用戶(hù)面前。絕大多數(shù)視頻是拍攝未來(lái)的一段視頻，但市面上也出現(xiàn)一些回溯式的拍攝手法，也就是說(shuō)拍攝的是操作動(dòng)作之前的視頻。

iOS系統(tǒng)自帶的視頻拍攝功能是最具代表性的拍攝界面。點(diǎn)擊一下紅色button開(kāi)始錄制，接著button變成停止的標(biāo)志，再次點(diǎn)擊則停止錄制。錄制的過(guò)程中在頂部會(huì)有閃動(dòng)的小紅點(diǎn)表示錄制的狀態(tài)，以及錄制的時(shí)長(zhǎng)顯示。

可以看出它整個(gè)錄制的過(guò)程中分為錄制前、錄制中、錄制后三個(gè)狀態(tài)，并且時(shí)間段表述得非常清晰。

再來(lái)看看Instagram和美拍的拍攝方式。兩者的拍攝方式類(lèi)似，但I(xiàn)nstagram的操作方式更加簡(jiǎn)潔。美拍除了涉及到對(duì)視頻畫(huà)面的處理，還涉及到背景音樂(lè)、視頻長(zhǎng)短等等的編輯功能，從這些點(diǎn)出發(fā)，相比于Instagram，美拍更側(cè)重于視頻的編輯功能。當(dāng)然這也是很重要的一部分，樓主會(huì)在以后的文章中專(zhuān)門(mén)去講這一塊的內(nèi)容，今天就用Instagram去主要分析一下視頻的拍攝頁(yè)面的設(shè)計(jì)。

可以看得出，兩者界面?zhèn)戎攸c(diǎn)的不同是來(lái)源于產(chǎn)品的定位，Instagram偏向于支持用戶(hù)產(chǎn)生出優(yōu)質(zhì)的內(nèi)容，美拍更偏向于用特效去編輯視頻產(chǎn)生更大的娛樂(lè)作用。

再來(lái)看看Instagram頁(yè)面設(shè)計(jì)的出發(fā)點(diǎn)，相對(duì)于iOS拍攝，它支持鏡頭的轉(zhuǎn)移，即多段短視頻的銜接功能。相對(duì)于iOS沉悶的記錄功能，該功能的改變的添加，使用戶(hù)有更大的發(fā)揮空間。所以它拋棄掉iOS點(diǎn)擊兩下錄制一段視頻的操作，采用長(zhǎng)按的方式進(jìn)行錄制，松開(kāi)手停止錄制的操作方式。

因?yàn)槭嵌桃曨l，有可能用戶(hù)在頻繁點(diǎn)擊中可能混淆了錄制中與未錄制的狀態(tài)，或者說(shuō)讓用戶(hù)覺(jué)得比較混亂，也是因?yàn)闀r(shí)間短，長(zhǎng)按的方式用戶(hù)比較容易接受，對(duì)于錄制的狀態(tài)更加明了。反之，如果讓用戶(hù)去錄制一個(gè)5分鐘的視頻，那就適合點(diǎn)擊的方式去做，因?yàn)橛脩?hù)很有可能因?yàn)殚L(zhǎng)時(shí)間的按屏幕產(chǎn)生手滑而誤結(jié)束了視頻的錄制過(guò)程，這也是為什么美拍在選擇錄制5分鐘視頻時(shí)恢復(fù)成iOS的點(diǎn)擊的方式進(jìn)行操作了。

另外一個(gè)時(shí)間點(diǎn)，為什么Instagram在短視頻中設(shè)置一個(gè)最短時(shí)間是3s？Facebook做過(guò)一個(gè)調(diào)查，當(dāng)視頻長(zhǎng)度設(shè)置到3s的時(shí)候，90%的用戶(hù)會(huì)將它當(dāng)做一個(gè)Gif去看完，當(dāng)設(shè)置為30s時(shí)，只有20%的人能看完了，而且在3s內(nèi)可以講完一個(gè)簡(jiǎn)短小的畫(huà)面故事，于是Instagram將視頻的最短時(shí)間設(shè)置為3s。當(dāng)然也可能還有另外的原因。

2.查看方式：保存地點(diǎn)的提示

iOS錄制完畢之后，在左下角的相冊(cè)會(huì)有動(dòng)效提示更新。畫(huà)面由小到大表示有新的內(nèi)容更新。它從拍攝的三個(gè)狀態(tài)到查看視頻，整體流程是按用戶(hù)所熟悉的時(shí)間順序進(jìn)行操作的，用起來(lái)會(huì)覺(jué)得特別順暢。

相對(duì)于視頻，iOS的目的是讓用戶(hù)的注意力集中在拍攝界面，場(chǎng)景側(cè)重于用戶(hù)作為一個(gè)工具去記錄一段時(shí)間維持較長(zhǎng)連續(xù)發(fā)生的事情，而Instagram的拍攝功能是融合于發(fā)Feed過(guò)程中的一個(gè)環(huán)節(jié)，它更支持用戶(hù)拍完就去分享，豐富Feed的內(nèi)容，而查看也直接跳轉(zhuǎn)到Feed。

有個(gè)小細(xì)節(jié)需要關(guān)注的是，在視頻產(chǎn)生后的小動(dòng)效，除了像iOS的表現(xiàn)之外，還有的在相冊(cè)最上層覆蓋一個(gè)轉(zhuǎn)圈的小圓，比如改版前的VSCO，它比較適合在拍攝完之后，視頻還有一個(gè)處理的等待時(shí)長(zhǎng)的表達(dá)。還有的處理方式是將最后一幀畫(huà)面縮到相冊(cè)，這樣表達(dá)更明顯，缺點(diǎn)就是動(dòng)效有點(diǎn)繁復(fù)，不適合連續(xù)拍攝短視頻的場(chǎng)景。

相冊(cè)的縮略圖有可能是第一幀，有可能是最后一幀，也有可能是通過(guò)算法得出的視頻中比較精彩的一幀，出發(fā)點(diǎn)就是能在這一幀上讓用戶(hù)馬上想起來(lái)這個(gè)視頻主要內(nèi)容是什么，節(jié)約用戶(hù)查看的時(shí)間。

3.設(shè)備方面考慮：橫豎屏切換、前后置攝像頭的調(diào)換、閃光燈、畫(huà)面的放大縮小

在視頻拍攝頁(yè)面，比較特殊的一點(diǎn)就是，手機(jī)有橫豎屏切換的情況，而且切換的頻率還比較高。在這里除了要UI上盡量保持一致之外，還有一點(diǎn)需要考慮的是如果橫豎屏都支持切換，那么產(chǎn)出物的最終形狀和顯示也要考慮進(jìn)去。比方說(shuō)如果短視頻在拍攝過(guò)程中切換了鏡頭，第一個(gè)是比較高的長(zhǎng)方形，第二個(gè)是比較寬的長(zhǎng)方形，那么產(chǎn)出物應(yīng)該怎樣處理。在這個(gè)情況的處理方式上，Instagram和美拍是一致的，就是統(tǒng)一采用正方形進(jìn)行取景，那么規(guī)整了產(chǎn)出的視頻形狀。

前后置攝像頭的調(diào)換、閃光燈、畫(huà)面的放大縮小這三項(xiàng)功能，并不一定都需要，還是根據(jù)PM對(duì)產(chǎn)品的定位來(lái)進(jìn)行取舍。比如說(shuō)iOS是基礎(chǔ)的視頻錄制，并且使用人群跨度比較廣，那么它功能齊全，UI簡(jiǎn)潔是最不會(huì)出錯(cuò)的一種選擇。Instagram則只有前后置攝像頭的調(diào)換功能，美拍則采用前后置攝像頭的調(diào)換、閃光燈，出發(fā)點(diǎn)其實(shí)是都想支持自拍，畢竟社交需要自己面孔同朋友進(jìn)行互動(dòng)。

從這篇文章對(duì)具體單個(gè)頁(yè)面的分析可以看出，所有的功能的出發(fā)點(diǎn)都是來(lái)自于產(chǎn)品的使用人群、使用場(chǎng)景，以及功能涉及到的特性和屬性所來(lái)決定。比如上文中操作是點(diǎn)擊還是長(zhǎng)按，相冊(cè)的動(dòng)效表現(xiàn)形式，甚至是視頻屬性的長(zhǎng)短等等，都是在綜合各項(xiàng)因素的前提下進(jìn)行決定了。

所以作為一個(gè)交互設(shè)計(jì)師，去主動(dòng)了解并參與到項(xiàng)目前前后后的討論、會(huì)議，是非常重要的，需要做到的是“窺一斑而知全豹”，當(dāng)給予設(shè)計(jì)師一個(gè)功能時(shí)，能根據(jù)這一功能想周全到關(guān)于整個(gè)項(xiàng)目的相關(guān)事宜和定位。

下期更新內(nèi)容，暫定方向?yàn)椋篎eed發(fā)送頁(yè)面的設(shè)計(jì)。敬請(qǐng)期待~

相關(guān)閱讀

《如何從零開(kāi)始做產(chǎn)品的社交功能》

《從Instagram與Facebook研究Feed的基本功能》

《淺析Feed內(nèi)容定位與趨勢(shì)》

作者：Sophiallg，微信公眾號(hào)：Sophia的玲瓏閣

本文由 @Sophiallg 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。