前期分析

1.產品用色

以金融產品為例，APP在改版時先需要確認主色是否需要修改。

主色的修改可以使APP在視覺上有一個非常大的變動，對老用戶的認知會有一個很大的改變；在此基礎上更新輔助色等，從而確立和優化新的品牌顏色DNA；在未來改版時也有據可依。

不過，貿然改變主色也是件很有風險的事情。在用戶對此產品印象不深的時候貿然修改主色，或者是每次大的改版都頻繁的修改顏色，都會增加用戶的使用成本且不能在用戶心中樹立很好的品牌認知。

在舊版本主色為藍色的情況下，新版本還需不需要修改主色，可以進行一系列的調查分析。

2.調查數據

調查顯示，大多數人認為藍色是他們最喜歡的顏色。藍色被認為是全球最安全的顏色。

來自NICK BABICH的數據

來自NICK BABICH的數據

通過相關數據，得出的結果是藍色非常匹配金融產品；那麼分析調查結果，可以得出更詳細的說明。

「經過分析，主色依然以藍色為主。但會進行優化和微調。

藍色象徵著：冷靜、理智、沉穩、廣闊、潔凈、智慧、誠實。與核心關鍵詞相對應，能很好的體現出品牌調性，與金融產品非常契合。商業設計中，強調科技、效率的商品或企業形象，大多選用藍色當標準色、企業色。

藍色，代表重視人與人之間的信賴關係，給人一種創新的感覺；通常，公司使用藍色是因為它與技術和創新聯繫在一起。」

尋找主色

方法一：情緒板選取

1.根據產品屬性、產品內容、slogan、品牌形象特點以及已知信息等總結出主要關鍵詞；並從中延展出相關的衍生關鍵詞加以輔助。

核心關鍵詞：金融、供應鏈、安全

衍生關鍵詞：金錢、科技感、品質感、靈活性、融合、鏈接、信賴、高效、穩重、專業性。

其他關鍵詞：輕質感、便捷性、直觀的、差異性、版塊化、情感化、呼吸感、冷靜、沉著、理智、舒適、留白。

2.將總結出的關鍵詞進行梳理分類，並分析出心理預期以及視覺物化所需的元素，便於尋找圖片，可以製作情緒板方便查看。

第一組：金錢、科技感、品質感、靈活性

心理預期：品質高端、流暢直觀

視覺物化：金幣鈔票、機器人、跑車、建築、咖啡廳、紋理、天空、海洋、雲彩

第二組：融合、連接、信賴

心理預期：漸變、活力、舒適、整體性

視覺物化：水滴、細胞、圓形、鏈條、繩、握手、對話、朋友

第三組：高效、穩重、專業性

心理預期：簡潔、突出重點、穩重、特定元素

視覺物化：卡片、陰影、放大字體、留白、防盜門、醫生、護士、專業設備

3.圖庫中篩選出合適的，不同色相的藍色圖片；將圖片進行晶格化或模糊處理作為色板備選；從中可以選出主色並進行優化，作為設計風格的導向。

方法二：同色系產品對比

1.整理主流的以藍色為主色的APP（可以是非競品）進行篩選、比對、尋找規律，列出其色相、飽和度、明度等數值。

2.對比新舊主色，分析出新版顏色改進的地方與優點，作為後期審查時的解釋說明。

舊版主色

①舊版主色對比後發現在色相、飽和度兩項數值相比之下都不高，整體偏暗偏灰，顏色發舊。

②雖然比較「耐看」，即使長時間使用眼睛也很難疲勞。但對於金融產品來說，用戶並不會像使用資訊類、社交類APP那樣頻繁。

③設計中會使用大量的留白。搭配淺色發暗的主色沒有辦法很好的突出品牌感。作為按鈕或是icon沒辦法做到十分突出。

新版主色

①新版主色在色相、飽和度、明度都有提高；整體感覺更亮更流行。

②新主色給人感覺更加厚重，會增加用戶的安全感。

③頁面中，新主色作為按鈕和icon更加醒目，更有品牌感；顏色的延展性更高。

其他方法

我們可以從一些設計網站，或者是自己的收藏中獲取靈感。設計往往是偏感性的，在遵從理性方法的基礎上，我們可以適當的跳出束縛，運用自己的美感去尋找一些不同的顏色。

花瓣、dribbble、behance、pinterest等等，都可以找到豐富的資源供我們參考。

這裡推薦一款谷歌插件「Site Palette」，可以自動吸取網站的主要顏色；還可以幫助我們建立色板，以及尋找相關配色的圖片；搜索到的顏色也可以直接下載，sketch和Adobe軟體都可以下載使用。

(可以直接在谷歌瀏覽器的擴展程序中搜索到，會有簡易教程。)

方法總結

上面列舉出了一些方法，簡單分析下其中的優缺點。

方法一優點：通過關鍵詞、尋找符合圖片、製作情緒板等步驟一步步分析出範圍，可選顏色範圍比較大。提取出的顏色符合預期，邏輯清晰，有理有據。

方法一不足：整理出的色彩範圍與前期關鍵詞的提取、搜集到的圖片、晶格化的效果關係很大；且選擇出的顏色往往並不能直接使用，需要進一步細化。(畢竟從晶格化效果的小方格中提取出的顏色並不一定能達到百分百滿意。) 設計師選取顏色的主觀性很高，但縮小了選擇範圍，可視為選色的導向。

方法二優點：通過搜集其他成熟產品的主色，列舉出對應數值，觀感上更加直觀；通過比較我們可以很快的發現其特點；且顏色的範圍也被大大縮小，在框架內選取主色更加穩妥，效率更高。

方法二不足：既然是在框架內選擇顏色，那麼我們的顏色就被「框」了起來，在有限的範圍內選取主色增加了色彩相似的可能，品牌特色會降低；其次就是我們在搜集其他產品主色的時候可能會因為一些原因導致色差的產生，但都是在可控範圍內。

所以，在設定主色的時候，可以將「方法」和「感性」相結合；靈活運用情緒板或對比等方法，在此基礎可以加上自己的想法。比如：主色的色相可以加大（偏紫色，增加神秘感）；也可以減小色相（顏色偏青，使顏色更年輕有活力）等等。

色彩延展

主色確定之後，我們要尋找一些不同的輔助色來和主色搭配。

主體顏色以藍色為基準，通過調試互補色、鄰近色等方法獲得相應的輔助色。輔助色的運用，可以更好地突出頁面中的主題，讓頁面更有層次感；也使得頁面色彩更豐富，避免了顏色單一的問題。

輔助色

選出的主色「#1482ff」以此為主導，色相H數值±15 (360/24) 可以得出24色相環的全部顏色。從中我們可以找出互補色、鄰近色等。

按照自己的主色建立了色相環，並從中找出了互補色和鄰近色，我們就擁有了新的六種顏色可選擇。

我們需要從中挑選出合適的顏色優化並作為輔色，以應對界面中不同的位置和細節。

最終選取的輔助色為：

中性輔助色

中性輔助色常常用在字體或是線框顏色上。設計中應極力避免使用純黑。我們可以在純黑色的基礎上，在明度數值處加上相等數值，得出四種灰色來作為備選。

在設計時，為了避免選取的中性輔助色的色彩在頁面中過於單一，我們可以脫離其範疇，適當加入色相和飽和度，來作為新的輔助色備選。

比如：色相為主色色相212，飽和度可以相加統一數值20。

之後，我們要結合其他輔助色，給APP中的主要文字、次要文字、可交互文字、錯誤信息文字、禁用文字等分別賦予上對應的顏色。比如說：主要文字可以用主色或者是明度為20的深色；禁用文字可以用明度為80的淺色灰等等。

建立顏色庫

我們可以在色盤的24種顏色中，選擇幾種頁面中會用到的顏色，來進行顏色庫的建立。這裡我選了12種顏色。

可以通過網站：https://coolors.co 輸入選擇的顏色數值，會自動幫助設計師建立色板；去掉過深的顏色，得到最終色板。

也可以在Material Design官網中

https://material.io/design/color/the-color-system.html#tools-for-picking-colors，輸入顏色進行色板的製作。

顏色整理

主要顏色

icon涉及顏色

背景涉及顏色

字體涉及顏色

個人認為，建立顏色系統或是設計規範是為了讓設計師更快、更高效的完成特定任務；它為設計師制定了一個範圍，一個標準，大大提高了設計師的工作效率；但往往有些時候，設計師自身的直觀感覺也非常重要；在大體框架內，做設計時也可加入些自己的不同想法。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！