從iOS、Instagram、美拍分析視頻拍攝功能

前三篇文章《從零開始做社交功能》、《從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發送頁面的設計~

敬請期待~

風來自很遠的地方，去去也無妨

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息。

推薦閱讀：