傾聽色彩的聲音 網(wǎng)頁與產(chǎn)品的配色研究
發(fā)布時間:2012-07-20 14:23:57 作者:佚名
我要評論
彩是一個網(wǎng)站的情緒表達方式或者說是性格特征的體現(xiàn),每種顏色都有著屬于自己的聲音

色彩是一個網(wǎng)站的情緒表達方式或者說是性格特征的體現(xiàn),每種顏色都有著屬于自己的聲音。作為一種視覺元素,色彩是很難被量化被衡量的,也很難用理性的角度去分析和闡述它,我現(xiàn)在試著用另外一個角度去試圖衡量網(wǎng)頁的色彩,一種嘗試。從最基礎的色彩本質(zhì)、色彩搭配形式、及色彩對用戶的潛在影響和心理暗示等著手,去分析色彩,讀懂色彩,讓色彩幫設計師說話。
一、色彩的基礎知識
色彩的三大要素
1.色相
我們最常見的色譜“虹”就是把顏色按照“ 紅 橙 黃 綠 青 藍 紫 ”依次過渡漸變,色相兩端分別是暖色、冷色中間為中間色或中型色。

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

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

1.色彩有魔力,選色需謹慎!
快餐店給我們的印象一般是座位很多,效率很高,顧客吃完就走,不會停留很長時間。有人喜歡和朋友約在快餐店碰面,但其實快餐店并不適合等人。這是因為很多快餐店的裝潢以桔黃色或紅色為主,這兩種顏色雖然有使人心情愉悅、興奮以及增進食欲的作用,但也會使人感覺時間漫長。如果在這樣的環(huán)境中等人,會越來越煩躁。
請兩個人做一個實驗,讓其中一人進入粉紅色壁紙、深紅色地毯的紅色系房間,讓另外一人進入藍色壁紙、藍色地毯的藍色系房間。不給他們?nèi)魏斡嫊r器,讓他們憑感覺在一小時后從房間中出來。結(jié)果,在紅色系房間中的人在40~50分鐘后便出來了,而藍色系房間中的人在70~80分鐘后還沒有出來。有人說,這是因為紅色的房間讓人覺得不舒服,所以感覺時間特別漫長。確實有這個原因,但也不盡然。最主要的原因是人的時間感會被周圍的顏色擾亂。同樣道理,高血壓的人忌紅色。
再舉個例子,在時下非常流行的休閑運動潛水中,人需要攜帶氧氣瓶。一個氧氣瓶大約可以持續(xù)40~50分鐘供氧,但是大多數(shù)潛水者將一個氧氣瓶的氧氣用光后,卻感覺在水中只下潛了20分鐘左右。海洋里的各色魚類和漂亮珊瑚可以吸引潛水者的注意力,因此會感覺時間過得很快,這是原因之一。更重要的是,海底是被海水包圍的一個藍色世界。正是藍色麻痹了潛水者對時間的感覺,使他感覺到的時間比實際的時間短。(部分資料來自-《每天懂點色彩心理學》)
2.聽見色彩的聲音
以上故事和實驗都證明了,顏色是可以左右用戶的情緒,也可以影響用戶判斷的。既然色彩潛意識在影響這著我們,那設計師必須學會善用色彩,在設計的時候,用色彩去正確傳達產(chǎn)品的本質(zhì)和內(nèi)涵。當色彩被正確傳達后,便能與用戶產(chǎn)生心靈共鳴,產(chǎn)品也就能更深入人心。
黃色:青春、樂觀、豁達。常被作為點睛之筆。
紅色:活力、速度、緊迫感,常用于促銷打折甩賣等。
藍色:信任、安全、有底蘊,常用于企業(yè)、銀行、安全中心等行業(yè)機構(gòu)。
綠色:生命力、輕松、天然、無污染,常用于保健品等行業(yè)。
橙色:積極、進取、活力,阿里巴巴色也是橙色,常用于喚起行動,如button的顏色也常用橙色。
粉色:浪漫、女人,常用于女性消費行業(yè),女性產(chǎn)品等。
黑色:影響力、時髦、嚴肅,常用于奢侈品營銷等。
紫色:安撫、冷靜、神秘,常用于美妝或抗老的女性產(chǎn)品設計中等。
當我們了解了顏色后,就能更加準確的掌握我們的頁面風格的定位,用顏色去闡述你的產(chǎn)品。經(jīng)常做“腦部運動”,聯(lián)想游戲等。

每種特定的行業(yè),都有相似的產(chǎn)品色彩傾向性




三、色彩搭配
以下以banner為例,簡單剖析下色彩的搭配技巧及色彩搭配組合方式以及搭配呈現(xiàn)的視覺效果。
單色搭配:由一種色相的不同明度組成的搭配,這種搭配很好的體驗了明暗的層次感。





前面分析的是通過顏色去感覺情緒。這里簡單寫,如何根據(jù)產(chǎn)品去捕捉色彩,也就是所謂的MOOD BOARD(情緒版)。
情緒版是指對要設計的產(chǎn)品以及相關(guān)主題方向的的色彩,影像,圖片等其他材料的收集,從而引起某些情緒反應, 以此作為設計方向或者是形式的參考。(具體請參考情緒版(Mood board)操作流程的新思考——曉千)
1.原生關(guān)鍵詞選擇
首先,通過對產(chǎn)品的理解與認識,以及用戶調(diào)研等得出體驗關(guān)鍵詞(Experience Keywords)。
2.衍生關(guān)鍵詞
針對所得到的關(guān)鍵詞,擴容信息,通過頭腦風暴畫出關(guān)鍵詞的思維導圖,尋找擴展關(guān)鍵詞。
3. 收集相關(guān)圖片,提取圖片生成情緒版
通過“原生關(guān)鍵詞”和“衍生關(guān)鍵詞”,通過網(wǎng)絡渠道,收集了大量的對應的素材圖并配合定性訪談。
4. 衍生關(guān)鍵詞的分析——分維詮釋
5. 對情緒版進行“色彩分析”和“質(zhì)感分析”

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

AudioContext 實現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實現(xiàn)音頻可視化,要實現(xiàn)音頻可視化得先實現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時的基礎,需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強團隊的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道,當一個團隊開始指定并實行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團隊遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護性,需要的朋友可以參考下2017-01-21
- 這篇文章主要為大家詳細介紹了響應式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04
在網(wǎng)頁標題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗的朋友確很少,在安裝過程中總會出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個時間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29



