鑽石舞台

如今互聯網信息爆發式增長，我們一直在探索更加智能、高效的方法給用戶打造更具有氛圍感的內容消費體驗。本文將與大家分享體驗設計利器：視頻智能取色能力。顏色是對人感官刺激非常強烈的元素。在頁面設計中，如果可以加大色彩的運用比例，就可以給人更加沉浸的感受。例如百度搜索框的背景，使用智能取色後，可以更好的與廣告結合，相比基礎的白色更加能表現出特色風格，緩解同質化感受。

看似簡單的流程升級起來並不平坦，幀、時間、內容等都是影響因素，是多變量的設計。我們做了諸多的嘗試和修改，在細節和大局中博弈。最終確定了顏色優化方式與能力實現步驟。下面就來介紹一下具體內容。

｜ 第一步：單幀拆分取色

採取「圖像處理+視覺策略」的方法。將視頻素材拆分成單幀圖像，再根據圖像準確得到每一幀圖片中權重最高的顏色。

1、圖像處理：

設計師根據需要選擇取色的精確位置，如頂部、底部、圖片全部。進行自定義截取。以達到頁面渲染的效果（視頻頂部1/6取色）。

2、視覺策略：

通過不同業務方的視覺策略，選擇合理的色相，把明度、純度做精準控制。使單幀取色達到產品頁面展現的要求。

｜ 第二步：色彩歸納

視頻是動態變化的，每一幀的主題顏色如果全部渲染出來會對性能消耗較大，同時短時間內多次的色彩變化會表現為色彩閃動，影響視覺體驗。我們採取色差合併+亮度平滑的方法，完成色彩的歸納與收斂。

1、色差合併：

因為色彩的差異性是非常主觀的感受，為了更科學的合併顏色，我們引入了色差計算公式（Delta-E2000），將這種差異量化為數值。在此基礎上，為了排除色相對差異感的影響，選取黑、白為模型進行灰階計算。計算得出：白與白差值為0，白與黑差值為100，灰階10%以內差值≥6。合併差值<6的顏色可以在控制顏色損失的同時降低對性能的消耗。運用該方法將示例中20秒視頻的490幀，合併為39幀。

2、亮度平滑：

完成色差合併後會發現，在HSB色彩空間中會有灰階係數大但是色彩相近的情況，其實也是可以合併的，例如土黃與深黃，因此我們擴大了合併範圍，當幀間取色的色相、明度數值相近時繼續合併。在示例中可以看到第2、3幀與第1幀的色相（H）、明度（B）數值相近而被合併。經過以上兩次計算之後合併90%以上的單幀顏色，完成幀間色彩歸納。

｜ 第三步：幀間平滑

色彩歸納完成後，在視頻播放過程中偶爾還是會出現跳幀閃現的問題。如下圖，視頻播放時顏色會在黃色系與紅色系中頻繁跳動。這時梳理幀間的色彩關係就顯得尤為重要。我們要做的就是提取出關鍵幀、合併次要幀，讓顏色的過渡更加自然。

提取關鍵幀：整體的平滑過程引入了時間維度，一個顏色覆蓋的幀數越多，顯示的時間就越長。一般視頻1秒為24-30幀。我們保留展示時間超過15幀（即0.5秒）以上的顏色，定義它為關鍵色，保留關鍵幀。當一個顏色的顯示時長不足15幀，便把它合併到關鍵幀當中。

我們來對比下是否使用視頻取色能力的前後效果。可以明顯的感受到我們的智能取色能力在降低性能消耗的同時達到更好的視覺體驗（如視頻對比）。視頻智能取色，可以有效的保證了用戶視頻觀看的體驗，同時滿足搜索需求。

///

寫在最後

目前我們的視頻智能取色已經運用在百度品專廣告上，後續我們也將繼續挖掘和深耕視頻取色的更多可能性，也希望這篇文章可以給設計師們以啟發，打造更加豐富多彩的沉浸體驗，提升對美的感知。

也歡迎加入MEUX,視覺/交互/用研

可投簡歷至MEUX@BAIDU.COM

(註明信息獲取來源如：公眾號）

以下文章，你可能也感興趣

⬇️

【內有長文】對話知乎-社區氛圍專場（下）

【深度好文】對話知乎-社區氛圍專場（上）

設計提效——如何用Figma搭建系統組件庫

好看視頻品牌升級運營設計

基於數據的體驗洞察與驗證—GSM模型

關於我們：

MEUX,百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度網盤、百度貼吧、百度商業產品等。

MEUX以「簡單極致」為設計理念，創造極致用戶體驗的同時賦能商業，推動設計行業的價值和影響力，讓生活因設計而更美好。

你「在看」我嗎？