译文 | 在UX设计中利用色彩影响情绪

0 评论 9673 浏览 151 收藏 12 分钟

颜色是我们观察事物的第一认知,是最能触动我们感官的视觉元素。颜色可以激发我们的联想,刺激我们的情绪。在设计中,颜色的合理运用一直是个很重要的课题。现在就让本篇文章带你认识每种颜色的独特作用和如何运用在UX设计之中吧。

在现在设计中,颜色的选择在任何情况下都非常重要。在设计中,我们想通过无声无语的方式表达设计,颜色就是其中最重要的关键。

在通常情况下,不同颜色唤起不同的感情。为了让你认识到其中的奥秘,我们已经编写了一个快速参考指南,涵盖了每种颜色的独特的作用,以及如何将它运用到UX设计中。

红色

危险性,重要性,激情

在所有颜色中,其中一个表现力最强的颜色,表达战争和爱情的同时。俗话说,“看到红色”突出了愤怒的颜色。

红色元素更明显,加上一个重要的意义,无论是好的还是坏的。淡红色的图片是主题是青春和爱情的好,而暗红色强调力量和持久性,如可靠的朋友。

0-Kbmq9a1HvQCWYZsH

红色可以作为警戒色,如在交通灯和标志,参考已从自然,红色是作为威慑。但是,你应该小心的使用它,作为一个小走一段很长的路。这是一个伟大的颜色需要注意使用,但过量则会过于紧张。

iconfont-meiriyiti

最后但并不是最不重要的,红色与热的关联。

0-YHOcibuOWyIMSf95

橙色

自信,乐观

橙红色在股票里面意味着刺激增长但是增长程度较轻。橙色可以与健康有关,如维生素C.

0-vx7qwdzo1XcKBmUe

橙色是一种活泼,乐观的颜色,非常适合休闲场所,但是他不适合最要出现在企业网站中,一些研究表明,橙色给人感觉便宜或者更坏的东西。但是物业这个行业使用橙色效果是很好的方式.

1-wDN4CdRVt3t_ivBuKCBuLg

黄色

注意,幸福

奇怪的是,黄色代表幸福与焦虑。他通常是充满活力与乐观的。但是明亮的色调会有一种强调效果,这个方式经常使用在警告标志上采用。

1-6WXAvozqJHOAHQbpPGCYLg

加上黑色可以获得更多关注。一个最好的例子就是设计一个出租车,通过和黄色结合,可以获得更多关注。

0-hOuOkeALZH6J8auF

如果你使用黄色请注意下里面简单的规则:淡黄色可以让用户感觉到阳光快乐,暗色调给人感觉很严肃以及古老.

绿色

增长,自然,成功

绿色让人第一感觉关联到植物上,因为大多数植物都是绿色的,它与生长和健康有关.

1-7-9N2IfvfL5loPpU7OsW-w

在色彩饱和度上要注意。

1-bHPuzfSPJAfpNw5hhbiy7w

饱和的绿色给人感觉令人兴奋和充满活力,绿色的按钮可以获得更多关注,所以一般的执行按钮都是使用绿色。

1-9podIfElOGoxiuiaIdmV-g

蓝色

信任,舒适,放松

蓝色是UI设计中的最重要的颜色之一,也是最常见的。根据对色彩和色调的改变,它可以代表不同的感情,思想和情绪。暗蓝色能给悲伤的感觉。

浅蓝色是天空和水的颜色,它可以提神,自由和平静。这种放松的友好也会转化为内在的信任,这就是为什么它是经常使用的原因.

1-9kL3TpoHfJK3LrP1z5ta0A

并非巧合的是,两个最大的社会媒体,Facebook和twitter蓝色为核心的色彩都使用。

0-_K-BARE0hMVGtz_L

传闻:扎克伯格曾经提到,他用蓝色,因为他是色盲,所以他不能真正地看到任何其他颜色时,他设计的原创网站。

紫色

豪华、浪漫、创造力

高贵与皇室被紫色所代替。紫色暗示产品或网站比较华丽高端.

0-xRM24fuSxtyCFDys

因为紫色周期回到红色的光谱,它有红色的激情的特点,尤其是淡如薰衣草。

1-zyo4Nj47BGH4uj9LngO7Vg

粉红色

温柔,纯真,青春

粉红色通常是含糖的糖果色,所以颜色会有嬉闹的气氛,有点幼稚。这就是为什么你可以添加一点粉红色让用户高兴的原因。

0-OvtquMgmgJC8leCg

粉红色并不总是意味着女性。事实上,过度使用粉红色的“女性特质”很容易激怒用户。

0-7IYh7HmbDyJTz16S

棕色

保守主义、地球、稳定

伦敦的绅士不穿棕色。同样的棕色不适合大多数网站,但对于那些比较完美的作品。棕色可以用于一个乡村,老式的感觉,完美的户外场所,甚至有机产品。木材的内涵也建议稳定性和可靠性.

1-je2pzlhvZiHIlSuCdS8y_Q

在一般情况下,使用饱和色的棕色来作为菜单、面板和背景。

黑色

正式,权力,成熟

黑色是最强的所有颜色,它吸引的注意力比其他颜色的更快,即使是红色。这就是为什么它是最常用在文字中。当作为一个配色方案的主要组成部分,如背景、黑色比任何颜色都适合创造自己的感情。

0-fISP1okLvfXV_p7z

结合银色或灰色,它可以代表成熟,如上面的例子:

0-RcgeyVfFDVniwOmF

白色

新鲜、健康

黑色正好是它的相反色,白色颜色普其他颜色在它的周围,使它为辅助色的首选。

1-RA0XibXRF__j0aRA7-SOfw

当白色是主色,其黑色具有压倒性。如果你的白网站似乎太单一,试着白 的分支- 用象牙和奶油色组合。尝试使用色调让白色元素看起来不错。

1-EeJwakyNtwF_iR2nIi3yWQ

灰色

形式,中立性、复杂性

灰色代表中立。如果你的网站或应用程序使用冷色,一个灰色的混合和一点冷色会补充它。如果您的网站使用暖色,一个灰色的混合和一点温暖的颜色将补充它。添加到您的灰色色调,增加色彩饱和度。

1-5geaBRMlkgFR9N1yynqqqw

通过改变它的阴影,灰度可以在黑色或白色的特点。当作为一个主要的颜色,灰色给人居于形式的印象,但是这并不总是意味着坏事。Dropbox使用灰色突出按钮免费注册用户能够找到正确的按钮,真的很快。

1-cD6OVPJT9SfM7dDEXDCVVA

您可以使用内容和相应的图像,以避免“忧郁”的感觉,通过一个元素可以给人感觉强烈关注。

1-LE9hm32zdK6R0tD1Sg2Ahg

浅灰色的颜色最适合按钮禁用(无效)状态

1-b0sbt_hrRqihQarw6sR11w

结论

正确的设计决策才是用户认为是正确的.可以通过A/B测试转换.

0-3HXoN9VobAC-lceb

 

颜色的使用是很重要的,有时候很多情况下没有设置好通用的颜色。在一个网站或应用程序的东西,不一定适合另一个,从你的目标市场在设计过程的早期很重要。

最初发表在www.babich.biz

 

本文由 @bluelovemagic 翻译发布于人人都是产品经理。未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!