视频智能取色——营造氛围感利器

如今互联网信息爆发式增长，我们一直在探索更加智能、高效的方法给用户打造更具有氛围感的内容消费体验。本文将与大家分享体验设计利器：视频智能取色能力。颜色是对人感官刺激非常强烈的元素。在页面设计中，如果可以加大色彩的运用比例，就可以给人更加沉浸的感受。例如百度搜索框的背景，使用智能取色后，可以更好的与广告结合，相比基础的白色更加能表现出特色风格，缓解同质化感受。

智能取色是百度首套自动化色彩解决方案，是设计语言的色彩使用标准。目前搭载百度系产品已经服务了超过2.2亿+的人群。伴随视频产业流行，视频的丰富性、多元化优势日益凸显。我们的智能取色能力也完成了视频化升级，为设计提供更丰富的解决方案，从而服务更多场景。

///
视频智能取色可以用在哪里呢？

用一个具体实例为大家介绍一下。百度搜索结果页的品牌广告，需要支持视频的展现，因视频内容为不可控因素，为保证搜索框与tab的高识别性，广告内容只能在tab下方展现，有很强的区隔感。运用视频智能取色的能力，就可以很好的解决这个问题。将顶部的白色背景替换为根据视频内容动态取色背景（如视频对比），在增加视频展示高度的同时给整个页面带来更加沉浸的浏览体验。

///
视频图像内容如此丰富，如何做到智能取色？

先用最直观的方式示意下整体流程。如下图，可以简单概括为视频关键颜色的归纳与提取。将需要智能取色视频素材通过单帧拆分取色、得到颜色集合。在通过色彩归纳和帧间平滑抽象出最精简的关键色。

看似简单的流程升级起来并不平坦，帧、时间、内容等都是影响因素，是多变量的设计。我们做了诸多的尝试和修改，在细节和大局中博弈。最终确定了颜色优化方式与能力实现步骤。下面就来介绍一下具体内容。

｜第一步：单帧拆分取色

采取“图像处理+视觉策略”的方法。将视频素材拆分成单帧图像，再根据图像准确得到每一帧图片中权重最高的颜色。

1、图像处理：

设计师根据需要选择取色的精确位置，如顶部、底部、图片全部。进行自定义截取。以达到页面渲染的效果（视频顶部1/6取色）。

2、视觉策略：

通过不同业务方的视觉策略，选择合理的色相，把明度、纯度做精准控制。使单帧取色达到产品页面展现的要求。

｜第二步：色彩归纳

视频是动态变化的，每一帧的主题颜色如果全部渲染出来会对性能消耗较大，同时短时间内多次的色彩变化会表现为色彩闪动，影响视觉体验。我们采取色差合并+亮度平滑的方法，完成色彩的归纳与收敛。

1、色差合并：

因为色彩的差异性是非常主观的感受，为了更科学的合并颜色，我们引入了色差计算公式（Delta-E2000），将这种差异量化为数值。在此基础上，为了排除色相对差异感的影响，选取黑、白为模型进行灰阶计算。计算得出：白与白差值为0，白与黑差值为100，灰阶10%以内差值≥6。合并差值<6的颜色可以在控制颜色损失的同时降低对性能的消耗。运用该方法将示例中20秒视频的490帧，合并为39帧。

2、亮度平滑：

完成色差合并后会发现，在HSB色彩空间中会有灰阶系数大但是色彩相近的情况，其实也是可以合并的，例如土黄与深黄，因此我们扩大了合并范围，当帧间取色的色相、明度数值相近时继续合并。在示例中可以看到第2、3帧与第1帧的色相（H）、明度（B）数值相近而被合并。经过以上两次计算之后合并90%以上的单帧颜色，完成帧间色彩归纳。