Warning: mysqli_query(): (HY000/1030): Got error 28 from storage engine in /www/wwwroot/www.hnjzw.com.cn/wp-includes/wp-db.php on line 1924

Warning: mysqli_query(): (HY000/1030): Got error 28 from storage engine in /www/wwwroot/www.hnjzw.com.cn/wp-includes/wp-db.php on line 1924
谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上) | 金香檳運營

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

今天和大家聊聊色彩,其實色彩這個話題很大,也有好多設計師分享過關于色彩的經驗,今天不分享虛的,只告訴大家我們如何定義一套界面中色彩體系和規范。

 

今天和大家聊聊色彩,其實色彩這個話題很大,也有好多設計師分享過關于色彩的經驗,今天不分享虛的,只告訴大家我們如何定義一套界面中色彩體系和規范。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

在我的花瓣里收藏著大量我覺得優秀的設計,當我一次又一次去看它們的時候,不停問自己為什么當初這個設計吸引了我,后來終于找到一個點,就是色彩。

在看到第一眼時候,奪走我視覺焦點的就是色彩,所以色彩在設計里面的重要性不言而喻。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

色彩是設計師的一個魔法棒,它能吸引你的注意力,喚起設計情感,傳遞很重要的信息,在色彩對于營銷設計中,研究發現,對于很多產品,人們對產品做出的90%的快速決策來源于色彩,所以為什么國內電商APP中的“立即購買”會使用橙色、紅色,因為這個顏色能刺激用戶,能產生戲份感受。

所以有效的使用顏色對設計很重要,今天我們重點來講講在UI設計中,如何來定義一套調色板,一套色彩指南。

怎么去定義?

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

1.了解產品性格

在定義色板的時候,首先需要去確定好設計目的是什么,試著去問問自己,我們的這個色彩需要給用戶傳遞什么樣的信息,是希望他有購買欲望,還是希望他感受到尊貴感受,還是希望喚起他某種情緒?色彩可以設定品牌的的基調,情緒。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 可口可樂旗下Fuze Tea紅茶 品牌,采用自然的綠色作為品牌顏色,來傳遞表達出茶融合植物、茶淬取物和其他健康成分。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ Uber(優步)越南推出的網路“摩托車”接送服務,在UberMOTO全新品牌形象設計中,因為越南天氣很炎熱,所以采用了藍色綠色配色,斜45度的色塊拼接,延伸出了會反光的安全外套,還有醒目的安全帽,在一大票的“摩托車”群中,可以一目了然的看到司機所在位置。

2.了解用戶人群

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 男生和女生最喜歡的顏色

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 男生和女生最討厭的顏色

男性通常更喜歡大膽的顏色,而女性喜歡更柔和的顏色。此外,男性更喜歡深色的顏色(加入黑色的色彩),而女性更容易接受明亮的顏色(添加了白色的色彩)。

人們對于顏色的看法不同,顏色根據個人喜好,文化宗教信仰不同,有不同的影響,所以在設計時候一定要去考慮我們的用戶是誰在使用。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 在西方世界里面,紅色代表恐怖和死亡、火災、暴力戰爭。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 但是在中國,紅色卻是和繁榮富強、火熱激情等詞聯系在一起,不同國家的文化差異是我們做設計時候需要去考慮。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 在西方國家,黑白代表純節、優雅、尊貴、高端感覺,包括很多大牌的服裝設計,店面裝修都是采用黑白。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 在東方國家,黑白代表死亡,喪禮等,文化的差異和人群差異所以在設計的時候一定要考慮到。

3.了解色彩心理學

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

了解基礎的色彩心理學,關于色彩心理學這里不做詳細分享,有興趣的同學可以去搜索相關資料看看。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 紅色:最容易引起人的注意、興奮、激動、緊張。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 橙色:是一種充滿生氣和活力的顏色讓人聯想到大地以及秋色,變化和運動的感覺。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 黃色:明亮、輝煌、燦爛、愉快、親切、柔和的印象。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 綠色:它的表現價值是豐饒、充實、平靜與希望,綠色繼承了藍色所有具備的平靜的屬性。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 藍色:讓人感到崇高、深遠、純潔、透明、智慧。藍色也是很多公司偏愛的顏色,代表著科技和理性。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 紫色:給人高貴、優越、奢華、幽雅、流動、不安的感覺,灰暗的紫色則是傷痛、疾病,容易造成心理上的憂郁、痛苦和不安的感覺。因此,紫色時而有脅迫性,時而有鼓舞性,在設計中一定要慎重使用。

4.尋找色彩靈感

早期時候很難去選定一個品牌色,或者一個色板,這個時候我們一定要去尋找靈感,沒關系,偉大的藝術家都是頭,我們可以從很多地方獲取靈感。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ https://brandcolors.net/ 里面有全世界500強的品牌色板,所有知名公司的品牌色板這里都可以找到答案,可以從他們的品牌色板中去尋找想要的。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ Dribbble和Behanc上搜索關鍵詞也能找到很多設計師的色板

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ https://www.materialui.co/colors谷歌色板庫

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ http://www.home-designing.com/也可以從室內設計師經常用的室內網站配色中去獲得一些設計靈感

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲ 當找到喜歡的配色方案時,你可以用吸管,來梳理你喜歡的這個配色,做成色板,有必要時候可以進行調整。

如何去定義一套UI配色

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

重點來了,如何去定義一套APP的配色,今天告訴大家的這個小方法是如何運用HSB去定義一套配色。

什么的HSB?

HSB是一種顏色模式,在HSB模式中,H代表色相,S代表飽和度,B代表亮度。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

1.多嘗試不同配色

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

在制作色板的時候,需要我們盡可能的把所有顏色和顏色靈感都創造出來,不要怕嘗試不好,然后把所有顏色嘗試處理后,再去縮小色板范圍,怎么縮小范圍,可以結合我前面說的那些原則。在UI設計中,可能額外需要注意幾個問題:

1.超鏈接顏色

2.品牌色

3.主要顏色,輔助顏色

4.成功顏色,錯誤顏色

5.文字顏色,背景顏色

2.利用HSB色彩模型

第一步要確定品牌色,品牌色一般企業LOGO的顏色,如果沒有可以去確定一個品牌色。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

以品牌色為基準得出24色帶

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

拿Spotify舉例,我們來定義它的一套色彩體系。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

h值(色相)以15,S和B不變,遞增得到基于品牌色的24個色帶,為什么是24個,24X15=360剛好圍繞色環盤一圈所以因此我們得到一圈基于品牌色,明度和飽和度一致性的顏色。

基于色帶得出16色相環

細心的同學可能發現色帶上其實很多顏色都比較接近,比如綠色,藍色,我們需要再進一步篩選出合適的顏色作為16色相環,盡量選取一些和主品牌色比較舒服的顏色搭配。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

調整S(飽和度)和B(亮度)

這一步我們需要去定義同頻的輔助色,也就是16色相環的輔助色,可以在亮度(B)按-10,-20去加減,也可以在S上面以+-5去增加色相,原則就是需要有對比度,需要明顯。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

最后得出一套在同頻下的色盤,但是實際使用中用不到那么多,這些顏色很多也很接近,所以需求去除一些比較接近的顏色

制定色板

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲??和品牌色同頻的輔助色板

制定色板,這里需要使用到一個網站?https://coolors.co/?這里只需要輸入對應的品牌色,就可以得出根據明度遞減遞增的色板,當然你也可以去調整明度來得出色板。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

最終我們得出了整個產品的調色板,很多電商大促,包括Airbnb和谷歌都是通過類似的方法得出它們的色盤。最后根據我們前面定義的,警告色,超鏈接顏色,成功提示色。可以從輔助色盤中得出對應的顏色,警告用紅色,超鏈接用藍色,警告用黃色,成功用綠色。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

漸變色板

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(上)

▲??取品牌輔助色相鄰近色顏色做漸變

總結

如何定義一個色彩體系和色盤,特別是關于HSB的運用,色盤出來了其實只是根據,關于如何色彩搭配其實是需要我們不斷的去嘗試,希望大家都能掌握這個方法。

谷歌色彩秘籍:色彩用不好?學會這2招,受用終身(下)

作者:sky,微信公眾號“我們的設計日記 ”

本文由 @sky 原創發布。未經許可,禁止轉載。

題圖來自 Unsplash ,基于 CC0 協議

原創文章,作者:金香檳運營,如若轉載,請注明出處:http://www.hnjzw.com.cn/7071.html