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

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

一、通用架構(gòu)

直接上圖說話：

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

二、拍攝流程

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

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)起。

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

△ 拍攝入口樣式

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

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

樣式

a. 常駐

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

b. 瀏覽中支持隱藏

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

2. 拍攝頁面

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

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

進(jìn)度條

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

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

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

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

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

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

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

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

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

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

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

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

暫停

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

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

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

△ 暫停按鈕樣式

完成

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

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

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

a. 長按拍攝行為，用戶主要是單手拇指拍攝，松手后，主要還是拇指操作，因此按鈕放置在右下角的拇指熱區(qū)即可。

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

△ 完成/下一步按鈕

第一篇文章先寫到這里，內(nèi)容持續(xù)更新中。歡迎留言討論。

歡迎關(guān)注作者微信的公眾號：「胖喵交互設(shè)計」

圖片素材作者：Mete Erayd?n

「大受歡迎的短視頻設(shè)計」

• 《沒錯，短視頻的能量是長視頻的 9 倍！》
• 《每天刷抖音停不下來？原來是用這3個設(shè)計讓你上癮！》
• 《從交互角度，分析為什么我沉迷抖音，卻不想刷微視？》