嘗試為網易雲音樂設計一個發佈短視頻的流程

在今天的文章裡,我想嘗試下為網易雲音樂增加一個發佈短視頻的流程,目前的網易雲音樂的視頻發佈流程依然採用的是發佈已拍攝好的視頻作品,而且編輯功能也並不是特別的完善,所以想看看能不能結合同類型競品的功能點作為參考,也為網易雲音樂設計一下適合它的短視頻發佈流程~

一、產品簡介

嘗試為網易雲音樂設計一個發佈短視頻的流程

網易雲音樂


產品名稱:網易雲音樂

產品介紹:網易雲音樂是一款由網易開發的音樂產品,是網易杭州研究院的成果,依託專業音樂人、DJ、好友推薦及社交功能,在線音樂服務主打歌單、社交、大牌推薦和音樂指紋,以歌單、DJ節目、社交、地理位置為核心要素,主打發現和分享

產品slogan:音樂的力量

產品定位:音樂社交


二、用戶場景

1. 目標用戶

(1)學生群體:活躍度高,時間充裕,同時追求時尚,喜歡互動和展示,喜歡新鮮事物

(2)年輕白領:有一定工作壓力,時間較碎片化,在日常的工作中需要消遣和音樂對心靈的慰藉

(3)音樂從業者:包括藝人、詞曲創作人、DJ、樂評人、獨立音樂人等,其中不乏行業大佬,這些人對音樂質量的要求較高

(4)行業精英:多為高收入人群,事業成熟穩定,喜愛音樂更或是資深CD收藏者,追求小眾風格


2. 典型場景

嘗試為網易雲音樂設計一個發佈短視頻的流程

典型場景


三、所設計的流程圖

結合用戶分析以及相關競品分析(略),繪製了以下的交互流程圖:

嘗試為網易雲音樂設計一個發佈短視頻的流程

流程圖


四、交互設計稿

基於上述的流程圖想法,採用Axure進行了繪製

1. 上傳視頻流程

嘗試為網易雲音樂設計一個發佈短視頻的流程

上傳視頻流程1

A1. 登錄系統後將會顯示個人信息,包括用戶名等

B1. 點擊“雲村”模塊中的“發佈”icon,來發布自己的內容

C1. 點擊“發佈”icon後,icon會旋轉45度,+號變成x號

C2. 同時icon下方的頁面會覆蓋一層半透明遮罩,凸顯“發佈”icon等相關內容

C3. 同時地,會在“發佈”icon上顯示出三個“子發佈”icon,分別為“發圖文”、“發視頻”、以及“拍攝”,在此流程中點擊選擇“發視頻”


嘗試為網易雲音樂設計一個發佈短視頻的流程

上傳視頻流程2


D1. 點擊“發視頻”icon後,會進入視頻選擇頁,可以在此頁面選擇想要發佈的視頻

D2. 通過下拉選項可以選擇視頻的分類(如果事先在手機中給視頻文件進行分類的話)

E1. 選擇視頻後就進入視頻裁剪頁,所選視頻會顯示在手機屏幕的正中央

E2. 視頻下方會有一個編輯條,通過拖動左右端點來選擇視頻的起始點與終點

E3. 系統會實時輸出左右端點拖動後的視頻時長

E4. 操作全部完成後可以點擊下一步,進入到視頻發佈流程


2. 拍攝視頻流程

嘗試為網易雲音樂設計一個發佈短視頻的流程

拍攝視頻流程1


A1. 登錄系統後將會顯示個人信息,包括用戶名等

B1. 點擊“雲村”模塊中的“發佈”icon,來發布自己的內容

C1. 點擊“發佈”icon後,icon會旋轉45度,+號變成x號

C2. 同時icon下方的頁面會覆蓋一層半透明遮罩,凸顯“發佈”icon等相關內容

C3. 同時地,會在“發佈”icon上顯示出三個“子發佈”icon,分別為“發圖文”、“發視頻”、以及“拍攝”,在此流程中點擊選擇“拍攝”


嘗試為網易雲音樂設計一個發佈短視頻的流程

拍攝視頻流程2


D1. 屏幕中間顯示所拍攝的畫面

D2. 通過美顏icon會自動為人像進行美顏操作

D3. 通過濾鏡icon會自動為畫面加上一層濾鏡

D4. 通過翻轉icon會切換手機的前置與後置攝像頭

D5. 通過選擇下方的“視頻”與“照片”菜單欄,可以切換攝影或者是拍照操作

D6. 等到前述操作都確定後,點擊開始拍攝icon會進入正式拍攝階段

E1. 當開始正式拍攝後,畫面中的多餘icon會自動隱藏,同時畫面中央會顯示所拍攝的畫面

E2. 開始拍攝的icon會變換成結束拍攝icon


3. 視頻發佈流程

嘗試為網易雲音樂設計一個發佈短視頻的流程

視頻發佈流程1


A1. 當進行玩視頻選擇的操作後,接下來會開始進行視頻編輯的操作,視頻會顯示在屏幕中央

A2. 下方會顯示三個icon選項,分別為“添加配樂”、“添加視頻內文字”以及“添加特效”

A3. 等到視頻編輯操作結束後,點擊“下一步”進入視頻發佈的頁面

B1. 首先看一下“添加文字”的操作,如不想保留此次操作可以點擊“取消”來回到上一步的視頻編輯頁面

B2. 通過效果選擇以及鍵盤輸入後的文字會顯示在此區域,輸入完成後可以通過觸控拖動的方式將文字拖動道理想的位置

B3. 在這裡可以選擇輸入文字的字體、段落以及預設的文字樣式

B4. 在這裡可以選擇輸入文字的顏色

B5. 等到“添加文字”操作完成後,若想保留此次操作,則點擊完成進行保存

C1. 再來看一下“添加音樂”的操作,如不想保留此次操作可以點擊“取消”來回到上一步的視頻編輯頁面

C2. 屏幕中央顯示視頻預覽,添加音樂後可以在此觀看效果

C3. 通過搜索可以搜索心儀的音樂

C4. 點擊目標歌曲後,系統會將音樂加入進視頻

C5. 如果沒有心儀的音樂可以通過上傳來添加自己的音樂文件

C6. 剪輯可以自行選擇目標音樂起始位置與終點位置

C7. 通過點擊音量選項可以調整音樂的音量大小

C8. 等到“添加音樂”操作完成後,若想保留此次操作,則點擊完成進行保存


嘗試為網易雲音樂設計一個發佈短視頻的流程

視頻發佈流程2


D1. 最後來看一下“添加特效”的操作,如不想保留此次操作可以點擊“取消”來回到上一步的視頻編輯頁面

D2. 屏幕中央顯示視頻預覽,添加特效後可以在此觀看效果

D3. 通過進度條可以選擇視頻特效想加入的位置

D4. 選擇目標特效

D5. 不同的特效庫中包含了不同的效果

D6. 等到“添加特效”操作完成後,若想保留此次操作,則點擊完成進行保存

E1. 此頁面為封面選擇頁,是在上一頁視頻編輯頁的下一個步驟,也是視頻發佈前的步驟,屏幕中央顯示視頻預覽

E2. 通過拖動進度條來選擇視頻定格處的圖片,將之作為視頻封面進行發佈

E3. 當封面確定後點擊下一步進入視頻發佈頁面

F1. 接下來進入視頻發佈頁面,此模塊為編輯好的視頻,點擊它可以對視頻進行預覽

F2. 此部分為輸入的文字區域,可以包含對視頻的介紹等文字

F3. 通過此部分可以選擇參與的主題

F4. 通過此部分可以定位

F5. 等一切都完成後點擊發布則完成流程


完稿時間:2020.1.28


分享到:


相關文章: