學(xué)會(huì)像專業(yè)人士一樣配色和創(chuàng)建調(diào)色板(技巧和工具)

2022-05-27    分類: 網(wǎng)站建設(shè)

你一看到它就知道——它的設(shè)計(jì)色彩如此豐富,影響如此之大,以至于你忍不住要去看它。

這些設(shè)計(jì)通常分為兩類。要么它是一個(gè)偉大的調(diào)色板,你想找到一種方法立即復(fù)制?;蛘咚且粋€(gè)如此怪異或糟糕的調(diào)色板,以至于你無(wú)法理解為什么設(shè)計(jì)師會(huì)做出這樣的選擇!


由于沒(méi)有人想屬于后一類,學(xué)習(xí)配色和開(kāi)發(fā)調(diào)色板是一項(xiàng)至關(guān)重要的設(shè)計(jì)技能。


這一切都是從顏色理論開(kāi)始的,但后來(lái)更進(jìn)一步。

偉大調(diào)色板的目的和價(jià)值


顏色不僅僅是幫助人們看到一個(gè)設(shè)計(jì)。它是品牌、理解和整體設(shè)計(jì)感知的指南。


一個(gè)看似簡(jiǎn)單的選擇有很多整體意義,甚至可以改變?nèi)藗儗?duì)項(xiàng)目的感覺(jué)或影響他們與項(xiàng)目的互動(dòng)。


想一想,如果一些常見(jiàn)的品牌使用了不同的顏色選擇,它們看起來(lái)會(huì)有什么不同:


你想拿一瓶藍(lán)色的可口可樂(lè)嗎?(或者你會(huì)認(rèn)為是百事可樂(lè)?)

如果亞馬遜的黃色微笑標(biāo)志是綠色的呢?

想象一下,如果谷歌把彩虹標(biāo)志換成一種顏色?傳達(dá)正確的意思是什么?

答案大的簡(jiǎn)單問(wèn)題。這就是為設(shè)計(jì)項(xiàng)目選擇調(diào)色板的重要性。


顏色確定:


品牌識(shí)別

情感聯(lián)系

心理反應(yīng)

文化協(xié)會(huì)

層次感和秩序感

創(chuàng)建對(duì)比和導(dǎo)航

每個(gè)調(diào)色板需要的顏色類型

有一個(gè)普遍的規(guī)則,一個(gè)設(shè)計(jì)需要兩到四種顏色。雖然這是一個(gè)偉大的理論,但它在實(shí)踐中超越了這一點(diǎn),尤其是在網(wǎng)站和數(shù)字設(shè)計(jì)方面。


考慮所有需要在你的整體調(diào)色板中選擇某種顏色的元素。


標(biāo)志中的品牌顏色,可能是也可能不是設(shè)計(jì)的其他顏色

原色

次要顏色

強(qiáng)調(diào)色

文本顏色

鏈接顏色

鏈接的懸停顏色

背景顏色

次要背景顏色

還有黑暗模式的復(fù)雜性(如果默認(rèn)為黑暗,則為明亮模式),其中第二個(gè)顏色選項(xiàng)需要整個(gè)第二個(gè)調(diào)色板,包括上面的所有內(nèi)容。


網(wǎng)站顏色提示和技巧


雖然每個(gè)應(yīng)用程序的顏色可能會(huì)有所不同,但在為網(wǎng)站或其他數(shù)字設(shè)計(jì)選擇顏色時(shí),有一些特定的事情需要記住。


考慮為顏色使用色調(diào),以防止調(diào)色板變得太寬。

重復(fù)使用顏色是可以的。

選擇具有相似飽和度的顏色集——主要、次要、強(qiáng)調(diào)色——以創(chuàng)造視覺(jué)一致性。

不要覺(jué)得網(wǎng)站文本必須是黑色的。淺色背景上的另一種深色或灰色變體可能非常好。

60-30-10規(guī)則

60-30-10法則來(lái)自室內(nèi)設(shè)計(jì)領(lǐng)域,但對(duì)平面和網(wǎng)站設(shè)計(jì)師來(lái)說(shuō)也很有意義。


這個(gè)概念是從三種顏色的基礎(chǔ)開(kāi)始——把它想象成主要的、次要的和強(qiáng)調(diào)的顏色,而不是像背景、文本顏色或鏈接這樣的元素。


然后詳細(xì)說(shuō)明如何在oberall設(shè)計(jì)中使用每一種:


60%的設(shè)計(jì)使用原色

30%的設(shè)計(jì)使用了副色

10%的設(shè)計(jì)使用強(qiáng)調(diào)色

現(xiàn)在不要設(shè)定精確的百分比,但是你可以用它作為一個(gè)起點(diǎn),來(lái)混合和匹配你的調(diào)色板,建立視覺(jué)上的和諧和平衡。


不要忘記可訪問(wèn)性

我們不能提到調(diào)色板和選擇而不提到可訪問(wèn)性。顏色是對(duì)比度可及性的一個(gè)重要部分,確保有視覺(jué)障礙的人能夠盡可能容易地理解設(shè)計(jì)。


在你的網(wǎng)站上為顏色組合設(shè)定一個(gè)AAA的顏色等級(jí)。這對(duì)于所有元素的文本和背景顏色尤為重要。


可訪問(wèn)性不僅僅是顏色,而是所有用戶都可以閱讀的顏色,這是一個(gè)堅(jiān)實(shí)的開(kāi)端。說(shuō)到調(diào)色板和可訪問(wèn)性,一個(gè)經(jīng)常被忽視的地方是黑暗模式。


你會(huì)想在這里創(chuàng)建一個(gè)真正的調(diào)色板,而不僅僅是改變背景顏色。


要模仿的顏色趨勢(shì)

顏色趨勢(shì)幾乎不斷演變。大膽的色調(diào)——可能是因?yàn)楹诎的J皆絹?lái)越受歡迎——以及不斷使用極簡(jiǎn)主義和簡(jiǎn)單的調(diào)色板。

你會(huì)喜歡的彩色工具

合適的工具可以讓使用顏色變得更加容易。這里有七種顏色工具,可以幫助你創(chuàng)建好的調(diào)色板,并通過(guò)可訪問(wèn)性閾值。


品牌顏色(上圖):你知道的品牌調(diào)色板指南(有些你不知道)

Colorshark:顏色對(duì)的可訪問(wèn)性檢查

顏色獵人:從圖像中創(chuàng)建和查找調(diào)色板(您可以上傳自己的調(diào)色板)

Adobe顏色:使用色輪和選擇規(guī)則創(chuàng)建不同大小的調(diào)色板,并將其與其他Adobe產(chǎn)品一起使用(您還可以添加漸變和檢查輔助功能)

內(nèi)聚色:從一個(gè)調(diào)色板開(kāi)始,看看它如何與不同的覆蓋層或?qū)嶒?yàn)一起工作,讓它像你想要的那樣工作

間諜顏色:有想法但不確定是什么顏色?此工具根據(jù)您的查詢提出建議

超文本標(biāo)記語(yǔ)言顏色代碼:從CMYK轉(zhuǎn)換到RGB或HEX的終極轉(zhuǎn)換工具,加上顏色選擇器和更多資源

結(jié)論

對(duì)于任何設(shè)計(jì)項(xiàng)目來(lái)說(shuō),顏色都是最重要的選擇之一。希望這些資源、技巧和工具能提供一個(gè)很好的起點(diǎn)。


如果你在色彩上被難倒了,少總是能多。保持你的調(diào)色板簡(jiǎn)單,如果有任何擔(dān)心,它似乎是壓倒性的或太多。

網(wǎng)站欄目:學(xué)會(huì)像專業(yè)人士一樣配色和創(chuàng)建調(diào)色板(技巧和工具)
URL分享:http://www.bm7419.com/news5/160005.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、網(wǎng)站設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、服務(wù)器托管商城網(wǎng)站、定制開(kāi)發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司