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

前言

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

百度APP是如何進行視頻沉浸式設計的？

視頻播放器中視頻畫面當然是最主要的内容，以此作為突破點進行思考：

• 最大化畫面視野：通過改變視頻畫面本身的大小，減少頁面“留白”，讓用戶更聚焦視頻畫面，觀看視頻時更專注。
• 最佳視線觀看位置：将不同高度的視頻按照頁面結構去布局視頻畫面，通過畫面避讓狀态欄、頂底bar結構的方式，使畫面更加整潔，減少元素混亂帶來的幹擾，同時整體位置偏上展示，視線落點更加舒适。
• 觀看體驗連續性：視頻浏覽過程中，非必要不打斷視頻浏覽，在進行如查看評論、臨時退出播放器等行為時，保證視頻播放的連貫性，方便用戶多操作。

一、最大化視頻畫面視野

1. 視頻畫面裁剪

随着時代的發展，為提升消費者對手機的操作體驗，智能手機逐漸多元化，手機屏幕尺寸叠代更快、更加豐富多樣。手機作為視頻很重要的生産端，手機屏幕尺寸的多樣化影響到産出視頻尺寸的多樣化，同時用戶可通過視頻編輯工具任意編輯視頻尺寸，最終生産的視頻尺寸比例自由度非常高。據不完全統計視頻平台中視頻尺寸達22萬多種，用戶使用機型近300種，在視頻尺寸多樣性及視頻展現媒介多樣性的現狀下需要兼容性更強的裁剪及展現規則才能帶給用戶更好的觀看體驗。

我們要做的就是将不可控的視頻資源和不可控的浏覽視頻設備設計為可控的視覺展示效果，并最大化視頻畫面。減少環境幹擾，給用戶帶來沉浸式感官體驗。

視頻寬撐滿手機屏寬後，将視頻尺寸分為四類：

1) 視頻高度>機屏高

視頻畫面寬度撐滿屏幕後，視頻整體居中于屏幕，居中裁剪視頻多餘畫面。

注：不允許畫面高度撐滿屏幕，寬度自适應導緻畫面左右留黑效果。

2) 視頻高度=手機屏高

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

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

此類尺寸較複雜、難處理，于是将限制裁剪面積和展示位置相結合，保證裁剪面積和位置可控。結合視頻平台資源尺寸和業務目标來确認理想展示效果，反推定義最大裁剪面積，根據顯示位置多次判斷視頻放大後是否符合既定裁剪面積，最終确定當前視頻的顯示方式。同時支持根據不同視頻業務進行個性化定制，并且将裁剪面積雲控處理，根據業務内不同時期的訴求限制比例來靈活調整展示效果，雙端也可分端定義數值；橫向協同及叠代成本極低，便于快速上線驗證效果。

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

橫版視頻在手機屏幕中面積占比較小，畫面可識别度和飽滿度稍有欠缺，輕微擴大畫面視野，畫面浏覽更加清晰有沖擊力。以不影響内容理解為前提，根據自身平台視頻尺寸占比及視頻内容特點規定固定比例或比例範圍适度放大。

錦上添花，引入文字内容識别

為避免因裁剪規則而裁剪到視頻關鍵文字對視頻内容獲取有障礙的問題，發揮百度強大的AI技術優勢，引入文字識别技術及視覺展現規則，進一步提升視頻展現樣式的可控性，同時能夠通過盡量少損失畫面達到畫面放大的效果，平衡畫面沉浸感和完整性的關系。

左右文字被裁剪情況：文字左右設置安全距離，保證安全距離在屏幕内。如果安全區超出屏幕，則按照上方描述的裁剪規則進行退檔顯示（滿屏至不裁剪之間的檔位），直至文字不被裁剪。極端情況退檔至最後一檔，視頻畫面不裁剪。

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

上下文字被裁剪情況：文字上下設置安全距離，保證安全距離在屏幕内。如果安全區超出屏幕，則按照上方裁剪規則進行滿屏至不裁剪之間的檔位進行退檔顯示，此情況隻會從全屏一檔顯示退至二檔顯示。

裁剪面積、展示比例、文字安全距離等數據都通過雲控的方式下發，靈活配置到不同業務中，保證裁剪規則一緻的同時又能針對不同業務進行定制展現，也可快速調整并支持上線實驗，來驗證适合自己産品的展示效果。

2. 智能滿屏

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

由于滿屏是用戶主動操作放大行為，可以接受文字内容被裁剪，但也需要有節制的放大，避免帶來畫面裁剪過多視覺體驗不佳的問題。為了保證95%以上資源撐滿全屏，達到放大畫面視野極緻體驗。同時最大畫面裁剪面積不超過一定比例（根據自身業務視頻資源判斷），将視頻資源細分為3類進行不同效果處理：

1. 可繼續放大至滿屏的視頻，則進行滿屏展現。
2. 不可繼續放大的視頻，如果繼續放大會導緻裁剪畫面過多影響觀看完整度與觀看體驗，則保持上方提到的裁剪規則，不做另外處理。
3. 橫版視頻統一放大至固定尺寸，可根據自身業務資源進行放大尺寸的定義。

二、最佳視線觀看位置

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

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

豎版視頻：高于1:1的視頻，按照頁面結構布局視頻畫面，避讓狀态欄、頂底bar操作，避免與頁面結構沖突帶來畫面淩亂不美觀的問題，同時能減少畫面參差帶來的幹擾，增加沉浸浏覽感受。

橫版視頻：等于矮于1:1的視頻，畫面按照屏幕高度比例展示在偏上的區域，高度比例可雲控便于靈活調整。

三、觀看體驗連續性

1. 視窗擠壓

為了滿足用戶在視頻場景多角度信息獲取，在不打斷用戶視頻浏覽的基礎上建設視窗擠壓交互體驗，提升觀看視頻的相對沉浸感。在視頻場景觀看評論時會彈起半屏面闆，遮擋住視頻内容，導緻用戶無法在浏覽評論的同時觀看視頻内容。對短視頻重度用戶來說，對同時看評論和看視頻習慣的用戶有挑戰。通過視窗上移動擠壓功能，在浏覽面闆内容時不對視頻内容打斷，弱化面闆内容給用戶帶來的影響。

視窗高度固定，畫面寬高比越小畫面内容越小，觀看體驗不友好，所以豎版視頻對壓縮後的顯示尺寸進行幹預，定義最小視頻畫面展示比例，盡量擴大畫面視野，保證觀看視頻的舒适度。

2. 懸浮小窗

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

寫在最後

沉浸式體驗設計是幫助用戶減少畫面幹擾，讓用戶專注于當前的視頻浏覽，忽略時間的流逝進入心流狀态。我們通過放大畫面視野，增強畫面沖擊力的方式減少幹擾，并解決在視頻畫面尺寸、手機屏幕分辨率極多的複雜情況下，保證畫面效果的穩定和可控，并且不會受阻于未來手機機型的擴充發展，普适性極強。

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

作者：百度MEUX

來源公衆号：百度MEUX（ID：baidumeux），百度移動生态用戶體驗設計中心，負責百度移動生态體系的用戶/商業産品的全鍊路體驗設計。

本文由人人都是産品經理合作媒體 @百度MEUX 授權發布，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部