前三篇文章《從零開始做社交功能》袭艺、《從Instagram與Facebook研究Feed的基本功能》庸诱、《淺析Feed內(nèi)容定位與趨勢》，從宏觀過渡到微觀粗卜，今天開始落實到具體的頁面設(shè)計屋确，主要說說視頻拍攝頁面應(yīng)該怎樣設(shè)計。
基本的思路是：拍視頻->查看視頻
同樣的续扔，在前文中有提到攻臀，我們在了解一件事情的時候最先做的，應(yīng)該是了解它的準(zhǔn)確的定義纱昧。
那么什么是視頻呢刨啸？
百度百科的理解：
視頻泛指將一系列靜態(tài)影像的方式加以捕捉、紀(jì)錄识脆、處理设联、儲存善已、傳送與重現(xiàn)的各種技術(shù)。連續(xù)的圖像變化每秒超過24幀（frame）畫面以上時离例，根據(jù)視覺暫留原理换团，人眼無法辨別單幅的靜態(tài)畫面；看上去是平滑連續(xù)的視覺效果宫蛆，這樣連續(xù)的畫面叫做視頻艘包。
由以上定義我們可以知道視頻最大的特征是有一個時間跨度。
針對這樣的特征耀盗，拍攝視頻界面的設(shè)計想虎，主要需要注意以下幾點：
1.概念的理解：起始時間、終止時間叛拷、視頻的長度
2.查看方式：保存地點的提示舌厨，相冊的縮略圖顯示（精彩點在哪就顯示哪、）
3.設(shè)備方面考慮：橫豎屏切換忿薇、前后置攝像頭的調(diào)換邓线、閃光燈、畫面的放大縮小
4.UI與動效的協(xié)助（這一點綜合在以上三點中進(jìn)行分析）
1.概念的理解：起始時間煌恢、終止時間骇陈、視頻的長度
視頻的時間跨度意味著有起始時間點和終止時間點，以及擁有一個時間長短的屬性瑰抵。這些因素共同決定了你雌，我們拍攝出來的視頻會以怎樣的形態(tài)呈現(xiàn)在用戶面前。絕大多數(shù)視頻是拍攝未來的一段視頻二汛，但市面上也出現(xiàn)一些回溯式的拍攝手法婿崭，也就是說拍攝的是操作動作之前的視頻。
iOS系統(tǒng)自帶的視頻拍攝功能是最具代表性的拍攝界面肴颊。點擊一下紅色button開始錄制氓栈，接著button變成停止的標(biāo)志，再次點擊則停止錄制婿着。錄制的過程中在頂部會有閃動的小紅點表示錄制的狀態(tài)授瘦，以及錄制的時長顯示。
可以看出它整個錄制的過程中分為錄制前竟宋、錄制中提完、錄制后三個狀態(tài)，并且時間段表述得非常清晰丘侠。
再來看看Instagram和美拍的拍攝方式徒欣。兩者的拍攝方式類似，但I(xiàn)nstagram的操作方式更加簡潔蜗字。美拍除了涉及到對視頻畫面的處理打肝，還涉及到背景音樂脂新、視頻長短等等的編輯功能，從這些點出發(fā)粗梭，相比于Instagram争便，美拍更側(cè)重于視頻的編輯功能。當(dāng)然這也是很重要的一部分楼吃，樓主會在以后的文章中專門去講這一塊的內(nèi)容，今天就用Instagram去主要分析一下視頻的拍攝頁面的設(shè)計妄讯。
可以看得出孩锡，兩者界面?zhèn)戎攸c的不同是來源于產(chǎn)品的定位，Instagram偏向于支持用戶產(chǎn)生出優(yōu)質(zhì)的內(nèi)容亥贸，美拍更偏向于用特效去編輯視頻產(chǎn)生更大的娛樂作用躬窜。
再來看看Instagram頁面設(shè)計的出發(fā)點，相對于iOS拍攝炕置，它支持鏡頭的轉(zhuǎn)移荣挨，即多段短視頻的銜接功能。相對于iOS沉悶的記錄功能朴摊，該功能的改變的添加默垄，使用戶有更大的發(fā)揮空間。所以它拋棄掉iOS點擊兩下錄制一段視頻的操作甚纲，采用長按的方式進(jìn)行錄制口锭，松開手停止錄制的操作方式。
因為是短視頻介杆，有可能用戶在頻繁點擊中可能混淆了錄制中與未錄制的狀態(tài)鹃操，或者說讓用戶覺得比較混亂，也是因為時間短春哨，長按的方式用戶比較容易接受荆隘，對于錄制的狀態(tài)更加明了。反之赴背，如果讓用戶去錄制一個5分鐘的視頻椰拒，那就適合點擊的方式去做，因為用戶很有可能因為長時間的按屏幕產(chǎn)生手滑而誤結(jié)束了視頻的錄制過程凰荚，這也是為什么美拍在選擇錄制5分鐘視頻時恢復(fù)成iOS的點擊的方式進(jìn)行操作了耸三。
另外一個時間點，為什么Instagram在短視頻中設(shè)置一個最短時間是3s浇揩？Facebook做過一個調(diào)查仪壮，當(dāng)視頻長度設(shè)置到3s的時候，90%的用戶會將它當(dāng)做一個Gif去看完胳徽，當(dāng)設(shè)置為30s時积锅，只有20%的人能看完了爽彤，而且在3s內(nèi)可以講完一個簡短小的畫面故事，于是Instagram將視頻的最短時間設(shè)置為3s缚陷。當(dāng)然也可能還有另外的原因适篙。
2.查看方式：保存地點的提示
iOS錄制完畢之后，在左下角的相冊會有動效提示更新箫爷。畫面由小到大表示有新的內(nèi)容更新嚷节。它從拍攝的三個狀態(tài)到查看視頻，整體流程是按用戶所熟悉的時間順序進(jìn)行操作的虎锚，用起來會覺得特別順暢硫痰。
相對于視頻，iOS的目的是讓用戶的注意力集中在拍攝界面窜护，場景側(cè)重于用戶作為一個工具去記錄一段時間維持較長連續(xù)發(fā)生的事情效斑，而Instagram的拍攝功能是融合于發(fā)Feed過程中的一個環(huán)節(jié)，它更支持用戶拍完就去分享柱徙，豐富Feed的內(nèi)容缓屠，而查看也直接跳轉(zhuǎn)到Feed。
有個小細(xì)節(jié)需要關(guān)注的是护侮，在視頻產(chǎn)生后的小動效敌完，除了像iOS的表現(xiàn)之外，還有的在相冊最上層覆蓋一個轉(zhuǎn)圈的小圓羊初，比如改版前的VSCO蠢挡，它比較適合在拍攝完之后，視頻還有一個處理的等待時長的表達(dá)凳忙。還有的處理方式是將最后一幀畫面縮到相冊业踏，這樣表達(dá)更明顯，缺點就是動效有點繁復(fù)涧卵，不適合連續(xù)拍攝短視頻的場景勤家。
相冊的縮略圖有可能是第一幀，有可能是最后一幀柳恐，也有可能是通過算法得出的視頻中比較精彩的一幀伐脖，出發(fā)點就是能在這一幀上讓用戶馬上想起來這個視頻主要內(nèi)容是什么，節(jié)約用戶查看的時間乐设。
3.設(shè)備方面考慮：橫豎屏切換讼庇、前后置攝像頭的調(diào)換、閃光燈近尚、畫面的放大縮小
在視頻拍攝頁面蠕啄，比較特殊的一點就是，手機(jī)有橫豎屏切換的情況，而且切換的頻率還比較高歼跟。在這里除了要UI上盡量保持一致之外和媳，還有一點需要考慮的是如果橫豎屏都支持切換，那么產(chǎn)出物的最終形狀和顯示也要考慮進(jìn)去哈街。比方說如果短視頻在拍攝過程中切換了鏡頭留瞳，第一個是比較高的長方形，第二個是比較寬的長方形骚秦，那么產(chǎn)出物應(yīng)該怎樣處理她倘。在這個情況的處理方式上，Instagram和美拍是一致的作箍，就是統(tǒng)一采用正方形進(jìn)行取景硬梁，那么規(guī)整了產(chǎn)出的視頻形狀。
前后置攝像頭的調(diào)換蒙揣、閃光燈靶溜、畫面的放大縮小這三項功能开瞭，并不一定都需要懒震，還是根據(jù)PM對產(chǎn)品的定位來進(jìn)行取舍。比如說iOS是基礎(chǔ)的視頻錄制嗤详，并且使用人群跨度比較廣个扰，那么它功能齊全，UI簡潔是最不會出錯的一種選擇葱色。Instagram則只有前后置攝像頭的調(diào)換功能递宅，美拍則采用前后置攝像頭的調(diào)換、閃光燈苍狰，出發(fā)點其實是都想支持自拍办龄，畢竟社交需要自己面孔同朋友進(jìn)行互動。
從這篇文章對具體單個頁面的分析可以看出淋昭，所有的功能的出發(fā)點都是來自于產(chǎn)品的使用人群俐填、使用場景，以及功能涉及到的特性和屬性所來決定翔忽。比如上文中操作是點擊還是長按英融，相冊的動效表現(xiàn)形式，甚至是視頻屬性的長短等等歇式，都是在綜合各項因素的前提下進(jìn)行決定了驶悟。
所以作為一個交互設(shè)計師，去主動了解并參與到項目前前后后的討論材失、會議痕鳍，是非常重要的，需要做到的是“窺一斑而知全豹”龙巨，當(dāng)給予設(shè)計師一個功能時额获，能根據(jù)這一功能想周全到關(guān)于整個項目的相關(guān)事宜和定位够庙。
下期更新內(nèi)容，暫定方向為：Feed發(fā)送頁面的設(shè)計~
敬請期待~
