UI設計中使用亮色的優(yōu)缺點

這篇文章展示了豐富多彩的UI的優(yōu)缺點,描述了明亮的顏色如何提高用戶體驗酬屉,以及在選擇亮色時應該考慮有哪些缺陷。

聲明:如需轉載筒捺,請申請本人授權并保留文章全部信息,嚴禁私自用于任何商業(yè)用途纸厉,請尊重原文作者及譯者權益系吭。

有效的顏色應用技巧是每個從事視覺合成相關工作的,包括插畫家和UI設計師颗品,都必須具備的肯尺。隨著扁平化設計和material design的普及,具備色彩理論知識變得更加重要抛猫。

目前鮮艷的顏色和漸變出現(xiàn)在不同數(shù)字產品的用戶界面上:從好玩和有趣的到商業(yè)應用和網站蟆盹。然而,關于明亮的顏色對用戶體驗的影響還有很多討論闺金。本文對豐富多彩的用戶界面設計的優(yōu)缺點進行了深入的分析。

明亮的顏色如何提高UI效果?

增加可讀性和易讀性

我們之前的一篇文章中峰档,介紹了影響配色方案選擇的因素败匹。可讀性和易讀性是設計師考慮色彩運用的基本因素讥巡。提醒一下掀亩,可讀性是指人們閱讀文本內容的容易程度,而易讀性則定義了用戶在特定字體中區(qū)分字母的速度欢顷。

鮮明的顏色足夠的對比度有助于增加可讀性和易讀性槽棍。有對比的布局元素會變得可區(qū)分和引人注目。然而抬驴,高色彩對比可能并不總是有效炼七。如果文本內容和背景顏色對比度太大,將很難閱讀或掃描文本布持。這就是為什么推薦設計師創(chuàng)建一個溫和的對比度豌拙,只用高對比度顏色突出元素的原因。

提亮導航题暖,使交互更直觀

對任何數(shù)字產品來說按傅,視覺層次是打造清晰導航和直觀交互的核心要素。UI組件就是這樣被組織起來的胧卤,這樣大腦就可以通過這種包括顏色在內的物理差異來區(qū)分物體唯绍。

顏色有自己的層次結構,這是受用戶思維的影響所決定的枝誊。有大膽的顏色况芒,如紅色和橙色,以及弱的白色和奶油色侧啼。明亮的顏色很容易被注意到牛柒,所以設計師經常用它們來突出或設置對比度堪簿。此外,將一種顏色應用到幾個元素上皮壁,表示它們在某種程度上是有相關性的椭更。例如,您可以為購買按鈕選擇紅色蛾魄,以便人們在需要時直觀地找到它們虑瀑。

可識別性

大腦對大膽的顏色反應強烈,這就是為什么明亮的顏色組合很容易被注意和記住的原因滴须。色彩豐富的用戶界面設計舌狗,在眾多顏色較輕的產品中容易脫穎而出。顏色的選擇需要基于目標受眾的喜好和市場調查扔水。

此外痛侍,如果一個公司擁有明亮的企業(yè)顏色應用于商標和品牌項目,那使用同樣顏色在其網站或移動應用上也是一個好方法魔市。這種方式連接公司所有的溝通渠道主届,創(chuàng)造了一致性的視覺解決方案,并且提高了品牌知名度待德。

設定情緒和氣氛

為了傳達正確的語氣君丁、信息和號召用戶做出預期的行動,設計師需要知道顏色會影響我們的情緒和行為将宪。我們的大腦會對顏色做出反應绘闷,而我們通常不會注意這點。這項名為“顏色心理學”的研究表明较坛,當我們的眼睛感知到一種顏色時印蔗,大腦就會向內分泌系統(tǒng)發(fā)出信號,釋放負責情緒變化的荷爾蒙燎潮。

適當選擇顏色有助于讓用戶處于一種促使他們采取行動的心理狀態(tài)喻鳄,并設置合適的氛圍將正確的信息傳遞給用戶。比如确封,如果設計師設計了一個與自然或園藝相關的產品的UI除呵,很有可能會選擇用綠色和藍色。通過這種方式爪喘,設計將從一開始就與一種產品或服務類型相關聯(lián)颜曾。您可以在我們的文章《顏色對用戶行為的影響》中找到對顏色含義的具體描述。

時尚的外觀和風格

明亮的顏色和漸變秉剑,是UI設計中的最流行的趨勢泛豪。如今,可以在不同類型的數(shù)字產品中看到這種運用,而嚴格的商業(yè)風格的限制似乎被拋在了一邊诡曙。

明亮的漸變色彩在用戶界面上可以帶來一種現(xiàn)代化感和新鮮的想法臀叙。結合最新趨勢設計的APP或網站往往引人注目,盡管競爭激烈价卤,仍能吸引用戶的注意力劝萤。

明亮的顏色使用缺陷

很難搭配

那些認為顏色能靠直覺和審美隨意混合的觀念是錯誤的。如果你想要創(chuàng)造和諧的視覺構圖慎璧,那么關于顏色如何起作用以及它們如何協(xié)作的基本知識是必不可少的床嫌。

在UI中應用的顏色越鮮艷,搭配就越困難胸私。為了讓用戶感到愉悅和舒適厌处,設計師努力將平衡和和諧融入到用戶界面設計中。色彩協(xié)調是指在設計中以最吸引人岁疼、最有效的方式來安排色彩阔涉,以供用戶感知。和諧的顏色組合有助于對網站或APP獲得一個不錯的第一印象五续。顏色理論定義了一些基本的顏色方案洒敏,下面這些配色方案被證明是有效的。

單色疙驾,色彩和諧是基于一種顏色和它的各種色調。

類似色郭毕,該方案適用于顏色輪上相鄰的顏色它碎。

互補色,它是在色輪上相互放置的顏色的混合显押,目的是產生高對比度扳肛。

多色互補,這個方案與前一個方案相似乘碑,但是它使用了更多的顏色挖息。例如,如果你選擇藍色兽肤,你需要取另外兩個相鄰的顏色套腹,表示黃色和紅色。

三元色资铡,它是基于三個獨立的顏色电禀,在色輪上是等距的。專業(yè)人士建議使用一種顏色作為主調笤休,其他顏色作為輔助尖飞。

四色,tetradic配色方案使用四個顏色從車輪是互補的。如果你把選中顏色上的點連起來政基,它們就形成了矩形贞铣。

失去節(jié)奏感

大膽的顏色可以作為在UI中進行重音的工具,但它也可能成為重音消失的原因沮明。許多鮮明的顏色在一個單一的視覺組成會帶來了失去突出元素的風險辕坝,因為他們成為一個色彩種制造混亂的一部分。

這就是為什么推薦設計師使用60%-30%-10%的比例珊擂。最重要的部分應該是主色調圣勒,三分之一的構圖采用第二色,10%的部分應該選擇有助于形成重音的顏色摧扇。這樣的比例被認為是令人愉快的圣贸,因為它允許逐漸感知所有的視覺元素。

明亮的顏色并不適合所有用戶群體

創(chuàng)造數(shù)字產品的核心階段之一是用戶研究扛稽。定義和分析目標受眾吁峻,使設計師了解他們對網站或應用程序的期望。年齡在张、性別和文化會影響潛在用戶的喜好用含。例如,孩子們很喜歡黃色帮匾,但當我們長大后啄骇,黃色通常看起來不那么有吸引力瘟斜。男人和女人通常喜歡冷酷的顏色缸夹,如藍色,綠色螺句。不像女人虽惭,男人通常喜歡白色、黑色和灰色蛇尚。

明亮的顏色也是如此芽唇。即使您是設計一個有趣的APP,也需要考慮目標受眾的具體情況取劫。中年人通常更喜歡輕松的用戶界面匆笤,他們可能不喜歡屏幕上很重的顏色去分散注意力。

在移動屏幕上勇凭,鮮艷的顏色看起來反差太大

正如我們上面所說疚膊,明亮的顏色可以產生大量的對比度,幫助突出重要的UI元素虾标,并提供良好的易讀性和可讀性寓盗。然而灌砖,過多的對比度可能會起到不好的效果,尤其是在移動界面上傀蚌,因為它們的空間有限基显,可以在不同的環(huán)境下使用。

小屏幕善炫、環(huán)境光和明亮的字體使對比度高的圖像在用戶眼中顯得很難看撩幽。這就是為什么在移動UI設計中使用明亮的顏色需要注意顏色之間的對比度,這樣人們在閱讀文字時會感到舒服箩艺。

顏色是大師手中的一件偉大的工具窜醉,和其他任何工具一樣,它也有它的優(yōu)點和缺點艺谆。為了有效地使用它榨惰,需要考慮它的所有方面,以便能夠找到適合設計任務和目標的解決方案静汤。

歡迎在文章評論區(qū)留言琅催,讓我們一起成長。也可以關注我的站酷:愛設計的狐貍虫给。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末藤抡,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子抹估,更是在濱河造成了極大的恐慌缠黍,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件药蜻,死亡現(xiàn)場離奇詭異嫁佳,居然都是意外死亡,警方通過查閱死者的電腦和手機谷暮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盛垦,“玉大人湿弦,你說我怎么就攤上這事√诤唬” “怎么了颊埃?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蝶俱。 經常有香客問我班利,道長,這世上最難降的妖魔是什么榨呆? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任罗标,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘闯割。我一直安慰自己彻消,他們只是感情好,可當我...
    茶點故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布宙拉。 她就那樣靜靜地躺著宾尚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谢澈。 梳的紋絲不亂的頭發(fā)上煌贴,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天,我揣著相機與錄音锥忿,去河邊找鬼牛郑。 笑死,一個胖子當著我的面吹牛缎谷,可吹牛的內容都是我干的井濒。 我是一名探鬼主播,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼列林,長吁一口氣:“原來是場噩夢啊……” “哼瑞你!你這毒婦竟也來了?” 一聲冷哼從身側響起希痴,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤者甲,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后砌创,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體虏缸,經...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年嫩实,在試婚紗的時候發(fā)現(xiàn)自己被綠了刽辙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡甲献,死狀恐怖宰缤,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情晃洒,我是刑警寧澤慨灭,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站球及,受9級特大地震影響氧骤,放射性物質發(fā)生泄漏。R本人自食惡果不足惜吃引,卻給世界環(huán)境...
    茶點故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一筹陵、第九天 我趴在偏房一處隱蔽的房頂上張望刽锤。 院中可真熱鬧,春花似錦惶翻、人聲如沸姑蓝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纺荧。三九已至,卻和暖如春颅筋,著一層夾襖步出監(jiān)牢的瞬間宙暇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工议泵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留占贫,地道東北人。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓先口,卻偏偏與公主長得像型奥,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子碉京,可洞房花燭夜當晚...
    茶點故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內容

  • 老羊說厢汹,千言萬語在心中,成長后谐宙,開始不知道說什么烫葬,事情太多,不知道從何說起凡蜻。 最近開始感覺搭综,和遠方的朋友,沒話說划栓。...
    xczjrove閱讀 1,063評論 0 0
  • 火帶來的 遠不及 你一句話的火熱
    水筆仔o12530閱讀 208評論 4 2
  • 晨起叩齒60次可強腎固精忠荞。 古語說:“百物養(yǎng)生闪朱,莫先口齒∽耆鳎”可見養(yǎng)護牙齒在養(yǎng)生中的地位。傳統(tǒng)的中醫(yī)養(yǎng)生保健方法就有...
    逍遙an閱讀 561評論 0 0
  • 13號從拉薩出發(fā)再次來到麗江锄开,沒有目的也沒有計劃的出行素标。 只因在拉薩呆了一個多月,被冷怕了萍悴。 突然看到拉薩飛麗江的...
    zzl大路閱讀 342評論 0 0