沉浸式體驗(yàn)設(shè)計(jì)是為了讓用戶(hù)專(zhuān)注于當(dāng)前的內(nèi)容,那么百度APP是如何進(jìn)行視頻沉浸式設(shè)計(jì)的?本篇文章從最大化畫(huà)面視野、最佳視線(xiàn)觀看位置、觀看體驗(yàn)連續(xù)性三部分進(jìn)行分析,感興趣的朋友一起來(lái)看看。
前言
沉浸式體驗(yàn)是讓人專(zhuān)注在當(dāng)前的目標(biāo),全身心投入并感到愉悅和滿(mǎn)足,從而忽略時(shí)間的流逝。應(yīng)用到界面上則是更強(qiáng)調(diào)聚焦內(nèi)容,減少不必要的打擾。本次研究與實(shí)踐針對(duì)視頻場(chǎng)景中視頻所呈現(xiàn)的畫(huà)面,通過(guò)精細(xì)化的設(shè)計(jì),在多樣化的手機(jī)屏幕中呈現(xiàn)時(shí),能夠帶給用戶(hù)更為沉浸的視頻觀看體驗(yàn)。
百度APP是如何進(jìn)行視頻沉浸式設(shè)計(jì)的?
視頻播放器中視頻畫(huà)面當(dāng)然是最主要的內(nèi)容,以此作為突破點(diǎn)進(jìn)行思考:
- 最大化畫(huà)面視野:通過(guò)改變視頻畫(huà)面本身的大小,減少頁(yè)面“留白”,讓用戶(hù)更聚焦視頻畫(huà)面,觀看視頻時(shí)更專(zhuān)注。
- 最佳視線(xiàn)觀看位置:將不同高度的視頻按照頁(yè)面結(jié)構(gòu)去布局視頻畫(huà)面,通過(guò)畫(huà)面避讓狀態(tài)欄、頂?shù)譩ar結(jié)構(gòu)的方式,使畫(huà)面更加整潔,減少元素混亂帶來(lái)的干擾,同時(shí)整體位置偏上展示,視線(xiàn)落點(diǎn)更加舒適。
- 觀看體驗(yàn)連續(xù)性:視頻瀏覽過(guò)程中,非必要不打斷視頻瀏覽,在進(jìn)行如查看評(píng)論、臨時(shí)退出播放器等行為時(shí),保證視頻播放的連貫性,方便用戶(hù)多操作。
一、最大化視頻畫(huà)面視野
1. 視頻畫(huà)面裁剪
隨著時(shí)代的發(fā)展,為提升消費(fèi)者對(duì)手機(jī)的操作體驗(yàn),智能手機(jī)逐漸多元化,手機(jī)屏幕尺寸迭代更快、更加豐富多樣。手機(jī)作為視頻很重要的生產(chǎn)端,手機(jī)屏幕尺寸的多樣化影響到產(chǎn)出視頻尺寸的多樣化,同時(shí)用戶(hù)可通過(guò)視頻編輯工具任意編輯視頻尺寸,最終生產(chǎn)的視頻尺寸比例自由度非常高。據(jù)不完全統(tǒng)計(jì)視頻平臺(tái)中視頻尺寸達(dá)22萬(wàn)多種,用戶(hù)使用機(jī)型近300種,在視頻尺寸多樣性及視頻展現(xiàn)媒介多樣性的現(xiàn)狀下需要兼容性更強(qiáng)的裁剪及展現(xiàn)規(guī)則才能帶給用戶(hù)更好的觀看體驗(yàn)。
我們要做的就是將不可控的視頻資源和不可控的瀏覽視頻設(shè)備設(shè)計(jì)為可控的視覺(jué)展示效果,并最大化視頻畫(huà)面。減少環(huán)境干擾,給用戶(hù)帶來(lái)沉浸式感官體驗(yàn)。
視頻寬撐滿(mǎn)手機(jī)屏寬后,將視頻尺寸分為四類(lèi):
1) 視頻高度>機(jī)屏高
視頻畫(huà)面寬度撐滿(mǎn)屏幕后,視頻整體居中于屏幕,居中裁剪視頻多余畫(huà)面。
注:不允許畫(huà)面高度撐滿(mǎn)屏幕,寬度自適應(yīng)導(dǎo)致畫(huà)面左右留黑效果。
2) 視頻高度=手機(jī)屏高
視頻居中于屏幕,剛好填滿(mǎn)屏幕,不需要裁剪處理。
3) 1:1<視頻高度<手機(jī)屏高
此類(lèi)尺寸較復(fù)雜、難處理,于是將限制裁剪面積和展示位置相結(jié)合,保證裁剪面積和位置可控。結(jié)合視頻平臺(tái)資源尺寸和業(yè)務(wù)目標(biāo)來(lái)確認(rèn)理想展示效果,反推定義最大裁剪面積,根據(jù)顯示位置多次判斷視頻放大后是否符合既定裁剪面積,最終確定當(dāng)前視頻的顯示方式。同時(shí)支持根據(jù)不同視頻業(yè)務(wù)進(jìn)行個(gè)性化定制,并且將裁剪面積云控處理,根據(jù)業(yè)務(wù)內(nèi)不同時(shí)期的訴求限制比例來(lái)靈活調(diào)整展示效果,雙端也可分端定義數(shù)值;橫向協(xié)同及迭代成本極低,便于快速上線(xiàn)驗(yàn)證效果。
4) 橫版視頻(高寬比 1:1)
橫版視頻在手機(jī)屏幕中面積占比較小,畫(huà)面可識(shí)別度和飽滿(mǎn)度稍有欠缺,輕微擴(kuò)大畫(huà)面視野,畫(huà)面瀏覽更加清晰有沖擊力。以不影響內(nèi)容理解為前提,根據(jù)自身平臺(tái)視頻尺寸占比及視頻內(nèi)容特點(diǎn)規(guī)定固定比例或比例范圍適度放大。
錦上添花,引入文字內(nèi)容識(shí)別
為避免因裁剪規(guī)則而裁剪到視頻關(guān)鍵文字對(duì)視頻內(nèi)容獲取有障礙的問(wèn)題,發(fā)揮百度強(qiáng)大的AI技術(shù)優(yōu)勢(shì),引入文字識(shí)別技術(shù)及視覺(jué)展現(xiàn)規(guī)則,進(jìn)一步提升視頻展現(xiàn)樣式的可控性,同時(shí)能夠通過(guò)盡量少損失畫(huà)面達(dá)到畫(huà)面放大的效果,平衡畫(huà)面沉浸感和完整性的關(guān)系。
左右文字被裁剪情況:文字左右設(shè)置安全距離,保證安全距離在屏幕內(nèi)。如果安全區(qū)超出屏幕,則按照上方描述的裁剪規(guī)則進(jìn)行退檔顯示(滿(mǎn)屏至不裁剪之間的檔位),直至文字不被裁剪。極端情況退檔至最后一檔,視頻畫(huà)面不裁剪。
橫版資源文字左右被裁剪情況:按照固定尺寸退檔
上下文字被裁剪情況:文字上下設(shè)置安全距離,保證安全距離在屏幕內(nèi)。如果安全區(qū)超出屏幕,則按照上方裁剪規(guī)則進(jìn)行滿(mǎn)屏至不裁剪之間的檔位進(jìn)行退檔顯示,此情況只會(huì)從全屏一檔顯示退至二檔顯示。
裁剪面積、展示比例、文字安全距離等數(shù)據(jù)都通過(guò)云控的方式下發(fā),靈活配置到不同業(yè)務(wù)中,保證裁剪規(guī)則一致的同時(shí)又能針對(duì)不同業(yè)務(wù)進(jìn)行定制展現(xiàn),也可快速調(diào)整并支持上線(xiàn)實(shí)驗(yàn),來(lái)驗(yàn)證適合自己產(chǎn)品的展示效果。
2. 智能滿(mǎn)屏
通過(guò)裁剪方式放大畫(huà)面視野之外,還通過(guò)讓用戶(hù)自主交互操作再次放大畫(huà)面視野,調(diào)整到自己喜歡的觀看視頻的方式。相較于上方默認(rèn)裁剪放大,滿(mǎn)屏方式更加激進(jìn)極致,畫(huà)面放大更多。開(kāi)啟方式通過(guò)面板功能按鈕開(kāi)啟智能滿(mǎn)屏外,增加便捷交互開(kāi)啟手勢(shì),用戶(hù)可雙指放大快速開(kāi)啟。
由于滿(mǎn)屏是用戶(hù)主動(dòng)操作放大行為,可以接受文字內(nèi)容被裁剪,但也需要有節(jié)制的放大,避免帶來(lái)畫(huà)面裁剪過(guò)多視覺(jué)體驗(yàn)不佳的問(wèn)題。為了保證95%以上資源撐滿(mǎn)全屏,達(dá)到放大畫(huà)面視野極致體驗(yàn)。同時(shí)最大畫(huà)面裁剪面積不超過(guò)一定比例(根據(jù)自身業(yè)務(wù)視頻資源判斷),將視頻資源細(xì)分為3類(lèi)進(jìn)行不同效果處理:
二、最佳視線(xiàn)觀看位置
通過(guò)布局合理、舒適的畫(huà)面位置,也能提升瀏覽過(guò)程中用戶(hù)體驗(yàn)的沉浸感。人的視覺(jué)中心一般會(huì)在物理中心的偏上方,于是在設(shè)計(jì)中我們將視頻畫(huà)面放在屏幕偏上的位置,用戶(hù)視線(xiàn)落點(diǎn)更加舒適,一般是用戶(hù)在瀏覽頁(yè)面時(shí)最先注意到的地方。同時(shí)視頻在頁(yè)面偏上的位置,能減少下方標(biāo)題等信息過(guò)多對(duì)視頻畫(huà)面的遮擋。
為了精細(xì)化處理不同比例的視頻資源,豎版視頻和橫版視頻根據(jù)頁(yè)面效果分別定義了最佳觀看展示位置。
豎版視頻:高于1:1的視頻,按照頁(yè)面結(jié)構(gòu)布局視頻畫(huà)面,避讓狀態(tài)欄、頂?shù)譩ar操作,避免與頁(yè)面結(jié)構(gòu)沖突帶來(lái)畫(huà)面凌亂不美觀的問(wèn)題,同時(shí)能減少畫(huà)面參差帶來(lái)的干擾,增加沉浸瀏覽感受。
橫版視頻:等于矮于1:1的視頻,畫(huà)面按照屏幕高度比例展示在偏上的區(qū)域,高度比例可云控便于靈活調(diào)整。
三、觀看體驗(yàn)連續(xù)性
1. 視窗擠壓
為了滿(mǎn)足用戶(hù)在視頻場(chǎng)景多角度信息獲取,在不打斷用戶(hù)視頻瀏覽的基礎(chǔ)上建設(shè)視窗擠壓交互體驗(yàn),提升觀看視頻的相對(duì)沉浸感。在視頻場(chǎng)景觀看評(píng)論時(shí)會(huì)彈起半屏面板,遮擋住視頻內(nèi)容,導(dǎo)致用戶(hù)無(wú)法在瀏覽評(píng)論的同時(shí)觀看視頻內(nèi)容。對(duì)短視頻重度用戶(hù)來(lái)說(shuō),對(duì)同時(shí)看評(píng)論和看視頻習(xí)慣的用戶(hù)有挑戰(zhàn)。通過(guò)視窗上移動(dòng)擠壓功能,在瀏覽面板內(nèi)容時(shí)不對(duì)視頻內(nèi)容打斷,弱化面板內(nèi)容給用戶(hù)帶來(lái)的影響。
視窗高度固定,畫(huà)面寬高比越小畫(huà)面內(nèi)容越小,觀看體驗(yàn)不友好,所以豎版視頻對(duì)壓縮后的顯示尺寸進(jìn)行干預(yù),定義最小視頻畫(huà)面展示比例,盡量擴(kuò)大畫(huà)面視野,保證觀看視頻的舒適度。
2. 懸浮小窗
在不打斷用戶(hù)視頻瀏覽的基礎(chǔ)上還建設(shè)了懸浮小窗交互體驗(yàn),旨在為用戶(hù)提供完善優(yōu)質(zhì)的視頻消費(fèi)體驗(yàn)。用戶(hù)進(jìn)行其它操作時(shí)仍保留視頻后臺(tái)播放,同時(shí)也能在屏幕角落觀看到縮略圖大小的視頻播放窗口,可以從任何頁(yè)面中觀看視頻,我們同時(shí)也保留了部分視頻基礎(chǔ)操作。觀看體驗(yàn)連續(xù)性讓用戶(hù)對(duì)視頻有絕對(duì)的主控感,提升用戶(hù)使用體驗(yàn)的滿(mǎn)意度。
寫(xiě)在最后
沉浸式體驗(yàn)設(shè)計(jì)是幫助用戶(hù)減少畫(huà)面干擾,讓用戶(hù)專(zhuān)注于當(dāng)前的視頻瀏覽,忽略時(shí)間的流逝進(jìn)入心流狀態(tài)。我們通過(guò)放大畫(huà)面視野,增強(qiáng)畫(huà)面沖擊力的方式減少干擾,并解決在視頻畫(huà)面尺寸、手機(jī)屏幕分辨率極多的復(fù)雜情況下,保證畫(huà)面效果的穩(wěn)定和可控,并且不會(huì)受阻于未來(lái)手機(jī)機(jī)型的擴(kuò)充發(fā)展,普適性極強(qiáng)。
同時(shí)通過(guò)視窗擠壓、懸浮小窗的交互體驗(yàn)專(zhuān)注于當(dāng)前的視頻瀏覽不被打斷,進(jìn)一步提升視頻看播沉浸式體驗(yàn)。后續(xù)我們將不斷探索視頻場(chǎng)景沉浸度提升方式,為用戶(hù)帶來(lái)更加舒適的觀看使用體驗(yàn)。
作者:百度MEUX
來(lái)源公眾號(hào):百度MEUX(ID:baidumeux),百度移動(dòng)生態(tài)用戶(hù)體驗(yàn)設(shè)計(jì)中心,負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶(hù)/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。