傾聽色彩的聲音 輕松駕馭網頁與產品配色

　　前言

　　色彩是一個網站的情緒表達方式或者說是性格特征的體現，每種顏色都有著屬於自己的聲音。作為一種視覺元素，色彩是很難被量化被衡量的，也很難用理性的角度去分析和闡述它，我現在試著用另外一個角度去試圖衡量網頁的色彩，一種嘗試。從最基礎的色彩本質、色彩搭配形式、及色彩對用戶的潛在影響和心理暗示等著手，去分析色彩，讀懂色彩，讓色彩幫設計師說話。

　　一、色彩的基礎知識

　　色彩的三大要素

　　1.色相

　　我們最常見的色譜“虹”就是把顏色按照“ 紅 橙 黃 綠 青 藍 紫 ”依次過渡漸變，色相兩端分別是暖色、冷色中間為中間色或中型色。

　　2.明度

　　明度就是色彩的明暗差別，如深紅、大紅以及粉紅等。

　　3.飽和度

　　飽和度是指色彩的鮮艷程度，也稱色彩的純度。

　　二、不可思議的色彩魔力

　　1.色彩有魔力，選色需謹慎!

　　快餐店給我們的印象一般是座位很多，效率很高，顧客吃完就走，不會停留很長時間。有人喜歡和朋友約在快餐店碰面，但其實快餐店並不適合等人。這是因為很多快餐店的裝潢以桔黃色或紅色為主，這兩種顏色雖然有使人心情愉悅、興奮以及增進食欲的作用，但也會使人感覺時間漫長。如果在這樣的環境中等人，會越來越煩躁。

　　請兩個人做一個實驗，讓其中一人進入粉紅色壁紙、深紅色地毯的紅色系房間，讓另外一人進入藍色壁紙、藍色地毯的藍色系房間。不給他們任何計時器，讓他們憑感覺在一小時後從房間中出來。結果，在紅色系房間中的人在40~50分鐘後便出來了，而藍色系房間中的人在70~80分鐘後還沒有出來。有人說，這是因為紅色的房間讓人覺得不舒服，所以感覺時間特別漫長。確實有這個原因，但也不盡然。最主要的原因是人的時間感會被周圍的顏色擾亂。同樣道理，高血壓的人忌紅色。

　　再舉個例子，在時下非常流行的休閒運動潛水中，人需要攜帶氧氣瓶。一個氧氣瓶大約可以持續40~50分鐘供氧，但是大多數潛水者將一個氧氣瓶的氧氣用光後，卻感覺在水中只下潛了20分鐘左右。海洋裡的各色魚類和漂亮珊瑚可以吸引潛水者的注意力，因此會感覺時間過得很快，這是原因之一。更重要的是，海底是被海水包圍的一個藍色世界。正是藍色麻痺了潛水者對時間的感覺，使他感覺到的時間比實際的時間短。(部分資料來自-《每天懂點色彩心理學》)

　　2.聽見色彩的聲音

　　以上故事和實驗都證明了，顏色是可以左右用戶的情緒，也可以影響用戶判斷的。既然色彩潛意識在影響這著我們，那設計師必須學會善用色彩，在設計的時候，用色彩去正確傳達產品的本質和內涵。當色彩被正確傳達後，便能與用戶產生心靈共鳴，產品也就能更深入人心。

　　黃色：青春、樂觀、豁達。常被作為點睛之筆。

　　紅色：活力、速度、緊迫感，常用於促銷打折甩賣等。

　　藍色：信任、安全、有底蘊，常用於企業、銀行、安全中心等行業機構。

　　綠色：生命力、輕松、天然、無污染，常用於保健品等行業。

　　橙色：積極、進取、活力，阿裡巴巴色也是橙色，常用於喚起行動，如button的顏色也常用橙色。

　　粉色：浪漫、女人，常用於女性消費行業，女性產品等。

　　黑色：影響力、時髦、嚴肅，常用於奢侈品營銷等。

　　紫色：安撫、冷靜、神秘，常用於美妝或抗老的女性產品設計中等。

　　當我們了解了顏色後，就能更加准確的掌握我們的頁面風格的定位，用顏色去闡述你的產品。經常做“腦部運動”，聯想游戲等。

　　3.色彩與營銷、品牌

　　每種特定的行業，都有相似的產品色彩傾向性

　　大部分知名品牌的logo傾向於用色彩相近的色調

　　三、色彩搭配

　　以下以banner為例，簡單剖析下色彩的搭配技巧及色彩搭配組合方式以及搭配呈現的視覺效果。

　　單色搭配：由一種色相的不同明度組成的搭配，這種搭配很好的體驗了明暗的層次感。

　　近似色搭配：相鄰的兩到三個顏色稱職為近似色。如下圖(橙色/褐色/黃色)，這種搭配比較讓人賞心悅目，低對比度，較和諧。

　　補色搭配：色環中相對的兩個色相搭配。顏色對比強烈，傳達能量、活力、興奮等意思，補色中最好讓一個顏色多，一個顏色少。如下圖(紫色和黃色)。

　　分裂補色搭配：同時用補色及類比色的方法確定顏色關系，就稱為分裂補色。這種搭配，既有類比色的低對比度，又有補色的力量感，形成一種即和諧又有重點的顏色關系，如下圖，紅色文字就顯得特別的铿锵有力，特別突出。

　　原色的搭配：大部分是在兒童產品上，色彩明快，這樣的搭配在歐美也非常流行，如藍紅搭配，frickr的logo以及 麥當勞的logo色與主色調紅黃色搭配等。

　　四、如何准確定位你的色彩

　　前面分析的是通過顏色去感覺情緒。這裡簡單寫，如何根據產品去捕捉色彩，也就是所謂的MOOD BOARD(情緒版)。

　　情緒版是指對要設計的產品以及相關主題方向的的色彩，影像，圖片等其他材料的收集，從而引起某些情緒反應， 以此作為設計方向或者是形式的參考。(具體請參考情緒版(Mood board)操作流程的新思考——曉千)

　　1.原生關鍵詞選擇

　　首先，通過對產品的理解與認識，以及用戶調研等得出體驗關鍵詞(Experience Keywords)。

　　2.衍生關鍵詞

　　針對所得到的關鍵詞，擴容信息，通過頭腦風暴畫出關鍵詞的思維導圖，尋找擴展關鍵詞。

　　3. 收集相關圖片，提取圖片生成情緒版

　　通過“原生關鍵詞”和“衍生關鍵詞”，通過網絡渠道，收集了大量的對應的素材圖並配合定性訪談。

　　4. 衍生關鍵詞的分析——分維诠釋

　　5. 對情緒版進行“色彩分析”和“質感分析”

　　色彩提取工具：http://kuler.adobe.com/#create/fromanimage

　　總結

　　色彩是種感覺，當我們學會讀懂色彩，聽到他們的聲音，就可以做到熟能生巧，跟隨著流行的趨勢去游刃有余的駕馭它。我的見解大多也是基於前人的分享總結，同時結合了自我的一些觀點。總之，多看，多想以及多臨摹，都可以幫助設計師在色彩感覺訓練上事半功倍。成功的配色方案，一定是理性+感性的結合，所以設計師要做個感情細致，情感豐富的感性之人，題外話：)。

　　教程來源：阿裡巴巴UED