當用戶在使用某APP時，首先會注意到的就是產品的視覺表現，特別是產品的配色方案。

換句話說，APP的配色方案將會直接影響着用戶在使用產品時的情感。如果品牌對色彩的運用不加以克制，介面就會顯得花俏而缺少層次;相反，如果APP在配色上過於拘謹，則容易導致介面保守，難以激發用戶的情緒。

下面，Inspirr將會以泰國知名物流綜合服務商Bee express為APP設計案例：如何為品牌APP制定一套合適的配色方案，來說說如何為品牌APP制定一套合適的配色系統。

【Bee express品牌介紹】

Bee express是泰國知名物流綜合服務商，主營業務包含快遞、快運、倉配，以及速遞櫃服務等，致力為企業及個人提供高端的物流配送一體化解決方案。

APP設計案例參考：如何為品牌APP制定一套合適的配色方案

為品牌APP制定配色方案之前，首先我們需要搞清楚，每個顏色所具有的性格特徵和表達方式，以及明白每種顏色的正方面特徵，避免產品主色調的負面特徵會給品牌/產品帶來負面影響。

另外，在為品牌APP配色過程中，我們還需要注意以下問題：

☒ 高飽和度色彩容易造成視覺疲勞及產生幻覺。

☒ 低飽和度色彩則會讓介面顯得灰濛濛、非常壓抑的感覺。

☒ 沒有規律且過多的配色，會讓介面看起來非常凌亂且毫無層次，建議使用6：3：1的色彩配比。

☒ 太輕柔的色彩會分散用戶的注意力，同時給人一種沒有重點且輕飄飄的感覺。

☒ 不要將對抗色重疊容易造成視覺閃爍。

第一步：為APP定位品牌色

雖然設計是相通的，但不同設計領域的配色規則，依然存在巨大的區別。就拿更換品牌色來說，更多是根據公司商業策略進行調整，然後通過品牌視覺上的變更將訊息傳遞給消費者。

Bee express前期的主色調及視覺形象以橙黃色為主。為了不影響原有色調前期的視覺傳播，本次品牌色彩升級是在原有基礎上調整SHB數值(即色相、飽和度、明度)，讓色彩更具視覺衝擊力，保證後期產品的易用性和延展性。

APP設計案例參考

▲ 調整後的主題色使介面更加明亮清晰，為信息傳遞、引導操作，以及品牌價值都帶來更大的提升。

第二步：同色系為輔助色

產品以同色系為輔助色，既可加深品牌色的感知，讓介面看起來更有層次感，同時在介面色彩上保持一致性，給人一種協調統一的感覺。

APP設計案例參考

▲ 同色系是指與品牌色H(色相)一致，通過改變S(飽和度)與B(明度)變化所產生的色組。

使用同色系完成項目雖然能保證介面色彩的一致性，但是對於中大型項目而言會略微過於單調且缺少層次感。對此，我們需要考慮其他色彩作為輔助色，設定不同任務屬性和傳達不同情感;同時，搭配中性色(黑、白、灰)，賦予介面更多變化和層次。

第三步：提取其他顏色作為輔助色

APP設計案例參考

根據品牌色H(色相)為基礎，在色相環(如上圖)中不斷遞增、遞減15°，最終得出24個顏色。(如下圖)

APP設計案例參考

問題來了，如何從這24個顏色中選取合適的輔助色?

這需要滿足兩個條件，

❶ 與品牌色有明顯區分

❷ 色彩搭配不能過於突兀

APP設計案例參考

基於以上條件，Bee expres選取了上述三種顏色作為介面的輔助色，既能保證頁面元素不會相互衝突，更加協調有質感，又能與品牌色有明顯的區分，用在需要特彆強調某個元素時會非常有效。

最後一步，視覺統一感官校準

每種顏色都有自己的「感官明度」，即發光度，因此當我們將所有色彩都放在同一介面時，會發現由於顏色本身自帶的感官明度屬性有所區別，導致視覺上會有明顯的明暗差別，因此我們需要通過發光度的調整，來進行最終的色彩校正。

APP設計案例參考

▲ 依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色調整Hue(色相)，就可以通過無彩色系下的明度色值，並進行對比使色彩視覺感官保持一致，發現：青色和藍色屬冷色調，需加深發光度。

根據上面同色系的明度、純度對比規則，對所有定義的輔助色進行明度和純度的輸出，最終獲得輔助色色板。

APP設計案例參考

▲ 保持色相一直，通過調整飽和度和明度，並分別往淺色/深色方向按均勻數據增加，各產生5個坐標值。

APP設計案例參考

▲ 因為最左側的3種同色係，其明度過低，顏色非常接近黑色，色相在肉眼也幾乎趨於一致，因此建議刪除，並最終獲得基於品牌色推導出的全色系色階色板。

看看最終成果：

APP設計案例參考

【最後】

要制定APP設計的配色方案，往往需要從根據行業類型和視覺訴求的需要，選擇一種合適的主調色彩，作為畫面的整體色彩傾向，然後基於主色調衍生1~3種輔助色。當然，除此之外，在規劃一套標準的色彩系統時，還需要考慮中性色規範、顏色使用規範等，最終才能按照色彩組合的原則真正完成設計。