關(guān)注PS軟件、cdr軟件、ai軟件學(xué)習(xí)教程，及時(shí)收取圖文教程，為網(wǎng)友提供PS相關(guān)知識(shí)，PS教程每天更新，是廣大網(wǎng)PS、CDR、AI愛(ài)好者學(xué)習(xí)的樂(lè)園，PS軟件學(xué)習(xí)，讓學(xué)習(xí)無(wú)憂。
色彩搭配可以說(shuō)是我們所有日常使用的APP中除了功能之外第二重要的因素，而且在人機(jī)交互中，很大一部分也是基于圖形UI元素的交互，并且顏色在這種交互中扮演著至關(guān)重要的角色。它也幫助用戶對(duì)你APP里面的內(nèi)容一目了然,理解里面的交互動(dòng)作，輕松上手。每個(gè)APP都有一個(gè)配色方案,并且用到的都是基本的顏色。
當(dāng)我們?cè)O(shè)計(jì)一個(gè)新APP時(shí),通常很難確定一個(gè)配色方案行之有效,這也意味著有無(wú)限可能的色彩搭配組合。在這篇文章中,我們將復(fù)習(xí)APP中與顏色有關(guān)最重要的點(diǎn)。我們將討論傳統(tǒng)的配色方案(單色,類似色、互補(bǔ)色)模式,自定義顏色組合不嚴(yán)格基于任何一個(gè)模式,我們還將學(xué)習(xí)如何如何選擇顏色和對(duì)比來(lái)提高APP的可用性。
如何選擇一個(gè)有效的配色方案？
當(dāng)創(chuàng)建一個(gè)配色方案有很多因素需要考慮,包括品牌色和顏色在你們區(qū)域的附加含義。
到底有多少顏色可以選擇呢?
保持簡(jiǎn)單的色彩搭配將幫助您改善用戶體驗(yàn)。一個(gè)簡(jiǎn)單的配色方案不會(huì)壓迫你的眼睛,而且還可以讓你的內(nèi)容更容易理解。相反的,太多太復(fù)雜的顏色很容易破壞你的設(shè)計(jì)。
多倫多的一所大學(xué)從人們使用Adobe Color CC的習(xí)慣中發(fā)現(xiàn),大多數(shù)人更喜歡簡(jiǎn)單的顏色組合,基本上只用到兩到三種顏色。
如何創(chuàng)建一個(gè)色彩方案？
那么,如何選擇這兩三種顏色嗎?色輪可以提供很好的幫助。
十二輻色輪在創(chuàng)建配色方案時(shí)是一個(gè)非常重要的工具。它自帶許多預(yù)設(shè)的顏色標(biāo)準(zhǔn),讓色彩搭配變得非常簡(jiǎn)單，即使初學(xué)者，也能輕松上手。
單色系
單色計(jì)劃是最簡(jiǎn)單的配色方案,每個(gè)顏色是取自相同的底色。單色系的顏色搭配來(lái)效果非常棒,看起來(lái)非常柔和舒緩。
單色系指的是同一個(gè)顏色,和它的深淺色調(diào)。單色搭配非常好看,尤其是藍(lán)色或綠色色調(diào)。
圖片來(lái)源: Louis Saville
正如上面看到的,這些配色方案看起來(lái)整潔和優(yōu)雅。
類似色
類似色是由臨近的但不緊挨的兩個(gè)顏色組成的配色方案，其中一個(gè)顏色是主色，另外一個(gè)顏色通常是用來(lái)輔助主色。
類似色方案是在十二輻色輪中選取三種相鄰的顏色。
盡管這種配色方案非常容易完成，但是有趣的地方在于你如何選擇活力的顏色，因?yàn)樗菀讜?huì)被夸大。例如下面這個(gè)簡(jiǎn)潔的用手勢(shì)操作的清單APP，用類似的顏色來(lái)表示不同待辦事件的優(yōu)先級(jí)。
圖片來(lái)源:Adobe Color CC
這個(gè)配色方案讓人容易想起一個(gè)熱量圖,事件的優(yōu)先級(jí)越高，紅色則就越亮。
再看下面這個(gè)叫做“Calm”的冥想APP,使用配色方案是類似色里面的藍(lán)色和綠色色調(diào)，讓用戶可以感到放松和寧?kù)o。
圖片來(lái)源:Adobe Color CC
“Calm” APP的使用類似色配色方案顏色給用戶感受著平靜情緒。
互補(bǔ)色
顏色并不總是相互矛盾;互補(bǔ)色就是完全相反的顏色。
互補(bǔ)色是色輪上的彼此相反的顏色
他們對(duì)比強(qiáng)烈,可以用來(lái)吸引觀眾的注意力。當(dāng)使用互補(bǔ)色配色方案是,重要的是選擇一個(gè)主要顏色并且使用它的補(bǔ)色來(lái)加強(qiáng)對(duì)比。例如,當(dāng)用戶的眼鏡看到與紅色色相完全不同色調(diào)的綠色時(shí),紅點(diǎn)就顯得格外突出。
使用互補(bǔ)色最容易突出主體
但是,你必須謹(jǐn)慎地使用互補(bǔ)色，防止讓你從視覺(jué)出現(xiàn)上不和諧的情況。
自定義配色方案
創(chuàng)建自定義的配色方案并不像人們想的那么復(fù)雜。比如在中性的顏色里面加入一些明亮的顏色,效果卻出人意料，讓人眼前一亮。
圖片來(lái)源:Adobe Color CC
在中性灰里面添加一個(gè)亮色，簡(jiǎn)單卻非常吸引眼球。
白色背景和酷酷的中性灰色,與明亮的藍(lán)色碰撞,就成了Dropbox配色方案。
圖片來(lái)源: Dropbox
Adobe Color CC會(huì)讓你的生活更高效
Adob Color CC,是以前大家熟知的Kuler,它使得顏色選擇非常簡(jiǎn)單。每一個(gè)色板上的顏色可以單獨(dú)修改或者只要點(diǎn)擊幾下選擇幾個(gè)基本顏色。
每種顏色可以導(dǎo)出色值代碼(包括十六進(jìn)制)
色板可以保存并添加到你的顏色庫(kù)中。此外,網(wǎng)站上還有很多很棒的搭配好的配色方案可供直接使用。
看,多棒，你不需要從頭開(kāi)始。
色彩對(duì)比的影響
一般情況下,在UI上的色彩對(duì)象或區(qū)域并不是孤立存在的,而是相鄰或疊加在另一個(gè)的對(duì)象或區(qū)域上。這就產(chǎn)生了對(duì)比效果。對(duì)比是一種顏色相對(duì)于另一種顏色。使用得當(dāng),它能減少眼睛疲勞和讓用戶的注意力清晰的集中在屏幕的元素上。
高對(duì)比度能讓顏色明顯的區(qū)分出來(lái)。而低對(duì)比度則相反。
對(duì)比和文本可讀性
色彩對(duì)比是對(duì)設(shè)計(jì)可用性來(lái)說(shuō)一個(gè)至關(guān)重要的領(lǐng)域。設(shè)計(jì)師通常喜歡使用降低對(duì)比度,因?yàn)榈蛯?duì)比度使設(shè)計(jì)看起來(lái)好看又和諧。但是,好看并不意味著可讀性也強(qiáng)。當(dāng)你給文字配色時(shí),選擇兩種低對(duì)比度的顏色會(huì)讓它閱讀起來(lái)非常費(fèi)勁。尤其是在手機(jī)屏幕上,用戶常常在戶外或在明亮的地方使用手機(jī)，這會(huì)導(dǎo)致屏幕眩光嚴(yán)重。
這些文本對(duì)比他們的背景顏色來(lái)說(shuō)非常難以閱讀
確保你有一個(gè)相當(dāng)數(shù)量的元素之間的對(duì)比。這真的不是那么難,所有你需要做的是檢查對(duì)比度。對(duì)比比率表示一種顏色和另一種顏色相差多(通常記為1:1或21)。對(duì)比比率兩個(gè)數(shù)字之間的差異越大，兩者的相對(duì)亮度就越高。有關(guān)于內(nèi)容文本和圖像文本，W3C推薦以下對(duì)比率:
小文本在其背景下的對(duì)比度應(yīng)該有至少4.5:1。
大文本(在14pt 粗體 / 18pt 常規(guī)及以上) 在其背景下的對(duì)比度應(yīng)該至少3:1。
這條指導(dǎo)原則還可以幫助那些弱視用戶,色盲用戶,或者視力惡化者看到和閱讀屏幕上的文本。
這些文本的顏色都遵從推薦的顏色對(duì)比度，所以閱讀起來(lái)很輕松
圖標(biāo)或其他重要元素也應(yīng)該遵從上面的推薦的顏色對(duì)比比率。
圖片來(lái)源:Google Material Design
該文章作者已設(shè)置需關(guān)注才可以留言
寫(xiě)留言
寫(xiě)留言
聯(lián)系客服
