鄭州高端網(wǎng)站制作APP配色色彩搭配技巧

鄭州高端網(wǎng)站制作APP配色的一些常用色彩搭配技巧，第一個(gè)分享點(diǎn)：怎樣提取自己滿(mǎn)意的色彩

1、最直接的方法就是找到自己滿(mǎn)意的圖或者是跟項(xiàng)目搭邊的圖。

關(guān)鍵步驟，確定自己想要的風(fēng)格，找大量的符合風(fēng)格要求的圖片，進(jìn)行對(duì)比篩選，選出最符合自己要求的幾張圖片開(kāi)始色彩的提取。

2、提取顏色

深圳網(wǎng)站制作把選中的圖片放入ps中，點(diǎn)擊“存儲(chǔ)為web所用格式”（如果沒(méi)有色彩非常合適的圖，可以再ps里適當(dāng)?shù)恼{(diào)整顏色再進(jìn)行顏色提取），格式選為png-8，色塊選擇8，（數(shù)字越大色塊越多，視自己需求而定）。

在顏色顯示區(qū)域就會(huì)留下8種顏色（按照顏色在畫(huà)面中所占的單位面積程序自動(dòng)篩選），點(diǎn)擊顏色區(qū)域右側(cè)的下拉按鈕，會(huì)找到“儲(chǔ)存顏色表”，把他儲(chǔ)存到桌面上或者你容易找到的地方。然后用ps打開(kāi)，色斑中會(huì)顯示剛才提取到的顏色。

3、提取到的色彩怎樣應(yīng)用到我們的設(shè)計(jì)中

可以總結(jié)為以下3個(gè)小點(diǎn)：

1、導(dǎo)航文字及LOGO的顏色為最淺的藍(lán)色。

2、Banner區(qū)域即大背景，這里用了咱們開(kāi)始的圖片，上邊的大標(biāo)題LOGO則用了最深的藍(lán)色。

3、內(nèi)容區(qū)域出現(xiàn)的提取到的三哥色相的色彩，如果只是排列剩下的幾個(gè)顏色的話(huà)，顏色會(huì)很沖，我完全不能接受！所以找了幾張圖片用來(lái)過(guò)渡顏色，調(diào)整畫(huà)面的節(jié)奏，現(xiàn)在看來(lái)效果還不錯(cuò)。內(nèi)容區(qū)域的文字顏色與導(dǎo)航文字一致，都是很淺的藍(lán)色。

4、內(nèi)容區(qū)域的幾個(gè)按鈕并沒(méi)有用提取的顏色，而是用白色疊加然后調(diào)整透明度出來(lái)的。（大孔雀老師前段時(shí)間在經(jīng)驗(yàn)分享里發(fā)了一個(gè)色彩教程：網(wǎng)頁(yè)配色的天然范兒。推薦大家去看下，看完后受益匪淺。）

4、配色工具的輔助或使用

關(guān)于配色的網(wǎng)站和工具很多，今天就跟大家推薦一個(gè)非常豐富的協(xié)調(diào)配色方案，并帶AI編輯功能，可導(dǎo)入AI吸色，這個(gè)方案是我們很多國(guó)內(nèi)優(yōu)秀的設(shè)計(jì)師常用的工具！

網(wǎng)頁(yè)設(shè)計(jì)福利關(guān)于配色你不可不知的網(wǎng)站
做網(wǎng)頁(yè)設(shè)計(jì)，配色絕對(duì)是不可忽視的板塊。那么關(guān)于配色你了解多少呢？對(duì)于初學(xué)者而言，直觀的配色網(wǎng)站可能更有幫助。今天，小編就向大家推薦幾個(gè)這樣的網(wǎng)站。

匯集眾多色彩搭配優(yōu)秀作品，很有參考價(jià)值

可能是最全面的UI配色指南附大量實(shí)例

就重要性而言，在APP 應(yīng)用中色彩元素扮演的角色僅次于功能。 人與計(jì)算機(jī)的互動(dòng)主要基于與圖形用戶(hù)界面元素的交互，而色彩在該交互中起著關(guān)鍵作用。 它可以幫助用戶(hù)查看和理解APP 內(nèi)容，與正確的元素互動(dòng)，并了解操作。 每個(gè)APP 都會(huì)有一套配色方案，并在主要區(qū)域使用其基礎(chǔ)色彩。

正因?yàn)橛袩o(wú)數(shù)種色彩組合的可能，在設(shè)計(jì)一個(gè)新的APP 時(shí)，人們往往很難決定一個(gè)效果好的配色方案。 在本文中，我們將討論在APP 中與色彩相關(guān)的重要知識(shí)點(diǎn)，同時(shí)我們還將學(xué)習(xí)如何為你的APP 選擇色彩與對(duì)比度，來(lái)增強(qiáng)可用性。
如何選擇有效的配色方案

在創(chuàng)建配色方案時(shí)，需要考慮很多因素，包括品牌色彩及色彩在你所在區(qū)域的特殊意義。

有多少色彩？

保持色彩組合簡(jiǎn)潔有助于改善用戶(hù)體驗(yàn)。 一個(gè)簡(jiǎn)潔的配色方案不會(huì)使人眼花繚亂，并且使你的內(nèi)容更容易被理解。 相反，在太多的地方有太多的色彩很容易搞砸設(shè)計(jì)。

多倫多大學(xué)關(guān)于人們?nèi)绾问褂肁dobe Color CC的研究顯示大多數(shù)人更傾向于僅依賴(lài)2-3種色彩的簡(jiǎn)單色彩組合。

如何創(chuàng)建方案

那么，你如何選擇這2-3種色彩？ 色環(huán)可以幫助我們。

十二色環(huán)圖是創(chuàng)建配色方案的重要工具。

有許多預(yù)設(shè)的配色方案可以使配色更容易，特別是對(duì)于初學(xué)者來(lái)說(shuō)。

單色配色

單色方案是最易于創(chuàng)建的配色方案，因?yàn)槊糠N色彩取自相同的基色。 單色的色彩可以很好地結(jié)合在一起，產(chǎn)生和諧的效果。

△ 單色是單一色系的搭配，它在色彩的深淺、明暗或飽和度上有所調(diào)整而形成明暗的層次關(guān)系。

單色方案是非常容易被視覺(jué)感受到的，特別是藍(lán)色或綠色。

△ 正如你看到的，這個(gè)配色方案看起來(lái)干凈簡(jiǎn)潔。
相近色

相近色的配色方案是選取相互不沖突的的相關(guān)色彩; 一種色彩用作主色，而其它色彩用于豐富該方案。

△ 相近色配色方案是由在十二色環(huán)圖中相鄰的三種色彩創(chuàng)建的。

這個(gè)方案相對(duì)容易使用，其訣竅是選擇哪種顏色作為主調(diào)色來(lái)突出。 例如，Clear，一款手勢(shì)操作任務(wù)管理APP ，它使用相近的色彩，從視覺(jué)上區(qū)分任務(wù)的優(yōu)先級(jí)。

△ Clear中的默認(rèn)配色方案讓人聯(lián)想到熱點(diǎn)熱圖，其中較緊迫的項(xiàng)目以明亮的紅色顯示。

Calm，一款冥想APP ，使用相近的色彩藍(lán)綠色彩，幫助用戶(hù)感到輕松和平和。

△ Calm使用相近的色彩來(lái)塑造整體的氛圍。
補(bǔ)色搭配

互補(bǔ)色是對(duì)立的色彩。

uisdc-color-20170210-10

△ 互補(bǔ)色是色環(huán)上兩個(gè)正對(duì)立的顏色。

它們對(duì)比強(qiáng)烈，可以用來(lái)吸引觀眾的注意力。 當(dāng)使用互補(bǔ)色方案時(shí)，重要的是選擇主色并且使用其互補(bǔ)色用于強(qiáng)調(diào)。 例如，當(dāng)人眼看到一塊不同色調(diào)的綠色物體時(shí)，一點(diǎn)紅色就會(huì)很突出。

△ 使用互補(bǔ)色是讓內(nèi)容脫穎而出的最簡(jiǎn)單方法。

但是你必須謹(jǐn)慎使用互補(bǔ)色，以防止你的內(nèi)容在視覺(jué)上顯得不和諧。
自定義配色方案

創(chuàng)建自己的配色方案不像許多人想象的那么復(fù)雜。最簡(jiǎn)單的方法就是將一個(gè)明亮的主色添加到一堆中性色中，這也是一個(gè)最能引起視覺(jué)沖擊的方案。

△ 向灰度設(shè)計(jì)中添加一種色彩可以很輕易地吸引眼球。

白底加灰色文本，點(diǎn)綴以藍(lán)色高亮，就是Dropbox的配色方案。
Adobe Color CC讓你的生活更簡(jiǎn)單

Adobe Color CC，以前稱(chēng)為Kuler，能讓選擇色彩變得非常容易。只需點(diǎn)擊幾下鼠標(biāo)，調(diào)色板上的每種色彩都可以單獨(dú)修改或選擇為基礎(chǔ)色彩。

△ 每種色彩下都支持導(dǎo)出代碼（包括十六進(jìn)制）。

△ 調(diào)色板可以保存并直接添加到庫(kù)中。此外，社區(qū)提供了許多現(xiàn)成的配色方案。
對(duì)比度的應(yīng)用

通常用戶(hù)界面上的色彩對(duì)象或區(qū)域是不會(huì)單獨(dú)出現(xiàn)的，而是比鄰或重疊在在另一個(gè)色彩對(duì)象或區(qū)域上， 從形成對(duì)比效果。 對(duì)比能使一種色彩與另一種色彩想分離。 正確使用它，可以緩解眼睛疲勞，并通過(guò)清晰劃分屏幕上的元素來(lái)聚焦用戶(hù)的注意力。

△ 高對(duì)比時(shí)色彩容易彼此分開(kāi)，低對(duì)比則不易分開(kāi)。
對(duì)比度和文本易讀性

設(shè)計(jì)師經(jīng)常喜歡使用低對(duì)比以使事物看起來(lái)美觀，和諧。 然而，美觀并不意味著有好的易讀性。 當(dāng)你在文本中使用色彩時(shí)，你需要知道把兩種對(duì)比不明顯的顏色放在一起會(huì)導(dǎo)致你的內(nèi)容難以閱讀。 特別是在手機(jī)端，用戶(hù)會(huì)經(jīng)常處于戶(hù)外或者光線較為充足的地方，這時(shí)用戶(hù)會(huì)因?yàn)槠聊环垂飧究床坏絻?nèi)容。

△ 這行文本難以從其背景色彩中辨認(rèn)出來(lái)。

為了確保界面對(duì)比度處于一個(gè)合理的范圍內(nèi)，你只需要檢查下對(duì)比度。對(duì)比度體現(xiàn)了一種色彩如何區(qū)別于另一種色彩（通常寫(xiě)為1：1或21：1）。 比率中的兩個(gè)數(shù)之間的差越大，色彩之間的相對(duì)亮度的差越大。W3C建議對(duì)正文和圖像文本使用以下對(duì)比度：

    較小的文本與背景的對(duì)比度最少要達(dá)到5：1
    較大的文本(14pt 粗體／18pt 正常或以上)與背景的對(duì)比度要達(dá)到3：1以上。

這條建議也可以幫助低視力，色盲或視力惡化的用戶(hù)看到并閱讀屏幕上的文字。

△ 這行文本符合色彩對(duì)比度建議，從背景色彩中清晰可辨。

圖標(biāo)或其他關(guān)鍵元素也應(yīng)使用上述推薦的對(duì)比度。

△ 左：圖標(biāo)不符合色彩對(duì)比度建議。 右：圖標(biāo)遵循色彩對(duì)比度建議，從背景中清晰可辨。

有幾個(gè)免費(fèi)工具可對(duì)你所選調(diào)色板的對(duì)比度提供有意義的反饋。 WebAIM’s Color Contrast Checker是其中一個(gè)，它可以讓你測(cè)試已經(jīng)選擇的色彩。
對(duì)比度和用戶(hù)焦點(diǎn)

除了建立易讀的文本之外，對(duì)比度還可以引起用戶(hù)對(duì)屏幕上的特定元素的注意。 一般來(lái)說(shuō)，高對(duì)比度是重要內(nèi)容或關(guān)鍵元素的最佳選擇。所以如果你想讓用戶(hù)看到或點(diǎn)擊什么東西，可以使其與眾不同！ 舉例來(lái)說(shuō)，用戶(hù)更可能點(diǎn)擊與背景對(duì)比強(qiáng)烈的具有號(hào)召性的按鈕。

△ 對(duì)比度使得紅色區(qū)域看起來(lái)不同于屏幕的其他部分。
針對(duì)色盲用戶(hù)群體的設(shè)計(jì)

你有沒(méi)有想過(guò)你的APP 使用人群中會(huì)有視力障礙者？

當(dāng)人們談?wù)撋r(shí)，他們通常指的是不能感知某些色彩。 大約8％的男性和0.5％的女性患有不同程度的色盲。其中最常見(jiàn)的是紅綠色盲。

△ 正常人和紅綠色盲看到的相同色彩（黑色和綠色缺陷）

因?yàn)樯び卸嘀乇憩F(xiàn)形式，例如紅綠色盲，藍(lán)黃色盲和單色色盲。所以運(yùn)用多樣的視覺(jué)線索來(lái)連接你APP 的重要狀態(tài)是很重要的。絕不要僅僅依靠色彩來(lái)表示系統(tǒng)狀態(tài)。 相反，應(yīng)使用元素（如筆畫(huà)，指示符，圖案，紋理或文本）來(lái)描述操作和內(nèi)容。

Avocode允許你可視化比較設(shè)計(jì)的修訂版本。

此外，Photoshop有非常實(shí)用的工具來(lái)幫助模擬色盲。這個(gè)功能讓設(shè)計(jì)師可以看到在色盲用戶(hù)的眼中你的界面是什么樣子的。

總結(jié)

提升色彩使用技能是一個(gè)不斷努力和積累的過(guò)程。如果你想學(xué)習(xí)如何創(chuàng)建美觀，使用的配色方案，需要的是實(shí)踐，決心和大量的用戶(hù)測(cè)試。