a、依據(jù)波段的相隔位置、頻率關(guān)系取色，避免相鄰波段頻繁取值。
b、在選取的波段之間進(jìn)行色值運(yùn)算，平滑過(guò)度。

目的：方便開(kāi)發(fā)計(jì)算 / 提高通用化程度。

圖2：最終選取的20色種基礎(chǔ)色

圖3：在20個(gè)基礎(chǔ)色中進(jìn)行篩選，根據(jù)波段選取7個(gè)主應(yīng)用基礎(chǔ)色

拓展應(yīng)用（基于7色值）：
a、基礎(chǔ)色的應(yīng)用
表示區(qū)分類別：以波段相隔的原則選取色彩（常規(guī)基礎(chǔ)色7種）。如，2色選取采用RGB3大波段中的任意2波段內(nèi)7大基礎(chǔ)色。，3-4色采用奇偶原則選取色彩，5-6色以上則采用1357+x規(guī)律選取。（如圖4所示）

圖4：基礎(chǔ)色的應(yīng)用

b、鄰近色的應(yīng)用
表同類屬性：選取7色，并于20色值中選取其相鄰波段色從而產(chǎn)生H(色相)接近，且(S)飽和度、(B)明度相似的同類色。數(shù)據(jù)運(yùn)算時(shí)，7色為起始值，鄰近色為結(jié)束值，兩者間平滑過(guò)度的色值為計(jì)算值。（如圖5所示）

圖5：鄰近色的應(yīng)用

c、同色漸變拓展的應(yīng)用
表程度延生：在a、b的基礎(chǔ)上，拓展?jié)u變色漸變方法又2種，一種依據(jù)透明度-10%的梯度遞減規(guī)律，一種依據(jù)HSB中H（色相）值不變，而變換S（飽和度）與B（明度）值的函數(shù)關(guān)系遞減規(guī)律。（如圖6，圖7所示）

圖6：同色漸變拓展的應(yīng)用

圖7：同色漸變拓展的應(yīng)用，色彩矩陣

案例與比較：
次色彩應(yīng)用的算法在JS組件庫(kù)中的8大組件中均有優(yōu)化體驗(yàn)效果，介于篇幅，此處僅以Stream圖為例，展現(xiàn)之前的2種色彩應(yīng)用與當(dāng)下研究后色彩應(yīng)用的比較，各有利弊，但從之前提及的立場(chǎng)與角度而言，毫無(wú)疑問(wèn)，本次研究還是取得了期望的效果。（如圖8/圖9/圖10所示）

圖8：依靠設(shè)計(jì)師取色，雖然色相區(qū)分明顯，但需要前端工程師一一填色的色彩輸入。且從美學(xué)上看比較雜亂，從拓展性上看缺乏規(guī)律，從開(kāi)發(fā)的角度，缺乏色彩主題性與規(guī)范性。

圖9：依靠簡(jiǎn)單的色彩漸變，從識(shí)別上看藍(lán)綠色彩區(qū)分度并不明顯，從美學(xué)上看，中間的過(guò)度顏色也很臟

圖10：依靠當(dāng)下的波段算法，清晰有效的將藍(lán)綠2種接近的色彩做了有效區(qū)分，且有延續(xù)的漸變效果

終于寫完了，感謝一下負(fù)責(zé)開(kāi)發(fā)的工程師寧朗同學(xué)，也感謝一下主導(dǎo)這次進(jìn)程的主管知秋，在我們3人的合力下，這種算法終于從概念慢慢落地，并將為之后可視化組件庫(kù)的用戶們提供更多更好的體驗(yàn)，加油！

by:kaka

 2/2   首頁(yè) 上一頁(yè) 1 2