淺談APP UI設計中色彩搭配方法和(hé)色彩情緒的(de)作用(yòng)

       一款APP開發出來(lái)後，用(yòng)戶打開第一眼進入眼簾的(de)就是APP的(de)視覺表現，而色彩在其中起到了(le)非常重要的(de)作用(yòng)，毫無疑問色彩搭配對(duì)于APP開發的(de)UI設計師來(lái)說是非常重要的(de)，運用(yòng)好色彩的(de)搭配，是增加用(yòng)戶的(de)友好體驗度。那麽具體到實際項目中該使用(yòng)什(shén)麽怎樣的(de)色彩，需要怎麽做(zuò)呢(ne)？下(xià)面我将逐步去分(fēn)析。

       在UI設計中，色彩的(de)搭配方法通(tōng)常有以下(xià)幾種：

       1、 同種色搭配

       使用(yòng)一種色調及其相應的(de)多(duō)種亮色和(hé)暗色，整個(gè)頁面會非常統一。

       2、 類似色搭配

       使用(yòng)色相相近的(de)顔色，頁面元素不會相互沖突，更加協調有質感。

       3、 互補色搭配

       如果選擇使用(yòng)互補色，最佳搭配是一種作爲主色，另一種用(yòng)于強調。它們有著(zhe)非常強烈的(de)對(duì)比度，用(yòng)在需要特别強調某個(gè)元素時(shí)會非常有效。

       4、 分(fēn)散互補色搭配

       尋找三種顔色，其中兩種互相類似，另一種與它們形成對(duì)比。這(zhè)個(gè)配色非常易學而且容易出效果。

       5、 三角對(duì)立色搭配

       顧名思義，就是色環上三角對(duì)立的(de)顔色。最經典的(de)就是蒙德裏安風格的(de)紅黃(huáng)藍格構圖，時(shí)至今日仍然非常符合設計趨勢。

 

       色彩本身是沒有情緒的(de)，隻是因爲不同波長(cháng)的(de)光(guāng)通(tōng)過人(rén)的(de)眼睛傳到大(dà)腦(nǎo)，引起了(le)人(rén)們不同的(de)心理(lǐ)感受，所以色彩才有了(le)情緒。每種顔色都會給人(rén)獨特的(de)心理(lǐ)感受，引起我們不同的(de)情緒，因此在設計過程中色彩情緒是必須要考慮的(de)一個(gè)重要元素。

      1、 黑(hēi)色

       沉穩、品質感、收斂。

       單獨使用(yòng)時(shí)黑(hēi)色可(kě)以很容易吸引用(yòng)戶的(de)注意力。和(hé)其他(tā)顔色搭配使用(yòng)時(shí)可(kě)以很好地搭配組合，使用(yòng)黑(hēi)色的(de)背景可(kě)以非常好的(de)突出頁面中的(de)内容，容易出效果，應用(yòng)場(chǎng)景非常廣泛。可(kě)以提高(gāo)其明(míng)度得(de)到不同明(míng)度的(de)灰色，例如蘋果系統的(de)深色模式。

       設計時(shí)一般不會使用(yòng)純黑(hēi)色，因爲純黑(hēi)在顯示屏上的(de)顯示效果并不是很好，所以通(tōng)常會選擇灰色。靈活使用(yòng)灰色可(kě)以讓你的(de)設計更加優秀。

       2、 白色

       幹淨、純潔、簡潔。

       白色中包含了(le)所有的(de)顔色。頁面設計中經常會使用(yòng)到白色，你可(kě)以在上面排列布局任何元素而不會感覺突兀，作爲頁面的(de)背景色。因爲白色是無色相的(de)，在設計中通(tōng)常也(yě)會稍微變色，使用(yòng)到像乳白色、雪(xuě)白色等顔色，這(zhè)樣不會顯得(de)過分(fēn)單調。黑(hēi)色和(hé)白色搭配是一個(gè)非常經典的(de)組合，隻要把握好使用(yòng)的(de)占比，可(kě)以創造出非常高(gāo)級的(de)設計。

       3、 紅色

        熱(rè)情、躁動、危險、警告。

        紅色元素很容易吸引到用(yòng)戶的(de)注意，可(kě)以特别強調頁面的(de)某個(gè)元素，比如消息的(de)小紅點，但是時(shí)間一久就會引起眼睛疲勞，所以設計中紅色元素一般不會大(dà)片使用(yòng)。但是我們可(kě)以通(tōng)過降低調整明(míng)度、純度，來(lái)使用(yòng)。

       另外，紅色還(hái)代表著(zhe)危險及警告。紅綠燈上的(de)紅燈停，炙熱(rè)的(de)火焰災害。頁面設計中可(kě)以在删除提醒、禁止操作功能時(shí)使用(yòng)。

       4、 橙色

       溫暖、活潑、年輕。

       黃(huáng)色+紅色得(de)到橙色。屬于暖色調的(de)顔色，既不會像紅色那樣躁動，又不會像黃(huáng)色那麽燦爛，非常具有親和(hé)力，用(yòng)戶對(duì)其接受程度非常高(gāo)。柑橘類的(de)水(shuǐ)果都是橙系的(de)，代表著(zhe)健康、積極。和(hé)秋天相關的(de)一些項目上，也(yě)會采用(yòng)明(míng)度稍低的(de)橙褐色來(lái)設計。橙色可(kě)以和(hé)綠色搭配，非常适用(yòng)于教育類的(de)産品，綠色爲主色，橙色爲強調色，象征著(zhe)青少年健康有活力的(de)特征。

       5、 黃(huáng)色

       陽光(guāng)、輝煌、醒目、高(gāo)貴。

這(zhè)是一個(gè)明(míng)度非常高(gāo)的(de)顔色。本身是不适合應用(yòng)在數字化(huà)領域的(de)設計的(de)，因爲其顯示效果較差，但是可(kě)以通(tōng)過調整它的(de)明(míng)度和(hé)純度來(lái)得(de)到我們想要的(de)色調。黃(huáng)色和(hé)深灰色是一個(gè)很好的(de)組合，閑魚美(měi)團都采用(yòng)了(le)這(zhè)種色彩，黃(huáng)色的(de)高(gāo)明(míng)度的(de)色彩與明(míng)度較低的(de)深灰色可(kě)以形成極強的(de)對(duì)比效果，通(tōng)過這(zhè)種對(duì)比效果我們可(kě)以實現強調的(de)功能點。其他(tā)都是應用(yòng)在比較特定的(de)一些場(chǎng)景，例如紅綠燈的(de)黃(huáng)色的(de)提醒作用(yòng)，古代皇帝的(de)專用(yòng)色，農作物(wù)成熟的(de)顔色等。

       6、 綠色

       健康、大(dà)自然、清新、環保、安全。

       綠色是大(dà)自然的(de)顔色，大(dà)多(duō)數植物(wù)的(de)顔色，現在非常提倡的(de)環保生活都是采用(yòng)綠色爲主色調，健康無污染。代表著(zhe)春天，在策劃設計春天相關事物(wù)活動，可(kě)以使用(yòng)綠色爲主色進行設計。綠色是有著(zhe)安全屬性的(de)，在支付、保障方面通(tōng)常是應用(yòng)很多(duō)的(de)，與紅色正好是相反的(de)作用(yòng)。

       7、 藍色

       科技、純淨、深邃、放松、忠誠

       藍色是三原色之一。和(hé)大(dà)海、天空有著(zhe)不可(kě)分(fēn)割的(de)聯系，是忠誠、放松的(de)象征，在設計中應用(yòng)是極其廣泛的(de)。另外，藍色也(yě)是科技宇宙領域的(de)專屬顔色，是理(lǐ)智、效率的(de)代名詞，随處可(kě)見的(de)企業官網、VI、軟件、宣傳物(wù)料等。像是心理(lǐ)治療室都是使用(yòng)藍色系的(de)環境，可(kě)見藍色是非常易接受的(de)顔色，在設計中使用(yòng)起來(lái)非常方便。

       面對(duì)一個(gè)APP項目時(shí)不知道該如何選擇主題色、輔助色，這(zhè)個(gè)時(shí)候我們可(kě)以先通(tōng)過借鑒他(tā)人(rén)優秀的(de)作品，從中提取一套設計色彩。了(le)解不同顔色的(de)色彩情緒，爲進行項目設計時(shí)選擇合适的(de)顔色提供依據。