視頻沉浸式體驗設(shè)計

0 評論 7346 瀏覽 41 收藏 15 分鐘

沉浸式體驗設(shè)計是為了讓用戶專注于當前的內(nèi)容,那么百度APP是如何進行視頻沉浸式設(shè)計的?本篇文章從最大化畫面視野、最佳視線觀看位置、觀看體驗連續(xù)性三部分進行分析,感興趣的朋友一起來看看。

前言

沉浸式體驗是讓人專注在當前的目標,全身心投入并感到愉悅和滿足,從而忽略時間的流逝。應(yīng)用到界面上則是更強調(diào)聚焦內(nèi)容,減少不必要的打擾。本次研究與實踐針對視頻場景中視頻所呈現(xiàn)的畫面,通過精細化的設(shè)計,在多樣化的手機屏幕中呈現(xiàn)時,能夠帶給用戶更為沉浸的視頻觀看體驗。

百度APP是如何進行視頻沉浸式設(shè)計的?

視頻播放器中視頻畫面當然是最主要的內(nèi)容,以此作為突破點進行思考:

  • 最大化畫面視野:通過改變視頻畫面本身的大小,減少頁面“留白”,讓用戶更聚焦視頻畫面,觀看視頻時更專注。
  • 最佳視線觀看位置:將不同高度的視頻按照頁面結(jié)構(gòu)去布局視頻畫面,通過畫面避讓狀態(tài)欄、頂?shù)譩ar結(jié)構(gòu)的方式,使畫面更加整潔,減少元素混亂帶來的干擾,同時整體位置偏上展示,視線落點更加舒適。
  • 觀看體驗連續(xù)性:視頻瀏覽過程中,非必要不打斷視頻瀏覽,在進行如查看評論、臨時退出播放器等行為時,保證視頻播放的連貫性,方便用戶多操作。

視頻沉浸式體驗設(shè)計

一、最大化視頻畫面視野

1. 視頻畫面裁剪

隨著時代的發(fā)展,為提升消費者對手機的操作體驗,智能手機逐漸多元化,手機屏幕尺寸迭代更快、更加豐富多樣。手機作為視頻很重要的生產(chǎn)端,手機屏幕尺寸的多樣化影響到產(chǎn)出視頻尺寸的多樣化,同時用戶可通過視頻編輯工具任意編輯視頻尺寸,最終生產(chǎn)的視頻尺寸比例自由度非常高。據(jù)不完全統(tǒng)計視頻平臺中視頻尺寸達22萬多種,用戶使用機型近300種,在視頻尺寸多樣性及視頻展現(xiàn)媒介多樣性的現(xiàn)狀下需要兼容性更強的裁剪及展現(xiàn)規(guī)則才能帶給用戶更好的觀看體驗。

我們要做的就是將不可控的視頻資源和不可控的瀏覽視頻設(shè)備設(shè)計為可控的視覺展示效果,并最大化視頻畫面。減少環(huán)境干擾,給用戶帶來沉浸式感官體驗。

視頻寬撐滿手機屏寬后,將視頻尺寸分為四類:

視頻沉浸式體驗設(shè)計

1) 視頻高度>機屏高

視頻畫面寬度撐滿屏幕后,視頻整體居中于屏幕,居中裁剪視頻多余畫面。

注:不允許畫面高度撐滿屏幕,寬度自適應(yīng)導(dǎo)致畫面左右留黑效果。

2) 視頻高度=手機屏高

視頻居中于屏幕,剛好填滿屏幕,不需要裁剪處理。

視頻沉浸式體驗設(shè)計

3) 1:1<視頻高度<手機屏高

此類尺寸較復(fù)雜、難處理,于是將限制裁剪面積和展示位置相結(jié)合,保證裁剪面積和位置可控。結(jié)合視頻平臺資源尺寸和業(yè)務(wù)目標來確認理想展示效果,反推定義最大裁剪面積,根據(jù)顯示位置多次判斷視頻放大后是否符合既定裁剪面積,最終確定當前視頻的顯示方式。同時支持根據(jù)不同視頻業(yè)務(wù)進行個性化定制,并且將裁剪面積云控處理,根據(jù)業(yè)務(wù)內(nèi)不同時期的訴求限制比例來靈活調(diào)整展示效果,雙端也可分端定義數(shù)值;橫向協(xié)同及迭代成本極低,便于快速上線驗證效果。

視頻沉浸式體驗設(shè)計

視頻沉浸式體驗設(shè)計

4) 橫版視頻(高寬比≤1:1)

橫版視頻在手機屏幕中面積占比較小,畫面可識別度和飽滿度稍有欠缺,輕微擴大畫面視野,畫面瀏覽更加清晰有沖擊力。以不影響內(nèi)容理解為前提,根據(jù)自身平臺視頻尺寸占比及視頻內(nèi)容特點規(guī)定固定比例或比例范圍適度放大。

視頻沉浸式體驗設(shè)計

錦上添花,引入文字內(nèi)容識別

為避免因裁剪規(guī)則而裁剪到視頻關(guān)鍵文字對視頻內(nèi)容獲取有障礙的問題,發(fā)揮百度強大的AI技術(shù)優(yōu)勢,引入文字識別技術(shù)及視覺展現(xiàn)規(guī)則,進一步提升視頻展現(xiàn)樣式的可控性,同時能夠通過盡量少損失畫面達到畫面放大的效果,平衡畫面沉浸感和完整性的關(guān)系。

左右文字被裁剪情況:文字左右設(shè)置安全距離,保證安全距離在屏幕內(nèi)。如果安全區(qū)超出屏幕,則按照上方描述的裁剪規(guī)則進行退檔顯示(滿屏至不裁剪之間的檔位),直至文字不被裁剪。極端情況退檔至最后一檔,視頻畫面不裁剪。

視頻沉浸式體驗設(shè)計

橫版資源文字左右被裁剪情況:按照固定尺寸退檔

視頻沉浸式體驗設(shè)計

上下文字被裁剪情況:文字上下設(shè)置安全距離,保證安全距離在屏幕內(nèi)。如果安全區(qū)超出屏幕,則按照上方裁剪規(guī)則進行滿屏至不裁剪之間的檔位進行退檔顯示,此情況只會從全屏一檔顯示退至二檔顯示。

視頻沉浸式體驗設(shè)計

裁剪面積、展示比例、文字安全距離等數(shù)據(jù)都通過云控的方式下發(fā),靈活配置到不同業(yè)務(wù)中,保證裁剪規(guī)則一致的同時又能針對不同業(yè)務(wù)進行定制展現(xiàn),也可快速調(diào)整并支持上線實驗,來驗證適合自己產(chǎn)品的展示效果。

2. 智能滿屏

通過裁剪方式放大畫面視野之外,還通過讓用戶自主交互操作再次放大畫面視野,調(diào)整到自己喜歡的觀看視頻的方式。相較于上方默認裁剪放大,滿屏方式更加激進極致,畫面放大更多。開啟方式通過面板功能按鈕開啟智能滿屏外,增加便捷交互開啟手勢,用戶可雙指放大快速開啟。

視頻沉浸式體驗設(shè)計

由于滿屏是用戶主動操作放大行為,可以接受文字內(nèi)容被裁剪,但也需要有節(jié)制的放大,避免帶來畫面裁剪過多視覺體驗不佳的問題。為了保證95%以上資源撐滿全屏,達到放大畫面視野極致體驗。同時最大畫面裁剪面積不超過一定比例(根據(jù)自身業(yè)務(wù)視頻資源判斷),將視頻資源細分為3類進行不同效果處理:

  1. 可繼續(xù)放大至滿屏的視頻,則進行滿屏展現(xiàn)。
  2. 不可繼續(xù)放大的視頻,如果繼續(xù)放大會導(dǎo)致裁剪畫面過多影響觀看完整度與觀看體驗,則保持上方提到的裁剪規(guī)則,不做另外處理。
  3. 橫版視頻統(tǒng)一放大至固定尺寸,可根據(jù)自身業(yè)務(wù)資源進行放大尺寸的定義。

視頻沉浸式體驗設(shè)計

二、最佳視線觀看位置

通過布局合理、舒適的畫面位置,也能提升瀏覽過程中用戶體驗的沉浸感。人的視覺中心一般會在物理中心的偏上方,于是在設(shè)計中我們將視頻畫面放在屏幕偏上的位置,用戶視線落點更加舒適,一般是用戶在瀏覽頁面時最先注意到的地方。同時視頻在頁面偏上的位置,能減少下方標題等信息過多對視頻畫面的遮擋。

為了精細化處理不同比例的視頻資源,豎版視頻和橫版視頻根據(jù)頁面效果分別定義了最佳觀看展示位置。

豎版視頻:高于1:1的視頻,按照頁面結(jié)構(gòu)布局視頻畫面,避讓狀態(tài)欄、頂?shù)譩ar操作,避免與頁面結(jié)構(gòu)沖突帶來畫面凌亂不美觀的問題,同時能減少畫面參差帶來的干擾,增加沉浸瀏覽感受。

視頻沉浸式體驗設(shè)計

橫版視頻:等于矮于1:1的視頻,畫面按照屏幕高度比例展示在偏上的區(qū)域,高度比例可云控便于靈活調(diào)整。

視頻沉浸式體驗設(shè)計

三、觀看體驗連續(xù)性

1. 視窗擠壓

為了滿足用戶在視頻場景多角度信息獲取,在不打斷用戶視頻瀏覽的基礎(chǔ)上建設(shè)視窗擠壓交互體驗,提升觀看視頻的相對沉浸感。在視頻場景觀看評論時會彈起半屏面板,遮擋住視頻內(nèi)容,導(dǎo)致用戶無法在瀏覽評論的同時觀看視頻內(nèi)容。對短視頻重度用戶來說,對同時看評論和看視頻習(xí)慣的用戶有挑戰(zhàn)。通過視窗上移動擠壓功能,在瀏覽面板內(nèi)容時不對視頻內(nèi)容打斷,弱化面板內(nèi)容給用戶帶來的影響。

視窗高度固定,畫面寬高比越小畫面內(nèi)容越小,觀看體驗不友好,所以豎版視頻對壓縮后的顯示尺寸進行干預(yù),定義最小視頻畫面展示比例,盡量擴大畫面視野,保證觀看視頻的舒適度。

視頻沉浸式體驗設(shè)計

2. 懸浮小窗

在不打斷用戶視頻瀏覽的基礎(chǔ)上還建設(shè)了懸浮小窗交互體驗,旨在為用戶提供完善優(yōu)質(zhì)的視頻消費體驗。用戶進行其它操作時仍保留視頻后臺播放,同時也能在屏幕角落觀看到縮略圖大小的視頻播放窗口,可以從任何頁面中觀看視頻,我們同時也保留了部分視頻基礎(chǔ)操作。觀看體驗連續(xù)性讓用戶對視頻有絕對的主控感,提升用戶使用體驗的滿意度。

視頻沉浸式體驗設(shè)計

寫在最后

沉浸式體驗設(shè)計是幫助用戶減少畫面干擾,讓用戶專注于當前的視頻瀏覽,忽略時間的流逝進入心流狀態(tài)。我們通過放大畫面視野,增強畫面沖擊力的方式減少干擾,并解決在視頻畫面尺寸、手機屏幕分辨率極多的復(fù)雜情況下,保證畫面效果的穩(wěn)定和可控,并且不會受阻于未來手機機型的擴充發(fā)展,普適性極強。

同時通過視窗擠壓、懸浮小窗的交互體驗專注于當前的視頻瀏覽不被打斷,進一步提升視頻看播沉浸式體驗。后續(xù)我們將不斷探索視頻場景沉浸度提升方式,為用戶帶來更加舒適的觀看使用體驗。

作者:百度MEUX

來源公眾號:百度MEUX(ID:baidumeux),百度移動生態(tài)用戶體驗設(shè)計中心,負責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設(shè)計。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!