UI設(shè)計(jì)包含了太多的步驟過(guò)程,每一步都必須深思熟慮,考慮到所有的細(xì)節(jié),這樣最終呈現(xiàn)的界面才能滿足目標(biāo)用戶的需求。
其中一個(gè)比較耗時(shí)間的就是配色,為了選擇正確的用色,設(shè)計(jì)師在這一過(guò)程上可能會(huì)花費(fèi)數(shù)幾個(gè)小時(shí)甚至更久。接下來(lái)我們就給大家分享6個(gè)有用的配色技巧,幫助設(shè)計(jì)師們更高效的完成配色設(shè)計(jì)。
1. 學(xué)會(huì)60-30-10法則
這個(gè)法則來(lái)自于室內(nèi)設(shè)計(jì)領(lǐng)域,而且也經(jīng)常用于家居裝飾上。原理很簡(jiǎn)單,為了達(dá)到作品中的平衡,顏色比例通常在60%-30%-10%。主色占比大,30%的部分為輔色,其余10%為點(diǎn)綴色。
這樣的比例經(jīng)實(shí)驗(yàn)證明是符合人們閱讀習(xí)慣的,人的眼睛通常看到的視覺(jué)元素是遞進(jìn)的。了解了正確的比例,設(shè)計(jì)師們能更好的搭配色彩,而不會(huì)讓UI界面陷入顏色雜多的混亂中。
Digital Agency 登陸頁(yè)
2. 和對(duì)比成為“好朋友”
顏色對(duì)比是視覺(jué)組成的重要部分,給每個(gè)UI元素帶來(lái)不同的個(gè)性,而只包含同色系的用戶界面很難引起用戶的注意力。
對(duì)比度的選擇取決于設(shè)計(jì)目標(biāo)。比如說(shuō),如果需要用戶看到那些特別的UI元素,那采用高對(duì)比度的顏色比如紅藍(lán)色,則是一個(gè)很好的選擇。高對(duì)比度通常用在CTA (Call to Action)按鈕設(shè)計(jì)中。
然而,作為UI整體的部分,高對(duì)比顏色則可能不太適合。如果內(nèi)容和背景色對(duì)比太大,則會(huì)造成很難閱讀。因此建議是,整體采用中對(duì)比度,在需要特殊強(qiáng)調(diào)的元素上再使用對(duì)比度高的顏色。同時(shí)在不同的設(shè)備終端測(cè)試顏色效果,可以提高配色方案的有效性。
Urban Sketcher 應(yīng)用程序
3. 靈活運(yùn)用色彩心理學(xué)
色彩心理學(xué)研究表明,大腦對(duì)每種顏色都會(huì)產(chǎn)生反應(yīng),但是我們自己卻經(jīng)常忽略這一點(diǎn)。眼睛看到顏色,大腦就會(huì)發(fā)出信號(hào),內(nèi)分泌系統(tǒng)產(chǎn)生激素,從而影響我們的情緒和反應(yīng)。
每種顏色對(duì)我們的大腦影響各不相同,設(shè)計(jì)師們了解這些知識(shí),就能選擇正確的色彩來(lái)傳遞信息,引導(dǎo)用戶產(chǎn)生預(yù)期反應(yīng)。下面是一些簡(jiǎn)要的色彩含義:
紅色: 同時(shí)包含正面和消極的意義,比如愛(ài)、自信、激情、生氣等等。
橙色: 熱情、溫暖、興奮。
黃色: 開(kāi)心、陽(yáng)光、愉悅。
綠色: 安靜、生命力。
藍(lán)色: 經(jīng)常作為企業(yè)色使用,也有距離和悲傷的意思。
紫色: 象征忠誠(chéng)和奢華,代表著神秘和魔幻色彩。
黑色: 通常和悲劇和死亡聯(lián)系在一起,既可以很傳統(tǒng)、也可以代表現(xiàn)代的。
白色: 純真、無(wú)邪、完整、清澈。
此外設(shè)計(jì)師還應(yīng)記住每個(gè)人對(duì)色彩的理解都有差異,其中,年齡和性別對(duì)色彩的偏愛(ài)影響大, 因此前期應(yīng)當(dāng)調(diào)查清楚目標(biāo)用戶的喜好。
Dance Academy 網(wǎng)站
4. 不要忽略文化差異
每個(gè)文化都有自己的傳統(tǒng)習(xí)慣和信仰,在選擇用色前要了解用戶是否能理解你所傳達(dá)的信息。很有可能在不同的國(guó)家,同一種顏色代表的意思卻完全相反。比如歐洲國(guó)家白色代表純潔,經(jīng)常用在婚禮上;而在亞洲國(guó)家白色則意味著死亡和悲傷。
錯(cuò)誤的選擇可能會(huì)引起誤解,這對(duì)產(chǎn)品來(lái)說(shuō)可能是致命的。設(shè)計(jì)師們了解這些文化內(nèi)涵,可以降低被誤會(huì)的風(fēng)險(xiǎn)。
5. 保持色彩平衡
平衡是
UI設(shè)計(jì)所追求的,可以讓用戶們感到安心、舒適。色彩平衡是指設(shè)計(jì)中顏色的合理搭配,有效的吸引用戶。網(wǎng)站和app中和諧的色彩,可以給用戶不錯(cuò)的一印象。
以下是一些基本配色方案:
同類色搭配: 同一種顏色,不同的色度 (Shade) 和色調(diào) (Tone) 。
鄰近色搭配: 采用色相環(huán)中相鄰的顏色。
互補(bǔ)色搭配: 采用色相環(huán)中相對(duì)的顏色,對(duì)比度高。
分裂補(bǔ)色: 結(jié)合補(bǔ)色和同類色搭配,比如選擇藍(lán)色則需同時(shí)選擇相對(duì)的黃色和紅色。
三色系調(diào)和: 色相環(huán)中距離相等地三種顏色搭配,建議其中一種作為主色,其它為輔色搭配使用。
矩形配色: 色相環(huán)中2組互補(bǔ)色對(duì),即四種顏色結(jié)合,在色相環(huán)中連起來(lái)形成一個(gè)矩形。
6. 從自然中“偷”取靈感
自然屆是地球上最棒的藝術(shù)家和設(shè)計(jì)師。我們看到自然環(huán)境中的色彩組合通常趨于好。人們熱衷于去追逐日出日落,秋天的森林,冬天的群山等等美景,它們充滿著自然色彩的結(jié)合。
所以,我們?yōu)槭裁床唤梃b一些靈感呢?到自然中走一走,欣賞美麗的自然風(fēng)光,相信你一定會(huì)有新的想法。
Big City Guide 登陸頁(yè)
最后:
人們天生對(duì)顏色有反應(yīng),生活中和顏色的聯(lián)系非常密切,但是設(shè)計(jì)師使用顏色是有一些技巧和竅門的,本文就試圖給大家講解一些關(guān)于色彩設(shè)計(jì)的技巧。數(shù)碼產(chǎn)品的成功與否很大程度取決于UI的配色選擇。正確的配色會(huì)讓用戶使用產(chǎn)品時(shí)感到舒心。“好的設(shè)計(jì)給人以幫助,或給人以愉悅。” 設(shè)計(jì)師們要時(shí)常關(guān)注用戶的需求,做出最明智的選擇。
網(wǎng)頁(yè)名稱:配色真的需要天賦嗎?有沒(méi)有技巧?
文章地址:http://jinyejixie.com/news25/185225.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷推廣、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站
廣告
聲明:本網(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)