起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識以視頻為主Feed的產(chǎn)生頁面該怎樣設計？
前三篇文章《從零開始做社交功能》、《從Instagram與Facebook研究Feed的基本功能》、《淺析Feed內(nèi)容定位與趨勢》，從宏觀過渡到微觀，今天開始落實到具體的頁面設計，主要說說視頻拍攝頁面應該怎樣設計。
基本的思路是：拍視頻->查看視頻
同樣的，在前文中有提到，我們在了解一件事情的時候最先做的，應該是了解它的準確的定義。
那么什么是視頻呢？
百度百科的理解：
視頻泛指將一系列靜態(tài)影像的方式加以捕捉、紀錄、處理、儲存、傳送與重現(xiàn)的各種技術(shù)。連續(xù)的圖像變化每秒超過24幀（frame）畫面以上時，根據(jù)視覺暫留原理，人眼無法辨別單幅的靜態(tài)畫面；看上去是平滑連續(xù)的視覺效果，這樣連續(xù)的畫面叫做視頻。
由以上定義我們可以知道視頻最大的特征是有一個時間跨度。
針對這樣的特征，拍攝視頻界面的設計，主要需要注意以下幾點：
- 概念的理解：起始時間、終止時間、視頻的長度
- 查看方式：保存地點的提示，相冊的縮略圖顯示（精彩點在哪就顯示哪、）
- 設備方面考慮：橫豎屏切換、前后置攝像頭的調(diào)換、閃光燈、畫面的放大縮小
- UI與動效的協(xié)助（這一點綜合在以上三點中進行分析）。
1.概念的理解：起始時間、終止時間、視頻的長度
視頻的時間跨度意味著有起始時間點和終止時間點，以及擁有一個時間長短的屬性。這些因素共同決定了，我們拍攝出來的視頻會以怎樣的形態(tài)呈現(xiàn)在用戶面前。絕大多數(shù)視頻是拍攝未來的一段視頻，但市面上也出現(xiàn)一些回溯式的拍攝手法，也就是說拍攝的是操作動作之前的視頻。
iOS系統(tǒng)自帶的視頻拍攝功能是最具代表性的拍攝界面。點擊一下紅色button開始錄制，接著button變成停止的標志，再次點擊則停止錄制。錄制的過程中在頂部會有閃動的小紅點表示錄制的狀態(tài)，以及錄制的時長顯示。
可以看出它整個錄制的過程中分為錄制前、錄制中、錄制后三個狀態(tài)，并且時間段表述得非常清晰。
再來看看Instagram和美拍的拍攝方式。兩者的拍攝方式類似，但Instagram的操作方式更加簡潔。美拍除了涉及到對視頻畫面的處理，還涉及到背景音樂、視頻長短等等的編輯功能，從這些點出發(fā)，相比于Instagram，美拍更側(cè)重于視頻的編輯功能。當然這也是很重要的一部分，樓主會在以后的文章中專門去講這一塊的內(nèi)容，今天就用Instagram去主要分析一下視頻的拍攝頁面的設計。
可以看得出，兩者界面?zhèn)戎攸c的不同是來源于產(chǎn)品的定位，Instagram偏向于支持用戶產(chǎn)生出優(yōu)質(zhì)的內(nèi)容，美拍更偏向于用特效去編輯視頻產(chǎn)生更大的娛樂作用。
再來看看Instagram頁面設計的出發(fā)點，相對于iOS拍攝，它支持鏡頭的轉(zhuǎn)移，即多段短視頻的銜接功能。相對于iOS沉悶的記錄功能，該功能的改變的添加，使用戶有更大的發(fā)揮空間。所以它拋棄掉iOS點擊兩下錄制一段視頻的操作，采用長按的方式進行錄制，松開手停止錄制的操作方式。
因為是短視頻，有可能用戶在頻繁點擊中可能混淆了錄制中與未錄制的狀態(tài)，或者說讓用戶覺得比較混亂，也是因為時間短，長按的方式用戶比較容易接受，對于錄制的狀態(tài)更加明了。反之，如果讓用戶去錄制一個5分鐘的視頻，那就適合點擊的方式去做，因為用戶很有可能因為長時間的按屏幕產(chǎn)生手滑而誤結(jié)束了視頻的錄制過程，這也是為什么美拍在選擇錄制5分鐘視頻時恢復成iOS的點擊的方式進行操作了。
另外一個時間點，為什么Instagram在短視頻中設置一個最短時間是3s？Facebook做過一個調(diào)查，當視頻長度設置到3s的時候，90%的用戶會將它當做一個Gif去看完，當設置為30s時，只有20%的人能看完了，而且在3s內(nèi)可以講完一個簡短小的畫面故事，于是Instagram將視頻的最短時間設置為3s。當然也可能還有另外的原因。
2.查看方式：保存地點的提示
iOS錄制完畢之后，在左下角的相冊會有動效提示更新。畫面由小到大表示有新的內(nèi)容更新。它從拍攝的三個狀態(tài)到查看視頻，整體流程是按用戶所熟悉的時間順序進行操作的，用起來會覺得特別順暢。
相對于視頻，iOS的目的是讓用戶的注意力集中在拍攝界面，場景側(cè)重于用戶作為一個工具去記錄一段時間維持較長連續(xù)發(fā)生的事情，而Instagram的拍攝功能是融合于發(fā)Feed過程中的一個環(huán)節(jié)，它更支持用戶拍完就去分享，豐富Feed的內(nèi)容，而查看也直接跳轉(zhuǎn)到Feed。
有個小細節(jié)需要關注的是，在視頻產(chǎn)生后的小動效，除了像iOS的表現(xiàn)之外，還有的在相冊最上層覆蓋一個轉(zhuǎn)圈的小圓，比如改版前的VSCO，它比較適合在拍攝完之后，視頻還有一個處理的等待時長的表達。還有的處理方式是將最后一幀畫面縮到相冊，這樣表達更明顯，缺點就是動效有點繁復，不適合連續(xù)拍攝短視頻的場景。
相冊的縮略圖有可能是第一幀，有可能是最后一幀，也有可能是通過算法得出的視頻中比較精彩的一幀，出發(fā)點就是能在這一幀上讓用戶馬上想起來這個視頻主要內(nèi)容是什么，節(jié)約用戶查看的時間。
3.設備方面考慮：橫豎屏切換、前后置攝像頭的調(diào)換、閃光燈、畫面的放大縮小
在視頻拍攝頁面，比較特殊的一點就是，手機有橫豎屏切換的情況，而且切換的頻率還比較高。在這里除了要UI上盡量保持一致之外，還有一點需要考慮的是如果橫豎屏都支持切換，那么產(chǎn)出物的最終形狀和顯示也要考慮進去。比方說如果短視頻在拍攝過程中切換了鏡頭，第一個是比較高的長方形，第二個是比較寬的長方形，那么產(chǎn)出物應該怎樣處理。在這個情況的處理方式上，Instagram和美拍是一致的，就是統(tǒng)一采用正方形進行取景，那么規(guī)整了產(chǎn)出的視頻形狀。
前后置攝像頭的調(diào)換、閃光燈、畫面的放大縮小這三項功能，并不一定都需要，還是根據(jù)PM對產(chǎn)品的定位來進行取舍。比如說iOS是基礎的視頻錄制，并且使用人群跨度比較廣，那么它功能齊全，UI簡潔是最不會出錯的一種選擇。Instagram則只有前后置攝像頭的調(diào)換功能，美拍則采用前后置攝像頭的調(diào)換、閃光燈，出發(fā)點其實是都想支持自拍，畢竟社交需要自己面孔同朋友進行互動。
從這篇文章對具體單個頁面的分析可以看出，所有的功能的出發(fā)點都是來自于產(chǎn)品的使用人群、使用場景，以及功能涉及到的特性和屬性所來決定。比如上文中操作是點擊還是長按，相冊的動效表現(xiàn)形式，甚至是視頻屬性的長短等等，都是在綜合各項因素的前提下進行決定了。
所以作為一個交互設計師，去主動了解并參與到項目前前后后的討論、會議，是非常重要的，需要做到的是“窺一斑而知全豹”，當給予設計師一個功能時，能根據(jù)這一功能想周全到關于整個項目的相關事宜和定位。
下期更新內(nèi)容，暫定方向為：Feed發(fā)送頁面的設計。敬請期待~
相關閱讀
《從Instagram與Facebook研究Feed的基本功能》
作者：Sophiallg，微信公眾號：Sophia的玲瓏閣
本文由 @Sophiallg 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
小程序的用完即走理念很適合看片