在Android4.4系統中,更加詳細地介紹了關於顏色的細節並提供了使用colour的新教程,以使我們的應用更加獨一無二。也就是說,作為一個設計師或者開發者,為你的APP做完美的配色已經變成了你的職責。
可以通過改變Android Framework介面元素的預設藍色來使應用更加獨特。 ——來自Android Design
最簡單的方式就是給Action Bar加上一層自定義的背景,但是在我現在寫的一個APP中我希望可以更靈活一些(做到自適應),自適應顏色的最好例子就是iTunes了,它會從專輯中獲取配色方案,作用於彈出的曲目列表。
所以,我準備在Android上實現這個技術。
基本理論知識
在網上搜尋一遍後,我發現了很多開源的實現方式,不過是用其他語言寫的。最好的版本是一個JavaScript庫,叫Color Thief,我從裡面學到了很多實現這個技術需要的知識,正好是我需要的。
影像量化
這裡要做的第一步就是量化源影像,通俗地說,就是減少影像上使用的顏色種類。如果你喜歡動態的GIF,那麼只能用8位的色板,所以每一幀最多可以使用256種顏色。
為此,我們就需要減少顏色使用,只使用一些主要的顏色,那我們就用預設的色板吧,再根據需要弄出一些其他的顏色。稍後將詳細介紹。
現在需要選擇量化演算法了,Color Thief用了一個修改版的MCQ(Median Cut Quantization)演算法,另稱作MMCQ(Modified Median Cut Quantization),如果想了解更多關於MMCQ的資訊,可以來 這裡 。其他的比較著名的量化技術還有NeuQuant和OctTree。
我還在《Principles of Digital Image Processing 》這本書上找到了一個JAVA的MCQ實現,託管在GitHub上。
這個MCQ演算法有很多很棒的特性,所以我決定就用它了:
- 它很快。它比NeuQuant和OctTree還快,在移動裝置上這點尤其重要;
- 它內部使用了統計直方圖,每種色塊都繫結了一個數值,之後排序的時候更方便。
雖然MCQ演算法生成的影像質量不是最好的,但是這裡只是需要它生成的調色盤,不用展示生成的影像,所以,還不錯。
處理結果
以下就是處理後的結果,使用Color Thief的例子裡的影像。之前說過MCQ裡面帶有統計直方圖,所以我們可以排列出每種顏色使用的頻率,它顯示了調色盤排序後的列表。當然,這還是可以繼續改進。
這些結果和Color Thief生成的影像有點不一樣:
- 我的版本選擇藍色作為主要的顏色;
- Color Thief挑選了藍色,銀色和綠色作為主要顏色;
- Color Thief沒有選到那些灰色的陰影。所以還需要改進。
本文的第二部分將會介紹怎麼更好地從調色盤中挑選主色調,將於下週釋出。