配色指南｜你知道如何正確使用紅色與綠色嗎？

如下內容由摹客團隊翻譯整理，僅供學習交流，摹客iDoc是支持智能標註和切圖的產品協做設計神器。

顏色對咱們平常生活中的感知和情感有着重大影響。若是使用得當，顏色能夠引發用戶的特定反應。本文將專一於兩種特殊的顏色 - 紅色和綠色。理由以下：

紅色和綠色對於UI設計都很是重要，由於它們是可操做的

讓咱們探討在用戶界面中使用紅色和綠色做爲強調色的經常使用方法。

紅色

重要性。 它是一種高度可見的顏色，可以快速集中注意力，讓人們快速作出決定。

紅色是一種很是強烈的顏色，充滿了激情與憤怒的情感色彩。

警告或危險。閃爍的紅燈一般意味着危險或緊急狀況。

表示錯誤狀態

紅色一般與警告或某些相當重要的東西相關聯。這就是爲何當咱們考慮錯誤狀態時，紅色是第一種想到的顏色。就像打叉的紅色圖標，可以一目瞭然地傳達信息錯誤。

圖片：Mailchimp

表示情緒反應

紅色每每與愛情和激情聯繫在一塊兒。設計師在情感反應中使用偏紅色（如Berry Red）表示喜歡。

Twitter 點贊

表示從購物車中刪除商品

在電子商務中，紅色一般用於操做的購物車摘要中來表示「從購物車中移除」。

從購物車中刪除項目的顏色爲紅色

表示潛在的危險行爲

紅色一般與潛在的危險行爲有關。若使用正確，它能夠防止用戶作一些沒法恢復的危險行爲。

當設計師使用紅色做爲刪除按鈕時，因爲其內涵的顏色屬性天然會讓用戶暫停。

刪除文件或關閉賬戶都是在設計中使用紅色的好例子。當用戶看到這樣的對話框時，紅色會提醒他們在作出最終決定以前三思然後行。

綠色

綠色具備許多與藍色相同的平靜屬性。它是人眼最寧靜和放鬆的顏色之一。

增加的象徵。綠色能夠表明新的開端和增加。

綠色一般用於表示安全性或成功。

表示成功狀態

一般，綠色與積極結果相關聯 - 動做完成，文件已保存或在線訂單已完成。 這就是用戶在操做成功完成時看到的消息以綠色顯示的緣由。

與綠色配對的複選標記圖標向用戶保證用戶操做已成功完成

圖片：Ed Poole

致謝：Colin Garven

圖片: Phil LaPier

表示鼓勵

紅色意味着「中止」綠色意味着「執行」。這就是綠色能夠用來鼓勵用戶參與某些活動的緣由。例如，Stripe會提示用戶使用綠色按鈕進行註冊。

圖片：Stripe

紅色和綠色配對場景

對於諸如「接受」或「拒絕」之類的二進制操做，可使用紅色和綠色，用戶更容易地找到相關動做。紅色按鈕警告用戶他們將切斷呼叫，而綠色則向他們發出消息，表示他們正在進行該呼叫。這意味着用戶能夠花更少的時間處理這樣的簡單選擇。

值得一提的是，紅色和綠色配對僅適用於兩種選項對用戶同等重要的狀況。若是你但願用戶以特定方式執行操做，則能夠對特定選項賦予更多視覺權重。在下面的示例中，咱們使用對比綠色表示「Yes Please！」選項。

圖片: Telerik

哪一種顏色轉換更好？

「紅色與綠色」的爭論一直是網絡上的一場長期戰鬥。在網上能夠找到不少案例研究。其中最着名的是Joshua Porter對Hubspot的研究（按鈕顏色A / B測試：Red Beats Green）。在這項研究中，紅色按鈕會話比綠色按鈕高出21％。

但重要的是，咱們不能一律而論。適用於某個特定頁面的顏色不必定適用於另外一個頁面。

同時，在爲CTA選擇顏色時，咱們應該考慮兩件事：

•着陸頁上的CTA應該引人注目，只有當按鈕與周圍物體和背景造成鮮明對比時纔會發生這種狀況。

•您選擇的顏色和顯示它們的上下文都是相當重要的考慮因素。

若是咱們將Stripe的着陸頁的CTA顏色從綠色更改成紅色，會發生什麼呢？確定是如今的按鈕更引人注目，同時紅色不適用於此設計，由於它與此頁面的美學相矛盾。

很明顯，紅色CTA與其餘設計元素髮生衝突。

易用性

根據Color Blind Awareness，4.5％的人口是色盲。 色盲人士的設計很容易被遺忘，由於大多數設計師都不是色盲。

有許多類型的色盲，可是大部分色盲者是患有綠色弱視和紅色弱視的人。他們一般難以區分成色，綠色，棕色和橙色。

患有色盲的人看到的紅色和綠色差異很大，很難區分。

這就是UI設計中最重要的規則之一：

不要僅依靠顏色來傳達意義

爲何？ 由於單獨使用顏色（紅色和綠色）的界面會形成混淆色盲用戶的風險。記住始終爲用戶提供其餘信息，例如錯誤和成功狀態的圖標或文本消息，以便爲色盲人員創造更好的用戶體驗。

原文做者：Nick Babich

原文地址：uxplanet.org/using-red-a…

學習工具，但不受限於某種工具。摹客iDoc，高效協做，從產品到開發，只要一個文檔，讓你的團隊高效協做！

福利時間：

摹客iDoc徵集用戶反饋啦！

設計協做平臺摹客iDoc，支持上傳sketh、ps、xd的設計稿和axure、mockplus的原型圖。無需下載，掃碼就能登陸使用。

專屬試用禮包：打開idoc.mockplus.cn/get-idoc/?h… 註冊/登陸，輸入升級碼 venus 免費升級至付費團隊版。

數量有限，先到先得！