前文的原子設(shè)計(jì)中我曾經(jīng)講過，原子是構(gòu)成所有元素的最小單元，沒有辦法再被細(xì)分。它通常對應(yīng)著產(chǎn)品設(shè)計(jì)中的通用樣式及構(gòu)成組件的最小顆粒。而顏色，作為整個(gè)設(shè)計(jì)系統(tǒng)中極為重要的原子之一，在心智模型中占據(jù)了關(guān)鍵的地位。

我們看到紅色能夠感受到熱情、興奮和危險(xiǎn)，看到綠色時(shí)往往就感受到安全、自然和平靜?？梢哉f，顏色調(diào)動(dòng)我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。

接下來，我結(jié)合公司目前的業(yè)務(wù)CROV Dropshipping（以下簡稱DS），來進(jìn)行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點(diǎn)啟發(fā)。

大綱走起：

• 業(yè)務(wù)背景
• 為什么我們需要色彩體系
• 如何創(chuàng)造一套色彩體系
• WCAG無障礙測試

業(yè)務(wù)背景

CROV DS是針對美國市場的線上一件代發(fā)平臺（類似阿里巴巴的一件代發(fā)業(yè)務(wù)），屬于跨境電商B2C行業(yè)。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時(shí)間靈活可控，讓用戶專注于銷售本身。

為什么我們需要色彩體系？

1. 對于業(yè)務(wù)

目前CROV DS業(yè)務(wù)日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業(yè)務(wù)場景的擴(kuò)展，臨時(shí)增加的顏色很容易被遺漏在某個(gè)不知名角落的畫板中，導(dǎo)致一次性用色的風(fēng)險(xiǎn)。（tips：一次性即前一篇我所講到的用完即扔、未被復(fù)用的設(shè)計(jì)）

而且用色本身的隨意也導(dǎo)致研發(fā)還原結(jié)果的不統(tǒng)一，一處地方色彩各異的現(xiàn)象比比皆是。

因此，我們需要基于我們自身的業(yè)務(wù)特征來產(chǎn)出一套足夠完善的色彩體系，讓業(yè)務(wù)從用色上達(dá)成基本的一致統(tǒng)一。

2. 對于設(shè)計(jì)師

我們設(shè)計(jì)師在定義顏色時(shí)，更多的是直接在色板上進(jìn)行取色，但這樣的取色方法存在諸多弊端。

增加決策

可能很多設(shè)計(jì)師選色時(shí)會(huì)有這種情況，一會(huì)覺得這個(gè)顏色臟了，一會(huì)又覺得那個(gè)顏色太刺眼了，有時(shí)候完美主義作祟，為了得到一個(gè)滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時(shí)更為嚴(yán)重。

其實(shí)這和不用網(wǎng)格系統(tǒng)來布局是一個(gè)道理。（注：網(wǎng)格系統(tǒng)是一種能夠極大提升布局效率的方法，后面會(huì)講～）

色板中取色的范圍趨近于無窮。如果將HSB模式下的單個(gè)H、S和B作為一個(gè)最小單元格，那么我們可以選擇的格子高達(dá)數(shù)百萬個(gè)。顆粒度過細(xì)的情況（其實(shí)根本就沒有顆粒度）導(dǎo)致我們在取色時(shí)往往會(huì)被迫進(jìn)行反復(fù)的微調(diào)和嘗試。

缺乏秩序和邏輯性

直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。

比如一個(gè)按鈕的狀態(tài)可以包括normal、hover、pressed、disable等多個(gè)狀態(tài)，如果我們僅僅靠自己的直覺自由調(diào)整明度和飽和度，最后的配色方案其實(shí)缺乏內(nèi)在的邏輯性和秩序性。

難以復(fù)用

對于B端這些偏后臺工具、場景復(fù)雜的業(yè)務(wù)，顏色運(yùn)用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項(xiàng)目及業(yè)務(wù)場景需要用到新的顏色時(shí)，之前定義的顏色難以復(fù)用，導(dǎo)致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力，難以體現(xiàn)專業(yè)度。

而如果設(shè)計(jì)師提前定義好一套色彩體系，一方面只需要在對應(yīng)的色板中選擇即可，大大減少了設(shè)計(jì)決策。另一方面色彩體系所提供的不同色彩梯度也便于各個(gè)需求、業(yè)務(wù)場景的復(fù)用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設(shè)計(jì)師依賴”直覺“所帶來的主觀和不可控。

如何創(chuàng)建一套色彩體系？

Alipay Design團(tuán)隊(duì)提過：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場景中，具有非常好的延展性。

接下來我以DS項(xiàng)目為例進(jìn)行色彩體系探索——

首先，所有的色彩模型統(tǒng)一采用HSB模型進(jìn)行，正如Ant Design設(shè)計(jì)團(tuán)隊(duì)說的那樣，這個(gè)模型利于調(diào)整色彩時(shí)對顏色有明確的心理預(yù)期，同時(shí)便于團(tuán)隊(duì)溝通。

這里再簡單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點(diǎn)說，它們分別代表了明色區(qū)域和暗色區(qū)域）

1. 品牌色

Crov Dropshipping基于其時(shí)間自由靈活、可兼職副業(yè)、成本風(fēng)險(xiǎn)低的業(yè)務(wù)特征，使得對應(yīng)的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當(dāng)中。他們不同于我們常規(guī)認(rèn)知里那類傳統(tǒng)的retailer（線下實(shí)體零售商），大部分的DSer擁有自己的事業(yè)和工作，為了賺取外快，將其當(dāng)做自己的副業(yè)。因此，年輕化是這類用戶群的主要標(biāo)簽。

所以，我們采用了高飽和度、偏向藍(lán)色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩帶”

為了覆蓋掉Crov DS本身復(fù)雜的前后臺業(yè)務(wù)場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環(huán)中每類色相的基本角度15°。

因此，這里以品牌色色相為基礎(chǔ)，在HSB 360°色環(huán)中，對色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環(huán)彩帶。

后續(xù)我們的顏色體系就在彩帶上的24個(gè)顏色上面進(jìn)行提取。

3. 品牌色同色系配色

品牌色同色系是指，根據(jù)品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達(dá)了品牌性，多個(gè)梯度的變化也能夠適應(yīng)及通用盡可能多的業(yè)務(wù)場景，也便于多信息的層級劃分。

而同色系配色的輸出則遵循了antDesign發(fā)明的tint/shade 色彩系統(tǒng)算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學(xué)地生成色階。

sketch中可以直接將這套算法可視化處理，便于設(shè)計(jì)師直接生成所有顏色的色階。需要注意的是明色區(qū)（就是上方橫向的那塊取色區(qū)域，白色至純色時(shí)S由0過渡至100）和暗色區(qū)（右側(cè)縱向的取色區(qū)域，純色至黑色時(shí)B由100過渡至0）遵循了兩種不同的規(guī)則，具體規(guī)則見下：

當(dāng)S飽和度變化時(shí)（明色區(qū)域），S值以S/5的結(jié)果值為一個(gè)增量進(jìn)行遞減，B值以(100-B)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個(gè)增量分別是16和0。

品牌色在明色區(qū)的下兩個(gè)色階對應(yīng)的HSB參數(shù)就是（250，64，100），（250，48，100），以此類推。

而當(dāng)B明度產(chǎn)生變化時(shí)（暗色區(qū)域），S值以(100-S)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增，而B值以B/5的結(jié)果值為一個(gè)增量進(jìn)行遞減。得出的兩個(gè)增量分別為4和20。

品牌色在暗色區(qū)的下兩個(gè)顏色對應(yīng)的HSB參數(shù)即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

根據(jù)這兩個(gè)定義規(guī)則推導(dǎo)出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。

4. 定義輔助色

我們使用品牌色來傳達(dá)品牌價(jià)值，還需要輔助色來滿足多樣化業(yè)務(wù)場景的需要，對用戶進(jìn)行不同的情緒引導(dǎo)，同時(shí)也可以緩解用戶對單一主色產(chǎn)生的視覺疲勞。

輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環(huán)形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補(bǔ)色。

結(jié)果見下：

首先，由于相差15°的同類色與品牌色差距過小，色相對比感微弱，傳遞的調(diào)性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會(huì)作為功能色使用，這里同樣直接舍棄。

類似色

類似色即色相差在30度左右的顏色，屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調(diào)性與品牌色類似，并且色彩體系中需要一個(gè)典型的冷色來覆蓋一些場景，所以這里使用了H220的顏色作為冷系的輔助色。

中差色

中差色即色相相差90度左右的顏色，屬于中等對比色。H340偏粉，與常規(guī)紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對H340進(jìn)行了色相校正，調(diào)整至H355。

對比色

對比色即色相相差120度左右的顏色，屬于強(qiáng)對比色。最后得出的H130調(diào)性與中差色的H160過于類似，直接舍棄。H10與H340調(diào)性類似，但是可以向橙色系發(fā)展，所以微調(diào)到同類色進(jìn)行色相校正。

互補(bǔ)色

互補(bǔ)色即色相相差180度左右的顏色，屬于高強(qiáng)度對比色。最后得出的H70偏綠，這里同樣進(jìn)行了色相校正，將其調(diào)整為H55。

最后，得出了共計(jì)5種輔助色。不過這些輔助色并不能直接使用，還需要進(jìn)行感官明度的校正。

5. 感官明度校正

感官明度校正方法來自支付寶設(shè)計(jì)團(tuán)隊(duì)，這是是確認(rèn)輔助色的最后關(guān)鍵一環(huán)。每種顏色都有屬于自己的“感官明度”，即發(fā)光度。品牌色即輔助色的發(fā)光度不一致，就會(huì)導(dǎo)致視覺上會(huì)有明顯的明暗差別。所以，我們需要通過發(fā)光度來進(jìn)行最終的顏色校正。

明度較高的灰色意味著高發(fā)光度，明度較低則意味著低發(fā)光度。保持品牌色發(fā)光度不變，我們對其他輔助色進(jìn)行微調(diào)。

我們只需要將那些視覺明暗差距明顯的顏色進(jìn)行調(diào)整。注意，并非所有的顏色都要調(diào)整到品牌色的感官明度，這些值僅僅是一個(gè)參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。

最后得到校正后的如下輔助色。藍(lán)色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規(guī)、成功、警告和報(bào)錯(cuò)狀態(tài)。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個(gè)層級。

6. 輔助色的同色系配色

與品牌色一樣，使用tint/shade規(guī)則推導(dǎo)出全部輔助色不同梯度的色階。具體過程不再贅述～

7. 定義文本色

CROV DS的文本色并非純粹的中性色，我們通過加入一點(diǎn)點(diǎn)品牌色來讓文本呈現(xiàn)色彩傾向，以此提升頁面的活力及年輕感，同時(shí)也可以讓界面更加耐看，減緩B端產(chǎn)品長期使用時(shí)的視覺疲勞。

具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個(gè)層次的文本色。當(dāng)然，中性文本色你也可以參考antDesign中通過透明度進(jìn)行定義的方法，不一定需要按照某個(gè)具體色值來。

WCAG無障礙測試

我們必須要承認(rèn)的現(xiàn)實(shí)是，設(shè)計(jì)師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環(huán)境，有可能是在刺眼的陽光下、有可能是在昏暗的環(huán)境中。如果色彩不去做可用性測試，在很多的情況下存在體驗(yàn)降低的風(fēng)險(xiǎn)。

而WCAG（Web Content Accessibility Guideline，Web內(nèi)容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩(wěn)定理解的（Understandable）、穩(wěn)定耐用的（Robust）。

而顏色則正是對應(yīng)了易于感知的這一無障礙原則。網(wǎng)站中的文字和圖像應(yīng)該具備足夠高的色彩對比度，使之更易被用戶感知識別。

WCAG顏色對比度無障礙的兩個(gè)標(biāo)準(zhǔn)分別為：「1.4.3條例：最小對比度標(biāo)準(zhǔn)」和「1.4.6條例：加強(qiáng)對比度標(biāo)準(zhǔn)」，分別對應(yīng)著AA級和AAA級。

AA級的定義為：普通文本的視覺呈現(xiàn)與背景至少要有4.5：1的對比度，大文本與背景至少有3：1的對比度

AAA級的定義為：普通文本的視覺呈現(xiàn)與背景至少要有7：1的對比度，大文本與背景至少有4.5：1的對比度

（這里的大文本即≥18pt常規(guī)字重的文本或者≥14pt加粗字重的文本）

這兩個(gè)條例被大廠們廣泛運(yùn)用到了產(chǎn)品的顏色標(biāo)準(zhǔn)當(dāng)中。

比如MD規(guī)范中的文本移動(dòng)性規(guī)范標(biāo)準(zhǔn)中的數(shù)據(jù)就是來自WCAG的1.4.3條例標(biāo)準(zhǔn)。

同樣，阿里巴巴在前不久發(fā)布的B-Design中的無障礙色acs指標(biāo)和WCAG本質(zhì)上也是一樣。

1. 顏色對比度驗(yàn)證

那該如何驗(yàn)證我們的顏色符合這倆標(biāo)準(zhǔn)呢？

easy。這里直接上個(gè)網(wǎng)址，https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值，即可得到最終的對比度數(shù)據(jù)。比如我錄入了白色和一級文本色數(shù)值，最后的12.28即兩者的對比度，嗯，達(dá)到了AAA級標(biāo)準(zhǔn)。

一樣的步驟，分別測試了其他文本色的對比度（產(chǎn)品無暗色模式，所以此處僅驗(yàn)證白色背景下的顏色對比度），分別達(dá)到了7.59、4.71和2.38?？梢钥闯龀?.38外，其他文本色的對比度均符合可見度標(biāo)準(zhǔn)。

不過WCAG中指出，一些特殊情況下的文本無對比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對比度對應(yīng)的文本色主要用于暗提示，因此這種情況就可以無視掉了~

最后

色彩體系的初步探索到此結(jié)束了，不過篇幅原因并沒有面面俱到，比如漸變色、實(shí)際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

作為UI設(shè)計(jì)師，雖然現(xiàn)在做了很多項(xiàng)目，但是實(shí)際上每一次想要做好，過程都還是很痛苦的。尤其是前段時(shí)間，身心俱疲，時(shí)間、心情、精力都不在線。但恰恰接到的又是一個(gè)重頭的急活，產(chǎn)品方也不清楚自己想要什么效果，所以一開始改版的心路很渺茫。

不過也由于這次的經(jīng)歷也讓我更加明白設(shè)計(jì)方法的重要性，越是短時(shí)間內(nèi)，越需要理性分析。在實(shí)際工作中，產(chǎn)品有時(shí)候因?yàn)轫?xiàng)目急需上線，給我們的時(shí)間會(huì)非常有限，根本沒有太多的時(shí)間去給你思考，就比如我這次，只有半天時(shí)間去思考設(shè)計(jì)。那么如此短的時(shí)間，如何提出有效的設(shè)計(jì)方案呢？

搞清楚需求來自哪里，具體是什么

以這次為例，學(xué)習(xí)圈頁面剛上線不久，當(dāng)時(shí)也是設(shè)計(jì)了許多方案，都被pass了，如下：

產(chǎn)品方提出頁面上方的發(fā)布按鈕需要重新設(shè)計(jì)，那我就要搞清楚具體是誰提出的意見，為什么要重新設(shè)計(jì)，這樣才不會(huì)讓自己處于完全被動(dòng)狀態(tài)。

由于項(xiàng)目剛上線，數(shù)據(jù)庫也因?yàn)槟承┰蜻€不能檢測點(diǎn)擊和轉(zhuǎn)化量，無法得知哪種按鈕點(diǎn)擊量高。產(chǎn)品方也不清楚想要什么效果，需求方向不明確就著急去動(dòng)手設(shè)計(jì)，那對于設(shè)計(jì)師來說無疑是效的，問明白需求后再通過競品分析、產(chǎn)品體驗(yàn)、用戶喜好等方式去突破。

所以接下來需要我們主動(dòng)出擊引導(dǎo)產(chǎn)品方，得出一些需求具體的方向。那怎么去引導(dǎo)？反向思維法，既然需要改動(dòng)的是不確定的，那么我們可以確定那些不需要改動(dòng)的地方——通過排除不需要改動(dòng)的，來確定需要改動(dòng)。

需要排除的是：整體頁面排版布局、按鈕設(shè)計(jì)方向（扁平、立體、簡潔、卡通等方向）、動(dòng)效方向、背景（顏色元素）。

通過溝通后明確的是：

• 整體布局沒有問題，所以這塊不需要有改動(dòng)
• 按鈕點(diǎn)擊感不強(qiáng)，產(chǎn)品用戶群體是6～14歲的學(xué)生，根據(jù)用戶審美偏好，所以主要方向就是立體、卡通
• 動(dòng)效不夠明顯，需要更明顯有趣一些
• 整體顏色太冷靜，所以背景顏色和元素細(xì)節(jié)需要修改

在第一版時(shí)已經(jīng)對相關(guān)競品做了分析，基本是一個(gè)純色背景上加一個(gè)具象化大按鈕，發(fā)布功能使用加號、筆、照相機(jī)等元素來制作按鈕，原則：按鈕凸顯，背景元素比較少。其實(shí)按鈕如果用照相機(jī)這種結(jié)構(gòu)復(fù)雜點(diǎn)的元素去設(shè)計(jì)會(huì)更有方向，但是我們左上角會(huì)有拍米幣的功能，用相機(jī)會(huì)更直接一些，而加號筆畫過于簡單，可延展性不強(qiáng)，所以改版的話最終決定還是使用鉛筆作為圖標(biāo)設(shè)計(jì)元素。

關(guān)于整體顏色方向，上一版顏色設(shè)計(jì)原理是背景用產(chǎn)品主色（藍(lán)色）+白色按鈕，不過產(chǎn)品方提出太過冷靜，一開始我想用色肯定要跟整個(gè)app的主色相關(guān)呀，就跳不出藍(lán)色背景的思維，后來決定先跳出來，配色思維反過來，背景不局限在主色，按鈕及周邊裝飾元素可使用產(chǎn)品的主色。

時(shí)間緊急，當(dāng)時(shí)想到的是常用的太空元素（有空間感、好延展、符合用戶喜好），于是背景就選了藍(lán)紫色（據(jù)研究，紫色也是小學(xué)生最喜歡的顏色，性別傾向相對偏弱，在色環(huán)上是藍(lán)色的鄰近色，協(xié)調(diào)又會(huì)有對比。）

想明白要嘗試的方向

在設(shè)計(jì)前，我先在心里大致分了兩個(gè)設(shè)計(jì)方向：

• 常規(guī)大按鈕樣式
• 非常規(guī)按鈕樣式

以下便是常規(guī)大按鈕設(shè)計(jì)稿：

非常規(guī)按鈕設(shè)計(jì)稿

在嘗試的這期間，對于有疑問的地方一定要跟需求方及時(shí)溝通，及時(shí)反饋，確保自己的設(shè)計(jì)在功能上沒有遺漏。比如我這次，是通過詢問一個(gè)產(chǎn)品經(jīng)理，才得知，按鈕上需要加文字，才在后面加上了。

善于運(yùn)用對比進(jìn)行排除

大體方案出來后，通過優(yōu)缺點(diǎn)分析對比，同產(chǎn)品方選出最適合的方案。

1. 常規(guī)按鈕設(shè)計(jì)稿

優(yōu)點(diǎn)：容易被用戶所熟知，用戶的學(xué)習(xí)成本低，更容易點(diǎn)擊

缺點(diǎn)：對于小學(xué)生來說吸引力不夠，形狀上偏規(guī)矩，不夠活潑，另外上方第一個(gè)元素稍微有一點(diǎn)搶主角的光環(huán)

2. 非常規(guī)按鈕設(shè)計(jì)稿

優(yōu)點(diǎn)：配合動(dòng)效會(huì)更有吸引力一些

缺點(diǎn)：用戶的學(xué)習(xí)成本比較高

通過對比，大家一致傾向非常規(guī)按鈕，那就在氣泡與星球這兩者中選出最終方案。在APP的任務(wù)頁面也有星球的按鈕，用戶已經(jīng)對星球有了一定的點(diǎn)擊感知，減少了學(xué)習(xí)成本，最終選擇了星球。

細(xì)節(jié)優(yōu)化

優(yōu)化方向：

• 顏色調(diào)整
• 細(xì)節(jié)元素調(diào)整
• 添加動(dòng)效

1. 顏色調(diào)整

現(xiàn)在看著球跟背景區(qū)分不是很明顯，整體偏灰，需要加強(qiáng)對比，球的顏色需要調(diào)亮調(diào)純。我們看下色環(huán)：

90度以內(nèi)的鄰近色，搭配在一起和諧又不失活潑。所以可以嘗試將球的顏色改為背景藍(lán)紫色的鄰近色：紅色或者天藍(lán)色，如圖：

紅色的球雖然跟背景拉開了對比，但是過于鮮艷，大家反應(yīng)有點(diǎn)類似于心臟。

所以相對來說藍(lán)色的球比較適合，也跟APP的主色相呼應(yīng)。

2. 細(xì)節(jié)元素調(diào)整

球的環(huán)境色過于明顯，需弱化一些；周邊增加幾個(gè)小球，四周邊緣的球太搶，也需要弱化 ；文字“寫一寫”由常規(guī)字體改為大一點(diǎn)的手寫字體：

3. 添加動(dòng)效

鑒于上線版本的動(dòng)效反饋說不明顯，按鈕點(diǎn)擊感偏弱，所以這次動(dòng)效優(yōu)化點(diǎn)需要凸顯星球本身。第一想到的就是呼吸效果，但是只有一個(gè)呼吸有點(diǎn)單一，周邊可以添加一些社交鼓勵(lì)的元素，如鮮花、笑臉、太陽，動(dòng)效一開始想著是從球兩邊飛出來，但是經(jīng)過對比就參考了直播送獎(jiǎng)勵(lì)的形式，相對來說輔助性稍微好一些，視覺上不會(huì)過于太搶主角，如下最終呈現(xiàn)結(jié)果：

如果有限時(shí)間內(nèi)想要讓需求方得到滿意方案，所以以下兩點(diǎn)我覺得是挺重要的：

• 對比排除法是一個(gè)很好的工作方法；一個(gè)西瓜到底好不好，拿另一個(gè)進(jìn)行比較就知道了。
• 及時(shí)反饋：很多時(shí)候什么結(jié)果并不是一開始就知道，所以在做的過程中需要不斷理順想法。此時(shí)很重要的一點(diǎn)就是，跟需求方及時(shí)反饋，無論是正向的還是負(fù)向的，否則結(jié)果不是老板所期望的，自己也會(huì)陷入無限的苦惱中。

好啦，文章寫到這里，如果大家有更好地意見也歡迎留言

文章來源：優(yōu)設(shè)網(wǎng)     作者：麥芽糖

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

為什么要建立Banner組件庫

在互聯(lián)網(wǎng)公司中，運(yùn)營Banner往往是由不同的運(yùn)營團(tuán)隊(duì)去完成，甚至在一些跨國企業(yè)，運(yùn)營Banner是由不同國家的運(yùn)營團(tuán)隊(duì)完成的。那么如何保證大家輸出的運(yùn)營Banner在保證視覺沖擊力的同時(shí)，還能輸出以及體現(xiàn)統(tǒng)一的設(shè)計(jì)語言呢？甚至不用設(shè)計(jì)師也能輕松替換Banner組件？想要解決這種難題的最好方法就是設(shè)計(jì)Banner組件庫，Banner組件庫的四大優(yōu)點(diǎn)能夠完美解決以上的問題。

Banner組件庫的類別

根據(jù)設(shè)計(jì)師個(gè)人及每個(gè)公司業(yè)務(wù)的不同需求，我一共把Banner組件庫分為兩大類別：

1. 設(shè)計(jì)師及設(shè)計(jì)團(tuán)隊(duì)操作的Banner組件庫：

這類組件庫面向的操作人群是設(shè)計(jì)師，僅有設(shè)計(jì)師才對其有操作權(quán)限：

案例部分效果演示：

2. 非設(shè)計(jì)師操作的Banner組件庫：

這類組件庫面向的操作人群是非設(shè)計(jì)師人員（運(yùn)營、銷售、子公司員工等），是設(shè)計(jì)師根據(jù)運(yùn)營的需求特制的Banner組件庫。

我當(dāng)時(shí)制作這個(gè)組件庫的原由是因?yàn)槟?、子公司?jīng)常都會(huì)有相同的模板化設(shè)計(jì)界面替換，而每次替換都需要花費(fèi)設(shè)計(jì)師很多零碎的時(shí)間，所以我們干脆就直接設(shè)定好Banner組件庫，讓運(yùn)營人員自行替換，我們先教會(huì)母公司的主運(yùn)營操作流程，主運(yùn)營再去負(fù)責(zé)子公司的操作流程培訓(xùn)，這樣一套下來省去了運(yùn)營人員與設(shè)計(jì)師的溝通及修改過程，運(yùn)營人員可直接輸出成品，從而提升了整個(gè)團(tuán)隊(duì)的生產(chǎn)力，也讓設(shè)計(jì)師專注于設(shè)計(jì)上的創(chuàng)意與用戶體驗(yàn)。

案例部分效果演示：

Banner組件庫的四大知識要點(diǎn)

不管是建立哪一類別的Banner組件庫，想要設(shè)計(jì)好它，那么首先就要清楚的了解Banner中的基本構(gòu)成以及設(shè)計(jì)原則，從底層邏輯出發(fā)去構(gòu)建Banner組件庫，我構(gòu)建Banner組件庫的思路主要依據(jù)以下四大知識點(diǎn)：

1. Banner的層級拆分

Banner層級拆分的主要目的是為了組件的設(shè)定，我們通過層級拆分可以有規(guī)律的把每一個(gè)層級都設(shè)置為可替換選項(xiàng)，在Banner組件庫中可分為5個(gè)層級：

• 背景層：可替換背景顏色、背景樣式
• 文案層：可替換字體、顏色
• 標(biāo)簽層：可替換標(biāo)簽、顯示隱藏標(biāo)簽、標(biāo)簽顏色
• 點(diǎn)綴層：可替換點(diǎn)綴元素、元素顏色
• 產(chǎn)品配圖：可替換顯示圖片、也可更換為插畫元素

案例：

2. 合理運(yùn)用Banner中的點(diǎn)線面

在組件化的Banner設(shè)定中，我們可以用點(diǎn)、線、面來劃分畫面的整體層面，我們要羅列出哪些層級是用點(diǎn)來表達(dá)，哪些層級是用線或面來表達(dá)，這樣不僅有利于組件庫的快速建立，也有利于Banner整體畫面的視覺表達(dá)。

點(diǎn)、線、面是相對存在的，點(diǎn)可能在畫面中成為線、面，線也可能在畫面中成為點(diǎn)、面。

“點(diǎn)”越大就可能會(huì)變成“面”，“點(diǎn)”發(fā)生規(guī)律性變化也可能成為“線”。

當(dāng)“線”在畫面上顯得短小時(shí)，可以把它看成“點(diǎn)”，當(dāng)把“線”加粗一定程度，那么我們就會(huì)把它看成“面”。

當(dāng)“面”成為未封閉狀態(tài)時(shí)就會(huì)成為“線”，當(dāng)“面”在畫面中的比例縮小時(shí)我們可以把它看成“點(diǎn)”。

我們在組件Banner時(shí)要事先把層級的點(diǎn)線面歸納好，這樣才不會(huì)在我們設(shè)計(jì)相同元素時(shí)出現(xiàn)雜亂的現(xiàn)象，層級與點(diǎn)線面的常規(guī)關(guān)系圖如下（這樣的常規(guī)組合關(guān)系有利于建立組件庫）：

需要注意的是在Banner組件庫中點(diǎn)綴層與標(biāo)簽層并非一定要存在于Banner中。

3. Banner組件庫常用版式

Banner的版式復(fù)雜多樣，而我們的組件庫想要達(dá)到輕量化，所以更適用于下面三種常規(guī)的版式，如下：

4. Banner設(shè)計(jì)五大原則

組件庫的建立必須遵循Banner設(shè)計(jì)五大原則：對齊、統(tǒng)一、對比、留白、結(jié)構(gòu)平衡。

對齊

Banner的內(nèi)容都要有一個(gè)對齊的準(zhǔn)則，特別是文案層面，每個(gè)元素都有自己應(yīng)該處于的位置，要有秩序化，才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊，建議一個(gè)板式只使用其中一種對齊方式。一個(gè)小小的Banner版面，如果使用了多種對齊方式，實(shí)際上在用戶看來這些信息都是零散的，增加了認(rèn)知成本。

統(tǒng)一

字體以及字體顏色最好不超過兩種，內(nèi)容元素設(shè)計(jì)風(fēng)格也必須一致，太多容易導(dǎo)致內(nèi)容雜亂，干擾過強(qiáng)。

對比

了解各項(xiàng)信息的權(quán)重大小，重要的信息要加強(qiáng)顯示，次要信息可以弱化。

留白

要為Banner留出一定空間，讓Banner多一些呼吸感，這樣也更容易聚焦重要信息。

降噪原則

在Banner設(shè)計(jì)中不要使用過多的字體、顏色或者過于復(fù)雜的圖形，這種不斷做“乘法”的行為，實(shí)際上是在增加用戶認(rèn)知的“噪音”。

組件庫制作流程及案例展示

1. 制作前提：設(shè)計(jì)規(guī)范（字體/顏色/版式說明）

字體使用規(guī)范

在字體的使用中，我們要確定字體類型以及字體的大小。

顏色使用規(guī)范

為了保證Banner擁有較強(qiáng)的適應(yīng)性，我們可以不規(guī)定精準(zhǔn)顏色，用顏色明度的使用區(qū)間來代替。(顏色規(guī)范僅限于主色調(diào)，并不包含特殊用色：如標(biāo)簽、點(diǎn)綴元素)

版式說明

制定版式的整體尺寸、元素間距、排版、字?jǐn)?shù)限制。

2. 設(shè)計(jì)師應(yīng)用版制作流程：

設(shè)計(jì)師應(yīng)用的Banner組件庫可以用Sketch制作，也可以用Figma制作。

如果是用于外包設(shè)計(jì)或公司設(shè)計(jì)師僅有一人，那么建議用Sketch制作；如果設(shè)計(jì)團(tuán)隊(duì)人數(shù)較多，那么建議用Figma，我這里就用SKetch給大家講解一下制作流程。

第一步：根據(jù)層級與點(diǎn)線面設(shè)計(jì)Banner中的元素

第二步：把每一層級的元素組件化

在Sketch中只用選擇想要組件的圖層（或組），點(diǎn)擊按鈕即可立即生成組件，如下圖：

在組件層級時(shí)我們需要注意從哪里開始，到哪里結(jié)束。例如我做的這個(gè)寵物Banner案例，第一層是Banner樣式切換，接著才是樣式里面的層級切換，并不是把內(nèi)部所有層級都組件完后就結(jié)束了，可能層級中還存在更多的小組件切換，比如在樣式2中我沒有把點(diǎn)綴層合成一個(gè)組件切換，而是分為三個(gè)組件切換，甚至在三個(gè)切換里你還可以設(shè)置它們的顏色切換，全部設(shè)置完后這樣才算真正的組件結(jié)束，下面是我組件的層級圖：

第三步：設(shè)計(jì)可替換組件

在完成元素組件化后，我們就可以在組件庫里添加更多可替換組件的樣式，添加方式如下圖：

當(dāng)把可替換的組件全部設(shè)計(jì)完后就可以使用了，如果發(fā)現(xiàn)內(nèi)容不夠用還可以往內(nèi)部再次添加，下面是Banner樣式1的切換效果展示：

Banner樣式2的效果展示：

注意要點(diǎn)：

• Banner組件庫的內(nèi)部層數(shù)不宜過多，盡量輕量化。
• 組件庫內(nèi)部的相同元素可以同時(shí)使用，例如樣式1與樣式2的文案部分，都可以用一個(gè)組件，不用再單獨(dú)設(shè)置。
• 命名要清晰，層級之間用“/”隔開，以免發(fā)生組件庫內(nèi)部的調(diào)取錯(cuò)亂。
• 因SKetch的組件機(jī)制，組件的尺寸大小要有區(qū)分，如果出現(xiàn)相同大小的組件請任意修改一個(gè)。（增加1px）
• 想要快速得到組件，可以把左側(cè)的圖層面板更換為組件面板，直接可拖取內(nèi)部組件。

3. 運(yùn)營人員應(yīng)用版制作流程：

運(yùn)營人員應(yīng)用的Banner組件庫的建立需要用到的軟件是PS與Excel。

在設(shè)計(jì)這類組件庫時(shí)我們一定要多從操作人員的角度出發(fā)去設(shè)計(jì)，最簡單化，下面案例來自于之前在老東家做的PS組件。

第一步：根據(jù)層級與點(diǎn)線面設(shè)計(jì)Banner中的元素

第二步：設(shè)計(jì)可替換元素組件

在設(shè)定前我們需要了解以下幾點(diǎn)知識：

• PS做組件庫用到的是圖像-變量屬性。
• 我們進(jìn)行所有的元素替換都不在PS內(nèi)部，而是在Excel操作替換，若有圖片替換，圖片則與源文件存在同一文件夾內(nèi)。
• 可設(shè)置所有元素的顯示和隱藏。

通過以上4點(diǎn)可以得知我們需要設(shè)計(jì)的元素僅僅只有背景圖片，而其他元素可以通過變量來達(dá)到效果，下面是設(shè)計(jì)的4張不同顏色的背景替換圖：

第三步：定義變量元素

只是給需要變量的元素打標(biāo)簽，具體該如何變量在第四步

定量步驟：選擇想要定量的圖層-圖像-變量-定義

注：PS會(huì)自動(dòng)識別定量元素，如果是組，那么只有可見性選項(xiàng)（可見性選項(xiàng)的意思就是可顯示可隱藏）；如果是圖片，則會(huì)多出像素替換（替換圖片）；如果是文字則會(huì)有文字替換（替換文字）

在定義時(shí)為了避免操作錯(cuò)誤，定義名稱就為圖層名稱，定義完成一個(gè)就按“下一個(gè)”按鈕，直到全部定義完成再按“確認(rèn)”按鈕，案例中的Banner一共定義了6個(gè)元素，分別為商品圖（像素替換）、商品名（文字替換）、原價(jià)（文字替換）、優(yōu)惠價(jià)（文字替換）、特價(jià)標(biāo)（可見性）背景圖（像素替換）

第四步：制作Excel表格

我們所有的數(shù)據(jù)修改都是在Excel里面進(jìn)行的，Excel表格制作非常簡單，第一排為定義的名稱，我們只需把剛才定義好的6個(gè)名稱輸入到表格的第一排。

如上圖，建議大家多加入一個(gè)編號定義，在PS里把編號定義的圖層隱藏就行了，目的是為了選取數(shù)據(jù)組時(shí)更直觀，操作如下：

除了第一排，下面的排列都是輸入性定義，如果要改變商品名的文字，就可以在下方輸入修改的文字；

如果要替換圖片，就要輸入替換圖片的名字及后綴，僅支持png與jpg格式的圖片，并且圖片必須與源文件在一個(gè)文件夾內(nèi)。

如果要顯示或隱藏某個(gè)元素，那么就可以輸入大寫的“TRUE”或“FALSE”。

當(dāng)把表格信息都填完后，最后一步就是把表格存為.csv格式。（注：.csv文件必須與PS源文件、圖片文件存在于同一文件夾內(nèi)）

第五步：導(dǎo)入操作

當(dāng)全部設(shè)定完后，我們就可以在PS內(nèi)導(dǎo)入切換不同的數(shù)據(jù)應(yīng)用。

操作路徑：圖像-變量-數(shù)據(jù)組-導(dǎo)入數(shù)據(jù)組-選擇數(shù)據(jù)-應(yīng)用-確定

這五步下來我們的Banner組件庫就順利完成了！

特別提醒：避免運(yùn)營人員操作失誤，建議把PS內(nèi)部的所有圖層鎖定。

第六步：培訓(xùn)運(yùn)營人員

通過上面的組件建立，運(yùn)營人員只需添加Excel文件的子列表，并在PS選中導(dǎo)出即可完成操作，可以讓運(yùn)營人員把PS看成圖片導(dǎo)出工具，可以非常輕松的完成。（機(jī)械化流程）

因?yàn)榭紤]到運(yùn)營人員可能無法理解設(shè)計(jì)邏輯，所以很可能會(huì)出現(xiàn)操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導(dǎo)運(yùn)營人員操作。

• 直播優(yōu)勢：直播在線操作，不懂可以及時(shí)詢問，能讓運(yùn)營人員快速上手。
• 文件優(yōu)勢：主要用于操作者忘記操作或操作失誤時(shí)的提醒。
• 特別提醒：給予運(yùn)營人員文件中必須包含：操作文件（PS源文件、背景圖片、Excel表格）、字體包（PS中用到的字體）、操作提示文檔（視頻、PDF、GIF）

下面是員工PDF操作步驟圖示：

案例源文件提取

Sketch組件庫源文件：

PS、Excel組件庫源文件：

下載鏈接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼：e3li

文章來源：優(yōu)設(shè)網(wǎng)     作者：黑獅力

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

顏色的本質(zhì)

當(dāng)今是色彩的世界，物體顏色的不同，帶給我們的情緒也截然不同。想要掌握顏色，首先就要研究顏色的本質(zhì)。

顏色分為光學(xué)三原色和顏料三原色。

1. 光學(xué)三原色

光學(xué)三原色由：紅、綠、藍(lán)組成。

色值分別是：

• 紅（red ）：#FF0000 RGB（255，0，0）
• 綠（green）：#00FF00 RGB（0，255，0）
• 藍(lán)（blue）：#0000FF RGB（0，0，255）

2. 顏料三原色

顏料三原色由：品紅、黃、青組成。

色值分別是：

• 品紅（magenta）：#FF00FF CMYK（42，64，0，0）
• 黃（yellow）：#F8F400 CMYK（0，11，92，0）
• 青（cyan）：#00FFFF00FFFF CMYK（38，0，16，0）

理論上，原色可以調(diào)制出絕大部分的其他色，而其他色都調(diào)不出原色。

那么，這兩種有什么區(qū)別呢？

3. 區(qū)別

光學(xué)三原色和顏料三原色最主要的區(qū)別就是他們的混合原理不同，分為相加混色和相減混色。

光學(xué)三原色為相加混色（可以理解為光的疊加），混合后顏色的明度提高，三色混合即為白色。

相反，顏料三原色采用相減混色（可以理解為光的吸收），混合后顏色的明度和純度都會(huì)下降，三個(gè)混合即為黑色。

在設(shè)計(jì)中我們可以區(qū)分為 RGB（光學(xué)三原色）和 CMYK（顏料三原色）。

RGB 模式本質(zhì)上與 CMYK 模式?jīng)]有區(qū)別，只是產(chǎn)生顏色的方式不同。顯示器采用RGB模式，就是因?yàn)轱@示器是電子光束轟擊熒光屏上的熒光材料發(fā)出亮光從而產(chǎn)生顏色，當(dāng)沒有光的時(shí)候?yàn)楹谏?，光線加到最大時(shí)為白色。而打印機(jī)呢？它的油墨不會(huì)自己發(fā)出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。

運(yùn)用場景：

• 光學(xué)三原色：RGB模式，燈光色彩中；
• 顏料三原色：CMYK模式，繪畫和印刷領(lǐng)域。

冷暖色調(diào)

冷暖色由三種原色、三種間色和六種復(fù)色組成的系統(tǒng)就稱為十二色環(huán)，從紫色至黃綠為冷色，黃色至紫色為暖色。

冷色可以讓人聯(lián)想到海洋、天空、雨雪等，讓人產(chǎn)生理智、寒冷、沉寂的感覺。

暖色可以讓人聯(lián)想到火焰、太陽等，讓人產(chǎn)生溫暖、熱情、開放的感覺。

實(shí)際案例中，冷暖色調(diào)的搭配，直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸，就由此而來。

顏色的三個(gè)屬性

顏色的三個(gè)屬性分別為：色相（Hue）、明度（Brightness）、飽和度（Saturation）。

1. 色相

色相指的是這些不同波長的色的情況。波長最長的是紅色，最短的是紫色。

色彩是由于物體上的物理性的光反射到人眼視神經(jīng)上所產(chǎn)生的感覺。色的不同是由光的波長的長短差別所決定的。把紅、橙、黃、綠、藍(lán)、紫和處在它們各自之間的紅橙、黃橙、黃綠、藍(lán)綠、藍(lán)紫、紅紫這 6 種中間色——共計(jì) 12 種色作為色相環(huán)。在色相環(huán)上排列的色是純度高的色，被稱為純色。

2. 明度

明度是表示色所具有的亮度和暗度。計(jì)算明度的基準(zhǔn)是灰度測試卡。黑色為 0，白色為 10，在 0~10 之間等間隔的排列為 9 個(gè)階段。

色彩可以分為有彩色和無彩色，但后者仍然存在著明度。作為有彩色，每種色各自的亮度、暗度在灰度測試卡上都具有相應(yīng)的位置值。彩度高的色對明度有很大的影響，不太容易辨別。在明亮的地方鑒別色的明度比較容易的，在暗的地方就難以鑒別。

3. 飽和度

飽和度是用數(shù)值表示色的鮮艷或鮮明的程度。

飽和度為 0 時(shí)，就是黑白灰。有彩色的各種色都具有彩度值，無彩色的色的彩度值為0，對于有彩色的色的彩度（純度）的高低，區(qū)別方法是根據(jù)這種色中含灰色的程度來計(jì)算的。

顏色搭配

1. 單色

單色指的是某個(gè)顏色純度的變化，就是在原有色上疊加 10%~90% 的白色/黑色得到的一個(gè)顏色。

這種方法運(yùn)用到產(chǎn)品中，會(huì)給人一種樸素、低調(diào)干凈的感覺；同時(shí)，也會(huì)給人一種單調(diào)的感覺。單色的顏色搭配適合沉浸式的產(chǎn)品中使用，不會(huì)因?yàn)樯识騺y用戶的體驗(yàn)。

產(chǎn)品案例：MUJI

2. 互補(bǔ)色

互補(bǔ)色是指在色相環(huán)上對立（180°）的兩個(gè)顏色。

色彩中的互補(bǔ)色有紅色與綠色互補(bǔ)，藍(lán)色與橙色互補(bǔ)，紫色與黃色互補(bǔ)。

補(bǔ)色并列時(shí)，會(huì)引起強(qiáng)烈對比的色覺，會(huì)感到紅的更紅、綠的更綠。

互補(bǔ)色是很難把控的一種色彩搭配。由于色彩沖擊力極強(qiáng)，用好了可以達(dá)到視覺峰值，反之則會(huì)很“村氣”

3. 鄰近色

鄰近色是指在色環(huán)上相鄰的兩三個(gè)顏色，在色相環(huán)上相距 60°

它們色相彼此相近，冷暖性質(zhì)一致、色調(diào)統(tǒng)一和諧、感情特性一致。鄰近色是選擇相近色彩時(shí)很不錯(cuò)的方法，可以在同一個(gè)色調(diào)中制造豐富的質(zhì)感和層次。一些效果不錯(cuò)的色彩組合有藍(lán)綠色、藍(lán)色和藍(lán)紫色，還有黃綠色、黃色和橘黃色等。

4. 對比色

對比色是人的視覺感官所產(chǎn)生的一種生理現(xiàn)象，是視網(wǎng)膜對色彩的平衡作用。指在相環(huán)上相距 120° 到 180° 之間的兩種顏色。

對比色能使色彩效果表現(xiàn)更明顯，形式多樣，極富表現(xiàn)力。需要注意的是，互補(bǔ)色一定是對比色，但是對比色不一定是互補(bǔ)色。

色彩的視覺呈現(xiàn)

1. 光源色

物體只有在光的照射下我們才能看到他們的顏色。

發(fā)光體發(fā)出的光，形成了不同的色彩，我們將這些色光稱之為光源色。

2. 固有色

固有色就是我們平時(shí)看到物體的顏色。

比如在正常光照下我們看到一個(gè)物體是紅色，那他的固有色就是紅色。

3. 環(huán)境色

環(huán)境色是物體周圍環(huán)境的顏色。

環(huán)境色對我們看到物體顏色的影響非常大。大家平時(shí)肯定也遇到過一個(gè)物體在不同的光照下，呈現(xiàn)出來的物體顏色也不盡相同。比如，一個(gè)在藍(lán)色天空下的蘋果會(huì)呈現(xiàn)部分淡藍(lán)色，就是環(huán)境色的影響。

色彩格式

1. RGB

RGB 色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍(lán)三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一。

2. HSB

在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示明度。

3. HSL

在 HSL 模式中，H(hues)表示色相，S(saturation)表示飽和度，L（Lightness）表示明度。

4. HSB 和 HSL 的區(qū)別

HSB 和 HSL 都是表示色相、飽和度和明度，不同的點(diǎn)在于應(yīng)用開發(fā)中，不同開發(fā)語言下可調(diào)節(jié)的明度值名詞不同，所以這兩個(gè)格式不用過于糾結(jié)哪個(gè)用的更多，具體使用中就是需要哪個(gè)用哪個(gè)。

不同顏色的感受

1. 黑色

黑色代表著品質(zhì)、權(quán)威、嚴(yán)肅、穩(wěn)重、高級。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時(shí)尚感。

黑色是永不過時(shí)的顏色。

2. 白色

白色代表純潔、信任、樸素、簡單。黑色和白色經(jīng)常會(huì)被用作無色，這兩個(gè)顏色沒有色彩傾向，屬于中性色，所以常常被忽略掉。在界面設(shè)計(jì)中，白色常常被用作背景色，提高畫面明度，凸顯其他內(nèi)容，提高文字的易讀性。

3. 紅色

紅色代表喜慶、熱情、奔放、自由、歡樂。它是很強(qiáng)勢的顏色，一出現(xiàn)就會(huì)使人熱血沸騰，常常出現(xiàn)在電商活動(dòng)中，讓人有購物的沖動(dòng)。同時(shí)，紅色也有一種警告的含義。一些產(chǎn)品高危操作的 Button，都是用紅色來提醒用戶。

4. 藍(lán)色

藍(lán)色代表冷靜、商務(wù)、未來、科技、安全，它是一種比較理智的顏色，在色彩心理學(xué)的測試中發(fā)現(xiàn)，幾乎沒有人對藍(lán)色反感。主色調(diào)用藍(lán)色的太多了：知乎、Twitter、Behance、釘釘?shù)龋{(lán)色的運(yùn)用給用戶一直安全、放心的感覺。

5. 黃色

黃色代表輝煌、高貴、信心。它的明度極高，雖然沒有紅色給人那么強(qiáng)烈的感官，但是黃色給人一種警示的意思。黃色經(jīng)常會(huì)以高貴的含義被用到：網(wǎng)站的 VIP。

6. 綠色

綠色代表健康、活力、生命、安全、和平、寧靜。綠色可以治愈心靈，當(dāng)你不開心的時(shí)候，看一下綠色的東西，會(huì)讓你的愉悅值增加。它在生活中用到最多的含義是安全：綠色通道、綠燈等。

7. 紫色

紫色代表浪漫、時(shí)尚、性感、夢幻、創(chuàng)造力。紫色+粉色經(jīng)常在女性化妝品被用到，紫色在自然生活中很少看到，所以也有一種稀有、高貴的感覺。

色彩在設(shè)計(jì)中的應(yīng)用

1. 數(shù)量

一個(gè)頁面中盡量不要超過 3 種顏色（黑白除外），顏色過多會(huì)讓用戶的興奮值上升，不易長期查看。

2. 統(tǒng)一性

每一個(gè)產(chǎn)品都有自己的主色調(diào)，所有的頁面的色彩搭配都要和主色調(diào)呼應(yīng)，主色調(diào)的合理運(yùn)用直接關(guān)系到用戶對產(chǎn)品的信任值。同一組件、場景中，顏色使用要保持一致，切忌“自由發(fā)揮”，毫無規(guī)范可言。

3. 60-30-10原則

60%、30%、10% 的原則，是達(dá)到色彩平衡的最佳比例。在 60% 的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個(gè) App 的視覺焦點(diǎn)和色彩關(guān)系；30% 的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10% 的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。6:3:1 原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。

4. 顏色禁忌

禁用純黑、純灰，純黑和純灰會(huì)使用戶陷入負(fù)面情緒中，可以在黑色和灰色中加入一些色調(diào)，讓顏色看上去更柔和，另外純黑色看時(shí)間久了會(huì)使人疲憊，在實(shí)際產(chǎn)品中，也很少有用純黑的。

5. 文字中的使用

超鏈接顏色用藍(lán)色，為什么呢？

最早期電腦中用的是深灰色背景+黑色字，那時(shí)候能用非黑色最深的顏色就是藍(lán)色，所以這個(gè)習(xí)慣一直延續(xù)至今。這種用戶習(xí)慣非常一致的情況下，盡量不要去改顏色，因?yàn)楦某蓜e的顏色就會(huì)顛覆用戶認(rèn)知，學(xué)習(xí)成本就會(huì)增加。

6. 卡片陰影

一定不要用純黑色陰影，陰影的顏色會(huì)受到環(huán)境色和固有色的影響，對于有顏色卡片的背景，盡量使用比卡片更深的同色系顏色來調(diào)陰影，會(huì)使得陰影更干凈、整潔。

配色網(wǎng)站推薦

1. Wbgradients

網(wǎng)站鏈接：https://webgradients.com/

Wbgradients 是一個(gè)在線調(diào)整漸變色的網(wǎng)站 ，可以根據(jù)你想要的調(diào)整效果，同時(shí)支持復(fù)制 CSS 代碼，可以更好的與開發(fā)對接。

2. Grabient

網(wǎng)站鏈接：https://www.grabient.com/

Grabient 是一個(gè)非常漂亮且實(shí)用的漸變配色網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。設(shè)計(jì)師可以在色塊下方自由添加和調(diào)整漸變的色系、以及線性漸變方向。

3. Color Grid

網(wǎng)站鏈接：https://www.0to255.com/740941

該網(wǎng)站隨意選色值，它自動(dòng)換算出已選色值的 32 種明度色值，簡單易用。

4. Eva Design System

網(wǎng)站鏈接：https://colors.eva.design/

Eva Design System 是一個(gè)基于深度學(xué)習(xí)算法的配色網(wǎng)站。適用于給我們的產(chǎn)品或品牌生成一個(gè)系統(tǒng)的配色方案。右上角可以切換淺色模式和深色模式的對比。

5. Color Hunt

網(wǎng)站鏈接：https://colorhunt.co/

Color Hunt 是開放的調(diào)色板集合，可以添加到 chrome 瀏覽器，方便隨時(shí)隨地使用。

文章來源：優(yōu)設(shè)網(wǎng)     作者：友設(shè)青年

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前文的原子設(shè)計(jì)中我曾經(jīng)講過，原子是構(gòu)成所有元素的最小單元，沒有辦法再被細(xì)分。它通常對應(yīng)著產(chǎn)品設(shè)計(jì)中的通用樣式及構(gòu)成組件的最小顆粒。而顏色，作為整個(gè)設(shè)計(jì)系統(tǒng)中極為重要的原子之一，在心智模型中占據(jù)了關(guān)鍵的地位。

我們看到紅色能夠感受到熱情、興奮和危險(xiǎn)，看到綠色時(shí)往往就感受到安全、自然和平靜。可以說，顏色調(diào)動(dòng)我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。

接下來，我結(jié)合公司目前的業(yè)務(wù)CROV Dropshipping（以下簡稱DS），來進(jìn)行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點(diǎn)啟發(fā)。

大綱走起：

• 業(yè)務(wù)背景
• 為什么我們需要色彩體系
• 如何創(chuàng)造一套色彩體系
• WCAG無障礙測試

業(yè)務(wù)背景

CROV DS是針對美國市場的線上一件代發(fā)平臺（類似阿里巴巴的一件代發(fā)業(yè)務(wù)），屬于跨境電商B2C行業(yè)。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時(shí)間靈活可控，讓用戶專注于銷售本身。

為什么我們需要色彩體系？

1. 對于業(yè)務(wù)

目前CROV DS業(yè)務(wù)日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業(yè)務(wù)場景的擴(kuò)展，臨時(shí)增加的顏色很容易被遺漏在某個(gè)不知名角落的畫板中，導(dǎo)致一次性用色的風(fēng)險(xiǎn)。（tips：一次性即前一篇我所講到的用完即扔、未被復(fù)用的設(shè)計(jì)）

而且用色本身的隨意也導(dǎo)致研發(fā)還原結(jié)果的不統(tǒng)一，一處地方色彩各異的現(xiàn)象比比皆是。

因此，我們需要基于我們自身的業(yè)務(wù)特征來產(chǎn)出一套足夠完善的色彩體系，讓業(yè)務(wù)從用色上達(dá)成基本的一致統(tǒng)一。

2. 對于設(shè)計(jì)師

我們設(shè)計(jì)師在定義顏色時(shí)，更多的是直接在色板上進(jìn)行取色，但這樣的取色方法存在諸多弊端。

增加決策

可能很多設(shè)計(jì)師選色時(shí)會(huì)有這種情況，一會(huì)覺得這個(gè)顏色臟了，一會(huì)又覺得那個(gè)顏色太刺眼了，有時(shí)候完美主義作祟，為了得到一個(gè)滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時(shí)更為嚴(yán)重。

其實(shí)這和不用網(wǎng)格系統(tǒng)來布局是一個(gè)道理。（注：網(wǎng)格系統(tǒng)是一種能夠極大提升布局效率的方法，后面會(huì)講～）

色板中取色的范圍趨近于無窮。如果將HSB模式下的單個(gè)H、S和B作為一個(gè)最小單元格，那么我們可以選擇的格子高達(dá)數(shù)百萬個(gè)。顆粒度過細(xì)的情況（其實(shí)根本就沒有顆粒度）導(dǎo)致我們在取色時(shí)往往會(huì)被迫進(jìn)行反復(fù)的微調(diào)和嘗試。

缺乏秩序和邏輯性

直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。

比如一個(gè)按鈕的狀態(tài)可以包括normal、hover、pressed、disable等多個(gè)狀態(tài)，如果我們僅僅靠自己的直覺自由調(diào)整明度和飽和度，最后的配色方案其實(shí)缺乏內(nèi)在的邏輯性和秩序性。

難以復(fù)用

對于B端這些偏后臺工具、場景復(fù)雜的業(yè)務(wù)，顏色運(yùn)用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項(xiàng)目及業(yè)務(wù)場景需要用到新的顏色時(shí)，之前定義的顏色難以復(fù)用，導(dǎo)致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力，難以體現(xiàn)專業(yè)度。

而如果設(shè)計(jì)師提前定義好一套色彩體系，一方面只需要在對應(yīng)的色板中選擇即可，大大減少了設(shè)計(jì)決策。另一方面色彩體系所提供的不同色彩梯度也便于各個(gè)需求、業(yè)務(wù)場景的復(fù)用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設(shè)計(jì)師依賴”直覺“所帶來的主觀和不可控。

如何創(chuàng)建一套色彩體系？

Alipay Design團(tuán)隊(duì)提過：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場景中，具有非常好的延展性。

接下來我以DS項(xiàng)目為例進(jìn)行色彩體系探索——

首先，所有的色彩模型統(tǒng)一采用HSB模型進(jìn)行，正如Ant Design設(shè)計(jì)團(tuán)隊(duì)說的那樣，這個(gè)模型利于調(diào)整色彩時(shí)對顏色有明確的心理預(yù)期，同時(shí)便于團(tuán)隊(duì)溝通。

這里再簡單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點(diǎn)說，它們分別代表了明色區(qū)域和暗色區(qū)域）

1. 品牌色

Crov Dropshipping基于其時(shí)間自由靈活、可兼職副業(yè)、成本風(fēng)險(xiǎn)低的業(yè)務(wù)特征，使得對應(yīng)的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當(dāng)中。他們不同于我們常規(guī)認(rèn)知里那類傳統(tǒng)的retailer（線下實(shí)體零售商），大部分的DSer擁有自己的事業(yè)和工作，為了賺取外快，將其當(dāng)做自己的副業(yè)。因此，年輕化是這類用戶群的主要標(biāo)簽。

所以，我們采用了高飽和度、偏向藍(lán)色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩帶”

為了覆蓋掉Crov DS本身復(fù)雜的前后臺業(yè)務(wù)場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環(huán)中每類色相的基本角度15°。

因此，這里以品牌色色相為基礎(chǔ)，在HSB 360°色環(huán)中，對色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環(huán)彩帶。

后續(xù)我們的顏色體系就在彩帶上的24個(gè)顏色上面進(jìn)行提取。

3. 品牌色同色系配色

品牌色同色系是指，根據(jù)品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達(dá)了品牌性，多個(gè)梯度的變化也能夠適應(yīng)及通用盡可能多的業(yè)務(wù)場景，也便于多信息的層級劃分。

而同色系配色的輸出則遵循了antDesign發(fā)明的tint/shade 色彩系統(tǒng)算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學(xué)地生成色階。

sketch中可以直接將這套算法可視化處理，便于設(shè)計(jì)師直接生成所有顏色的色階。需要注意的是明色區(qū)（就是上方橫向的那塊取色區(qū)域，白色至純色時(shí)S由0過渡至100）和暗色區(qū)（右側(cè)縱向的取色區(qū)域，純色至黑色時(shí)B由100過渡至0）遵循了兩種不同的規(guī)則，具體規(guī)則見下：

當(dāng)S飽和度變化時(shí)（明色區(qū)域），S值以S/5的結(jié)果值為一個(gè)增量進(jìn)行遞減，B值以(100-B)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個(gè)增量分別是16和0。

品牌色在明色區(qū)的下兩個(gè)色階對應(yīng)的HSB參數(shù)就是（250，64，100），（250，48，100），以此類推。

而當(dāng)B明度產(chǎn)生變化時(shí)（暗色區(qū)域），S值以(100-S)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增，而B值以B/5的結(jié)果值為一個(gè)增量進(jìn)行遞減。得出的兩個(gè)增量分別為4和20。

品牌色在暗色區(qū)的下兩個(gè)顏色對應(yīng)的HSB參數(shù)即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

根據(jù)這兩個(gè)定義規(guī)則推導(dǎo)出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。

4. 定義輔助色

我們使用品牌色來傳達(dá)品牌價(jià)值，還需要輔助色來滿足多樣化業(yè)務(wù)場景的需要，對用戶進(jìn)行不同的情緒引導(dǎo)，同時(shí)也可以緩解用戶對單一主色產(chǎn)生的視覺疲勞。

輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環(huán)形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補(bǔ)色。

結(jié)果見下：

首先，由于相差15°的同類色與品牌色差距過小，色相對比感微弱，傳遞的調(diào)性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會(huì)作為功能色使用，這里同樣直接舍棄。

類似色

類似色即色相差在30度左右的顏色，屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調(diào)性與品牌色類似，并且色彩體系中需要一個(gè)典型的冷色來覆蓋一些場景，所以這里使用了H220的顏色作為冷系的輔助色。

中差色

中差色即色相相差90度左右的顏色，屬于中等對比色。H340偏粉，與常規(guī)紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對H340進(jìn)行了色相校正，調(diào)整至H355。

對比色

對比色即色相相差120度左右的顏色，屬于強(qiáng)對比色。最后得出的H130調(diào)性與中差色的H160過于類似，直接舍棄。H10與H340調(diào)性類似，但是可以向橙色系發(fā)展，所以微調(diào)到同類色進(jìn)行色相校正。

互補(bǔ)色

互補(bǔ)色即色相相差180度左右的顏色，屬于高強(qiáng)度對比色。最后得出的H70偏綠，這里同樣進(jìn)行了色相校正，將其調(diào)整為H55。

最后，得出了共計(jì)5種輔助色。不過這些輔助色并不能直接使用，還需要進(jìn)行感官明度的校正。

5. 感官明度校正

感官明度校正方法來自支付寶設(shè)計(jì)團(tuán)隊(duì)，這是是確認(rèn)輔助色的最后關(guān)鍵一環(huán)。每種顏色都有屬于自己的“感官明度”，即發(fā)光度。品牌色即輔助色的發(fā)光度不一致，就會(huì)導(dǎo)致視覺上會(huì)有明顯的明暗差別。所以，我們需要通過發(fā)光度來進(jìn)行最終的顏色校正。

明度較高的灰色意味著高發(fā)光度，明度較低則意味著低發(fā)光度。保持品牌色發(fā)光度不變，我們對其他輔助色進(jìn)行微調(diào)。

我們只需要將那些視覺明暗差距明顯的顏色進(jìn)行調(diào)整。注意，并非所有的顏色都要調(diào)整到品牌色的感官明度，這些值僅僅是一個(gè)參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。

最后得到校正后的如下輔助色。藍(lán)色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規(guī)、成功、警告和報(bào)錯(cuò)狀態(tài)。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個(gè)層級。

6. 輔助色的同色系配色

與品牌色一樣，使用tint/shade規(guī)則推導(dǎo)出全部輔助色不同梯度的色階。具體過程不再贅述～

7. 定義文本色

CROV DS的文本色并非純粹的中性色，我們通過加入一點(diǎn)點(diǎn)品牌色來讓文本呈現(xiàn)色彩傾向，以此提升頁面的活力及年輕感，同時(shí)也可以讓界面更加耐看，減緩B端產(chǎn)品長期使用時(shí)的視覺疲勞。

具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個(gè)層次的文本色。當(dāng)然，中性文本色你也可以參考antDesign中通過透明度進(jìn)行定義的方法，不一定需要按照某個(gè)具體色值來。

WCAG無障礙測試

我們必須要承認(rèn)的現(xiàn)實(shí)是，設(shè)計(jì)師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環(huán)境，有可能是在刺眼的陽光下、有可能是在昏暗的環(huán)境中。如果色彩不去做可用性測試，在很多的情況下存在體驗(yàn)降低的風(fēng)險(xiǎn)。

而WCAG（Web Content Accessibility Guideline，Web內(nèi)容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩(wěn)定理解的（Understandable）、穩(wěn)定耐用的（Robust）。

而顏色則正是對應(yīng)了易于感知的這一無障礙原則。網(wǎng)站中的文字和圖像應(yīng)該具備足夠高的色彩對比度，使之更易被用戶感知識別。

WCAG顏色對比度無障礙的兩個(gè)標(biāo)準(zhǔn)分別為：「1.4.3條例：最小對比度標(biāo)準(zhǔn)」和「1.4.6條例：加強(qiáng)對比度標(biāo)準(zhǔn)」，分別對應(yīng)著AA級和AAA級。

AA級的定義為：普通文本的視覺呈現(xiàn)與背景至少要有4.5：1的對比度，大文本與背景至少有3：1的對比度

AAA級的定義為：普通文本的視覺呈現(xiàn)與背景至少要有7：1的對比度，大文本與背景至少有4.5：1的對比度

（這里的大文本即≥18pt常規(guī)字重的文本或者≥14pt加粗字重的文本）

這兩個(gè)條例被大廠們廣泛運(yùn)用到了產(chǎn)品的顏色標(biāo)準(zhǔn)當(dāng)中。

比如MD規(guī)范中的文本移動(dòng)性規(guī)范標(biāo)準(zhǔn)中的數(shù)據(jù)就是來自WCAG的1.4.3條例標(biāo)準(zhǔn)。

同樣，阿里巴巴在前不久發(fā)布的B-Design中的無障礙色acs指標(biāo)和WCAG本質(zhì)上也是一樣。

1. 顏色對比度驗(yàn)證

那該如何驗(yàn)證我們的顏色符合這倆標(biāo)準(zhǔn)呢？

easy。這里直接上個(gè)網(wǎng)址，https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值，即可得到最終的對比度數(shù)據(jù)。比如我錄入了白色和一級文本色數(shù)值，最后的12.28即兩者的對比度，嗯，達(dá)到了AAA級標(biāo)準(zhǔn)。

一樣的步驟，分別測試了其他文本色的對比度（產(chǎn)品無暗色模式，所以此處僅驗(yàn)證白色背景下的顏色對比度），分別達(dá)到了7.59、4.71和2.38?？梢钥闯龀?.38外，其他文本色的對比度均符合可見度標(biāo)準(zhǔn)。

不過WCAG中指出，一些特殊情況下的文本無對比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對比度對應(yīng)的文本色主要用于暗提示，因此這種情況就可以無視掉了~

最后

色彩體系的初步探索到此結(jié)束了，不過篇幅原因并沒有面面俱到，比如漸變色、實(shí)際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。

文章來源：優(yōu)設(shè)網(wǎng)     作者：轉(zhuǎn)行人的設(shè)計(jì)筆記

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

轉(zhuǎn)自：站酷.         作者：絲絨Store

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

孫子兵法有云：知己知彼，百戰(zhàn)不殆。知天知地，勝乃不窮。

“知己知彼”說明了解自己和競爭對手的重要性，“知天知地”則強(qiáng)調(diào)了了解行業(yè)競爭環(huán)境的重要性。能通過競品分析達(dá)到知己知彼、知天知地，是設(shè)計(jì)師的必備技能。

什么是競品分析

競品分析是對市場上存在直接或間接競爭關(guān)系的優(yōu)質(zhì)產(chǎn)品，進(jìn)行分類、組織、對比、刨析，總結(jié)競品、以及自己產(chǎn)品的優(yōu)勢和不足，為下一步?jīng)Q策提供幫助。競品分析維度包含但不限于市場調(diào)研、盈利模式、戰(zhàn)略定位、產(chǎn)品功能、交互流程、頁面框架、視覺表現(xiàn)、文案內(nèi)容、運(yùn)營方式等。

競品分析和市場分析、產(chǎn)品分析、產(chǎn)品體驗(yàn)分析的關(guān)系如下：

競品分析的作用

對設(shè)計(jì)師來說，競品分析在了解行業(yè)現(xiàn)狀、熟悉功能、了解競爭對手、了解用戶習(xí)慣、明確自己產(chǎn)品定位等方面都有幫助，具體如下：

競品分析有這么多好處，那么設(shè)計(jì)師該如何做競品分析？

設(shè)計(jì)師如何做競品分析

1.明確競品分析的目標(biāo)

做競品分析前最重要的是要明確競品分析的目標(biāo)。明確競品分析目標(biāo)的前提是要“知己”。

“知己”即了解自己產(chǎn)品處在哪一個(gè)階段，有什么問題，接下來打算怎么做或達(dá)成什么目標(biāo)。然后根據(jù)產(chǎn)品當(dāng)前問題確認(rèn)“要通過本次競品分析獲得什么？”。競品分析一定是為自己的產(chǎn)品服務(wù)的，是通過了解競品來達(dá)成自己產(chǎn)品的某種目的。不能盲目地為分析而分析。

大多數(shù)工作流程中，設(shè)計(jì)師進(jìn)行競品分析一般有以下幾種場景：

場景一：在產(chǎn)品需求確認(rèn)之前，通過競品分析對某功能進(jìn)行調(diào)研，了解行業(yè)中該功能的具體設(shè)計(jì)。

如設(shè)計(jì)師了解到產(chǎn)品計(jì)劃對帖子詳情頁面進(jìn)行改版，產(chǎn)品需求還沒確認(rèn)。此時(shí)進(jìn)行競品分析的目的可以是：了解競品帖子詳情頁面的設(shè)計(jì)共有哪幾類表達(dá)方式，每一類表達(dá)方式的優(yōu)缺點(diǎn)各是什么。

場景二：.在產(chǎn)品需求確認(rèn)之后，通過分析產(chǎn)品需求，推導(dǎo)出設(shè)計(jì)目標(biāo)。此時(shí)競品分析是為產(chǎn)出能滿足設(shè)計(jì)目標(biāo)的方案服務(wù)的。

如產(chǎn)品的設(shè)計(jì)需求是“提高帖子詳情頁的點(diǎn)贊數(shù)、留言數(shù)、評論回復(fù)數(shù)”。此時(shí)推導(dǎo)出的設(shè)計(jì)目標(biāo)可能是“營造詳情頁互動(dòng)氛圍、提高回復(fù)評論的效率、減少操作步驟”，對應(yīng)的競品分析目的可以是“總結(jié)競品營造社區(qū)互動(dòng)氛圍、提高活躍度的方式。掌握競品回復(fù)評論功能中操作步驟少、效率高的設(shè)計(jì)方式及總結(jié)背后原因。”

場景三：產(chǎn)品大改版、重新設(shè)計(jì)，或者孵化新產(chǎn)品時(shí)，通過競品分析對行業(yè)內(nèi)的產(chǎn)品有一個(gè)整體的了解，從而得出自身產(chǎn)品的差異化定位。此時(shí)競品分析的維度會(huì)更多元：可以從用戶體驗(yàn)的5個(gè)要素逐級進(jìn)行分析，或使用SWOT分析、波士頓矩陣分析等。

場景四：競品的動(dòng)態(tài)跟進(jìn)，主要是跟進(jìn)競品的迭代情況，以保持長期的“知彼”狀態(tài)?？梢远ㄆ冢ㄈ?周或一個(gè)月）對競品迭代信息進(jìn)行一次整理。App Store或七麥數(shù)據(jù)等網(wǎng)站可以查到競品每個(gè)版本的迭代內(nèi)容。

2.選擇合適的競品

競品可以選擇直接競品或間接競品。直接競品指市場環(huán)境、商業(yè)模式、目標(biāo)用戶、產(chǎn)品功能都相似的產(chǎn)品。間接競品可以是市場環(huán)境和目標(biāo)用戶相似，但商業(yè)模式和產(chǎn)品功能當(dāng)前不同、未來可能相同的產(chǎn)品。如果只對產(chǎn)品交互流程、頁面框架、視覺表現(xiàn)等進(jìn)行分析，還可以選取功能相似，或者目標(biāo)用戶相似，用戶體驗(yàn)好的產(chǎn)品進(jìn)行分析。

建議通過易觀千帆、七麥數(shù)據(jù)、App Annie等平臺了解競品的數(shù)據(jù)情況，選取數(shù)據(jù)排名靠前的產(chǎn)品進(jìn)行分析。

3.了解競品定位、盈利方式、用戶畫像

了解競品的定位、公司戰(zhàn)略、盈利方式和用戶畫像，有利于我們理解競品功能的背后的邏輯，利于我們分析競品為什么設(shè)計(jì)成這樣。競品分析不只是分析表面看到的功能，還要分析更深層次的原因。

1.了解競品定位、公司戰(zhàn)略途徑有：競品官網(wǎng)、維基百科、拉勾網(wǎng)、天眼查、IT桔子 、Questmobile、App Annie等

2.了解盈利方式的途徑有：36 氪

2.了解競品用戶畫像的方式有：競品官網(wǎng)、移動(dòng)觀象臺、百度指數(shù)、艾瑞咨詢等網(wǎng)站。

4.選擇合適的競品分析方法

競品分析的目的不同，選用的競品分析方法也不同。以下介紹幾種常用的競品分析方法：

競品畫布

競品畫布是一個(gè)簡易的競品分析模板，用一頁紙包含了競品分析的9大問題，如下圖。

適用條件：

1.競品畫布可以用在競品分析之初，用來梳理競品分析的思路，是競品報(bào)告的MVP（最小可用產(chǎn)品）2.競品畫布包含競品分析的6個(gè)關(guān)鍵步驟，可以讓新手快速上手競品分析。

操作步驟：

按照競品畫布模板上的問題依次的分析解答。競品畫布中包含了SWOT分析，注意優(yōu)勢、劣勢是對產(chǎn)品或公司內(nèi)部的分析，而機(jī)會(huì)和威脅是對外部環(huán)境的分析。另外，在分析第3點(diǎn)分析維度時(shí)，建議結(jié)合分析目標(biāo)說明選擇這些方式的理由。

優(yōu)點(diǎn)：競品畫布相對其他方法來說視角更全面，可以結(jié)合其他分析方法一起使用。

缺點(diǎn)：對UI/UE來說，針對性不夠強(qiáng)。

矩陣分析法

矩陣分析法又稱知覺圖，主要是通過二維矩陣分析2個(gè)關(guān)鍵要素，以了解自己和產(chǎn)品的定位及競爭優(yōu)勢。

適用條件：

1. 矩陣分析法主要用來幫助產(chǎn)品做2個(gè)關(guān)鍵要素方面的定位決策。如自營電商平臺可用矩陣分析法來決策平臺定位是售賣高價(jià)格、優(yōu)質(zhì)的商品平臺（如寺庫），還是售賣超低價(jià)格、質(zhì)量一般的商品的平臺（如拼多多）。以及幫助產(chǎn)品評估自己的競爭優(yōu)勢，判斷產(chǎn)品是否需要重新定位。

2. 設(shè)計(jì)師還可以用矩陣分析法分析競品的視覺風(fēng)格，以輔助定位自身產(chǎn)品的視覺風(fēng)格。如下圖為視頻app logo風(fēng)格的矩陣分析

操作步驟：

（1）確定兩個(gè)關(guān)鍵競爭要素。這兩個(gè)競爭要素應(yīng)該是用戶最會(huì)關(guān)注、會(huì)影響用戶決策的關(guān)鍵屬性，如價(jià)格和配置。

如果是設(shè)計(jì)師用矩陣分析法來分析競品視覺風(fēng)格，可選取兩對意思相反，對視覺風(fēng)格有較大影響的關(guān)鍵詞。如嚴(yán)肅—活潑、扁平—擬物

（2）繪制橫縱坐標(biāo)軸，把兩個(gè)對關(guān)鍵競爭要素作為橫坐標(biāo)和縱坐標(biāo)填入。

（3）針對競品關(guān)鍵競爭要素的表現(xiàn)，把競品放到4個(gè)象限的對應(yīng)位置。并思考自身產(chǎn)品在4個(gè)象限中的位置。4個(gè)象限的空白區(qū)域可能存在機(jī)會(huì)，而4個(gè)象限中競品較多的區(qū)域，用戶群可能更廣泛，也意味同類公司更多。

優(yōu)點(diǎn)：矩陣分析法的優(yōu)點(diǎn)在于聚焦于關(guān)鍵的兩個(gè)要素，可以直觀的表現(xiàn)出用戶對自身產(chǎn)品和競品在關(guān)鍵要素方面的認(rèn)知。

缺點(diǎn)：矩陣分析法的缺點(diǎn)是只能從兩個(gè)要素進(jìn)行分析。如果要分析多個(gè)因素，可以使用雷達(dá)圖分析法。

雷達(dá)圖分析法

雷達(dá)圖分析法本身是對企業(yè)經(jīng)營情況進(jìn)行系統(tǒng)分析的一種有效方法。我們可以將它運(yùn)用到互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)分析上，用圖示化的方式對競品多個(gè)維度的優(yōu)勢、劣勢作出直觀的展示。下圖為對母嬰類產(chǎn)品拍大肚照上傳功能進(jìn)行的雷達(dá)圖分析：

適用條件：

分析競品多個(gè)維度的優(yōu)勢、劣勢（一般選6個(gè)維度分析）。

操作步驟：

（1）定義分析維度

定義分析維度主要是確認(rèn)從哪幾個(gè)角度分析具體功能，如選擇可用性、防錯(cuò)設(shè)計(jì)、易懂、一致性等。分析維度的選取也可以參考尼爾森的十大可用性原則，具體選取什么維度應(yīng)根據(jù)分析的功能來定。

（2）對競品的每個(gè)維度進(jìn)行打分

定義好分析的維度后，我們依次對競品的每個(gè)維度的表現(xiàn)情況進(jìn)行打分評估，每個(gè)維度滿分為100分。

優(yōu)點(diǎn)：雷達(dá)圖分析法的優(yōu)點(diǎn)是相對直觀、可以分析多個(gè)維度的優(yōu)勢，劣勢。

缺點(diǎn)：雷達(dá)圖包含多個(gè)維度，每個(gè)維度的滿分和量級指標(biāo)是不一樣的。需要分析者心中對每一個(gè)維度的滿分有個(gè)大致預(yù)期。如流暢度怎么樣算90分，怎么樣算80分？有可能同一個(gè)產(chǎn)品A同學(xué)認(rèn)為流暢度80分，B同學(xué)認(rèn)為流暢度90分，因此分析可能帶有一定的主觀性。

表格法

表格法主要是用表格來統(tǒng)計(jì)競品功能元素的有無。

適用條件：

1.當(dāng)我們想較為全面的了解一個(gè)功能的概況，或較為宏觀的把握競品的現(xiàn)狀，可使用表格法。2.當(dāng)我們思考某個(gè)功能元素是否需要保留，可使用表格法分析競品的做法。

操作步驟：

（1）畫出一個(gè)N行M列的表格，首列填入功能元素的具體名稱，首行填入競品的具體名稱。

（2）對每一個(gè)競品的具體功能元素進(jìn)行統(tǒng)計(jì)，若某元素存在則在表格上對應(yīng)位置打勾，不存在則空著。

（3）進(jìn)行分析小結(jié)。

如果某一列功能元素所有競品都打了勾，則說明該功能元素競品都有，是個(gè)普遍元素，優(yōu)先級可能較高。如果某個(gè)功能元素是某個(gè)競品獨(dú)有的，則可能是該競品的差異化功能，可能是競品的特色。使用該方法時(shí)要注意：即使是其他競品都有的功能，自身產(chǎn)品也不一定要有，最終自身產(chǎn)品功能元素如何定，要根據(jù)需求來分析，不可盲目照搬。

優(yōu)點(diǎn)：表格法的優(yōu)點(diǎn)在于可以清晰展示功能細(xì)節(jié)的有無。

缺點(diǎn)：如果頁面元素過多會(huì)顯得雜亂，且表格中沒有顯示元素的優(yōu)先級。

多級功能表格比較法

適用條件：當(dāng)產(chǎn)品功能較復(fù)雜，要統(tǒng)計(jì)競品功能元素、全面了解競品概括，可用該方法。

操作步驟：在表格法的基礎(chǔ)上，將功能點(diǎn)拆解成一級功能、二級功能、三級功能，再進(jìn)行比較分析和總結(jié)。具體形式如下圖：

優(yōu)點(diǎn)：可以清晰的展示一級功能、二級功能、以及功能的子級。

缺點(diǎn)：如果層級太多，或者元素太多表格會(huì)比較龐大雜亂。

用戶路徑分析法

用戶路徑分析主要是把自己假想成用戶，體驗(yàn)用戶操作某軟件中某功能流程，并記錄過程。如下圖是對親寶寶拍攝照片用戶路徑分析：

適用條件：適用于要分析某一個(gè)功能的具體交互流程。

操作步驟：

（1）把自己想成小白用戶，給自己布置一個(gè)小任務(wù)，并用競品軟件操作，完成這個(gè)任務(wù)，如完成上傳照片。

（2）操作時(shí)按照：發(fā)現(xiàn)入口—了解功能—操作上傳—跟進(jìn)操作反饋的步驟進(jìn)行。

（3）記錄自己在體驗(yàn)功能時(shí)的感受，如哪一個(gè)步驟覺得疑惑，哪一個(gè)步驟覺得爽。

（4）梳理一下該功能的用戶路徑，看看產(chǎn)品設(shè)置的路徑中有哪些是自己在體驗(yàn)時(shí)主要操作的，它們是不是該功能的主要路徑？哪些是自己體驗(yàn)過程中忽略的，是競品有意弱化或者其他，并總結(jié)結(jié)論。

優(yōu)點(diǎn)：專注于操作流程中的細(xì)微體驗(yàn)，聚焦于發(fā)現(xiàn)體驗(yàn)問題。

缺點(diǎn)：自己的操作習(xí)慣不一定完全代表用戶的操作習(xí)慣，帶有一定主觀性。

產(chǎn)品視覺表達(dá)分析法

產(chǎn)品視覺表達(dá)分析指對競品某個(gè)模塊的頁面表達(dá)元素進(jìn)行拆解分析，并總結(jié)每種表達(dá)方式體現(xiàn)的內(nèi)容優(yōu)先級和規(guī)律。

適用條件：適用于設(shè)計(jì)師橫向分析某個(gè)功能模塊的表達(dá)方式，及掌握每種表達(dá)方式的適用場景。

操作步驟：

（1）將選擇競品具體模塊功能進(jìn)行截圖并對比。

（2）提取每個(gè)模塊的表達(dá)元素，并在截圖的下方用色塊表達(dá)提取的元素。

（3）總結(jié)共有幾種表達(dá)方式，每種表達(dá)方式的突出對象是什么、適用條件如何、視覺優(yōu)先級如何。下圖為母嬰類產(chǎn)品問答功能視覺表達(dá)分析。

優(yōu)點(diǎn)：可以聚焦于單模塊的表達(dá)方式分析。

缺點(diǎn)：不適用于流程的縱向?qū)Ρ取?

5Why分析法

5Why分析法又稱5問法，即看到一個(gè)現(xiàn)象不斷的去問“為什么”來尋找根本原因，以找出解決某個(gè)問題治本對策的方法。該方法最初由豐田公司提出并在豐田公司廣泛采用。

適用條件：

適用于深挖某個(gè)功能表現(xiàn)背后的根本原因。也適用于幫助我們在做競品分析時(shí)養(yǎng)成透過現(xiàn)象看本質(zhì)的思維習(xí)慣。

操作步驟：

（1）把握現(xiàn)狀。主要是為了確認(rèn)問題，調(diào)查基本的表現(xiàn)、數(shù)據(jù)情況等。

（2）原因調(diào)查。針對明確的問題，探究背后原因。找到淺層次的原因后，再問為什么，找更深層次的原因，問5次為什么。原因調(diào)查過程中要注意：一定要以事實(shí)為依據(jù)去探究背后原因，不可主觀臆想。另外，5why分析法也不一定都要問滿5個(gè)為什么，重要的是通過多次提問探究到根本原因。

（3）實(shí)時(shí)措施，糾正問題

（4）吸取教訓(xùn)，從源頭上預(yù)防錯(cuò)誤再發(fā)生

5Why分析法用到競品分析上，重點(diǎn)是在前2步，即把握問題和原因調(diào)查。我們不一定要完成5Why分析法的所有步驟，但我們要有問“為什么”的意識，不斷的問自己競品這么做的目的和原因。

優(yōu)點(diǎn)：聚焦現(xiàn)象背后深層原因，利于我們培養(yǎng)透過現(xiàn)象看本質(zhì)的思維。

用戶體驗(yàn)5要素分析法

用戶體驗(yàn)5要素分析指從戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層5個(gè)層級，逐級的去分析。

適用條件：適用于要全面系統(tǒng)地了解某個(gè)產(chǎn)品時(shí)，對該產(chǎn)品進(jìn)行全局分析。

操作步驟：

可以按照用戶體驗(yàn)要素的5個(gè)層級從上到下分析，或從下到上分析。每個(gè)層級的分析可以使用不同的分析方法，在此不贅述。需要注意的是使用該方法分析時(shí)要避免追求大而全，建議站在競品分析目的角度，分析時(shí)有一定傾向性。

優(yōu)點(diǎn)：分析較全面，對產(chǎn)品理解會(huì)比較深入。

缺點(diǎn)：要真正執(zhí)行并好不容易，需要對用戶體驗(yàn)的5個(gè)要素有比較深的理解。

以上就是設(shè)計(jì)師常用的競品分析方法的解析說明，我們要根據(jù)分析目的靈活選擇方法。各方法的對比如下圖：

5.了解競品的用戶反饋

除了對競品進(jìn)行分析，我們還要關(guān)注競品的用戶反饋，了解競品用戶在使用產(chǎn)品過程中遇到的問題，了解用戶覺得競品好在哪里。要對競品的問題進(jìn)行規(guī)避，對好的使用體驗(yàn)進(jìn)行分析并學(xué)習(xí)借鑒。

可以通過網(wǎng)站 https://appbot.co/ 查找App store上的用戶反饋。如下圖為親寶寶產(chǎn)品的用戶反饋:

6.總結(jié)競品分析結(jié)論

不論使用哪一種分析方法，分析完之后都應(yīng)輸出分析小結(jié)。在所有分析結(jié)束之后，還要輸出整體的分析結(jié)論。結(jié)論可以由定性或者定量分析得出，可以既包含客觀分析的結(jié)論又包含主觀分析的結(jié)論。

客觀分析的結(jié)論如行業(yè)市場布局情況、競品數(shù)據(jù)情況、界面操作反饋、產(chǎn)品包含的功能點(diǎn)（普遍功能、特色功能、實(shí)現(xiàn)程度如何）等。主觀分析的結(jié)論如競品的可用性、易用性、操作體驗(yàn)等。

總結(jié)

競品分析是通過分析競品，得出要解決的問題的結(jié)論過程。所以，了解自身產(chǎn)品當(dāng)前處在哪個(gè)階段，有什么問題相當(dāng)重要。通過當(dāng)前問題推導(dǎo)競品分析目標(biāo)，再跟進(jìn)競品分析目標(biāo)靈活運(yùn)用分析方法。競品分析方法可以有很多，但確認(rèn)好分析目標(biāo)才是關(guān)鍵。

參考文獻(xiàn)：

《有效競品分析：好產(chǎn)品必備的競品分析方法論》——作者：張?jiān)谕?

《步步為贏 交互設(shè)計(jì)全流程解析》——作者：董尚昊

《電商類APP：商品卡片競品分析》——作者：白鷺漫談

轉(zhuǎn)自：站酷

作者：小夕看太陽 

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

圖標(biāo)在UI設(shè)計(jì)體系中，是重要......

（此處省略1000字）

直接上圖！

上圖是我以前繪制的一套圖標(biāo)作品，

感興趣的話就一起來了解一下我平時(shí)是怎么創(chuàng)作一套圖標(biāo)的吧~

制作過程

1、搜集+臨摹+原創(chuàng)

積累素材是設(shè)計(jì)師必備的“基本功”，同時(shí)也是“職業(yè)病”。

平時(shí)我會(huì)有意識的在速寫本上繪制一些簡易的圖標(biāo)，如果在一些APP中看到比較好的圖標(biāo)，我也會(huì)臨摹下來。

下面給大家隨機(jī)展示一些我平時(shí)繪制的圖標(biāo)。

除了繪制圖標(biāo)以外，我平時(shí)也喜歡繪制一些其他的圖案。

2、反復(fù)打磨

將繪制好的圖標(biāo)利用電腦矢量化后打印出來，根據(jù)打印稿用筆標(biāo)記出不合理的地方，比如：線條太粗了，重心不穩(wěn).......對不合理的地方進(jìn)行反復(fù)修改，再次打印，再修改，循環(huán)多次后直到得到自己滿意的效果，最后定稿。

下面這幅手繪圖就是文章一開始給大家展示的圖標(biāo)成品的手繪最終稿了。

需要強(qiáng)調(diào)的是，這一次圖標(biāo)的繪制，有一個(gè)特殊的地方，其中一個(gè)圖標(biāo)是有實(shí)物的。（左：實(shí)物圖；右：對應(yīng)圖標(biāo)）

3、圖標(biāo)插件化

最后，將圖標(biāo)上傳阿里的iconfont網(wǎng)站，制作成字體圖標(biāo)。

然后將字體圖標(biāo)做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）

制作過程就是給每個(gè)圖標(biāo)賦予關(guān)鍵字，然后利用正則表達(dá)式，可以方便的搜索所有圖標(biāo)。

不過這個(gè)步驟我就不詳細(xì)解釋了，因?yàn)?

轉(zhuǎn)自：站酷

作者：灰色執(zhí)照 

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)