以下內容由摹客團隊翻譯整理,僅供學習交流。
顏色對我們日常生活中的感知和情感有着重大影響。如果使用得當,顏色可以引起用戶的特定反應。本文將專注於兩種特殊的顏色 - 紅色和綠色。理由如下:
紅色和綠色對於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設計中最重要的規則之一:
不要僅依靠顏色來傳達意義
爲什麼? 因爲單獨使用顏色(紅色和綠色)的界面會造成混淆色盲用戶的風險。記住始終爲用戶提供其他信息,例如錯誤和成功狀態的圖標或文本消息,以便爲色盲人員創造更好的用戶體驗。