作者lamchen 腾讯IEG设计中心 设计师
|导语 我们在WeGame详情页设计改版探索中，无意间接触到了图片取色技术。经历一年的摸索和实践，我们在现有取色技术的基础上，制定了自动化配色策略，并相继优化了助手专区，商城节日氛围，以及特色卡片等多个业务场景，取得了较为不错的效果。谨以此文，抛砖引玉，聊聊我们关于图片取色技术在UI设计中的实践心得。
01
自动化配色构想
众所周知，WeGame是面向国内外游戏玩家的一个游戏发行产品；产品中对于单款游戏的详情页，是产品中最基础、也是最核心的内容。
在去年9月启动的详情页改版项目中，我们设计了一种游戏沉浸感较强的方案：用首屏横幅主视觉图营造视觉焦点，搭配同色系的页面内容，来营造更为丰富的游戏代入感；可这个方案在实现落地的环节遇到了一些阻碍。
资源更新繁琐耗时
由于此前详情页的游戏资源（主题色，图片，视频等）采用的是人工配色、人工配置的方式；改版之后，包括主题色、首屏横幅主视觉图在内的多个游戏资源，都需要重新输出。
这个过程不仅繁琐，而且耗时：平台目前有300多款游戏，不仅需要设计团队为每款游戏输出配色方案，运营团队也要为此逐一配置资源；同时，此次改版需兼容即将上线的深色模式，这将会使人工配置的工作量增加一倍。
开发人手不够
同时，我们也面临开发团队人手不够的情况：此次改版不仅是页面框架的改动，也牵涉到游戏资源管理后台的改动，以及资源接入流程的更新等。
在这样的现状中，我们萌生了一个自动配色的构想：让计算机来生产这300多款游戏的详情页配色方案。我们希望以详情页首屏的横幅主视觉图作为切入点，利用图片取色技术，提取主色调后，映射到页面模板中，从而生产出深浅两套页面；重复这个操作，就能批量产出游戏页面。
02
配色流程拆解
现有技术的局限
市面上已有的图片取色技术，可以对图片中每一个像素点的RGB值进行计算、分析，并提取出图片的主色调。
然而，现有技术存在三个主要的缺陷：
由于现有取色技术存在的缺陷，使其提取出的图片主色，无法生成让人满意的配色方案。
对于单款游戏来说，如果采取的是人工配色流程，设计师通过调整饱和度和明度，可较好地解决这个问题；所以，我们希望计算机能够模拟人工配色的思路，把人工配色时的关键流程梳理出来，并将其拆解成可量化的步骤，这样就能够制定出相应的自动化配色策略了。
选色原理
首先，我们选择HSB色彩模式，作为配色策略的基础框架。
我们都知道，RGB模式是图形界面中广泛应用的模式；但对于设计师而言，HSB模式的逻辑更适合配色，这不仅是因为主流设计软件的拾色器，其选色原理遵循的是 HSB 模式的逻辑，其根本原因在于，设计师在使用HSB模式调整色彩时，对于颜色的表现有更明确的心理预期。
拆解配色流程
HSB模式中有三个基本参数，即色相（H）、饱和度（S）、明度（B）；再加上UI元素的透明度，组成4个配色时可调节的参数；根据设计师对这4个参数的调节顺序，我们将配色流程拆解成三个阶段：
第一阶段：确定主色
设计师在为一个页面配色时，先要确定的是主色；通常根据品牌的核心色彩，或者主视觉图传达出来的，有明显色彩倾向的色彩，确定主色其实就是确定色相值（H）；
第二阶段：推导色板
接下来，设计师会把页面大致分为三个层级：背景层，内容层，引导层；通过调整主色的饱和度（S）和明度（B），推导出各页面各层级的颜色，形成基础色板。
第三阶段：丰富层级
最后一个阶段，对每个层级进行二次细化，通过调整元素的透明度，来丰富各层级的内容，最终形成完整的页面配色方案。
03
量化配色“三步走”
我们根据配色流程的这三个阶段，进行了标准量化，制定了自动化配色“三步走”的策略：
第一步：颜色采集
现有的图片取色技术，有三种基本的颜色采集方式：全部区域采集、形状区域采集、和图片位置采集。实际应用中，使用哪一种采集方式，应由取色应用场景的特性来决定，也可根据实际情况的反馈进行调整修正。
经过测试，全部区域采集法更能够反映出整体观感的颜色；因而，在详情页的场景中，我们采用的是全部区域采集的方法，也就是通过分析主视觉图片中的每一个像素点的颜色，计算后提取出图片中占比最多的颜色作为主色。
第二步：定向清洗
第二步，对采集出的主色进行定向清洗，清洗的目的是通过对主色的饱和度和明度的一系列调整，推导出各页面层级的颜色，得到适合详情页的深、浅两套色板。
我们在这个定向清洗的算法的设计上也花了一些心思。
评判标准
首先，我们考虑到玩家在详情页中的诉求，选取了阅读效率 和 阅读舒适度 这两个因素，作为评判详情页配色方案好坏的标准；并且参考了陶欢在《数字界面中色彩设计的视觉舒适度研究》[1]（下文简写成《舒适度研究》）中的结论，圈定了初步的颜色清洗范围。
色彩范围
在《舒适度研究》中，以HSB模式中的饱和度和明度作为变量，分别测试出了阅读效率最高，阅读舒适度最好的几个色彩组合：
进一步调试
初步清洗后的色彩范围虽然能满足标准，但是在视觉表现上还不够精确；所以我们再次将色彩范围四等分，通过观察在不同色相下页面的视觉表现，进行颜色调试，来进一步缩小色彩范围。
在调试过程中我们发现，背景色在浅色模式下，提高明度的同时降低饱和度，可以增加阅读舒适度，否则背景色会表现得又亮又刺眼；而当以深色作为背景时，提高明度的同时应提升饱和度，这样更能表现出较为明显的色彩，否则颜色会表现得很浑浊。
背景色锁定后，内容色的范围就较为容易确定了，我们选取了和背景色明度差异最大时，仍然能表现出明显色彩的区域，作为内容色的范围；
而在引导色的调试中，由于偏暖色系的颜色（红，橙，黄，绿）的饱和度越高，从视觉感受上就越刺眼。同时，引导层的颜色会用在按钮的背景中，考虑到按钮上的文字需要保证清晰可见，所以引导色选择了饱和度和明度偏低的范围。
一系列的调试之后，每个层级的色彩范围都确定了下来；接下来就是按照这个逻辑，转化成计算机的策略。
第三步：模板渲染
第二步的定向清洗后，得到了深、浅两套基础色板；最后一步是渲染模板：将基础色板映射到详情页模板中，输出实际的游戏配色方案。
映射关系
把基础色板和页面中的个元素，建立对应的映射关系，就可以实现批量渲染。
无色彩修正
在渲染的过程中，我们发现一些无色彩倾向的主视觉图片，输出了有明显色彩倾向的配色方案，这不符合玩家对图片的实际观感，我们针对这种情况进行了修正：
在执行清洗步骤之前，对于图片是否有明显色彩倾向做一次判定：若图片主色的饱和度（S值）小于10时，将判定为无色彩倾向的图片，并输出预设好的黑白版配色方案。
算法的技术逻辑
修正后的算法其技术逻辑如下：
取色效果预览
04
展望
经历一年左右的探索和实践，我们将自动配色这项策略应用在了助手专区、商城节点氛围、智能图片遮罩、以及特色卡片栏目等多个业务场景中，取得了不错的效果。
助手专区配置
活动节点氛围
特色卡片栏目
纵观以上可以发现，能够应用取色技术的场景，都有几个主要的共同点：
这项策略能够为设计师提供更加灵活的设计思路，不仅提升了页面的沉浸感，也帮助项目节省了设计、运营、开发的人力成本。