中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

色彩是一個(gè)產(chǎn)品給用戶最為直觀的感受，好的配色可以為產(chǎn)品錦上添花。

今天和大家聊聊色彩，不分享虛的，直接分享大家蘋果谷歌配色方法，幫你搞定一套界面中色彩體系和規(guī)范!

在我收藏夾里，收藏著大量?jī)?yōu)秀的設(shè)計(jì)，每次去看的時(shí)候，不停問自己為什么當(dāng)初這個(gè)設(shè)計(jì)吸引了我。后來終于找到一個(gè)點(diǎn)，就是色彩，在第一眼看到的時(shí)候，奪走我視覺焦點(diǎn)的就是色彩。

色彩是設(shè)計(jì)師的一個(gè)魔法棒，它能吸引你的注意力，喚起設(shè)計(jì)情感。

在電商設(shè)計(jì)中，人們對(duì)產(chǎn)出做出的90%的快速?zèng)Q策來源于色彩。為什么國(guó)內(nèi)電商的“立即購(gòu)買”會(huì)是橙色，紅色，因?yàn)檫@個(gè)顏色能刺激用戶，能產(chǎn)生購(gòu)買沖動(dòng)。

那么怎么去定義一套色彩呢？

色彩怎么定義

1. 了解產(chǎn)品性格

在定義色板的時(shí)候，首先需要去確定設(shè)計(jì)的目的是什么。

試著去問問自己，我們的這個(gè)色彩需要給用戶傳遞什么樣的信息，是希望他有購(gòu)買欲望，還是希望他感受到尊貴感受，還是希望喚起他某種情緒，色彩可設(shè)定品牌基調(diào)、情緒。

▲可口可樂旗下Fuze Tea紅茶品牌，采用自然的綠色作為品牌顏色，表示這款茶融合植物、茶淬取物和其他健康成分。

▲Uber （優(yōu)步）越南推出的網(wǎng)路“摩托車”接送服務(wù)，在UberMOTO全新品牌形象設(shè)計(jì)中，因?yàn)樵谠侥咸鞖夂苎谉?，所以采用了藍(lán)色綠色配色，斜45度的色塊拼接，延伸出了會(huì)反光的安全外套，還有醒目的安全帽，在一大票的“摩托車”群中，立刻就可以一目了然司機(jī)的位置。

2. 了解用戶人群

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

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

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

人們對(duì)于顏色的看法不同，顏色根據(jù)個(gè)人喜好，文化宗教信仰不同，有不同的寓意。所以，我們?cè)谠O(shè)計(jì)的時(shí)候一定要去考慮是什么用戶在使用。

▲在西方世界里面，紅色代表恐怖和死亡，火災(zāi)，暴力戰(zhàn)爭(zhēng)。

▲在中國(guó)，紅色和繁榮富強(qiáng)，性格火熱激情等聯(lián)系在一起，不同文化差異是我們做設(shè)計(jì)時(shí)候需要去考慮的。

▲在西方國(guó)家，黑白代表純潔、優(yōu)雅、尊貴、高端感覺，包括很多大牌的服裝設(shè)計(jì)、店面裝修都是采用黑白。

▲在日本韓國(guó)，黑白代表死亡，喪禮等，文化的差異，和人群差異所以在設(shè)計(jì)的時(shí)候一定要重復(fù)考慮到。

3. 了解色彩心理學(xué)

了解基礎(chǔ)的色彩心理學(xué)，有興趣的同學(xué)可以去搜索相關(guān)資料看看。

▲紅色：最容易引起人的注意、興奮、激動(dòng)、緊張。

▲橙色：充滿生機(jī)和活力的顏色讓人聯(lián)想到大地以及秋色，變化和運(yùn)動(dòng)的感覺。

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

▲綠色：是豐饒、充實(shí)、平靜與希望綠色繼承了藍(lán)色所有具備的平靜的屬性。

▲藍(lán)色：藍(lán)色是冷色，讓人感到崇高、深遠(yuǎn)、純潔、透明、智慧。藍(lán)色也是公司最偏愛的顏色，代表著科技和理性。

▲紫色：紫色給人高貴、優(yōu)越、奢華、優(yōu)雅、流動(dòng)、不安的感覺，灰暗的紫色則是傷痛、疾病，容易造成心理上的憂郁、痛苦和不安的感覺。因此，紫色時(shí)而有脅迫性，時(shí)而有鼓舞性，在設(shè)計(jì)中一定要慎重使用。

4. 尋找色彩靈感

早期時(shí)候很難去選定一個(gè)品牌色，這個(gè)時(shí)候我們一定要去尋找靈感，下面推薦幾個(gè)工具。

▲https:/ /brandcolors.net/是一個(gè)特別好的網(wǎng)站，里面有全世界500強(qiáng)的品牌色板，所有知名公司的品牌色板這里都可以找到答案，可以從他們的品牌色板中去尋找我們想要的那種，和我們產(chǎn)品比較匹配的顏色。

▲Dribbble和Behanc上搜索關(guān)鍵詞也能找到很多設(shè)計(jì)師的色板

▲https:/ /www.materialui.co/colors谷歌色板庫(kù)上很多值得我們?nèi)W(xué)習(xí)

▲http://www.home-designing.com/也可以從室內(nèi)設(shè)計(jì)師經(jīng)常用的室內(nèi)網(wǎng)站配色中去獲得一些設(shè)計(jì)靈感。

▲當(dāng)你找到喜歡的配色方案時(shí)，：你可以用吸管根據(jù)來梳理喜歡的這個(gè)配色，做成色板，有必要吋候可以迸行凋整。

如何去定義一套UI配色

如何去定義一套APP的配色，如何用HSB去定義套配色。

什么是HSB？

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

1. 多嘗試不同配色

在制作色板的時(shí)候，需要我們盡可能把所有顏色和顏色靈感都創(chuàng)造出來，然后把所有顏色嘗試處理后，再去縮小色板范圍，可以結(jié)合我前面說的那些原則。

在UI設(shè)計(jì)中，可能額外需要注意幾個(gè)問題:

• 超鏈接顏色
• 品牌色
• 主要顏色，輔助顏色
• 成功顏色，錯(cuò)誤顏色
• 文字顏色，背景顏色

2. 利用HSB色彩模型

第一步確定品牌色，品牌色一般是企業(yè)LOGO的顏色，如果沒有可以去定義一個(gè)。

以品牌色為基準(zhǔn)得出24色帶：

我們拿Spotify這個(gè)軟件舉例，品牌色是綠色，來定義它的一套色彩體系。

h值（色相）以15，S和B不変，遞增得到基于品牌色的24個(gè)色帶。為什么是24個(gè)，24X15=360剛好圍繞色環(huán)盤一圏，因此得到一圈基于品牌色，明度和飽和度一致的顔色。

基于色帶得出16色相環(huán)：

細(xì)心的同學(xué)可能發(fā)現(xiàn)色帶上其實(shí)很多顔色都比較接近，比如綠色、藍(lán)色，我們需要再進(jìn)一步篩選出合適的顏色作為16色相環(huán)，盡量選取一些和主品牌色比較舒服的顏色搭配。最后，根據(jù)篩選后得出的16色相環(huán)。

調(diào)整B （亮度）和S （飽和度）：

這一步我們需要去定義同頻的輔助色，也就是16色相環(huán)的輔助色，可以在亮度（B） 按-10、-20去加減，也可以在H上面以+-5去増加色相，原則就是需要有對(duì)比度，需要明顯。

調(diào)整明度，如果對(duì)比不明顯，可以-20，-30。

調(diào)整B飽和度值：

最后得出一套同頻下的色盤，但是很相近，所以我們需要去排除一些。

制定色板：

和品牌色同頻的輔助色板

制定色板，這里需要使用到一個(gè)網(wǎng)站https://coolors.co/這里只需要輸入對(duì)應(yīng)的品牌色，就可以得出根據(jù)明度遞減遞增的色板，當(dāng)然你也可以去調(diào)整明度來得出色板。

自此我們得出了整個(gè)產(chǎn)品的調(diào)色板，很多電商大促，包括Airbnb和谷歌都是通過類似的方法得出他們的色盤。最后，根據(jù)我們前面定義的，警告色，超鏈接顏色，成功提示色，我們可以從輔助色盤中得出對(duì)應(yīng)的顏色，警告用紅色，超鏈接用藍(lán)色，警告黃色，成功綠色等等。

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

最后

以上就是今天的分享，如何定義一個(gè)色彩體系和色盤。知識(shí)量比較大，特別是關(guān)于HSB的運(yùn)用，色盤出來了其實(shí)只是根據(jù)，關(guān)于如何色彩搭配其實(shí)是需要我們不斷的去嘗試!希望大家都能掌握這個(gè)方法。

#專欄作家#

Sky，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。支付寶體驗(yàn)設(shè)計(jì)專家，阿里巴巴天貓?jiān)O(shè)計(jì)專家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議。