在UI设计中颜色选择的6点建议

原文网址:Color Matters. 6 Tips on Choosing UI Colors.

原作者:Medium    @tubikstudio

译者:Lidy

此文由非专业人士翻译自Medium。如若有误敬请纠正。


用户体验设计包括很多方面都需要仔细思考后再执行,来为了达到一个界面能满足不用目标用户的需要的目的。每一步都需要注意细节,即使它看上去不复杂。

在用户界面设计中,一个耗时又重要的环节是颜色的选择。设计师有时会花费数个小时来选择合适的颜色。在这篇文章中,我们提出6个有用的建议来帮助设计们为用户界面选择合适的颜色,并且使得这个过程更加简单和高效。

建议1:学会60%-30%-10%法则

这个法则或者说技巧,来自室内设计,所有它也常用在装修房子上。这个理论很简单。为了在构图中取得平衡,颜色应该要按照60%-30%-10%这样的比例分配。最大的地方使用主色调,三分之一的构图部分采用辅助色,10%用于其它地方帮助突出。

这样的配色被认为对人眼来说是舒适的,因为它允许逐步感知所有视觉元素。知道合适比例的设计师们能成功地把颜色组合在一起而不会使得用户界面的配色很杂乱。

建议2:对比是朋友

色彩对比是所有视觉构成的关键部分。它使得每个用户界面元素有各自的特征,又使得他们是明显的。仅包含来自同一色系颜色的用户界面能吸引用户的机会较少。此外,在用户界面上相同的内容将会变得难以辨认,这使得与产品的交互几乎不可能。

设计师控制对比度取决于它应该完成的目标。例如,如果你需要用户对某个特殊的按键特别关注,那使用两个对比强烈的颜色例如蓝色和红色就很合适。高对比度通常用于CTA按钮的设计。

但是,把用户界面当作一个整体,高对比度可能不是总会奏效。如果要编辑的内容和背景色对比太强烈,就会很难以阅读。这就是为什么设计师被建议说要建立一个温和的对比度,只在想要突出显示的元素上应用高对比度的颜色。在不同设备上的用户测试能帮助设计师确保他们解决方案的有效性。

建议3:考虑颜色背后代表的心理

正如我们在之前的文章中提到的那样,心理学是帮助设计流程的基础研究之一。有大量的心理学研究展示里颜色对于人情绪和行为的影响,他们被称为色彩心理学。它表明尽管我们没有注意到,我们的大脑就对颜色做出了反应。当人的眼睛感知到了颜色,我们的大脑就给内分泌系统发送信号,释放负责情绪的荷尔蒙。

每种颜色对我们的大脑都有不同的影响,对于每种可能反应的知识能帮助设计师传达正确的信息来让用户做出预期的行为。以下是几种颜色代表的含义。

红色:它同时代表了好和坏的感觉,包括爱,自信,激情和愤怒。

橘色:一种富有活力和温暖的颜色,给人一种激动的感觉。

黄色:它代表了快乐,阳光,欢乐以及温暖。

绿色:大自然的颜色,给人以冷静和再生的感觉。

蓝色:它常代表一些企业形象。可能会与距离和悲伤联系。

紫色:与皇族和财富有着长期的联系。它也代表神秘和魔法。

黑色:他和悲剧、死亡联系,表示神秘的事。同时,他又兼具传统和现代。

白色:它代表纯洁,以及整体性和明晰性。

除此之外,设计师还需要记住视觉感受每个人都是不一样的。像年龄、性别这样的因素会影响颜色偏好,所有知道目标用户的特性很重要。你可以在我们之前的文章中找到有关颜色的意义和喜好的更多细节描述。

建议4:不要忘记文化差异

每个文化都有自己的传统和信念,所以在你选择颜色之前,你需要确保他们能正确解读你所要传达的意思。有时一种颜色在不同国家会有完全相反的含义。例如,在欧洲地区,白色代表纯洁,它通常在婚礼上使用。但是在亚洲国家,白色代表死亡和悲伤。不正确的使用可能会导致误解,这对一个产品来说可能是致命的。通过认识到文化中颜色特征的差异,设计师会降低被误解的风险。

建议5:力求和谐

和谐是每个UI设计师力求做到的。为了使得用户感觉舒适,设计师试着在用户界面的设计上达到平衡。色彩和谐涉及到设计中颜色的排列,以最有吸引力、最有效的方式让用户感知到。和谐的色彩有助于用户对网站或者应用程序有良好的第一印象。

寻找多年之后,设计师们区分了有效运作的基本配色方案。让我们看看他们是什么。

单色:色彩和谐是基于一种颜色,有各种色调。

类似色:这个方案的配色使用的是色轮中相邻的颜色。

补色:它用的是色轮中每个颜色以及其对面的颜色,它旨在制造强烈的对比。

分散的互补色:这个方案的配色和前一个很像,但是它用到了更多的颜色。例如,如果你选择了蓝色,你需要再选择它对面的两个相邻的颜色,黄色和红色。

三元色:它是基于在色轮上等距的3个不同的颜色。专家建议用一种作为主色调,其他作为辅色调。

四元/双互补色:这个方案包含4个在色轮上是互补的颜色。如果你把选择的四个颜色作为点连接起来,它们会形成一个矩形。


有关和谐色彩的详细的信息和例子能够在我们这篇《Color Theory:Brief Guide for Designers》中找到。

建议6:从大自然中窃取灵感

大自然是世界上最好的艺术家和设计师。我们能在自然界中看到的颜色组合是非常完美的。人们享受看日出日落,秋天的森林,冬天的群山,因为他们都是天然的颜色组合。

所以,你为什么不从中找点灵感呢?去散散步或者找一下大自然的美丽照片,你一定会找到灵感的。

一款成功的数码产品很大程度上取决于用户界面颜色的选择。合适的颜色使得用户在使用产品时感到舒适。设计师可以向用户传达信息,并且迫使他们采取行动,仅仅是通过采用合适的颜色。明智地做出选择。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,783评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,360评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,942评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,507评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,324评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,299评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,685评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,358评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,652评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,704评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,465评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,318评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,711评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,991评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,265评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,661评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,864评论 2 335

推荐阅读更多精彩内容