
* Facebook最初始的設計界面,那時候它還叫做thefacebook.com。當時,想要在上面開個賬戶必須有一個以.edu(哈佛大學)結尾的郵箱才行。
無心插柳也好,有意栽培也好,色彩往往能夠體現互聯網品牌的創始人的審美和喜好,而設計師對于色彩的挑選和取舍,也是完成作品中的必備環節。
Youtube設計師Marc Hemeon就曾收集了18組流行網站或產品的按鈕設計色彩,用來評估和調研色彩對于用戶心理的影響:

對應網站或產品的謎底如下:
1、Google
2、Twitter
3、Facebook
4、Microsoft
5、Pinterest
6、Yahoo
7、Instagram
8、Flickr
9、Spotify
10、Rdio
11、Svbtle
12、Medium
13、Basecamp
14、Square
15、Amazon
16、Quora
17、LinkedIn
18、Path
大部分網站或產品的按鈕色彩都不會超過3種,指向“動作”的按鈕應當統一為同一種顏色,比如Google的“搜索”按鈕是藍色,而Twitter的“注冊”按鈕則是明亮的黃色。
社交分享工具Buffer的聯合創始人Leo Widrich在博客上補充了關于色彩的一些觀點,摘錄部分內容如下。
色彩能夠幫助品牌極為簡易的建立用戶認知:

灰色:象征冷靜、中立;(蘋果、維基百科、紐約時報……)
綠色:象征健康、生命;(BP石油、食品超市whole foods、星巴克……)
藍色:象征可靠、力量;(戴爾、大眾汽車、IBM……)
紫色:象征智慧、想象;(雅虎、T-Mobile、科幻主題電視臺Syfy……)
紅色:象征血氣、年輕;(可口可樂、樂高、肯德基……)
橙色:象征歡樂、信任;(芬達、亞馬遜、火狐……)
黃色:象征溫暖、透明;(百思買、法拉利、麥當勞……)
站在消費者角度,色彩也能夠在理解和決策階段起到一定的影響作用:

黃色:吸引注意力的購物窗口;
紅色:刺激心血的緊迫感,常出現在清倉場景;
藍色:多用于銀行和商業機構里,強調安全;
綠色:讓人聯想到富裕和輕松,緩解壓力;(支付寶的信用卡還款按鈕選擇了綠色作為主色調,能夠理解原因了吧)
橙色:呼叫意味濃厚,用于創建下訂、購買、出售的行動;
粉色:服務于女性和年輕女孩的浪漫色調;
黑色:奢侈品的最佳匹配;
紫色:給人舒緩&平靜的感受,常被美容及抗衰老產品使用;
男性和女性對于色彩的喜好度有所偏差:
企業分析服務公司KISSmetrics的調查報告顯示(這份報告主要用于建議App產品的創業者在產品設計上的策略)——
女性喜愛的色彩:藍色、紫色和綠色;
女性討厭的色彩:橙色、棕色和灰色;

男性喜愛的色彩:藍色、綠色和黑色;
男性喜愛的色彩:褐色、橙色和紫色;

色彩能夠決定轉化率的差距:
美國數字營銷公司Hubspot曾經做過一場A/B Testing,用于測試不同顏色對于用戶點擊轉化造成的差異——

左右兩個測試顏面在內容上完全一直,唯一不同的是按鈕的顏色,在超過2000人次的樣本測試中,最終紅色方案的點擊率超過綠色方案的點擊率足足21%。
而在測試之前,大部分的研究員都猜測綠色方案會獲得更高的點擊,因為就直覺而言,綠色代表著通行、準許通過的意思,而紅色則更傾向于警告、阻止意味。
最后,為什么Html語言里超鏈接的默認顏色是藍色的?
因為藍色是從灰色底色中脫穎而出的最佳色調。

這個決定是由Tim Berners-Lee——萬維網的發明者做出的。在他那個年代,互聯網的第一代瀏覽器Mosaic顯示的網頁底色通常都是灰底黑字,為了讓超文本鏈接能夠更方便識別,Tim Berners-Lee將超鏈接定義為藍色并帶有下劃線的文字。
一個好的網頁設計會給用戶帶來記憶深刻,好用易用的體驗。從網頁設計的版式、信息層級、圖片、色彩等視覺方面的運用,直接影響到用戶對網站的最初感覺,而在這些內容中,色彩的配色方案是至關重要的,網站整體的定位、風格調性都需要通過顏色,給用戶帶來感官上的刺激,從而產生共鳴。
從色彩研究的方向來看,色彩分為色調、飽和度、明度三方面,顏色的運用是純色之間的關系,以及它們混合在一起的效果。我們可以從當前眾多的網絡應用中的實例,找到色彩運用的一些廣泛的色彩關系和配色方案,通過這些色彩的關系,可以作為實際工作學習中配色的指南。
單色:使用一種色調不同的飽和度與亮度

近似色:使用色盤中的鄰近色調

互補色:使用色盤中的相反色調

分割互補色:使用一個色調和兩個與它的補色鄰近色調

三分色階:使用色盤中的等距三個色調

雙互補色:使用兩個色調和它們的補色

近似互補色:使用兩個互補色調和一個顏色相近色調

中間色:使用沒有色度的顏色

突出色:在沒有色調的顏色中突出一個高飽和度的色調

暖色:使用色盤中暖色調的顏色

冷色:使用色盤中冷色調的顏色

原文地址:阿里巴巴良無限UPD團隊
形式需要思考創造,圖片素材需要學習處理,文字需要梳理編排,但網頁色彩是不是一定需要有天生的色感、豐富的理論和多年經驗沉淀才能運用自如?
當然不!
關于網頁配色
網頁配色的文章在網絡上很多,甚至有些泛濫,稍微關注過的同學應該都知道“色輪”、“色卡”等輔助性配色工具,但那更多都是從印刷介質上的色彩系統延伸出來的,不完全適用于網頁,甚至造成很大的局限,比如你會較真的通過色輪來選用網頁色彩嗎?再比如通過下面提供的配色組合,你能自由的應對一個又一個的類型相若的網頁設計需求嗎?

由于CMYK與RGB色彩模式不同,網頁的色彩呈現數量要龐大的多,選用也應該更自由,但在配色上卻常碰到設計作品偏臟、發灰、花哨等大問題,這事兒得解決。
網頁案例剖析
“網頁配色不宜超過三種。”
真理,這沒錯,但更多是從色相(赤橙黃綠青藍紫等不同顏色)上來說的。
色相差異明顯,主要色彩的選取就比較好辦,常見的有對比色、臨近色、冷暖色調互補等方式,可以簡單設定,或直接從成功作品中借鑒主輔色配比都可以,比如常見的朱紅點綴深藍、明黃點綴深綠等。
但通常,我們需要面對的設計需求在色彩分配上會有更多的問題出現:

(由于本人從事游戲網頁視覺設計工作,故案例均以游戲網頁做示意說明,其他網頁類型可以做延伸思考或僅作參閱)
如上所示,根據網頁信息的多寡,會有更多色彩區域的層級劃分和文字信息層級區分需求,那么在守住“網頁色彩(相)不超過三種”的原則下,只能尋找更多同色系的色彩來完善設計,也就是在“飽和度”和“明度”上做文章。
這也就是本文為解決這一問題所要分享的“天然”配色技巧:疊柔配色法。
疊柔配色技巧分享(這里才是正文,上面都是廢話)
這個方法非常簡單,無需知道三角函數、四則運算,無需理解色彩指數和直方圖,甚至不用了解色階曲線和亮度強弱……甚至,你可以對色彩毫無知覺。
★只需要明白三個關鍵詞:疊加、柔光和透明度(填充)。
如果連這三個關鍵詞都不甚明了,那就記住他們所在的位置(下圖):

注意:透明度與填充略有不同,填充不會影響到“混合選項”的效果,而透明度則是作用于整個圖層。
順便,花幾分鐘時間了解一下這個配色技巧的原理:

即:用純白色(#ffffff)和純黑色(#000000)通過“疊加”和“柔光”的混合模式(效果類似調整飽和度和明度),在任意一個色彩上得到最匹配的顏色(然后通過調整透明度選取最適合的輔色)。
(上圖示例中,調整疊/柔模式的黑白色塊的不同透明度(取10%到100%整數值為例)就可以得到差異較明顯的40種配色,通過這種技巧,理論上每一種顏色都可以輕易獲得無窮盡的“天然配色”,并且是“0失誤”!)
★ 由于疊加和柔光模式對圖像內的最高亮部分和最陰影部分無調整,因此該配色方法對純黑色和純白色不起作用。
設計實戰演示:
要不要像上面圖示看起來的那樣復雜?
不用,只需要理解了上面的方法,就可以忘記圖示,在你的設計工作中自由發揮!
簡單三步:
① 一個黑或白色,或黑白漸變(可以是點、線、面…甚至字體)
② 混合模式選擇疊加或柔光
③ 調整透明度(1%-100%隨意,省心的做法是直接鍵入一個整數值,比如:輕質感類頁面可以選擇20%-40%,重質感感類可以鍵入60%或以上)
如下圖:

(無論你采用何種主色,用黑白色彩疊加或柔光,你都可以輕松自如的獲得完美匹配的整套色系。)
這并不僅僅適用于色域劃分或提取幾個輔色,如下圖:字體顏色、細節線條、按鈕漸變、邊角高光、描邊陰影……都可以用黑白色肆意揮灑!

方法延伸(細節篇)
假如將該方法運用到一個按鈕上……
通過混合選項中的“陰影、外發光、描邊(不適用疊柔法)、內陰影、內發光”可以自由的刻畫5層像素級細節(當然,通常在實際的使用中刻畫1到3層即可)。

且無論形狀、色彩如何變化,這些細節都如影隨形、色彩都隨變而變~可節省大量重調細節或盲目選取配色的時間!
細節、品質和效率,一石三鳥,兼而得之!
(近期看到設計圈有討論“網頁雕花不可取”的課題,假如讓細節成為習慣,讓美感成為直覺,雕花也便只是普通設計行為而已。)
案例歷練:

后記:
疊柔配色法:無招勝有招~把抓不住的感覺交給精密的計算機,科學化進行你的設計。
更短的時間,更高的品質,你,值得擁有~……
另:方法是死的,人是活的,配合色階、曲線、色彩平衡等,還可以玩出更多花樣來……
分享來自:TGideas-騰訊游戲官方設計團隊
]]>

在設計網頁之前,客戶或產品經理會提出對網頁視覺風格設計的期望:活躍、大氣、穩重、信賴、都市化….. 設計師一聽到關鍵詞或許很自然地在心里蹦出幾個配色與“關鍵詞”相匹配了。網頁的色彩,是訪問者登錄頁面時的第一印象,好的頁面色彩能給用戶留下深刻的印象,并且能產生很好的視覺效果和營造網站整體氛圍的作用。
色彩是我們接觸事物的第一直觀認知,在瀏覽一個新的網頁時,第一認知的不是頁面的具體結構和信息內容,而且是頁面色彩搭配的視覺效果。色彩對于每個人、地域或國家都有不同的情感認知和聯想意義,從某種程度看,大多數人對色彩認知和聯想是一致的,如紅色,人們感覺得喜慶,熱鬧…再具體到事物會聯想到紅心桃、草莓等等。在這里簡單介紹色彩的情感聯想。
色彩的情感聯想
色彩的情感聯想,主要從具體聯想和抽象聯想兩個維度劃分:

色彩的情感聯想是人們對事物的不斷的積累和認知,了解這些不但對網頁設計有幫助,還對市場營銷有幫助。如設計一個環保教育類網站,“環保教育”首先聯想到生命、自然、綠色生態,而這些聯想的事物共同色系是綠色,如果網站采用人們已認知的色彩會讓人們在初次訪問網站時,會對網站的主題產生共鳴和信賴感。
那設計師就憑自己“經驗和色彩原理”就對網頁進行色彩設計?我們先慢鏡頭往回看整個網站的設計流程?設計師在著手視覺設計的前期流程:

如果視覺設計師忽視前期的工作,網站最后視覺設計輸出或許會與客戶期望存在出入的風險。所以視覺設計師需要先了解和參與網站的定位、目標用戶、內容規劃的基礎上才能更好把握頁面的視覺設計。
各類網站色彩應用
網站的類型很多,按照分類,其各自的目的和側重點不同,對用戶的情感訴求心理也會不同。下面主要從網站的類型層面上來簡單探討色彩在網頁上的應用:
1.門戶類:其主要需求是如何方便用戶在堆砌的信息中有效、快速進行目標選擇,而頁面色彩可傾向于清爽,簡潔。
騰訊網,雅虎,網易等門戶采用清爽簡潔的淺色調來降低信息快速獲取時的視覺干擾。同性質的同類網站主要是沿用自己公司主色系或logo來做區分,便于用戶對品牌的識別。

2. 產品類:主要目的需求展示產品的特性,促進瀏覽者消費欲望,頁面色彩可根據具體產品定位做多樣化設計。
細化產品具體定位,如apple,韓國手機iriver高科技電子產品,其簡潔灰白色調給網站帶來科技感和現代感。


3.社區類:其需求是操作簡單易用,長時間使用的舒適度,頁面色彩也傾向清爽,簡潔。
主要以分享、交流信息為主的社區網,有如上面門戶網信息獲取性質,所以配色上比較簡潔清爽。但各社區網又各自有自己的核心目標用戶群,所以在配色方面帶有各自的特點。如校友核心用戶是在校學生,頁面頂端上的banner運用活潑的綠色調來渲染青春朝氣的氛圍.

http://xiaoyou.qq.com/ http://facebook.com/
4. 公司、企業類:展示企業形象,加深提高品牌印象,可應用logo的主色系設計,達到品牌統一。

5. 電子商務類:其目的在滿足方便快捷地查看商品和進行交易,同時運暖色調渲染氣氛,讓用戶感受到網站整體的活躍氛圍和愉悅感。

當然,黑色調的電子商務網站同樣給讓人時尚、炫酷的潮流感

6. 個人類:滿足用戶的自我個性展示和駕馭能力的需求,頁面色彩設計更是多樣化和個性化。現在有很多網站設置了換膚、自定義裝扮等功能來滿足用戶需求,如個人空間、博客、社區等等,就連門戶類網站也開始滿足用戶的色彩喜好設置護膚。所以各類網站的色彩應用沒有固定的模式,以按自身定位來靈活設計網頁色彩。
7.其他類:工具類、活動類等.這里就不一一展開了,原理同上:目的、目標用戶…
]]>由于生長在一個充滿著色彩的世界,色彩一直刺激我們的視覺器官,而色彩也往往是作品給人的第一印象
色彩與生活
首先在認識色彩前,我們要先建立一種觀念,就是如果要了解色彩認識色彩,便要用心去感受生活,留意生活中的色彩,否則容易變成一個視而不見的色盲,就如人體的其他感官一樣,色彩就活像是我們的為味覺,一樣的材料但因用了不同的調味料而有了不同的味道,成功的好吃,失敗的往往叫人難以下咽 ,而色彩對生理與心理都有重大的影響,因此色彩學算是設計的一門基本科目。
色彩意象
當我們看到色彩時,除了會感覺其物理方面的影響,心里也會立即產生感覺,這種感覺我們一般難以用言語形容,我們稱之為印象,也就是色彩意象。
紅的色彩意象
由于紅色容易引起注意,所以在各種媒體中也被廣泛的利用,除了具有較佳的明視效果之外,更被用來傳達有活力,積極,熱誠,溫暖,前進等涵義的企業形象與精神,另外紅色也常用來作為警告,危險,禁止,防火等標示用色,人們在一些場合或物品上,看到紅色標示時,常不必仔細看內容,及能了解警告危險之意,在工業安全用色中,紅色即是警告,危險,禁止,防火的指定色。
大紅 | 桃紅 | 磚紅 | 玫瑰紅 |
|
橙的色彩意象
橙色明視度高,在工業安全用色中,橙色即是警戒色,如火車頭,登山服裝,背包,救生衣等,由於橙色非常明亮刺眼,有時會使人有負面低俗的意象,這種狀況尤其容易發生在服飾的運用上,所以在運用橙色時,要注意選擇搭配的色彩和表現方式,才能把橙色明亮活潑具有口感的特性發揮出來。
鮮橙 | 橘橙 | 朱橙 | 香吉士 |
|
黃的色彩意象
黃色明視度高,在工業安全用色中,橙色即是警告危險色,常用來警告危險或提醒注意,如交通號志上的黃燈,工程用的大型機器,學生用雨衣,雨鞋等,都使用黃色。
大黃 | 檸檬黃 | 柳丁黃 | 米黃 |
|
綠的色彩意象
在商業設計中,綠色所傳達的清爽,理想,希望,生長的意象,符合了服務業,衛生保健業的訴求,在工廠中為了避免操作時眼睛疲勞,許多工作的機械也是采用綠色,一般的醫療機構場所,也常采用綠色來作空間色彩規劃即標示醫療用品。
大綠 | 翠綠 | 橄欖綠 | 墨綠 |
|
藍色的色彩意象
由于藍色沉穩的特性,具有理智,準確的意象,在商業設計中,強調科技,效率的商品或企業形象,大多選用藍色當標準色,企業色,如電腦,汽車,影印機,攝影器材等等,另外藍色也代表憂郁,這是受了西方文化的影響,這個意象也運用在文學作品或感性訴求的商業設計中。
大藍 | 天藍 | 水藍 | 深藍 |
|
|
紫色的色彩意象
由于具有強烈的女性化性格,在商業設計用色中,紫色也受到相當的限制,除了和女性有關的商品或企業形象之外,其他類的設計不常采用為主色。
大紫 | 貴族紫 | 葡萄酒紫 | 深紫 |
|
褐色的色彩意象
在商業設計上,褐色通常用來表現原始材料的質感,如麻,木材,竹片,軟木等,或用來傳達某些引品原料的色澤即味感,如咖啡,茶,麥類等,或強調格調古典優雅的企業或商品形象。
茶色 | 可可色 | 麥芽色 | 原木色 |
|
白色的色彩意象
在商業設計中,白色具有高級,科技的意象,通常需和其他色彩搭配使用,純白色會帶給別人寒冷,嚴峻的感覺,所以在使用白色時,都會摻一些其他的色彩,如象牙白,米白,乳白,蘋果白,在生活用品,服飾用色上,白色是永遠流行的主要色,可以和任何顏色作搭配。
黑色的色彩意象
在商業設計中,黑色具有高貴,穩重,科技的意象,許多科技產品的用色,如電視,跑車,攝影機,音響,儀器的色彩,大多采用黑色,在其他方面,黑色的莊嚴的意象,也常用在一些特殊場合的空間設計,生活用品和服飾設計大多利用黑色來塑造高貴的形象,也是一種永遠流行的主要顏色,適合和許多色彩作搭配。
灰色的色彩意象
在商業設計中,灰色具有柔和,高雅的意象,而且屬於中間性格,男女皆能接受,所以灰色也是永遠流行的主要顏色,在許多的高科技產品,尤其是和金屬材料有關的,幾乎都采用灰色來傳達高級,科技的形象,使用灰色時,大多利用不同的層次變化組合或他配其他色彩,才不會過於 素,沉悶,而有呆板,僵硬的感覺。
大灰 | 老鼠灰 | 藍灰 | 深灰 |
|
RGB色彩對照表 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|














兩種或兩種以上的色彩合理搭配,產生統一諧調的效果,稱為色彩調和。色彩調和是求得視覺統一,達到人們心理平衡的重要手段。
調和就是統一,下面介紹的四種方法能夠達到調和頁面色彩的目的。
■ 同種色的調和
相同色相、不同明度和純度的色彩調和。使之產生秩序的漸進,在明度、純度的變化上,彌補同種色相的單調感。
→ 同種色的調和網頁例圖:http://www. solar1.org

同種色的調和分析:
同種色給人的感覺是相當協調的。它們通常在同一個色相里,通過明度的黑白灰或者純度的不同來稍微加以區別的,產生了及其微妙的韻律美。為了不至于讓整個頁面呈現過于單調平淡,有些頁面則是加入極其小的其他顏色做點綴。該頁面使用了同種色的黃色系,淡黃、檸檬黃、中黃、通過明度、純度的微妙變化產生緩和的節奏美感。
結論:
同種色被稱為最穩妥的色彩搭配方法。
■ 類似色的調和
在色環中,色相越靠近越調和。主要靠類似色之間的共同色來產生作用。
→ 類似色的調和網頁例圖:http://www. solar1.org
類似色的調和分析:
類似色相較于同類色色彩之間的可搭配度要大些,顏色豐富、富于變化。
以上頁面主要取的是色環中的黃色、綠色、藍色通過明度、純度、面積上的不同實現變化和統一的。雖然主色調的米黃色在頁面中使用面積最大,但是我們看到由于它的明度非常高,飽和度就降低了,因此在頁面中處在不明顯的角色。而綠色的純度最高,且使用面積次之,頁面顯示較顯眼,因此用于次級導航位置上。整個頁面主次的視覺引導分明。
結論:
不是每種主色調都是極其顯眼的位置,通常多扮演著用于突出主體的輔助性配角。而重要角色往往在頁面中用的份量極少,卻又起到突出主體的作用。
![]() |
![]() |
| 純白色數值為R255,G255,B255 | 純黑色數值為R0,G0,B0 |
![]() |
![]() |
| 紅色數值為R255,G0,B0 | 綠色數值為R0,G255,B0 |
![]() |
![]() |
| 藍色數值為R0,G0,B255 | 黃色數值為R255,G255,B0 |
RGB模式是顯示器的物理色彩模式。這就意味著無論在軟件中使用何種色彩模式,只要是在顯示器上顯示的,圖像最終就是以RGB方式出現。
■ HSB
是顏色分為色相、飽和度、明度三個因素。英文為H(Hue)、S(Saturation)B(Brightness)飽和度高色彩較艷麗。飽和度低色彩就接近灰色。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到純白,最低得到純黑。一般淺色的飽和度較低,亮度較高,而深色的飽和度高而亮度低。
|
|
■ 色相(Hue): 也叫色調,指顏色的種類和名稱,是指顏色的基本特征,是一種顏色區別于其他顏色的因素。色相和色彩的強弱及明暗沒有關系,只是純粹表示色彩相貌的差異。如紅、黃、綠、藍、紫等為不同的基本色相。 |
■ 明度(Value):
也叫亮度,指顏色的深淺、明暗程度,沒有色相和飽和度的區別。不同的顏色,反射的光量強弱不一,因而會產生不同程度的明暗。非色彩的?⒒搖?捉夏芐蝸蟮謀澩镎庖惶刂省<BR>
明度的遞增
| → 明度網頁例圖:http://www.once-upon-a-forest.com |
![]() |
明度分析:
從上圖網頁所選取的4個主要色塊的RGB數值來看,這4塊色彩組合顯示的RGB數值很高,接近于最高值255。RGB相互間的數值相近,由于有RG的高數值與B高數值混合,整個網頁給人的感覺非常協調,柔和雅致,心情愉悅。
結論:
RGB同時呈現相近的高數值時,相近等量的色彩相互混合,頁面呈高明度灰色段,協調的柔和狀態,令人遐想,對視覺刺激是緩慢的,適合長時間觀看。但由于數值接近,因此色階平穩,同時存在著不夠醒目的狀態。