本文不是官方的設計原則指南，只是一篇填坑的文章，從整個短視頻的設計流程中逐個填坑。填坑的初始意愿是為了讓交互設計師可以快速理解產品需求，同時判斷需求的合理性，以及實現的可行性，盡量完善設計方案各個細節，將后續調整需求方案的可能性大幅降低（這是一個美好的愿望）。
文章按照短視頻應用的各個模塊來進行單獨解析，重點在拍攝流程，主要競品參考為抖音、快手、faceu、VUI 等。
一、通用架構
直接上圖說話：
△ 短視頻功能架構 持續更新中
二、拍攝流程
拍攝、編輯、發布流程是短視頻的核心功能模塊，因此拿出三部分來詳細解讀。在拍攝流程的設計中，主要考慮的幾個要素包括：拍攝入口、拍攝準備頁面、拍攝頁面、暫停頁面、預覽頁面。
1. 拍攝入口
位置
需要按照頁面來區分，一般來說優先出現在播放頁面/首頁底導航中，目前以抖音為主的產品，進入應用后用戶可主要看到的是視頻播放內容，底導航顯示主要功能入口，其中拍攝入口位于底導航中間突出位置，便于注意力快速定位發現并點擊調起。
或者是如快手一樣相對「傳統」的方式，拍攝入口放在標題欄左右兩側，首頁為瀑布流展示留出空間。
△ 拍攝入口樣式
其次聚合頁面或者瀑布流頁面，一般以底部復層按鈕形式展示，弱化展示位置在頂部標題欄中，都要求可以常駐顯示，同時不干擾用戶瀏覽體驗。
其余一類就是一些空頁面中，如：收藏、草稿箱、個人主頁等，需要刺激用戶拍攝視頻內容，這時需要空頁面中常駐露出拍攝入口，用戶無需跳出頁面即可點擊拍攝，縮短操作路徑。
樣式
a. 常駐
首頁位置中的入口一般與底導航或者頂部標題欄處于同一區域，因此以常駐為主，有利于用戶快速進入拍攝流程。
b. 瀏覽中支持隱藏
在次一級的聚合頁面，包括話題、活動聚合頁，或者素材聚合頁等頁面，該類頁面中主要以展示當前話題或素材下的用戶視頻為主，主要以瀑布流形式展示，露出拍攝入口主要目的在于縮短用戶操作路徑，因此在優先級對比之下，用戶在滑動瀏覽瀑布流內容時，拍攝入口可暫時隱藏。
2. 拍攝頁面
拍攝頁面即拍攝過程中頁面，此時的場景是用戶在舉起手機對著自己或者面前的場景進行視頻內容的錄制。拍攝錄制過程中，設備基本上處于自主運行階段，在拍攝結束前，用戶幾乎不會在頁面上產生交互行為。
因此，該頁面的設計要點在于核心元素的展示樣式。何謂核心元素？拍攝進度相關元素，即進度條、暫停按鈕、完成按鈕。
進度條
一方面，在拍攝過程中，進度條能夠承載拍攝時長數值，實時告知用戶拍攝進度；另一方面，進度條的運動速率也能給用戶傳達完整的拍攝時長的信息，讓用戶在拍攝過程中有一定的心理預期。
形式上，進度條主要包含線形和弧形兩種。
a. 線性進度條
線形進度條呈現在頁面的頂部或者底部，相比于弧形進度條，線形進度條兩端可顯示實時的拍攝時長和總體結束時長，數字顯示可常駐或者隨進度條實時移動。
線形進度條和拍攝按鈕是分開的，這個時候拍攝按鈕變為暫停按鈕呈現在頁面上，所以這個時候暫停按鈕可以呈現閃動或者呼吸動效，給用戶傳達一種正在拍攝的狀態信息。
b. 弧形進度條
弧形進度條一般是出現在按鈕位置，從拍攝準備頁面到拍攝頁面，用戶注意力的焦點始終落點在此處，視覺連貫性較好；但是另一方面，由于進度條與暫停按鈕共用同一區域，直觀上此時暫停按鈕上無法增加更多動效形式。
在信息傳達效果上，孤形進度條無法承載過多數字信息。而且相比于線性進度條，用戶無法很容易地將弧形長度與時間長度建立起對應關系，所以弧形進度條上干脆很少放置具體的數字信息，而是顯示節點即可。需要強行露出拍攝時長信息時，建議放在用戶視線便于觸達的頁面頂部，或者按鈕下方即可，沒有強制限制。
△ 線性進度條&弧形進度條
可能有些設計師會疑惑，弧形中央位置完全可以展示實時信息，為什么不將信息顯示在這里呢？
其實想明白這個問題也很簡單，主要還是依賴于功能定位，這個位置另一個主要功能是暫停，顯示數字信息，勢必會影響用戶對該位置交互操作的可能性。強行放置的話，對用戶的前期教育成本會很高，得不償失。
從通用性上分析，當拍攝行為是長按拍攝時，用戶的拇指始終遮擋中央位置，視線根本無法觸及。
暫停
當前的視頻拍攝功能發展至此，以及微信、快手、秒拍、小咖秀等產品對用戶拍攝行為的培養，分段拍攝視頻已然變成短視頻拍攝的標配。根據兩種拍攝方式——長按、點擊拍攝行為的不同，暫停按鈕可分為顯性和隱性兩種。
顯性的拍攝按鈕，即頁面上有明確的暫停意味的 icon 出現，這種按鈕與點擊拍攝交互行為相對應，點擊拍攝按鈕與暫停按鈕對應出現。用戶拍攝過程中是不接觸屏幕的，只是在點擊暫停時需要觸發按鈕的交互行為。
隱性拍攝按鈕，與長按拍攝行為相對應，頁面上只出現點擊拍攝按鈕，不會出現明顯的暫停按鈕 icon，用戶的松手行為直接對應拍攝過程中的暫停操作。
△ 暫停按鈕樣式
完成
拍攝完成按鈕，指用戶拍攝行為結束后，進入下一級編輯流程的接觸點，有時文案為「下一步」，樣式可以為「文案+按鈕」樣式或直接使用通用的 icon 表示，如√或者→。
完成按鈕一般只在暫停過程，且達到產品的最短拍攝時長時出現（ps：考慮到視頻內容質量問題，產品往往需要設置一個最短拍攝時長，未達到這個界限時，無法生產出視頻，此時完成按鈕隱藏或者為置灰不支持點擊），用戶需要手動點擊進入下一級頁面。
完成按鈕的設置沒有嚴格的限制，一般的設計習慣是，「文案+按鈕」樣式更適合在頂部標題欄位置出現（系統操作位置，按鈕寬度所占橫向空間大），純icon 樣式適合在底部拍攝操作區出現（主要功能操作區域，icon 所占空間小）。如果非要總結一種設計原則，那么就是就近原則的實用性最強。
a. 長按拍攝行為，用戶主要是單手拇指拍攝，松手后，主要還是拇指操作，因此按鈕放置在右下角的拇指熱區即可。
b. 點擊拍攝，用戶的拍攝行為可以是單手拍攝 - 單手拇指點擊暫停，或者單手拍攝 - 食指點擊暫停，這種行為都有很高的操作頻率，完成按鈕放在右下角或者右上角均可，頁面整體保持操作一致性即可。
△ 完成/下一步按鈕
第一篇文章先寫到這里，內容持續更新中。歡迎留言討論。
歡迎關注作者微信的公眾號：「胖喵交互設計」
圖片素材作者：Mete Erayd?n
「大受歡迎的短視頻設計」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓