颜色量化算法模型及在多元化App中的应用(颜色量化算法色彩多元化)

本文将重点聚焦在我们的量化取色方案，围绕量化取色方案需求背景、色彩策略及使用场景进行讨论，并探讨量化取色应用的更多可能性。

过去一年多的时间里，应用商店和游戏中心跟随COOLOS2.0完成了大版本的升级改版。
其中，为针对不同应用进行差异化展示，我们完成了普通、联运应用、联运爆款游戏三个类型APP的详情页设计。

但伴随业务发展，联运爆款游戏类APP数量增多，原有模式下设计师针对每个应用单独提供配色的模式也逐渐出现问题。
不同设计师对同一图片的主观感受无法做到统一，进而影响APP详情页的配色；联运爆款游戏的增多，占用了大量的人力资源。
基于以上问题，我们急需一套科学的取色算法来提供界面主色、图片蒙层等页面渲染的解决方案，从而智能高效化完成当前需求。

量化取色方案是指利用颜色量化算法提取界面中的图片主色，并在保证色彩倾向不变的情况下，基于同一色相数值，通过将饱和度和明度控制在固定范围，输出既能符合应用场景，也能代表图片氛围的一套颜色方案。

Step1. 算法提取主色提取图片主色，核心逻辑是遍历图片的像素，对图片中颜色和该颜色的像素个数进行统计，构造采样结果，然后提取主色或者其他风格的颜色。
中位切割算法是最知名、应用最广泛的减色算法，常见的图像处理软件如 Photoshop、GIMP 等都使用了这个算法或其变种。

假设有一张 RGB 图像，想要提取图片中的主色，中位切割算法流程如下：将图片的所有像素放到同一个区域（RGB 三维空间中）

对所有区域进行以下操作：

重复上述步骤反复切分，直到最终切分得到⻓方体的数量等于主题颜⾊数量为⽌，计算区块的平均颜⾊，即可得出主色。

为方便开发者，在实际运用中，Android SDK 给我们提供了这样一个帮助类：Palette 类（Palette 中的中位切割算法是进行了优化的，可帮助获取一张Bitmap的主色调），代码如下：

最后选择dominantColor作为主色，运用到界面中。

由上图可知，虽然算法得出的主色能够代表图片，但是却并不一定能够满足页面呈现要求。
因此，我们需在此基础上，结合色彩策略对主色进行干预，让界面阅读体验达到标准，并且整体配色统一自然。

Step2. 算法取色优化优化策略选择

目前主流的量化取色优化方案有两种，分别是模板色彩匹配和自然色彩提取匹配。

1、模板色彩匹配

通过步骤一提取出主色色相后，结合映射规则映射到色彩模板（一般为12-24种），然后使用相对应颜色的模板。

2、自然色彩提取匹配

通过步骤一提取出主色色相后，在HSB色彩模式基础上，通过对饱和度和明度进行调整，得出适合界面的配色方案。
优点：色彩丰富自然，图片与颜色关联性强。

HSB色彩模式是什么？

日常生活中，我们接触到最多的色彩模式非RGB莫属了，RGB色彩模式是由红（R）、绿（G）、蓝（B）三色按照不同比例叠加，表现出各种颜色，但由于RGB三色数值无法直观地对色相、饱和度、明度等信息进行展示，也就不符合我们颜色可控的需求。

而HSB色彩模式以人类对颜色的感觉为基础，描述了颜色的三种基本特性。

H（色相）：表示色彩颜色；在0~360°的标准色轮上，色相按位置度量。
通常，色相是由颜色名称标识的，比如红、绿、橙。
黑色和白色无色相；

S（饱和度）：表示色彩纯度；取值范围0～100%。
数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从灰度到纯色的变化；

B（明度）：表示色彩明暗；取值范围0～100%。
数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

综合考虑界面丰富度、开发成本等多方因素后，我们选择了自然色彩提取匹配方案，以用户体验为导向，提升界面个性化。

基于算法提取主色后，我们在HSB色彩模式下对其进行数值干预，在保持色相（H）值不变的情况下，调整饱和度（S）和明度（B），建立一套可行的色彩规律，保证视觉效果统一。

得出配色方案后，除了依靠视觉衡量方案是否可行外，还需要有一个相对科学的标准对配色结果进行可读性检验，这就需要引入WCAG中对于颜色对比度的规范。

WCAG全称是Web Content Accessibility Guidlines（网页内容无障碍指南)，这是一组关于网页内容更容易访问的建议。
其中关于颜色的使用标准为：色彩要在页面中达到一定的对比度，才能让人看清。
为满足不同场景需要，WCAG制定了两条色彩对比度条例：对比度最低标准（AA级）和对比度增强标准（AAA级）。

对比度计算工具：https://webaim.org/resources/contrastchecker/（设定好前、背景色后，自动计算对比度结果，并判定是否满足WCAG的标准。
）

参考Material Design和 iOS人机交互规范，基本都是以满足AA级标准为主，特殊情况下要求满足AAA级标准。
而WCAG对比度最低标准（AA级）要求为：文本和文本图像的视觉呈现具有至少 4.5:1 的对比度。

经过大量图片验证得出，经过优化后的量化取色结果满足上述规范要求。

Step4. 应用落地

目前，量化取色方案已经在应用商店和游戏中心的联运爆款游戏APP的详情页、游戏卡片等场景落地，包括页面背景渲染、按钮渲染等多种渲染方式，提升色彩带来的氛围渲染和沉浸感受。
下图展示部分色彩渲染效果。

量化取色方案还有很多的使用场景，例如，它可用于前/背景色、主题色、按钮颜色、字体颜色、图片遮罩、多角度渐变色等多元场景，打破页面单一颜色布局，提供更为灵活协调的色彩搭配思路，高效营造更具氛围渲染与沉浸感受的页面体验。
后续我们团队也将继续努力，将量化取色应用到COOL OS的更多地方。

量化取色方案目前仅运用在应用商店详情页上，后续我们将继续挖掘更多落地可能性，相信在未来，量化取色方案将服务更多多元化产品场景，为COOLOS用户营造更好的多彩沉浸体验。
也欢迎大家一起讨论，共同进步。

作者:用户体验设计部

来源-微信公众号:酷派技术团队

出处:https://mp.weixin.qq.com/s/kUFDX6p6YwO7hQ1eeCnJfw