关于Android配色(1)

616 查看

在Android4.4系统中,更加详细地介绍了关于颜色的细节并提供了使用colour的新教程,以使我们的应用更加独一无二。也就是说,作为一个设计师或者开发者,为你的APP做完美的配色已经变成了你的职责。

可以通过改变Android Framework界面元素的默认蓝色来使应用更加独特。 ——来自Android Design

最简单的方式就是给Action Bar加上一层自定义的背景,但是在我现在写的一个APP中我希望可以更灵活一些(做到自适应),自适应颜色的最好例子就是iTunes了,它会从专辑中获取配色方案,作用于弹出的曲目列表。

color-matching-itunes

所以,我准备在Android上实现这个技术。

基本理论知识

在网上搜索一遍后,我发现了很多开源的实现方式,不过是用其他语言写的。最好的版本是一个JavaScript库,叫Color Thief,我从里面学到了很多实现这个技术需要的知识,正好是我需要的。

图像量化

这里要做的第一步就是量化源图像,通俗地说,就是减少图像上使用的颜色种类。如果你喜欢动态的GIF,那么只能用8位的色板,所以每一帧最多可以使用256种颜色。

为此,我们就需要减少颜色使用,只使用一些主要的颜色,那我们就用默认的色板吧,再根据需要弄出一些其他的颜色。稍后将详细介绍。

现在需要选择量化算法了,Color Thief用了一个修改版的MCQ(Median Cut Quantization)算法,另称作MMCQ(Modified Median Cut Quantization),如果想了解更多关于MMCQ的信息,可以来 这里 。其他的比较著名的量化技术还有NeuQuantOctTree

我还在《Principles of Digital Image Processing 》这本书上找到了一个JAVA的MCQ实现,托管在GitHub上。

这个MCQ算法有很多很棒的特性,所以我决定就用它了:

  • 它很快。它比NeuQuant和OctTree还快,在移动设备上这点尤其重要;
  • 它内部使用了统计直方图,每种色块都绑定了一个数值,之后排序的时候更方便。

虽然MCQ算法生成的图像质量不是最好的,但是这里只是需要它生成的调色板,不用展示生成的图像,所以,还不错。

处理结果

以下就是处理后的结果,使用Color Thief的例子里的图像。之前说过MCQ里面带有统计直方图,所以我们可以排列出每种颜色使用的频率,它显示了调色板排序后的列表。当然,这还是可以继续改进。

color-matching-result-1

color-matching-result-2

color-matching-result-3

这些结果和Color Thief生成的图像有点不一样:

  • 我的版本选择蓝色作为主要的颜色;
  • Color Thief挑选了蓝色,银色和绿色作为主要颜色;
  • Color Thief没有选到那些灰色的阴影。所以还需要改进。

本文的第二部分将会介绍怎么更好地从调色板中挑选主色调,将于下周发布。