前文的原子設計中我曾經講過，原子是構成所有元素的最小單元，沒有辦法再被細分。它通常對應著產品設計中的通用樣式及構成組件的最小顆粒。而顏色，作為整個設計系統中極為重要的原子之一，在心智模型中占據了關鍵的地位。

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

接下來，我結合公司目前的業務CROV Dropshipping（以下簡稱DS），來進行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發。

大綱走起：

• 業務背景
• 為什么我們需要色彩體系
• 如何創造一套色彩體系
• WCAG無障礙測試

業務背景

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

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

1. 對于業務

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

而且用色本身的隨意也導致研發還原結果的不統一，一處地方色彩各異的現象比比皆是。

因此，我們需要基于我們自身的業務特征來產出一套足夠完善的色彩體系，讓業務從用色上達成基本的一致統一。

2. 對于設計師

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

增加決策

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

其實這和不用網格系統來布局是一個道理。（注：網格系統是一種能夠極大提升布局效率的方法，后面會講～）

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

缺乏秩序和邏輯性

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

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

難以復用

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

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

如何創建一套色彩體系？

Alipay Design團隊提過：

以同色系配色為主導，多色搭配為輔。

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

接下來我以DS項目為例進行色彩體系探索——

首先，所有的色彩模型統一采用HSB模型進行，正如Ant Design設計團隊說的那樣，這個模型利于調整色彩時對顏色有明確的心理預期，同時便于團隊溝通。

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

1. 品牌色

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

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

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

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

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

后續我們的顏色體系就在彩帶上的24個顏色上面進行提取。

3. 品牌色同色系配色

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

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

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

當S飽和度變化時（明色區域），S值以S/5的結果值為一個增量進行遞減，B值以(100-B)/5的結果值為一個增量進行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個增量分別是16和0。

品牌色在明色區的下兩個色階對應的HSB參數就是（250，64，100），（250，48，100），以此類推。

而當B明度產生變化時（暗色區域），S值以(100-S)/5的結果值為一個增量進行遞增，而B值以B/5的結果值為一個增量進行遞減。得出的兩個增量分別為4和20。

品牌色在暗色區的下兩個顏色對應的HSB參數即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

根據這兩個定義規則推導出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。

4. 定義輔助色

我們使用品牌色來傳達品牌價值，還需要輔助色來滿足多樣化業務場景的需要，對用戶進行不同的情緒引導，同時也可以緩解用戶對單一主色產生的視覺疲勞。

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

結果見下：

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

類似色

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

中差色

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

對比色

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

互補色

互補色即色相相差180度左右的顏色，屬于高強度對比色。最后得出的H70偏綠，這里同樣進行了色相校正，將其調整為H55。

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

5. 感官明度校正

感官明度校正方法來自支付寶設計團隊，這是是確認輔助色的最后關鍵一環。每種顏色都有屬于自己的“感官明度”，即發光度。品牌色即輔助色的發光度不一致，就會導致視覺上會有明顯的明暗差別。所以，我們需要通過發光度來進行最終的顏色校正。

明度較高的灰色意味著高發光度，明度較低則意味著低發光度。保持品牌色發光度不變，我們對其他輔助色進行微調。

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

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

6. 輔助色的同色系配色

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

7. 定義文本色

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

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

WCAG無障礙測試

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

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

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

WCAG顏色對比度無障礙的兩個標準分別為：「1.4.3條例：最小對比度標準」和「1.4.6條例：加強對比度標準」，分別對應著AA級和AAA級。

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

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

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

這兩個條例被大廠們廣泛運用到了產品的顏色標準當中。

比如MD規范中的文本移動性規范標準中的數據就是來自WCAG的1.4.3條例標準。

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

1. 顏色對比度驗證

那該如何驗證我們的顏色符合這倆標準呢？

easy。這里直接上個網址，https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值，即可得到最終的對比度數據。比如我錄入了白色和一級文本色數值，最后的12.28即兩者的對比度，嗯，達到了AAA級標準。

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

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

最后

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

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

不過也由于這次的經歷也讓我更加明白設計方法的重要性，越是短時間內，越需要理性分析。在實際工作中，產品有時候因為項目急需上線，給我們的時間會非常有限，根本沒有太多的時間去給你思考，就比如我這次，只有半天時間去思考設計。那么如此短的時間，如何提出有效的設計方案呢？

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

以這次為例，學習圈頁面剛上線不久，當時也是設計了許多方案，都被pass了，如下：

產品方提出頁面上方的發布按鈕需要重新設計，那我就要搞清楚具體是誰提出的意見，為什么要重新設計，這樣才不會讓自己處于完全被動狀態。

由于項目剛上線，數據庫也因為某些原因還不能檢測點擊和轉化量，無法得知哪種按鈕點擊量高。產品方也不清楚想要什么效果，需求方向不明確就著急去動手設計，那對于設計師來說無疑是效的，問明白需求后再通過競品分析、產品體驗、用戶喜好等方式去突破。

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

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

通過溝通后明確的是：

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

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

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

時間緊急，當時想到的是常用的太空元素（有空間感、好延展、符合用戶喜好），于是背景就選了藍紫色（據研究，紫色也是小學生最喜歡的顏色，性別傾向相對偏弱，在色環上是藍色的鄰近色，協調又會有對比。）

想明白要嘗試的方向

在設計前，我先在心里大致分了兩個設計方向：

• 常規大按鈕樣式
• 非常規按鈕樣式

以下便是常規大按鈕設計稿：

非常規按鈕設計稿

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

善于運用對比進行排除

大體方案出來后，通過優缺點分析對比，同產品方選出最適合的方案。

1. 常規按鈕設計稿

優點：容易被用戶所熟知，用戶的學習成本低，更容易點擊

缺點：對于小學生來說吸引力不夠，形狀上偏規矩，不夠活潑，另外上方第一個元素稍微有一點搶主角的光環

2. 非常規按鈕設計稿

優點：配合動效會更有吸引力一些

缺點：用戶的學習成本比較高

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

細節優化

優化方向：

• 顏色調整
• 細節元素調整
• 添加動效

1. 顏色調整

現在看著球跟背景區分不是很明顯，整體偏灰，需要加強對比，球的顏色需要調亮調純。我們看下色環：

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

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

所以相對來說藍色的球比較適合，也跟APP的主色相呼應。

2. 細節元素調整

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

3. 添加動效

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

如果有限時間內想要讓需求方得到滿意方案，所以以下兩點我覺得是挺重要的：

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

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

文章來源：優設網     作者：麥芽糖

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

為什么要建立Banner組件庫

在互聯網公司中，運營Banner往往是由不同的運營團隊去完成，甚至在一些跨國企業，運營Banner是由不同國家的運營團隊完成的。那么如何保證大家輸出的運營Banner在保證視覺沖擊力的同時，還能輸出以及體現統一的設計語言呢？甚至不用設計師也能輕松替換Banner組件？想要解決這種難題的最好方法就是設計Banner組件庫，Banner組件庫的四大優點能夠完美解決以上的問題。

Banner組件庫的類別

根據設計師個人及每個公司業務的不同需求，我一共把Banner組件庫分為兩大類別：

1. 設計師及設計團隊操作的Banner組件庫：

這類組件庫面向的操作人群是設計師，僅有設計師才對其有操作權限：

案例部分效果演示：

2. 非設計師操作的Banner組件庫：

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

我當時制作這個組件庫的原由是因為母、子公司經常都會有相同的模板化設計界面替換，而每次替換都需要花費設計師很多零碎的時間，所以我們干脆就直接設定好Banner組件庫，讓運營人員自行替換，我們先教會母公司的主運營操作流程，主運營再去負責子公司的操作流程培訓，這樣一套下來省去了運營人員與設計師的溝通及修改過程，運營人員可直接輸出成品，從而提升了整個團隊的生產力，也讓設計師專注于設計上的創意與用戶體驗。

案例部分效果演示：

Banner組件庫的四大知識要點

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

1. Banner的層級拆分

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

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

案例：

2. 合理運用Banner中的點線面

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

點、線、面是相對存在的，點可能在畫面中成為線、面，線也可能在畫面中成為點、面。

“點”越大就可能會變成“面”，“點”發生規律性變化也可能成為“線”。

當“線”在畫面上顯得短小時，可以把它看成“點”，當把“線”加粗一定程度，那么我們就會把它看成“面”。

當“面”成為未封閉狀態時就會成為“線”，當“面”在畫面中的比例縮小時我們可以把它看成“點”。

我們在組件Banner時要事先把層級的點線面歸納好，這樣才不會在我們設計相同元素時出現雜亂的現象，層級與點線面的常規關系圖如下（這樣的常規組合關系有利于建立組件庫）：

需要注意的是在Banner組件庫中點綴層與標簽層并非一定要存在于Banner中。

3. Banner組件庫常用版式

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

4. Banner設計五大原則

組件庫的建立必須遵循Banner設計五大原則：對齊、統一、對比、留白、結構平衡。

對齊

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

統一

字體以及字體顏色最好不超過兩種，內容元素設計風格也必須一致，太多容易導致內容雜亂，干擾過強。

對比

了解各項信息的權重大小，重要的信息要加強顯示，次要信息可以弱化。

留白

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

降噪原則

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

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

1. 制作前提：設計規范（字體/顏色/版式說明）

字體使用規范

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

顏色使用規范

為了保證Banner擁有較強的適應性，我們可以不規定精準顏色，用顏色明度的使用區間來代替。(顏色規范僅限于主色調，并不包含特殊用色：如標簽、點綴元素)

版式說明

制定版式的整體尺寸、元素間距、排版、字數限制。

2. 設計師應用版制作流程：

設計師應用的Banner組件庫可以用Sketch制作，也可以用Figma制作。

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

第一步：根據層級與點線面設計Banner中的元素

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

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

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

第三步：設計可替換組件

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

當把可替換的組件全部設計完后就可以使用了，如果發現內容不夠用還可以往內部再次添加，下面是Banner樣式1的切換效果展示：

Banner樣式2的效果展示：

注意要點：

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

3. 運營人員應用版制作流程：

運營人員應用的Banner組件庫的建立需要用到的軟件是PS與Excel。

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

第一步：根據層級與點線面設計Banner中的元素

第二步：設計可替換元素組件

在設定前我們需要了解以下幾點知識：

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

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

第三步：定義變量元素

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

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

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

在定義時為了避免操作錯誤，定義名稱就為圖層名稱，定義完成一個就按“下一個”按鈕，直到全部定義完成再按“確認”按鈕，案例中的Banner一共定義了6個元素，分別為商品圖（像素替換）、商品名（文字替換）、原價（文字替換）、優惠價（文字替換）、特價標（可見性）背景圖（像素替換）

第四步：制作Excel表格

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

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

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

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

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

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

第五步：導入操作

當全部設定完后，我們就可以在PS內導入切換不同的數據應用。

操作路徑：圖像-變量-數據組-導入數據組-選擇數據-應用-確定

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

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

第六步：培訓運營人員

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

因為考慮到運營人員可能無法理解設計邏輯，所以很可能會出現操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導運營人員操作。

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

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

案例源文件提取

Sketch組件庫源文件：

PS、Excel組件庫源文件：

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

文章來源：優設網     作者：黑獅力

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

顏色的本質

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

顏色分為光學三原色和顏料三原色。

1. 光學三原色

光學三原色由：紅、綠、藍組成。

色值分別是：

• 紅（red ）：#FF0000 RGB（255，0，0）
• 綠（green）：#00FF00 RGB（0，255，0）
• 藍（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）

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

那么，這兩種有什么區別呢？

3. 區別

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

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

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

在設計中我們可以區分為 RGB（光學三原色）和 CMYK（顏料三原色）。

RGB 模式本質上與 CMYK 模式沒有區別，只是產生顏色的方式不同。顯示器采用RGB模式，就是因為顯示器是電子光束轟擊熒光屏上的熒光材料發出亮光從而產生顏色，當沒有光的時候為黑色，光線加到最大時為白色。而打印機呢？它的油墨不會自己發出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。

運用場景：

• 光學三原色：RGB模式，燈光色彩中；
• 顏料三原色：CMYK模式，繪畫和印刷領域。

冷暖色調

冷暖色由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色，黃色至紫色為暖色。

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

暖色可以讓人聯想到火焰、太陽等，讓人產生溫暖、熱情、開放的感覺。

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

顏色的三個屬性

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

1. 色相

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

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

2. 明度

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

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

3. 飽和度

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

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

顏色搭配

1. 單色

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

這種方法運用到產品中，會給人一種樸素、低調干凈的感覺；同時，也會給人一種單調的感覺。單色的顏色搭配適合沉浸式的產品中使用，不會因為色彩而打亂用戶的體驗。

產品案例：MUJI

2. 互補色

互補色是指在色相環上對立（180°）的兩個顏色。

色彩中的互補色有紅色與綠色互補，藍色與橙色互補，紫色與黃色互補。

補色并列時，會引起強烈對比的色覺，會感到紅的更紅、綠的更綠。

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

3. 鄰近色

鄰近色是指在色環上相鄰的兩三個顏色，在色相環上相距 60°

它們色相彼此相近，冷暖性質一致、色調統一和諧、感情特性一致。鄰近色是選擇相近色彩時很不錯的方法，可以在同一個色調中制造豐富的質感和層次。一些效果不錯的色彩組合有藍綠色、藍色和藍紫色，還有黃綠色、黃色和橘黃色等。

4. 對比色

對比色是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。指在相環上相距 120° 到 180° 之間的兩種顏色。

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

色彩的視覺呈現

1. 光源色

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

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

2. 固有色

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

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

3. 環境色

環境色是物體周圍環境的顏色。

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

色彩格式

1. RGB

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

2. HSB

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

3. HSL

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

4. HSB 和 HSL 的區別

HSB 和 HSL 都是表示色相、飽和度和明度，不同的點在于應用開發中，不同開發語言下可調節的明度值名詞不同，所以這兩個格式不用過于糾結哪個用的更多，具體使用中就是需要哪個用哪個。

不同顏色的感受

1. 黑色

黑色代表著品質、權威、嚴肅、穩重、高級。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時尚感。

黑色是永不過時的顏色。

2. 白色

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

3. 紅色

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

4. 藍色

藍色代表冷靜、商務、未來、科技、安全，它是一種比較理智的顏色，在色彩心理學的測試中發現，幾乎沒有人對藍色反感。主色調用藍色的太多了：知乎、Twitter、Behance、釘釘等，藍色的運用給用戶一直安全、放心的感覺。

5. 黃色

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

6. 綠色

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

7. 紫色

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

色彩在設計中的應用

1. 數量

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

2. 統一性

每一個產品都有自己的主色調，所有的頁面的色彩搭配都要和主色調呼應，主色調的合理運用直接關系到用戶對產品的信任值。同一組件、場景中，顏色使用要保持一致，切忌“自由發揮”，毫無規范可言。

3. 60-30-10原則

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

4. 顏色禁忌

禁用純黑、純灰，純黑和純灰會使用戶陷入負面情緒中，可以在黑色和灰色中加入一些色調，讓顏色看上去更柔和，另外純黑色看時間久了會使人疲憊，在實際產品中，也很少有用純黑的。

5. 文字中的使用

超鏈接顏色用藍色，為什么呢？

最早期電腦中用的是深灰色背景+黑色字，那時候能用非黑色最深的顏色就是藍色，所以這個習慣一直延續至今。這種用戶習慣非常一致的情況下，盡量不要去改顏色，因為改成別的顏色就會顛覆用戶認知，學習成本就會增加。

6. 卡片陰影

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

配色網站推薦

1. Wbgradients

網站鏈接：https://webgradients.com/

Wbgradients 是一個在線調整漸變色的網站 ，可以根據你想要的調整效果，同時支持復制 CSS 代碼，可以更好的與開發對接。

2. Grabient

網站鏈接：https://www.grabient.com/

Grabient 是一個非常漂亮且實用的漸變配色網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。設計師可以在色塊下方自由添加和調整漸變的色系、以及線性漸變方向。

3. Color Grid

網站鏈接：https://www.0to255.com/740941

該網站隨意選色值，它自動換算出已選色值的 32 種明度色值，簡單易用。

4. Eva Design System

網站鏈接：https://colors.eva.design/

Eva Design System 是一個基于深度學習算法的配色網站。適用于給我們的產品或品牌生成一個系統的配色方案。右上角可以切換淺色模式和深色模式的對比。

5. Color Hunt

網站鏈接：https://colorhunt.co/

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

文章來源：優設網     作者：友設青年

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

前文的原子設計中我曾經講過，原子是構成所有元素的最小單元，沒有辦法再被細分。它通常對應著產品設計中的通用樣式及構成組件的最小顆粒。而顏色，作為整個設計系統中極為重要的原子之一，在心智模型中占據了關鍵的地位。

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

接下來，我結合公司目前的業務CROV Dropshipping（以下簡稱DS），來進行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發。

大綱走起：

• 業務背景
• 為什么我們需要色彩體系
• 如何創造一套色彩體系
• WCAG無障礙測試

業務背景

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

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

1. 對于業務

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

而且用色本身的隨意也導致研發還原結果的不統一，一處地方色彩各異的現象比比皆是。

因此，我們需要基于我們自身的業務特征來產出一套足夠完善的色彩體系，讓業務從用色上達成基本的一致統一。

2. 對于設計師

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

增加決策

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

其實這和不用網格系統來布局是一個道理。（注：網格系統是一種能夠極大提升布局效率的方法，后面會講～）

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

缺乏秩序和邏輯性

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

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

難以復用

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

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

如何創建一套色彩體系？

Alipay Design團隊提過：

以同色系配色為主導，多色搭配為輔。

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

接下來我以DS項目為例進行色彩體系探索——

首先，所有的色彩模型統一采用HSB模型進行，正如Ant Design設計團隊說的那樣，這個模型利于調整色彩時對顏色有明確的心理預期，同時便于團隊溝通。

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

1. 品牌色

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

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

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

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

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

后續我們的顏色體系就在彩帶上的24個顏色上面進行提取。

3. 品牌色同色系配色

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

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

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

當S飽和度變化時（明色區域），S值以S/5的結果值為一個增量進行遞減，B值以(100-B)/5的結果值為一個增量進行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個增量分別是16和0。

品牌色在明色區的下兩個色階對應的HSB參數就是（250，64，100），（250，48，100），以此類推。

而當B明度產生變化時（暗色區域），S值以(100-S)/5的結果值為一個增量進行遞增，而B值以B/5的結果值為一個增量進行遞減。得出的兩個增量分別為4和20。

品牌色在暗色區的下兩個顏色對應的HSB參數即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

根據這兩個定義規則推導出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。

4. 定義輔助色

我們使用品牌色來傳達品牌價值，還需要輔助色來滿足多樣化業務場景的需要，對用戶進行不同的情緒引導，同時也可以緩解用戶對單一主色產生的視覺疲勞。

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

結果見下：

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

類似色

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

中差色

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

對比色

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

互補色

互補色即色相相差180度左右的顏色，屬于高強度對比色。最后得出的H70偏綠，這里同樣進行了色相校正，將其調整為H55。

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

5. 感官明度校正

感官明度校正方法來自支付寶設計團隊，這是是確認輔助色的最后關鍵一環。每種顏色都有屬于自己的“感官明度”，即發光度。品牌色即輔助色的發光度不一致，就會導致視覺上會有明顯的明暗差別。所以，我們需要通過發光度來進行最終的顏色校正。

明度較高的灰色意味著高發光度，明度較低則意味著低發光度。保持品牌色發光度不變，我們對其他輔助色進行微調。

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

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

6. 輔助色的同色系配色

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

7. 定義文本色

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

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

WCAG無障礙測試

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

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

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

WCAG顏色對比度無障礙的兩個標準分別為：「1.4.3條例：最小對比度標準」和「1.4.6條例：加強對比度標準」，分別對應著AA級和AAA級。

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

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

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

這兩個條例被大廠們廣泛運用到了產品的顏色標準當中。

比如MD規范中的文本移動性規范標準中的數據就是來自WCAG的1.4.3條例標準。

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

1. 顏色對比度驗證

那該如何驗證我們的顏色符合這倆標準呢？

easy。這里直接上個網址，https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值，即可得到最終的對比度數據。比如我錄入了白色和一級文本色數值，最后的12.28即兩者的對比度，嗯，達到了AAA級標準。

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

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

最后

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

文章來源：優設網     作者：轉行人的設計筆記

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

轉自：站酷.         作者：絲絨Store

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

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

“知己知彼”說明了解自己和競爭對手的重要性，“知天知地”則強調了了解行業競爭環境的重要性。能通過競品分析達到知己知彼、知天知地，是設計師的必備技能。

什么是競品分析

競品分析是對市場上存在直接或間接競爭關系的優質產品，進行分類、組織、對比、刨析，總結競品、以及自己產品的優勢和不足，為下一步決策提供幫助。競品分析維度包含但不限于市場調研、盈利模式、戰略定位、產品功能、交互流程、頁面框架、視覺表現、文案內容、運營方式等。

競品分析和市場分析、產品分析、產品體驗分析的關系如下：

競品分析的作用

對設計師來說，競品分析在了解行業現狀、熟悉功能、了解競爭對手、了解用戶習慣、明確自己產品定位等方面都有幫助，具體如下：

競品分析有這么多好處，那么設計師該如何做競品分析？

設計師如何做競品分析

1.明確競品分析的目標

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

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

大多數工作流程中，設計師進行競品分析一般有以下幾種場景：

場景一：在產品需求確認之前，通過競品分析對某功能進行調研，了解行業中該功能的具體設計。

如設計師了解到產品計劃對帖子詳情頁面進行改版，產品需求還沒確認。此時進行競品分析的目的可以是：了解競品帖子詳情頁面的設計共有哪幾類表達方式，每一類表達方式的優缺點各是什么。

場景二：.在產品需求確認之后，通過分析產品需求，推導出設計目標。此時競品分析是為產出能滿足設計目標的方案服務的。

如產品的設計需求是“提高帖子詳情頁的點贊數、留言數、評論回復數”。此時推導出的設計目標可能是“營造詳情頁互動氛圍、提高回復評論的效率、減少操作步驟”，對應的競品分析目的可以是“總結競品營造社區互動氛圍、提高活躍度的方式。掌握競品回復評論功能中操作步驟少、效率高的設計方式及總結背后原因。”

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

場景四：競品的動態跟進，主要是跟進競品的迭代情況，以保持長期的“知彼”狀態?？梢远ㄆ冢ㄈ?周或一個月）對競品迭代信息進行一次整理。App Store或七麥數據等網站可以查到競品每個版本的迭代內容。

2.選擇合適的競品

競品可以選擇直接競品或間接競品。直接競品指市場環境、商業模式、目標用戶、產品功能都相似的產品。間接競品可以是市場環境和目標用戶相似，但商業模式和產品功能當前不同、未來可能相同的產品。如果只對產品交互流程、頁面框架、視覺表現等進行分析，還可以選取功能相似，或者目標用戶相似，用戶體驗好的產品進行分析。

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

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

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

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

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

2.了解競品用戶畫像的方式有：競品官網、移動觀象臺、百度指數、艾瑞咨詢等網站。

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

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

競品畫布

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

適用條件：

1.競品畫布可以用在競品分析之初，用來梳理競品分析的思路，是競品報告的MVP（最小可用產品）2.競品畫布包含競品分析的6個關鍵步驟，可以讓新手快速上手競品分析。

操作步驟：

按照競品畫布模板上的問題依次的分析解答。競品畫布中包含了SWOT分析，注意優勢、劣勢是對產品或公司內部的分析，而機會和威脅是對外部環境的分析。另外，在分析第3點分析維度時，建議結合分析目標說明選擇這些方式的理由。

優點：競品畫布相對其他方法來說視角更全面，可以結合其他分析方法一起使用。

缺點：對UI/UE來說，針對性不夠強。

矩陣分析法

矩陣分析法又稱知覺圖，主要是通過二維矩陣分析2個關鍵要素，以了解自己和產品的定位及競爭優勢。

適用條件：

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

2. 設計師還可以用矩陣分析法分析競品的視覺風格，以輔助定位自身產品的視覺風格。如下圖為視頻app logo風格的矩陣分析

操作步驟：

（1）確定兩個關鍵競爭要素。這兩個競爭要素應該是用戶最會關注、會影響用戶決策的關鍵屬性，如價格和配置。

如果是設計師用矩陣分析法來分析競品視覺風格，可選取兩對意思相反，對視覺風格有較大影響的關鍵詞。如嚴肅—活潑、扁平—擬物

（2）繪制橫縱坐標軸，把兩個對關鍵競爭要素作為橫坐標和縱坐標填入。

（3）針對競品關鍵競爭要素的表現，把競品放到4個象限的對應位置。并思考自身產品在4個象限中的位置。4個象限的空白區域可能存在機會，而4個象限中競品較多的區域，用戶群可能更廣泛，也意味同類公司更多。

優點：矩陣分析法的優點在于聚焦于關鍵的兩個要素，可以直觀的表現出用戶對自身產品和競品在關鍵要素方面的認知。

缺點：矩陣分析法的缺點是只能從兩個要素進行分析。如果要分析多個因素，可以使用雷達圖分析法。

雷達圖分析法

雷達圖分析法本身是對企業經營情況進行系統分析的一種有效方法。我們可以將它運用到互聯網產品用戶體驗分析上，用圖示化的方式對競品多個維度的優勢、劣勢作出直觀的展示。下圖為對母嬰類產品拍大肚照上傳功能進行的雷達圖分析：

適用條件：

分析競品多個維度的優勢、劣勢（一般選6個維度分析）。

操作步驟：

（1）定義分析維度

定義分析維度主要是確認從哪幾個角度分析具體功能，如選擇可用性、防錯設計、易懂、一致性等。分析維度的選取也可以參考尼爾森的十大可用性原則，具體選取什么維度應根據分析的功能來定。

（2）對競品的每個維度進行打分

定義好分析的維度后，我們依次對競品的每個維度的表現情況進行打分評估，每個維度滿分為100分。

優點：雷達圖分析法的優點是相對直觀、可以分析多個維度的優勢，劣勢。

缺點：雷達圖包含多個維度，每個維度的滿分和量級指標是不一樣的。需要分析者心中對每一個維度的滿分有個大致預期。如流暢度怎么樣算90分，怎么樣算80分？有可能同一個產品A同學認為流暢度80分，B同學認為流暢度90分，因此分析可能帶有一定的主觀性。

表格法

表格法主要是用表格來統計競品功能元素的有無。

適用條件：

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

操作步驟：

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

（2）對每一個競品的具體功能元素進行統計，若某元素存在則在表格上對應位置打勾，不存在則空著。

（3）進行分析小結。

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

優點：表格法的優點在于可以清晰展示功能細節的有無。

缺點：如果頁面元素過多會顯得雜亂，且表格中沒有顯示元素的優先級。

多級功能表格比較法

適用條件：當產品功能較復雜，要統計競品功能元素、全面了解競品概括，可用該方法。

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

優點：可以清晰的展示一級功能、二級功能、以及功能的子級。

缺點：如果層級太多，或者元素太多表格會比較龐大雜亂。

用戶路徑分析法

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

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

操作步驟：

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

（2）操作時按照：發現入口—了解功能—操作上傳—跟進操作反饋的步驟進行。

（3）記錄自己在體驗功能時的感受，如哪一個步驟覺得疑惑，哪一個步驟覺得爽。

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

優點：專注于操作流程中的細微體驗，聚焦于發現體驗問題。

缺點：自己的操作習慣不一定完全代表用戶的操作習慣，帶有一定主觀性。

產品視覺表達分析法

產品視覺表達分析指對競品某個模塊的頁面表達元素進行拆解分析，并總結每種表達方式體現的內容優先級和規律。

適用條件：適用于設計師橫向分析某個功能模塊的表達方式，及掌握每種表達方式的適用場景。

操作步驟：

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

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

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

優點：可以聚焦于單模塊的表達方式分析。

缺點：不適用于流程的縱向對比。

5Why分析法

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

適用條件：

適用于深挖某個功能表現背后的根本原因。也適用于幫助我們在做競品分析時養成透過現象看本質的思維習慣。

操作步驟：

（1）把握現狀。主要是為了確認問題，調查基本的表現、數據情況等。

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

（3）實時措施，糾正問題

（4）吸取教訓，從源頭上預防錯誤再發生

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

優點：聚焦現象背后深層原因，利于我們培養透過現象看本質的思維。

用戶體驗5要素分析法

用戶體驗5要素分析指從戰略層、范圍層、結構層、框架層、表現層5個層級，逐級的去分析。

適用條件：適用于要全面系統地了解某個產品時，對該產品進行全局分析。

操作步驟：

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

優點：分析較全面，對產品理解會比較深入。

缺點：要真正執行并好不容易，需要對用戶體驗的5個要素有比較深的理解。

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

5.了解競品的用戶反饋

除了對競品進行分析，我們還要關注競品的用戶反饋，了解競品用戶在使用產品過程中遇到的問題，了解用戶覺得競品好在哪里。要對競品的問題進行規避，對好的使用體驗進行分析并學習借鑒。

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

6.總結競品分析結論

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

客觀分析的結論如行業市場布局情況、競品數據情況、界面操作反饋、產品包含的功能點（普遍功能、特色功能、實現程度如何）等。主觀分析的結論如競品的可用性、易用性、操作體驗等。

總結

競品分析是通過分析競品，得出要解決的問題的結論過程。所以，了解自身產品當前處在哪個階段，有什么問題相當重要。通過當前問題推導競品分析目標，再跟進競品分析目標靈活運用分析方法。競品分析方法可以有很多，但確認好分析目標才是關鍵。

參考文獻：

《有效競品分析：好產品必備的競品分析方法論》——作者：張在旺

《步步為贏 交互設計全流程解析》——作者：董尚昊

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

轉自：站酷

作者：小夕看太陽 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

圖標在UI設計體系中，是重要......

（此處省略1000字）

直接上圖！

上圖是我以前繪制的一套圖標作品，

感興趣的話就一起來了解一下我平時是怎么創作一套圖標的吧~

制作過程

1、搜集+臨摹+原創

積累素材是設計師必備的“基本功”，同時也是“職業病”。

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

下面給大家隨機展示一些我平時繪制的圖標。

除了繪制圖標以外，我平時也喜歡繪制一些其他的圖案。

2、反復打磨

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

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

需要強調的是，這一次圖標的繪制，有一個特殊的地方，其中一個圖標是有實物的。（左：實物圖；右：對應圖標）

3、圖標插件化

最后，將圖標上傳阿里的iconfont網站，制作成字體圖標。

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

制作過程就是給每個圖標賦予關鍵字，然后利用正則表達式，可以方便的搜索所有圖標。

不過這個步驟我就不詳細解釋了，因為

轉自：站酷

作者：灰色執照 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務