Dribbble 客户端 ZEEEN 是怎么做到详情页颜色是适配的?

最近下载了追波一个第三方客户端ZEEEN,作品详情页做到了颜色适配,根据作品用色对界面进行配色,效果十分出色。希望大神能从设计师或者前端开发的角度解释一些实现方法。比如怎么获取适合的可阅读的背景色和文字色。问题用到的截图是题主自己追波的作品截图。
关注者
144
被浏览
7100

我自己对这个问题也挺感兴趣的,因为以前想做个 side project 第一步就是提取颜色,所以曾经在 GitHub 上搜索过一阵,主要找到这么些库:


1. ColorArt

因为很早就有关注 Panic 这个 macOS 软件开发商,所以这个库以前也有见过,是在 iTunes 某一版更新了「根据唱片封面提取条目背景色和标题、正文文字颜色」的功能之后,Panic 的工程师自己写来模仿的,在他们的博客上也有简单介绍背景:iTunes 11 and Colors


这个其实效果挺好的,但因为是用 Objective-C 写的,我不会,所以当时放在了一边


2. 然后我尝试了一下 zeke/get-image-colorsthephpleague/color-extractor,因为种种原因(好吧,其实就是因为我的代码能力太弱了)都用不大起来,这两个是 JS 和 PHP 的,网页项目里应用起来应该方便些。


3. 最后我自己使用的是 arcanis/colibrijs,其实算法也是源自在 Stack Overflow 上某个用户去模拟 iTunes 11 的封面颜色提取功能,帖子里有详细介绍实现原理:How does the algorithm to color the song list in iTunes 11 work?


简单来说就是程序把所有像素的颜色都提取出来,然后设定一个阈值,所有像素里颜色区别小于这个值的都归到一坨,数量最多的那几坨就是提取出来的主要颜色。而在 iTunes 唱片封面这个场景下,为了能提取一个背景色出来保证对象图片放上去非常和谐,背景色是对图片边缘单独做一次取色的。而「颜色区别」的实现方式是把 RGB 三个值变成一个三维坐标再进行一个空间变换(作者说是为了符合人类的认知习惯,会有些类似我们做数码设计的时候经常是在 HSB 而不是 RGB 里挑颜色)然后计算两点之间的距离。


Again,因为我自己对于这些代码完全是一知半解,所以这部分原理我吃不透,欢迎大家说得更详细一些。


因为这里的主要原理是看哪些颜色占的面积更大,所以其实对风景、人像等照片处理的效果会比较好,但对于很多 UI 作品来说效果一般,我猜测是因为在界面里很多有点睛作用的「细细」的图标和文字虽然颜色和背景差别特别大,但如果单纯用里面的实际像素来算面积的话就微乎其微了。总之,如果把 colibrijs 用来提取 UI 作品颜色的时候效果一般,大家可以看这个 Demo 感受一下:


这个效果我觉得比 Zeeen 里的差不少,刚刚看到这个问题的时候我厚着脸皮私信问了一下 @Nobtakatwitter.com/nobtaka ),Zeeen 的设计师。他问了他的开发者合伙人表示他们用的就是 Panic 最早时候公开过的 ColorArt