本文以金融產(chǎn)品為例，來(lái)跟大家討論一下在app改版的時(shí)候，它的顏色應(yīng)該怎么確定和修改~

前期分析

1. 產(chǎn)品用色

以金融產(chǎn)品為例，APP在改版時(shí)先需要確認(rèn)主色是否需要修改。

主色的修改可以使APP在視覺(jué)上有一個(gè)非常大的變動(dòng)，對(duì)老用戶(hù)的認(rèn)知會(huì)有一個(gè)很大的改變；在此基礎(chǔ)上更新輔助色等，從而確立和優(yōu)化新的品牌顏色DNA；在未來(lái)改版時(shí)也有據(jù)可依。

不過(guò)，貿(mào)然改變主色也是件很有風(fēng)險(xiǎn)的事情。在用戶(hù)對(duì)此產(chǎn)品印象不深的時(shí)候貿(mào)然修改主色，或者是每次大的改版都頻繁的修改顏色，都會(huì)增加用戶(hù)的使用成本且不能在用戶(hù)心中樹(shù)立很好的品牌認(rèn)知。

在舊版本主色為藍(lán)色的情況下，新版本還需不需要修改主色，可以進(jìn)行一系列的調(diào)查分析。

2. 調(diào)查數(shù)據(jù)

調(diào)查顯示，大多數(shù)人認(rèn)為藍(lán)色是他們最喜歡的顏色。藍(lán)色被認(rèn)為是全球最安全的顏色。

來(lái)自NICK BABICH的數(shù)據(jù)

來(lái)自NICK BABICH的數(shù)據(jù)

通過(guò)相關(guān)數(shù)據(jù)，得出的結(jié)果是藍(lán)色非常匹配金融產(chǎn)品；那么分析調(diào)查結(jié)果，可以得出更詳細(xì)的說(shuō)明。

經(jīng)過(guò)分析，主色依然以藍(lán)色為主，但會(huì)進(jìn)行優(yōu)化和微調(diào)。

藍(lán)色象征著：冷靜、理智、沉穩(wěn)、廣闊、潔凈、智慧、誠(chéng)實(shí)。與核心關(guān)鍵詞相對(duì)應(yīng)，能很好的體現(xiàn)出品牌調(diào)性，與金融產(chǎn)品非常契合。商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技、效率的商品或企業(yè)形象，大多選用藍(lán)色當(dāng)標(biāo)準(zhǔn)色、企業(yè)色。

藍(lán)色，代表重視人與人之間的信賴(lài)關(guān)系，給人一種創(chuàng)新的感覺(jué)；通常，公司使用藍(lán)色是因?yàn)樗c技術(shù)和創(chuàng)新聯(lián)系在一起。

尋找主色

方法一：情緒板選取

（1）根據(jù)產(chǎn)品屬性、產(chǎn)品內(nèi)容、slogan、品牌形象特點(diǎn)以及已知信息等總結(jié)出主要關(guān)鍵詞，并從中延展出相關(guān)的衍生關(guān)鍵詞加以輔助。

核心關(guān)鍵詞：金融、供應(yīng)鏈、安全

衍生關(guān)鍵詞：金錢(qián)、科技感、品質(zhì)感、靈活性、融合、鏈接、信賴(lài)、高效、穩(wěn)重、專(zhuān)業(yè)性。

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

（2）將總結(jié)出的關(guān)鍵詞進(jìn)行梳理分類(lèi)，并分析出心理預(yù)期以及視覺(jué)物化所需的元素，便于尋找圖片，可以制作情緒板方便查看。

第一組：金錢(qián)、科技感、品質(zhì)感、靈活性。

心理預(yù)期：品質(zhì)高端、流暢直觀

視覺(jué)物化：金幣鈔票、機(jī)器人、跑車(chē)、建筑、咖啡廳、紋理、天空、海洋、云彩

第二組：融合、連接、信賴(lài)

心理預(yù)期：漸變、活力、舒適、整體性

視覺(jué)物化：水滴、細(xì)胞、圓形、鏈條、繩、握手、對(duì)話、朋友

第三組：高效、穩(wěn)重、專(zhuān)業(yè)性

心理預(yù)期：簡(jiǎn)潔、突出重點(diǎn)、穩(wěn)重、特定元素

視覺(jué)物化：卡片、陰影、放大字體、留白、防盜門(mén)、醫(yī)生、護(hù)士、專(zhuān)業(yè)設(shè)備

（3）圖庫(kù)中篩選出合適的，不同色相的藍(lán)色圖片，將圖片進(jìn)行晶格化或模糊處理作為色板備選，從中可以選出主色并進(jìn)行優(yōu)化，作為設(shè)計(jì)風(fēng)格的導(dǎo)向。

方法二：同色系產(chǎn)品對(duì)比

（1）整理主流的以藍(lán)色為主色的APP（可以是非競(jìng)品）進(jìn)行篩選、比對(duì)、尋找規(guī)律，列出其色相、飽和度、明度等數(shù)值。

（2）對(duì)比新舊主色，分析出新版顏色改進(jìn)的地方與優(yōu)點(diǎn)，作為后期審查時(shí)的解釋說(shuō)明。

（3）舊版主色

1. 舊版主色對(duì)比后發(fā)現(xiàn)在色相、飽和度兩項(xiàng)數(shù)值相比之下都不高，整體偏暗偏灰，顏色發(fā)舊。
2. 雖然比較“耐看”，即使長(zhǎng)時(shí)間使用眼睛也很難疲勞。但對(duì)于金融產(chǎn)品來(lái)說(shuō)，用戶(hù)并不會(huì)像使用資訊類(lèi)、社交類(lèi)APP那樣頻繁。
3. 設(shè)計(jì)中會(huì)使用大量的留白。搭配淺色發(fā)暗的主色沒(méi)有辦法很好的突出品牌感。作為按鈕或是icon沒(méi)辦法做到十分突出。

（4）新版主色

• 新版主色在色相、飽和度、明度都有提高，整體感覺(jué)更亮更流行。
• 新主色給人感覺(jué)更加厚重，會(huì)增加用戶(hù)的安全感。
• 頁(yè)面中，新主色作為按鈕和icon更加醒目，更有品牌感，顏色的延展性更高。

（5）其他方法

我們可以從一些設(shè)計(jì)網(wǎng)站，或者是自己的收藏中獲取靈感。設(shè)計(jì)往往是偏感性的，在遵從理性方法的基礎(chǔ)上，我們可以適當(dāng)?shù)奶鍪`，運(yùn)用自己的美感去尋找一些不同的顏色。

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

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

（可以直接在谷歌瀏覽器的擴(kuò)展程序中搜索到，會(huì)有簡(jiǎn)易教程。)

（6）方法總結(jié)

上面列舉出了一些方法，簡(jiǎn)單分析下其中的優(yōu)缺點(diǎn)。

方法一優(yōu)點(diǎn)：通過(guò)關(guān)鍵詞、尋找符合圖片、制作情緒板等步驟一步步分析出范圍，可選顏色范圍比較大。提取出的顏色符合預(yù)期，邏輯清晰，有理有據(jù)。

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

方法二優(yōu)點(diǎn)：通過(guò)搜集其他成熟產(chǎn)品的主色，列舉出對(duì)應(yīng)數(shù)值，觀感上更加直觀；通過(guò)比較我們可以很快的發(fā)現(xiàn)其特點(diǎn)；且顏色的范圍也被大大縮小，在框架內(nèi)選取主色更加穩(wěn)妥，效率更高。

方法二不足：既然是在框架內(nèi)選擇顏色，那么我們的顏色就被「框」了起來(lái)，在有限的范圍內(nèi)選取主色增加了色彩相似的可能，品牌特色會(huì)降低；其次就是我們?cè)谒鸭渌a(chǎn)品主色的時(shí)候可能會(huì)因?yàn)橐恍┰驅(qū)е律畹漠a(chǎn)生，但都是在可控范圍內(nèi)。

所以，在設(shè)定主色的時(shí)候，可以將“方法”和“感性”相結(jié)合；靈活運(yùn)用情緒板或?qū)Ρ鹊确椒?，在此基礎(chǔ)可以加上自己的想法。比如：主色的色相可以加大（偏紫色，增加神秘感）；也可以減小色相（顏色偏青，使顏色更年輕有活力）等等。

色彩延展

主色確定之后，我們要尋找一些不同的輔助色來(lái)和主色搭配。

主體顏色以藍(lán)色為基準(zhǔn)，通過(guò)調(diào)試互補(bǔ)色、鄰近色等方法獲得相應(yīng)的輔助色。輔助色的運(yùn)用，可以更好地突出頁(yè)面中的主題，讓頁(yè)面更有層次感，也使得頁(yè)面色彩更豐富，避免了顏色單一的問(wèn)題。

輔助色

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

也可以通過(guò)：http://color.adobe.com/這個(gè)網(wǎng)站來(lái)輔助完成這項(xiàng)工作。

按照自己的主色建立了色相環(huán)，并從中找出了互補(bǔ)色和鄰近色，我們就擁有了新的六種顏色可選擇。

我們需要從中挑選出合適的顏色優(yōu)化并作為輔色，以應(yīng)對(duì)界面中不同的位置和細(xì)節(jié)。

最終選取的輔助色為：

中性輔助色

中性輔助色常常用在字體或是線框顏色上。設(shè)計(jì)中應(yīng)極力避免使用純黑。我們可以在純黑色的基礎(chǔ)上，在明度數(shù)值處加上相等數(shù)值，得出四種灰色來(lái)作為備選。

在設(shè)計(jì)時(shí)，為了避免選取的中性輔助色的色彩在頁(yè)面中過(guò)于單一，我們可以脫離其范疇，適當(dāng)加入色相和飽和度，來(lái)作為新的輔助色備選。

比如：色相為主色色相212，飽和度可以相加統(tǒng)一數(shù)值20。

之后，我們要結(jié)合其他輔助色，給APP中的主要文字、次要文字、可交互文字、錯(cuò)誤信息文字、禁用文字等分別賦予上對(duì)應(yīng)的顏色。比如說(shuō)：主要文字可以用主色或者是明度為20的深色；禁用文字可以用明度為80的淺色灰等等。

建立顏色庫(kù)

我們可以在色盤(pán)的24種顏色中，選擇幾種頁(yè)面中會(huì)用到的顏色，來(lái)進(jìn)行顏色庫(kù)的建立，這里我選了12種顏色。

可以通過(guò)網(wǎng)站：https://coolors.co輸入選擇的顏色數(shù)值，會(huì)自動(dòng)幫助設(shè)計(jì)師建立色板；去掉過(guò)深的顏色，得到最終色板。

也可以在Material Design官網(wǎng)中，輸入顏色進(jìn)行色板的制作。

顏色整理

主要顏色

icon涉及顏色

背景涉及顏色

字體涉及顏色

個(gè)人認(rèn)為，建立顏色系統(tǒng)或是設(shè)計(jì)規(guī)范是為了讓設(shè)計(jì)師更快、更高效的完成特定任務(wù)。它為設(shè)計(jì)師制定了一個(gè)范圍，一個(gè)標(biāo)準(zhǔn)，大大提高了設(shè)計(jì)師的工作效率。但往往有些時(shí)候，設(shè)計(jì)師自身的直觀感覺(jué)也非常重要。在大體框架內(nèi)，做設(shè)計(jì)時(shí)也可加入些自己的不同想法。

作者：FLYXMF，微信公眾號(hào)：Fly Lab

本文由 @FLYXMF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。