與發(fā)現(xiàn)驚艷的色彩搭配相比,想創(chuàng)造一個(gè)和設(shè)計(jì)作品更為貼合的配色方案可能更難。分享了7個(gè)方法,從了解目標(biāo)用戶開始,步步深入,幫你找到好看還實(shí)用的配色方案。
配色對于設(shè)計(jì)師來說,不論是用來集中用戶的注意力還是表達(dá)感情或者是傳遞信息都是非常有力的工具。為了讓大家知道配色對于傳遞信息有多重要,我引用《The Impact of Color on Marketing 》這篇文章中的一句話,經(jīng)研究發(fā)現(xiàn),百分之九十的用戶購買商品的時(shí)候,都是因?yàn)樗呐渖湃ベ徺I的。
想讓配色的使用更加有效果,這在設(shè)計(jì)中是非常重要的,也就是構(gòu)想出一個(gè)全新的配色方案。每一種顏色都有著他獨(dú)特的意思,將他們組合起來也就能傳遞出無限的可能。
這篇文章介紹的是如何讓你的配色與你的設(shè)計(jì)更加搭配的方法。
選擇配色方案的調(diào)色板
配色方案、有時(shí)就像雨后春筍辦突然從腦子里接二連三的蹦出來,但更多的情況下,我們可以使用一些計(jì)劃性的方法。
讓配色更加順暢的七條定律
01. 將你的目的表現(xiàn)出來
在此之前,讓我們明確目的和設(shè)計(jì)理念。一個(gè)有著含義的調(diào)色板是良好的設(shè)計(jì)要素之一。
我們可以問自己以下幾個(gè)問題。
你想通過設(shè)計(jì)傳遞什么樣的信息?
設(shè)計(jì)的目的是什么?想傳遞什么情報(bào)?想引導(dǎo)用戶什么?
他包含了怎樣的感情和意識?
02. 明確你的目標(biāo)用戶
讓配色更加順暢的七條定律
顏色所面對的每一個(gè)人都是不同的。同一個(gè)顏色,因?yàn)槊總€(gè)人的個(gè)性、文化背景,經(jīng)驗(yàn)的不同會產(chǎn)生不同的效果??紤]到這一點(diǎn),我們就需要明白,當(dāng)用戶面對這樣的設(shè)計(jì)時(shí),會表現(xiàn)出怎樣的反應(yīng)。
一些顏色的含義,在世界的任何地方都是通用的,但有些則不是。綠色,一般是植物的顏色,看到他們就會聯(lián)想到自然。但是紅色就不一樣了,他會因?yàn)槲幕牟煌煌T谖餮笪幕屑t色代表的是:火(英: Fire)、暴力(英: Violence)、紛爭(英: Warfare),有時(shí)也會表示愛(英: Love)或者熱情(英: Passion)。但是在中國則表示的是繁榮(英: Prosperity)和幸福(英: Happiness)。
讓配色更加順暢的七條定律
由于顏色有著不同的含義,在創(chuàng)建一個(gè)調(diào)色板時(shí)了解你所面對的用戶的感情是非常重要的。
如果你想了解更多關(guān)于顏色和國家的意義,你可以去看The Psychology of Color in Marketing and Branding 和 The Meaning of Color 這兩篇文章。
03. 了解配色方案的基本要素
選擇配色時(shí),你需要了解一些關(guān)于配色的基本知識。配色的基本,就是配色組合的基本理論和構(gòu)造,具有實(shí)踐性的指南。他從如何使用色輪以及每一個(gè)的意義都總結(jié)的十分全面。
04. 試著去尋找靈感
有的時(shí)候視覺化的必要的配色方案很難設(shè)計(jì)出來。那種時(shí)候,可以從別的設(shè)計(jì)師的作品中獲得靈感。
讓配色更加順暢的七條定律
當(dāng)你想創(chuàng)建一些不同的配色方案,不妨試著轉(zhuǎn)變一下思路,利用其他文化的設(shè)計(jì)。舉個(gè)栗子、韓國的音樂MV、實(shí)用的多彩的調(diào)色板讓人印象深刻。每一個(gè)場景,都可以給你的靈感提供參考。
讓配色更加順暢的七條定律
我們也可以從日常生活中獲得靈感的啟發(fā)。當(dāng)你走出去,室外的任何一個(gè)景色都可以作為參考。
讓配色更加順暢的七條定律
當(dāng)你看到了令人激動(dòng)的配色時(shí),就可以把他們做成配色版了。你可以利用Photoshop,或者一些在線工具,來調(diào)整我們所找到的配色方案。
05. 制作屬于你的風(fēng)格指南
設(shè)計(jì)系統(tǒng)你所需要知道的風(fēng)格指南是,將所有的設(shè)計(jì)要素放在統(tǒng)一的設(shè)計(jì)框架之中。在這之中包含了包括按鈕或字體等全部的設(shè)計(jì)要素。我們在設(shè)計(jì)時(shí)應(yīng)該思考什么樣的按鈕或?qū)Ш讲藛尾攀菓?yīng)該被選用的。
在實(shí)踐中如何使用風(fēng)格指南,在這里有一些網(wǎng)頁的案例可以參考。設(shè)計(jì)師一起來學(xué)習(xí),精心挑選的50個(gè)知名品牌的風(fēng)格指南這篇文章,詳細(xì)介紹了知名平牌是如何利用風(fēng)格指南,可以用來參考。
讓配色更加順暢的七條定律
因?yàn)樗梢允且粋€(gè)簡單的草圖,所以在使用配色版之前,可以方便的幫助你做出你自己的風(fēng)格指南。一目了然的知道利用什么樣的設(shè)計(jì)要素,那么也就會明白該使用怎樣的配色來進(jìn)行制作了。
選擇設(shè)計(jì)制作時(shí)用的調(diào)色板時(shí),要有「KISS(略: Keep it Simple, stupid)(越簡單越好)」這樣的思路。首先,盡可能的減少顏色,我們需要考慮下面幾點(diǎn)。
背景色(英: Background)
主色(英: Primary Color)
次要色(英: Secondary Color)
警告色(英: Error Color)
成功色(英: Success Color)
讓配色更加順暢的七條定律
次要色、一般利用他來區(qū)別動(dòng)作行為的顏色。舉個(gè)例子,在警告和成功所使用的顏色,通常使用綠色和紅色,如同下面的例子,你可以利用他們來設(shè)計(jì)從而將當(dāng)前狀態(tài)信息傳遞給用戶。
讓配色更加順暢的七條定律
06. 選擇調(diào)色板
如果你已經(jīng)想好了設(shè)計(jì)靈感,完成了風(fēng)格指南并做了一些簡單的草圖,那么接下來你就可以選擇調(diào)色板了。
一些基本的調(diào)色板,藝術(shù)家們通常將他們以相近的顏色排列在一起,這是一個(gè)非常不錯(cuò)的方法。
讓配色更加順暢的七條定律
我們可以從這些配色方案中可以獲得一些靈感作為參考。就讓我們一起來看看如何從嘗試出的許許多多的配色方案中取得最合適的方案吧。
正如前面所說,當(dāng)你在挑選配色方案的時(shí)候,為了明確目,傳遞出怎樣的信息情感給用戶,你可以嘗試著問自己以下幾個(gè)問題。
這個(gè)配色用起來很簡單嗎?
用什么顏色影響力大,最能引人注目。
使用的這個(gè)顏色有必要讓他更亮/更暗一點(diǎn)嗎?用戶在什么時(shí)候使用商品或者設(shè)計(jì)?
你想通過設(shè)計(jì)傳遞什么樣的信息?
可以這么說,因?yàn)轱L(fēng)格指南,顏色在設(shè)計(jì)中所擔(dān)任的工作不同,各種各樣的顏色的重量也是不同的。舉個(gè)例子、強(qiáng)調(diào)色比背景色所使用的次數(shù)就要多一些。
讓配色更加順暢的七條定律
對于這一點(diǎn)你可以做一些練習(xí),在實(shí)際頁面中你可以將顏色依重要程度的不同來放進(jìn)大小不同的形狀中。下面是 Invision 的調(diào)色板。
讓配色更加順暢的七條定律
考慮到強(qiáng)調(diào)色等顏色、配色以圖形的模式在下面表現(xiàn)出來了。
讓配色更加順暢的七條定律
07. 應(yīng)用調(diào)色板
什么樣的顏色適用于風(fēng)格指南呢?讓我們來看看這個(gè)比較容易理解的 Airbnb(一個(gè)旅館預(yù)定網(wǎng)站) 的例子。Airbnb的強(qiáng)調(diào)色,是可以顯示公司住所地址的紅色(英: Rausch)。綠松石色(英: Kazan)是輔助色、背景色則使用了兩種灰色(英: Foggy / HOF)。
讓配色更加順暢的七條定律
Airbnb的很多頁面,背景色使用的是比較明亮的灰色(英: Foggy)。比如下面的例子、預(yù)約房間是非常重要的動(dòng)作,就使用了作為主色的紅色(英: Rausch)。
讓配色更加順暢的七條定律
綠松石色(英: Kazan),使用它能更好的引人注意。在下面的這個(gè)例子中,你可以看到他作為輔助色很好的幫助了原色。
讓配色更加順暢的七條定律
Airbnb 的錯(cuò)誤信息提示,大概將紅色(Rausch)進(jìn)行了一些調(diào)整,利用了比較亮的紅色。在圖中所使用的感嘆號(! 英: Exclamation Mark)和紅色相組合,立即躍入了用戶的眼中,將當(dāng)前系統(tǒng)的狀態(tài)傳遞給了用戶。
讓配色更加順暢的七條定律
讓我們試著使用最初的顏色來做設(shè)計(jì)吧。試著將他們放在布局和設(shè)計(jì)的焦點(diǎn)之中。在這些都完成之后,將調(diào)色板應(yīng)用于設(shè)計(jì)吧。
讓配色更加順暢的七條定律
考慮一下關(guān)于視覺的層次感(英: Visual Hierachy)??紤]什么樣的要素,什么樣的顏色與設(shè)計(jì)才是最匹配的。還有,鼠標(biāo)在要素上懸停和點(diǎn)擊時(shí)的動(dòng)作的響應(yīng),你可以考慮利用不同的顏色。
最后美麗的配色,需要不斷的重復(fù),反復(fù)的去嘗試。至于什么顏色最好,也是沒有唯一的答案的。決定了布局和設(shè)計(jì)的功能之后,多多的去嘗試各種各樣的配色吧。
不斷的學(xué)習(xí)如何使用顏色來進(jìn)行設(shè)計(jì),是非常重要的。在設(shè)計(jì)開始之前,不管什么樣的顏色組合都能通過視覺化的效果表現(xiàn)出來,就可以選擇更好的顏色眼進(jìn)行設(shè)計(jì)了。
本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:創(chuàng)新互聯(lián),重慶網(wǎng)站建設(shè),成都網(wǎng)頁設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)
網(wǎng)站名稱:讓配色更加順暢的七條定律
標(biāo)題網(wǎng)址:http://www.rwnh.cn/news43/160193.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站維護(hù)、App設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)公司、云服務(wù)器、靜態(tài)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)