旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計之顏色搭配指南-紅色與綠色的常用場景介紹

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

時間:2019-03-09來源:m.5wd995.cn點擊量:作者:fubowen
時間:2019-03-09點擊量:作者:fubowen

顏色對我們?nèi)粘I钪械母兄颓楦杏兄卮笥绊憽H绻褂玫卯?,顏色可以引起用戶的特定反應。本文將專注于兩種特殊的顏色 - 紅色和綠色。理由如下:

紅色和綠色對于UI設(shè)計都非常重要,因為它們是可操作的

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


紅色

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

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

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

表示錯誤狀態(tài)

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

圖片:Mailchimp

 

表示情緒反應

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

 

 

表示從購物車中刪除商品

在電子商務中,紅色通常用于操作的購物車摘要中來表示“從購物車中移除”。

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

 

表示潛在的危險行為

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

當設(shè)計師使用紅色作為刪除按鈕時,由于其內(nèi)涵的顏色屬性自然會讓用戶暫停。

刪除文件或關(guān)閉帳戶都是在設(shè)計中使用紅色的好例子。當用戶看到這樣的對話框時,紅色會提醒他們在做出最終決定之前三思而后行。

綠色

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

增長的象征。綠色可以代表新的開端和增長。

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

表示成功狀態(tài)

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

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

 

 

表示鼓勵

紅色意味著“停止”綠色意味著“執(zhí)行”。這就是綠色可以用來鼓勵用戶參與某些活動的原因。例如,Stripe會提示用戶使用綠色按鈕進行注冊。

Stripe

圖片:Stripe

紅色和綠色配對場景

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

紅色拒絕與綠色接受

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

圖片: Telerik

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

“紅色與綠色”的爭論一直是網(wǎng)絡上的一場長期戰(zhàn)斗。在網(wǎng)上可以找到很多案例研究。其中最著名的是Joshua Porter對Hubspot的研究(按鈕顏色A / B測試:Red Beats Green)。在這項研究中,紅色按鈕會話比綠色按鈕高出21%。

紅色按鈕會話比綠色按鈕高出21%

但重要的是,我們不能一概而論。適用于某個特定頁面的顏色不一定適用于另一個頁面。

同時,在為CTA選擇顏色時,我們應該考慮兩件事:

•著陸頁上的CTA應該引人注目,只有當按鈕與周圍物體和背景形成鮮明對比時才會發(fā)生這種情況。

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

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

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


易用性

根據(jù)Color Blind Awareness,4.5%的人口是色盲。 色盲人士的設(shè)計很容易被遺忘,因為大多數(shù)設(shè)計師都不是色盲。

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

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

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

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

為什么? 因為單獨使用顏色(紅色和綠色)的界面會造成混淆色盲用戶的風險。記住始終為用戶提供其他信息,例如錯誤和成功狀態(tài)的圖標或文本消息,以便為色盲人員創(chuàng)造更好的用戶體驗。

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖