短視頻拍攝流程交互指北(1)

1 評(píng)論 8599 瀏覽 49 收藏 11 分鐘

文章略長,不是官方的設(shè)計(jì)原則指南,只是一片填坑的文章,從整個(gè)短視頻的設(shè)計(jì)流程中逐個(gè)填坑。填坑的初始意愿是為了讓交互設(shè)計(jì)師可以快速理解產(chǎn)品需求,同時(shí)判斷需求的合理性,以及實(shí)現(xiàn)的可行性,盡量完善設(shè)計(jì)方案各個(gè)細(xì)節(jié),將后續(xù)調(diào)整需求方案的可能性大幅降低(這是一個(gè)美好的愿望)。

文案按照短視頻應(yīng)用的各個(gè)模塊來進(jìn)行單獨(dú)解析,重點(diǎn)在拍攝流程,主要競品參考為抖音、快手、faceu、VUI等。

一、通用架構(gòu)

直接上圖說話:

(短視頻功能架構(gòu) 持續(xù)更新中)

二、拍攝流程

拍攝、編輯、發(fā)布流程是段視頻的核心功能模塊,因此拿出三部分來詳細(xì)解讀。在拍攝流程的設(shè)計(jì)中,主要考慮的幾個(gè)要素包括:拍攝入口、拍攝準(zhǔn)備頁面、拍攝頁面、暫停頁面、預(yù)覽頁面。

2.1 拍攝入口

(1)位置

需要按照頁面來區(qū)分,一般來說優(yōu)先出現(xiàn)在播放頁面/首頁底導(dǎo)航中,目前已抖音為主的產(chǎn)品,進(jìn)入應(yīng)用后用戶可主要看到的是視頻播放內(nèi)容,底導(dǎo)航顯示主要功能入口,其中拍攝入口位于底導(dǎo)航中間突出位置,便于注意力快速定位發(fā)現(xiàn)并點(diǎn)擊調(diào)起。

或者是如快手一樣相對(duì)“傳統(tǒng)”的方式,拍攝入口放在標(biāo)題欄左右兩側(cè),首頁為瀑布流展示留出空間。

(拍攝入口樣式)

其次聚合頁面或者瀑布流頁面,一般以底部復(fù)層按鈕形式展示,弱化展示位置在頂部標(biāo)題欄中,都要求可以常駐顯示,同時(shí)不干擾用戶瀏覽體驗(yàn)。

其余一類就是一些空頁面中,如:收藏、草稿箱、個(gè)人主頁等,需要刺激用戶拍攝視頻內(nèi)容,這時(shí)需要空頁面中常駐露出拍攝入口,用戶無需跳出頁面即可點(diǎn)擊拍攝,縮短操作路徑。

(2)樣式

a. 常駐

首頁位置中的入口一般與底導(dǎo)航或者頂部標(biāo)題欄處于同一區(qū)域,因此以常駐為主,有利于用戶快速進(jìn)入拍著流程。

b. 瀏覽中支持隱藏

在次一級(jí)的聚合頁面,包括話題、活動(dòng)聚合頁,或者素材聚合頁等頁面,該類頁面中主要以展示當(dāng)前話題或素材下的用戶視頻為主,主要以瀑布流形式展示,露出拍攝入口主要目的在于縮短用戶操作路徑,因此在優(yōu)先級(jí)對(duì)比之下,用戶在滑動(dòng)瀏覽瀑布流內(nèi)容時(shí),拍攝入口可暫時(shí)隱藏。

2.2 拍攝頁面

拍攝頁面即拍攝過程中頁面,此時(shí)的場景是用戶在舉起手機(jī)對(duì)著自己或者面前的場景進(jìn)行視頻內(nèi)容的錄制。拍攝錄制過程中,設(shè)備基本上處于自主運(yùn)行階段,在拍攝結(jié)束前,用戶幾乎不會(huì)在頁面上產(chǎn)生交互行為。

因此,該頁面的設(shè)計(jì)要點(diǎn)在于核心元素的展示樣式。何謂核心元素?拍攝進(jìn)度相關(guān)元素,即進(jìn)度條、暫停按鈕、完成按鈕。

(1)進(jìn)度條

拍攝過程中,進(jìn)度條能夠承載拍攝時(shí)長數(shù)值,實(shí)時(shí)告知用戶拍攝進(jìn)度;另一方面,進(jìn)度條的運(yùn)動(dòng)速率也能給用戶傳達(dá)完整的拍攝時(shí)長的信息,讓用戶在拍攝過程中有一定的心理預(yù)期。

形式上,進(jìn)度條主要包含線形和弧形兩種。

a. 線性進(jìn)度條

線形進(jìn)度條成現(xiàn)在頁面的頂部或者底部,相比于弧形進(jìn)度條,線形進(jìn)度條兩端可顯示實(shí)時(shí)的拍攝時(shí)長和總體結(jié)束時(shí)長,數(shù)字顯示可常駐或者隨進(jìn)度條實(shí)時(shí)移動(dòng)。

線形進(jìn)度條和拍攝按鈕是分開的,這個(gè)時(shí)候拍攝按鈕變?yōu)闀和0粹o呈現(xiàn)在頁面上,所以這個(gè)時(shí)候暫停按鈕可以呈現(xiàn)閃動(dòng)或者呼吸動(dòng)效,給用戶傳達(dá)一種正在拍攝的狀態(tài)信息。

b. 弧形進(jìn)度條

弧形進(jìn)度條一般是出現(xiàn)在按鈕位置,從拍攝準(zhǔn)備頁面到拍攝頁面,用戶注意力的焦點(diǎn)始終落點(diǎn)在此處,視覺連貫性較好;但是另一方面,由于進(jìn)度條與暫停按鈕共用同一區(qū)域,直觀上此時(shí)暫停按鈕上無法增加更多動(dòng)效形式。

在信息傳達(dá)效果上,孤形進(jìn)度條無法承載過多數(shù)字信息。而且相比于線性進(jìn)度條,用戶無法很容易地將弧形長度與時(shí)間長度建立起對(duì)應(yīng)關(guān)系,所以弧形進(jìn)度條上干脆很少防止具體的數(shù)字信息,而是顯示節(jié)點(diǎn)即可。需要強(qiáng)行露出拍攝時(shí)長信息時(shí),建議放在用戶視線便于觸達(dá)的頁面頂部,或者按鈕下方即可,沒有強(qiáng)制限制。

(線性進(jìn)度條&弧形進(jìn)度條)

可能有些設(shè)計(jì)師會(huì)疑惑,弧形中央位置完全可以展示實(shí)時(shí)信息,為什么不將信息顯示在這里呢?

其實(shí)想明白這個(gè)問題也很簡單,主要還是依賴于功能定位,這個(gè)位置另一個(gè)主要功能是暫停,顯示數(shù)字信息,勢必會(huì)影響用戶對(duì)該位置交互操作的可能性。強(qiáng)行放置的話,對(duì)用戶的前期教育成本會(huì)很高,得不償失。

從通用性上分析,當(dāng)拍攝行為是長按拍攝時(shí),用戶的拇指始終遮擋中央位置,視線根本無法觸及。

(2)暫停

當(dāng)前的視頻拍攝功能發(fā)展至此,以及微信、快手、秒拍、小咖秀等產(chǎn)品對(duì)用戶拍攝行為的培養(yǎng),分段拍攝視頻已然變成短視頻拍攝的標(biāo)配。根據(jù)兩種拍攝方式——長按、點(diǎn)擊拍攝行為的不同,暫停按鈕可分為顯性和隱性兩種。

顯性的拍攝按鈕,即頁面上有明確的暫停意味的icon出現(xiàn),這種按鈕與點(diǎn)擊拍攝交互行為相對(duì)應(yīng),點(diǎn)擊拍攝按鈕與暫停按鈕對(duì)應(yīng)出現(xiàn)。用戶拍攝過程中是不接觸屏幕的,只是在點(diǎn)擊暫停的需要觸發(fā)按鈕的交互行為。

隱性拍攝按鈕,與長按拍攝行為相對(duì)應(yīng),頁面上只出現(xiàn)點(diǎn)擊拍攝按鈕,不會(huì)出現(xiàn)明星的暫停按鈕的icon,用戶的松手行為直接對(duì)應(yīng)拍攝過程中的暫停操作。

(暫停按鈕樣式)

(3)完成

拍攝完成按鈕,指用戶拍攝行為結(jié)束后,進(jìn)入下一級(jí)編輯流程的接觸點(diǎn),有時(shí)文案為“下一步”,樣式可以為“文案+按鈕”樣式或直接使用通用的icon表示,如??或者→。

完成按鈕一般只在暫停過程,且達(dá)到產(chǎn)品的最短拍攝時(shí)長時(shí)出現(xiàn)(ps:考慮到視頻內(nèi)容質(zhì)量問題,產(chǎn)品往往需要設(shè)置一個(gè)最短拍攝時(shí)長,未達(dá)到這個(gè)界限時(shí),無法生產(chǎn)出視頻,此時(shí)完成按鈕隱藏或者為置灰不支持點(diǎn)擊),用戶需要手動(dòng)點(diǎn)擊進(jìn)入下一級(jí)頁面。

完成按鈕的設(shè)置沒有嚴(yán)格的限制,一般的設(shè)計(jì)習(xí)慣是,“文案+按鈕”樣式更適合在頂部標(biāo)題欄位置出現(xiàn)(系統(tǒng)操作位置,按鈕寬度所占橫向空間大),純icon樣式適合在底部拍攝操作區(qū)出現(xiàn)(主要功能操作區(qū)域,icons所占空間小)。如果非要總結(jié)一種設(shè)計(jì)原則,那么就是就近原則的實(shí)用性最強(qiáng)。

a. 長按拍攝行為,用戶主要是單手拇指拍攝,松手后,主要還是拇指操作,因?yàn)榘粹o放置在右下角的拇指熱區(qū)即可。

b. 點(diǎn)擊拍攝,用戶的拍攝行為可以是單手拍攝-單手拇指點(diǎn)擊暫停,或者單手拍攝-食指點(diǎn)擊暫停,種行為都有很高的操作頻率,完成按鈕放在右下角或者右上角均可,頁面整體保持操作一致性即可。

(完成/下一步按鈕)

第一篇文章先寫到這里,內(nèi)容持續(xù)更新中…

#專欄作家#

蝦米&胖喵,微信公眾號(hào):pangmiaodesign,人人都是產(chǎn)品經(jīng)理專欄作家。高級(jí)交互設(shè)計(jì)師(百度/愛奇藝),夫妻搭檔,貓奴。曾做過公益產(chǎn)品、影音媒體產(chǎn)品,目前專注于企業(yè)級(jí)產(chǎn)品、娛樂社區(qū)產(chǎn)品體驗(yàn)設(shè)計(jì)?!坝胸?,就有一萬種美好!”

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 可以

    來自北京 回復(fù)