如何設(shè)計(jì)視頻類產(chǎn)品?

2021-5-24    資深UI設(shè)計(jì)者

無論是在生活場景、工作場景還是學(xué)習(xí)場景中,視頻播放的普及度都已經(jīng)非常之高,為我們的多元化場景帶來便利。視頻功能在產(chǎn)品中的體現(xiàn)也已經(jīng)成為基礎(chǔ)功能,在設(shè)計(jì)層面的不斷優(yōu)化對(duì)于產(chǎn)品設(shè)計(jì)師來說至關(guān)重要。

本文特意結(jié)合目前比較熱門的產(chǎn)品,為大家梳理了涉及到視頻功能的產(chǎn)品在設(shè)計(jì)上面的解決方案。希望這些優(yōu)秀的設(shè)計(jì)思考可以帶給產(chǎn)品設(shè)計(jì)師更多的靈感,不斷探索和發(fā)現(xiàn)優(yōu)秀的設(shè)計(jì)解決方案。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

特殊場景下的后臺(tái)播放

影視類產(chǎn)品在不斷優(yōu)化用戶體驗(yàn)的時(shí)候,為了滿足用戶在一些特殊場景下的使用體驗(yàn),推出了后臺(tái)播放的附加功能。比如用戶在步行中、騎行中,或者處于不便于觀看視頻的場景中,可以采用后臺(tái)播放。視頻將會(huì)以音頻的形式后臺(tái)播放,讓用戶從視聽體驗(yàn)轉(zhuǎn)為音頻體驗(yàn),也是一種變相的解決方案。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:考慮到用戶的多場景需求,而不只是底層的需求。

人性化的定時(shí)關(guān)閉設(shè)置

很多用戶在睡覺前都會(huì)習(xí)慣刷一下視頻,有時(shí)候經(jīng)常會(huì)忘記關(guān)閉視頻就入睡了,第二天起來發(fā)現(xiàn)手機(jī)沒電啦!定時(shí)關(guān)閉功能的出現(xiàn)解決了用戶這一痛點(diǎn),可以根據(jù)自己入睡的大致時(shí)間評(píng)估,設(shè)置定時(shí)關(guān)閉的時(shí)間段。人性化的功能設(shè)置在細(xì)微之處考慮到了用戶痛點(diǎn),圖標(biāo)設(shè)計(jì)也是結(jié)合場景化表現(xiàn),提高用戶對(duì)于產(chǎn)品的操作體驗(yàn)。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:幫助用戶培養(yǎng)習(xí)慣和解決用戶可能會(huì)出現(xiàn)的失誤,以情感化的方式拉近與用戶之間的親和力。

特殊人群的色覺障礙優(yōu)化

為了考慮到特殊人群的使用體驗(yàn),讓視頻播放的效果符合不同用戶的視覺感知,色覺障礙優(yōu)化的功能設(shè)置人性化的呈現(xiàn)了解決方案。該功能針對(duì)色覺障礙用戶的臨床表現(xiàn),優(yōu)化視頻色彩來提高畫面辨識(shí)度。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:考慮到特殊人群的使用體驗(yàn),才能把產(chǎn)品的體驗(yàn)延伸到更多的場景。

短視頻的橫屏觀看體驗(yàn)升級(jí)

隨著短視頻的盛行,利用空余時(shí)間刷視頻成為用戶消磨時(shí)間的方式之一。對(duì)于視頻上傳用戶來說,根據(jù)視頻拍攝的題材會(huì)選擇適合的比例,有些題材適合橫屏比例。

抖音作為短視頻平臺(tái)積累了龐大的用戶量,視頻的種類和播放比例也是豐富多樣。為了滿足用戶的播放需求,設(shè)計(jì)了“全屏觀看”的切換按鈕,方便用戶觀看寬屏視頻的需求。觀看體驗(yàn)的升級(jí)帶給用戶人性化的體驗(yàn),也方便更多比例視頻的完美呈現(xiàn)。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:為用戶提供匹配當(dāng)前內(nèi)容的方式,而不要局限在內(nèi)容創(chuàng)造本身的匹配度上。

剛剛看過的視頻快速定位

在刷短視頻的時(shí)候,刷到自己感興趣的內(nèi)容想要繼續(xù)看完續(xù)集,以往的做法是進(jìn)入作者主頁挨個(gè)尋找,視頻多了找起來很慢,用戶體驗(yàn)很差。短視頻平臺(tái)提供了“剛剛看過”的快速定位操作,點(diǎn)擊之后會(huì)直接定位到剛剛看過的視頻位置,方便用戶觀看續(xù)集。人性化的功能設(shè)置節(jié)省了用戶的操作成本,方便一些持續(xù)更新的視頻內(nèi)容更好的進(jìn)行觀看體驗(yàn)。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:節(jié)省用戶的時(shí)間就是提高自己的認(rèn)可度,培養(yǎng)用戶的依賴度。

直觀的預(yù)覽增加點(diǎn)擊欲望

在觀看一些兒歌、短片視頻合集的時(shí)候,右側(cè)的視頻目錄區(qū)采用名稱和視頻截圖預(yù)覽呈現(xiàn),直觀的預(yù)覽效果增加點(diǎn)擊觀看的欲望。小朋友在刷兒歌視頻的時(shí)候,降低了學(xué)習(xí)成本,切換視頻也更加便利。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:降低用戶的理解成本,才能獲得用戶的青睞。

暫停播放的應(yīng)景設(shè)計(jì)

情感化的設(shè)計(jì)可以拉進(jìn)與用戶之間的親和力,體現(xiàn)產(chǎn)品人性化的一面。在特定的節(jié)假日或者特殊時(shí)間內(nèi),為了增強(qiáng)氛圍,視頻播放暫停的設(shè)計(jì)上面設(shè)計(jì)師也投入了很多小心思。比如在跨年期間,雙擊屏幕暫停時(shí)會(huì)出現(xiàn)綻放的煙花效果和 2021 年的絢麗文字,氛圍的營造帶動(dòng)了跨年的氛圍,帶給用戶更加溫馨的感官體驗(yàn)。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:提高用戶體驗(yàn)的設(shè)計(jì),就存在于細(xì)微之處的變化中。

畫中畫,邊看邊瀏覽視頻

有時(shí)候我們沒有明確的觀影目標(biāo),打開一個(gè)視頻后還想繼續(xù)尋找更好的影片,又怕當(dāng)前影片有看點(diǎn)。“畫中畫”功能解決了這個(gè)痛點(diǎn),觀看視頻時(shí)點(diǎn)擊“畫中畫”當(dāng)前播放視頻縮小窗口顯示在側(cè)邊,用戶還可以繼續(xù)瀏覽新的內(nèi)容,篩選更多可能性。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:在用戶沒有明確目標(biāo)的時(shí)候,帶給用戶多種選擇性。

投屏觀影雙向體驗(yàn)

將影片投到電視觀看是家庭觀影的最佳選擇,讓觀影體驗(yàn)不局限于方寸之間的設(shè)備上,還能與家人朋友一起觀看影片。如果家里有小孩子需要看動(dòng)畫片之類的,除了投屏電視給他們觀看以外,自己還能繼續(xù)在 App 上觀看別的影片,雙向選擇提高了用戶的多場景需求體驗(yàn)。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:特殊場景下不僅需要滿足用戶的需求,也要考慮用戶可能會(huì)出現(xiàn)的周邊困境。

手勢(shì)交互曝光作者更多作品

各種手勢(shì)的研究是產(chǎn)品設(shè)計(jì)師探索的方向,在刷短視頻的時(shí)候,向左滑動(dòng)除了進(jìn)入作者主頁以外,也有產(chǎn)品選擇曝光作者更多視頻作品。更多視頻的曝光不僅方便用戶觀看續(xù)集,還能通過更多視頻的觀看建立對(duì)作者的好感度,讓用戶充分的判斷是否需要關(guān)注作者。該交互形式給用戶提供了更多的判斷權(quán),也提高了作者更多視頻作品的曝光度。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:通過交互形式的改變給用戶帶來便利,也給作者帶來曝光度,平臺(tái)也提高了使用體驗(yàn),這是最穩(wěn)固的體驗(yàn)三角形。

單手操作的手勢(shì)交互

在視頻播放中的手勢(shì)交互為用戶的操作提供了便利,短視頻中的單擊暫停/播放、雙擊點(diǎn)贊、長按浮層、左右滑動(dòng)也有對(duì)應(yīng)的內(nèi)容變化。目前運(yùn)用比較多的是單手操作的手勢(shì),同樣的手勢(shì)在不同的產(chǎn)品中也激活不一樣的功能操作,比如影視 App 中通常是雙擊暫停/播放。作為產(chǎn)品設(shè)計(jì)師我們?cè)?a class="tag_a" target="_blank" style="color:#525252;text-decoration-line:none;transition:all 0.2s ease 0s;border-bottom:none;word-break:break-all;">交互設(shè)計(jì)的時(shí)候,手勢(shì)的變化在視頻功能中的運(yùn)用可以深入探索。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:手勢(shì)交互的運(yùn)用可以在原本的基礎(chǔ)上實(shí)現(xiàn)更多可能性。

短視頻 GIF 一鍵生成

在很多自媒體上大家經(jīng)常會(huì)看到很多影視片段的 GIF 動(dòng)畫,不僅增加了趣味性,也間接的傳播了視頻內(nèi)容。很多視頻類產(chǎn)品為了給用戶提供自動(dòng)生成短視頻和 GIF 動(dòng)畫的便利,提供了一鍵生成的操作,不僅可以選擇內(nèi)容區(qū)間,還可以自由控制時(shí)間。便利的操作降低了用戶的學(xué)習(xí)成本,還增加了用戶分享的趣味性。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:幫助用戶降低在外部平臺(tái)上分享內(nèi)容的制作成本,也是提高自身內(nèi)容被分享的概率。

視頻快照分享更便利

截圖屬于手機(jī)系統(tǒng)自帶的功能,通過交互路徑操作或者設(shè)備按鍵快捷操作完成。而視頻播放器自帶的快照功能更便利,一鍵操作隨時(shí)定格畫面,還能快捷分享或者制作表情,非常的便利。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:只有把操作的時(shí)間和難度降低到臨界值,才能讓用戶逐漸形成依賴。

個(gè)性化追求的片段觀影

在觀看影片的時(shí)候,針對(duì)一些故事情節(jié)比較長的影片,我們可以選擇觀看指定角色的片段,或者選擇倍速播放等來實(shí)現(xiàn)個(gè)性化的觀影選擇。忙碌的生活讓我們少了一些觀影耐心,這也是短視頻備受喜歡的因素之一,片段的播放需求滿足了這部分用戶的需求。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:個(gè)性化的功能服務(wù)可以培養(yǎng)用戶對(duì)產(chǎn)品的忠誠度,這是形成種子用戶的關(guān)鍵。

方寸之間的分屏設(shè)計(jì)

由于移動(dòng)端設(shè)備的大小限制,如何在有限的屏幕內(nèi)進(jìn)行延展設(shè)計(jì),是產(chǎn)品設(shè)計(jì)師探索的方向。分屏設(shè)計(jì)是在保持當(dāng)前視頻播放的前提下將屏幕劃分為更多模塊,不影響內(nèi)容進(jìn)展的情況下進(jìn)行更多功能操作。

比如愛奇藝觀看視頻時(shí)的夸夸功能操作,在操作功能的同時(shí)不影響用戶的觀影體驗(yàn),增加用戶觀影時(shí)的互動(dòng)性。

如何設(shè)計(jì)視頻類產(chǎn)品?我總結(jié)了這15個(gè)體驗(yàn)超棒的細(xì)節(jié)!

思考:有限空間內(nèi)的更多可能性設(shè)計(jì),是設(shè)計(jì)師不斷探索的過程,盡顯方寸之間的設(shè)計(jì)能力。

還有更多關(guān)于視頻功能在 UI 場景中的運(yùn)用案例,這里僅拋磚引玉的列舉了部分設(shè)計(jì)分析,更多分析我們下期繼續(xù)。

小結(jié)

針對(duì)單一功能的體驗(yàn)總結(jié),是分析和積累同一功能不同設(shè)計(jì)解決方案的形式,輔助增加設(shè)計(jì)需求中的效率發(fā)揮。產(chǎn)品體驗(yàn)日記總結(jié)的不同維度帶來不同的深度思考,希望這個(gè)維度的總結(jié)起到拋磚引玉的作用,帶給大家更多的思考方向和總結(jié)思路。


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



文章來源:優(yōu)設(shè)   作者:黑馬青年

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔