視頻交互的設計該怎麼做?

常見的視頻交互

在瀏覽視頻時,用戶會有四個最基本的手指交互操作:

左右滑動

右半區上下滑動

左半區上下滑動

雙擊暫停播放

在這個三個基本交互操作的前提下,很多產品又為視頻增加了進行操作的功能。

視頻操作的目的

視頻操作是為了滿足用戶更好的觀看體驗,包括調整清晰度,鎖定屏幕,彈幕,分享等功能。

在對視頻進行操作的時候,會有一個界面操作的外框,在界面中,有各種功能可以操作,用戶在觀看視頻時,是不希望看到這個操作界面的,一般會在3秒左右,這個操作界面就會漸漸隱去。當然,如果覺得太慢,可以觸碰一下屏幕,就自動隱去了。

騰訊視頻參考

用戶在對視頻操作的時候,除了一些簡單功能的操作,在更多選項中,可以參考下圖這種彈窗形式,盡量避免全屏,全屏在用戶體驗上全屏會讓用戶感覺進入到另一個界面,有負重感,彈窗只需要觸碰一下左屏的視頻,就可以自動收回了,非常快捷方便。

愛奇藝參考

主流產品的常見交互及功能

gif錄製

嗶哩嗶哩

在屏幕上,有一個gif按鈕,長按按鈕,它就會為你錄下當前的視頻畫面,並且可以預覽,保存和分享。

騰訊視頻

騰訊視頻的交互和嗶哩嗶哩完全不同,同樣是錄製gif,騰訊視頻可以選擇視頻的段落來錄製,並且支持調整錄製時間:最短3s,最長10s,並且支持小視頻和gif,還可以添加音樂,支持分享的平台也比較多。

鎖定屏幕

鎖定屏幕是為了防止用戶在觀看視頻時發生誤觸,用戶只需要點擊鎖定按鈕就可以鎖屏了。(按鈕:鎖定狀態,和開鎖狀態)

值得一提的是嗶哩嗶哩的鎖屏設計是完全相反的,它的鎖屏鍵代表的不是狀態,而是一個動作,容易讓用戶產生體驗誤差。

綜合以上視頻內容分析,做個簡單的交互總結

影視類產品不同於普通視頻軟體,它由於承載大量的內容和用戶,功能的擴展在所難免,而在功能的擴展過程中,千萬不要忽略交互的重要性,無論你的功能多麼豐富,用戶終究是被有好的內容和體驗所吸引。

視頻APP交互參考

在設計的時候一定要按照這個交互做嗎?

看產品,不同的產品有不同功能需求,也可以根據你的產品交互來做一些情感化的小設計或者創新,不過這個模式是很多視頻產品都在使用的交互參考。

關於情感化設計及創新設計,可以參考Youtube的視頻交互設計。

Youtube在視頻界面做了很多手指交互,在視頻預覽的過程中,可以用手指下拉視頻,就可以將其縮放至首頁。

觀看視頻的過程中,手指上滑可以查看視頻選集,下滑將其隱藏。

總結

通過找尋產品交互的共通性,來做一些情感化的交互和設計,當然,產品不同類型,其功能方向也不同,如果遇到類似影音類產品的交互設計,可以參考以上的分享內容。

文章來自於微信訂閱號:如履薄冰(rulvbb)

推薦閱讀:

獃獃淺談:設計流程與產品分析
一個文本框引發的思考
2017阿里巴巴交互設計師實習崗筆試感受

TAG:交互設計 | 移動端UI設計 | 設計 |