UI設(shè)計(jì)之顏色搭配指南-紅色與綠色的常用場(chǎng)景介紹

顏色對(duì)我們?nèi)粘Ｉ钪械母兄颓楦杏兄卮笥绊憽Ｈ绻褂玫卯?dāng)，顏色可以引起用戶(hù)的特定反應(yīng)。本文將專(zhuān)注于兩種特殊的顏色 - 紅色和綠色。理由如下：

紅色和綠色對(duì)于UI設(shè)計(jì)都非常重要，因?yàn)樗鼈兪强刹僮鞯?/span>

讓我們探討在用戶(hù)界面中使用紅色和綠色作為強(qiáng)調(diào)色的常用方法。

紅色

重要性。 它是一種高度可見(jiàn)的顏色，能夠快速集中注意力，讓人們快速做出決定。

紅色是一種非常強(qiáng)烈的顏色，充滿(mǎn)了激情與憤怒的情感色彩。

警告或危險(xiǎn)。閃爍的紅燈通常意味著危險(xiǎn)或緊急情況。

表示錯(cuò)誤狀態(tài)

紅色通常與警告或某些至關(guān)重要的東西相關(guān)聯(lián)。這就是為什么當(dāng)我們考慮錯(cuò)誤狀態(tài)時(shí)，紅色是第一種想到的顏色。就像打叉的紅色圖標(biāo)，能夠一目了然地傳達(dá)信息錯(cuò)誤。

圖片：Mailchimp

表示情緒反應(yīng)

紅色往往與愛(ài)情和激情聯(lián)系在一起。設(shè)計(jì)師在情感反應(yīng)中使用偏紅色（如Berry Red）表示喜歡。

表示從購(gòu)物車(chē)中刪除商品

在電子商務(wù)中，紅色通常用于操作的購(gòu)物車(chē)摘要中來(lái)表示“從購(gòu)物車(chē)中移除”。

從購(gòu)物車(chē)中刪除項(xiàng)目的顏色為紅色

表示潛在的危險(xiǎn)行為

紅色通常與潛在的危險(xiǎn)行為有關(guān)。若使用正確，它可以防止用戶(hù)做一些無(wú)法恢復(fù)的危險(xiǎn)行為。

當(dāng)設(shè)計(jì)師使用紅色作為刪除按鈕時(shí)，由于其內(nèi)涵的顏色屬性自然會(huì)讓用戶(hù)暫停。

刪除文件或關(guān)閉帳戶(hù)都是在設(shè)計(jì)中使用紅色的好例子。當(dāng)用戶(hù)看到這樣的對(duì)話框時(shí)，紅色會(huì)提醒他們?cè)谧龀鲎罱K決定之前三思而后行。

綠色

綠色具有許多與藍(lán)色相同的平靜屬性。它是人眼最寧?kù)o和放松的顏色之一。

增長(zhǎng)的象征。綠色可以代表新的開(kāi)端和增長(zhǎng)。

綠色通常用于表示安全性或成功。

表示成功狀態(tài)

通常，綠色與積極結(jié)果相關(guān)聯(lián) - 動(dòng)作完成，文件已保存或在線訂單已完成。 這就是用戶(hù)在操作成功完成時(shí)看到的消息以綠色顯示的原因。

與綠色配對(duì)的復(fù)選標(biāo)記圖標(biāo)向用戶(hù)保證用戶(hù)操作已成功完成

表示鼓勵(lì)

紅色意味著“停止”綠色意味著“執(zhí)行”。這就是綠色可以用來(lái)鼓勵(lì)用戶(hù)參與某些活動(dòng)的原因。例如，Stripe會(huì)提示用戶(hù)使用綠色按鈕進(jìn)行注冊(cè)。

圖片：Stripe

紅色和綠色配對(duì)場(chǎng)景

對(duì)于諸如“接受”或“拒絕”之類(lèi)的二進(jìn)制操作，可以使用紅色和綠色，用戶(hù)更容易地找到相關(guān)動(dòng)作。紅色按鈕警告用戶(hù)他們將切斷呼叫，而綠色則向他們發(fā)出消息，表示他們正在進(jìn)行該呼叫。這意味著用戶(hù)可以花更少的時(shí)間處理這樣的簡(jiǎn)單選擇。

值得一提的是，紅色和綠色配對(duì)僅適用于兩種選項(xiàng)對(duì)用戶(hù)同等重要的情況。如果你希望用戶(hù)以特定方式執(zhí)行操作，則可以對(duì)特定選項(xiàng)賦予更多視覺(jué)權(quán)重。在下面的示例中，我們使用對(duì)比綠色表示“Yes Please！”選項(xiàng)。

圖片: Telerik

哪種顏色轉(zhuǎn)換更好？

“紅色與綠色”的爭(zhēng)論一直是網(wǎng)絡(luò)上的一場(chǎng)長(zhǎng)期戰(zhàn)斗。在網(wǎng)上可以找到很多案例研究。其中最著名的是Joshua Porter對(duì)Hubspot的研究（按鈕顏色A / B測(cè)試：Red Beats Green）。在這項(xiàng)研究中，紅色按鈕會(huì)話比綠色按鈕高出21％。

但重要的是，我們不能一概而論。適用于某個(gè)特定頁(yè)面的顏色不一定適用于另一個(gè)頁(yè)面。

同時(shí)，在為CTA選擇顏色時(shí)，我們應(yīng)該考慮兩件事：

•著陸頁(yè)上的CTA應(yīng)該引人注目，只有當(dāng)按鈕與周?chē)矬w和背景形成鮮明對(duì)比時(shí)才會(huì)發(fā)生這種情況。

•您選擇的顏色和顯示它們的上下文都是至關(guān)重要的考慮因素。

如果我們將Stripe的著陸頁(yè)的CTA顏色從綠色更改為紅色，會(huì)發(fā)生什么呢？肯定是現(xiàn)在的按鈕更引人注目，同時(shí)紅色不適用于此設(shè)計(jì)，因?yàn)樗c此頁(yè)面的美學(xué)相矛盾。

很明顯，紅色CTA與其他設(shè)計(jì)元素發(fā)生沖突。

易用性

根據(jù)Color Blind Awareness，4.5％的人口是色盲。 色盲人士的設(shè)計(jì)很容易被遺忘，因?yàn)榇蠖鄶?shù)設(shè)計(jì)師都不是色盲。

有許多類(lèi)型的色盲，但是大部分色盲者是患有綠色弱視和紅色弱視的人。他們通常難以區(qū)分紅色，綠色，棕色和橙色。

患有色盲的人看到的紅色和綠色差別很大，很難區(qū)分。

這就是UI設(shè)計(jì)中最重要的規(guī)則之一：

不要僅依靠顏色來(lái)傳達(dá)意義

為什么？ 因?yàn)閱为?dú)使用顏色（紅色和綠色）的界面會(huì)造成混淆色盲用戶(hù)的風(fēng)險(xiǎn)。記住始終為用戶(hù)提供其他信息，例如錯(cuò)誤和成功狀態(tài)的圖標(biāo)或文本消息，以便為色盲人員創(chuàng)造更好的用戶(hù)體驗(yàn)。