恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
新手的成长记录点滴(四)
0.0°
2016-02-25 原创文章 经验/观点 举报 1189 3 5 0

记得在初中学美术的时候,水粉是我最喜欢的课程了,因为在这里你可以用你对事物的感觉去用色彩来表现出来,它相较素描课程中的黑白灰而言要有趣很多很多,每次的课程结束,我都会跟当堂的老师进行交流,而她也教会了我好多当时在那个年纪所不懂得东西,直至大学,我查看了相关的书籍,才明白色彩的博大精深。就拿现在的我来说,那时的知识一直影响着我,各位不要误会,我可不是绘画的从业者,但是本人的工作还是跟其有些关联的。那下面就来总结一下我之前关于色彩学的知识点了,望各位大神指点。

一、关于色彩

1、色彩

色彩对于人类而言,始终是属于自然界中最神奇的奥妙之一,永远都在激发着我们的好奇心和创造力。在我们的生活中无论何时何地都充满着丰富多姿的色彩,哪里有光,哪里就有颜色。有时候我会幻想色彩是独立的:天空是蓝色的,植物是绿色的,云是白色的,而花却是红色的。但事实上,色彩从来就不是单独存在的,漂亮的色彩搭配常常使得画面更加引人注意。色彩就像跳跃在钢琴键盘上音符一样,没有所谓的好与坏,唯有将一个个小小的音符串联起来,才能谱出最美妙的声音,色彩也是异曲同工之妙,只有协调与不协调之分。

2、色彩原理

(1)色相:色相即每种色彩的相貌、名称。如红、橘红、翠绿、湖蓝、群青等,色相是区分色彩的主要依据,是色彩的最大特征。

(2)明度:明度即色彩的明暗差别,也就是色彩的深浅差别。色彩的明度差别包括两个方面:一是指某一色相的深浅变化,如粉红、大红、深红都是红,但一种比一种深。二是,指不同色相间存在的明度差别,如六标准中的黄色最浅,紫色最深,橙和绿,蓝和红处于相近的明度之间。

(3)纯度:纯度即各色彩中包含的单种标准色的成分多少。纯的色色感很强,即色度强,所以纯度亦是色彩感觉强弱的标志。不同的色相所能表达出来的纯度是不同的,其中红色纯度最高,绿色纯度相对低一些,其余色居中些,同时明度也不相同。

3、色相环

色相环告诉我们色彩之间的关联,在很多的书籍及教材中都可以看到色相环的身影,它是帮助我们选择颜色的强有力的工具。色相环是指人类用肉眼所能辨识的色彩色相所组成的色环,它由12中颜色组成,包含三原色:即红、黄、蓝,也就是我们常见的颜色三颜色(CMY),而在我们手机和pc端所讲的光学三颜色(RGB)便是红、绿、蓝。然而在这里讲的颜色三原色:红、黄、蓝,原色混合产生二次色即橙、绿、紫,二次色再次混合产生了三原色。三原色是色相环中所有颜色的“父母”。在色相环中只有这三种颜色不是由其它颜色混合而成,在色环中的位置是平均分布的。Image title

二、色彩情感

每个人都有自己喜欢的歌曲,同时也有自己喜欢的颜色,甚至相信星座的伙伴们还有自己色幸运色,不过这都是开玩笑的话。每一种颜色都有属于自己的寓意,色彩作为第一视觉语言,当人类初接触一事物时,产生的第一印象时色彩的吸引力往往高于其造型所产生的印象。适当的应用色彩能够增强画面感染力,提升产品印象与感觉,而不同的色彩常常左右了产品最终给人的感受。

色彩具有象征性,而且色彩的象征性具有区域性,民族性。说到象征我们脑海里首先会蹦出:红玫瑰象征炽热的爱情,黄色总是与富丽,权利地位相连,白色纯洁,蓝色优雅平静,黑色肃穆,邪恶等。因为颜色具有象征性,所以我们要分场合着装,礼数等。

三、色彩能够快速帮助我们建立用户认知:下面简单介绍下三原色给我们带来的色彩感受,以及在生活中和设计中的运用。

1、红色

红色是三原色之一,红色的纯度高、注目性高、刺激作用大,是视觉效果最强烈的色彩。红色是中华民族最喜爱的颜色,甚至成为中国人的文化图腾和精神皈依,中国人近代以来的历史就是一部红色的历史,承载了国人太多红色的记忆,即现在最常见的“中国红”。

红色源于自然的意象:

太阳:温暖、瞩目、能量、主导、煽动性、

火:热、强烈、幽冥、感性、兴奋、活力、跃动

血:生命、杀人、献血、祭祀、拯救、伤口

嘴唇:口红、诱惑、女性

玫瑰:爱情

苹果:收获、甜、

辣椒:辣、火辣、美味

红色源于社会的意象:

旗帜:革命、共产党、国旗

宗教:十字架、原罪、牺牲

心:心脏、内心、爱

标记:修订、注意事项、高压、上升趋势、警告、反对(红牌)

信号:暂停、危险、终止、禁止、敌军、被害

在生活中,也随处可见红色的存在,由于红色容易吸引人眼的注意,因此许多警告符号与提示符号都使用红色来表示,例如红绿灯中的红色表示停止、路边的维修灯号、车辆的煞车灯都使用红色来表示警告、提醒行人注意等等。在消防设备、消防栓、灭火器都使用红色,方便在必要的时候能够快速的找到它们。Image title

在网页中以红色为主色的并不多,在大量信息的页面里有大量面积的红色是不易于阅读的。但若搭配好的话,也可以起到振奋人心的作用。过纯的红色容易使人疲劳,引起人的心理反感,所以一般只有在以活动节庆为主题的网站中才会大面积使用纯红色,而在其他主题的网站中,要使用大面积的红色就需要加白或调暗。

红色既有积极的一面,也有消极的一面。如果要强调和表现红色积极的一面,最好使用泛黄的大红色或者明度较高的粉红色系的颜色。泛黄的红色比100%红色更能够表达温暖的感觉。在黄粉红色系中,泛黄的粉红色比泛紫的冷粉色更能传达出积极的印象。而相反,如果想要表现红色中消极性的一面,使用泛紫的红色比较好。红色和紫红色中间的色系给人冷淡、不自然的感觉。这些色彩的明度越低,越给人不自然的和消极的形象。

2、黄色

黄色属于色彩三原色之一,是所有色彩中最明亮的色彩。作为暖色调的基准色彩之一,黄色给人一种快乐、轻快、通透、辉煌、充满希望与活力的色彩印象,给人一种庄重、高贵、明亮的心理感受。但也由于黄色的明度相当高,黄色很容易受到其他颜色的影响,色相稍微偏红、绿一点就会被觉得是橙色或绿色,明度降低时就容易被认为是土色,所以某方面而言,黄色是一个相当难以掌握的色彩。

黄色源于自然意象:

光:温暖、灿烂、美丽、明亮、肯定、能量;

黄金:财富、名誉(金牌)、权利;

柠檬:新鲜、开始、香味;

鸡雏:小孩、未成熟、俗气、新加入;

泥土:(黄土)、怀旧、母爱、气度、污染、脏

黄色源于社会意象:

旗帜:安全、休息、弃权;

记号:注目、补充说明、注意(黄牌)、警告;

信号:休息、孩童、保护、危险;

黄色是在网页设计配色中使用极为广泛的颜色之一,它具有明朗愉快的感觉,在各类信息网站中都可以使用。但纯黄色很少大面积使用,同纯红色一样,过于强烈了,但小面积点缀用得颇多。比如用暗清色的黄与其他色彩的暗清色调和使用,页面就会多一些典雅和奇特的感觉。

黄色会令人想起太阳,而且在自然界及人类世界中都非常常见。这是一种会引起人注意的颜色。从大黄蜂到校车,从交通灯到荧光笔,到处都有醒目的黄色出现。严重犯规的足球运动员会被出示黄牌作为警告,而在环法自行车赛中穿黄色领骑衫的选手是所有人追逐的目标。Image title


3、蓝色

蓝色属于色彩三原色之一,它是最冷的色彩,非常纯净,给人一种美丽、宁静、清洁、理智、安详与广阔的感觉,产生对浩瀚宇宙、万里晴空、碧波海洋的联想;蓝色是大海与天空的颜色,在自然界中也非常常见。蓝色是永恒的象征,它的种类很繁多,每一种蓝色又代表着不同的政治或其他含义。

蓝色源于自然意象:

水:纯净、宁静、清洁;

光:冷静、勇气;

天空:广阔、安详、理智、浩瀚无垠;

蓝色源于社会意象:

警服:勇气、冷静、理智、永不言弃的含义

企业:科技感、可信度;

运动:动感、男性;

蓝色有着勇气、冷静、理智、永不言弃的含义,所以许多国家警察的制服是蓝色的,警察和救护车的灯一般是蓝色的。Image title

蓝色有沉稳的特性、具有理智、准确的意象,同时还表示希望。在商业设计中,强调科技,效率的商品或企业形象,大多选用蓝色当标准色,企业色,如科技、知识、计算机、企业、政府、银行和门户等。蓝色还代表了"可信"的心理感受,很多企业做网站时都选择了蓝色。腾讯公司官网就是其中之一。

在生活和设计中还有很多诸如此类的色彩运用,比如橙色使人感到成熟的瓜果而产生甜的感受;绿色为植物的颜色,象征着生命,传达出清爽、理想、希望、生长的意象,如果将它与蓝色、黄色,甚至红色搭配起来用于网页设计中,则可以给网站增加一丝活泼、轻快的感觉;而紫色给人的情感是高贵、娇艳与幽雅。色彩种类如此之多,在这里就不一一做详细说明了。

四、色彩情感在界面设计中的一些运用

色彩是我们接触事物所第一个感受到的,也是印象最深刻的。睁开眼睛,点开网页,最先感受到的并不是网站所提供的内容,而是网页中的色彩搭配所呈现出来的一种感受,各种色彩争先恐后地沿着视网膜印在我们脑海中,色彩在无意识中影响着我们的体验和每一次点击,它暗示了用户登入这个网站所代表的方向与意义。 有看过网站色彩分析相关文章的人一定对这类图片不陌生,它把各种知名网站的Logo与CIS系统以色彩分门别类整理。我们发现,大部分网站以及互联网企业的商标色彩都分布在红色系以及蓝色系附近。因为橘红色带给人温暖、热情、主动的活力感,而蓝色则具有可靠、专业的形象感,可以说都是网路公司形象上致力想营造出的形象,而蓝色系色彩,其实还具有另外一个重要的特性。

          以下这张是来自ColorLovers的整理:

Image title

色彩的喜好偏差:

 如上面所讲到的色彩带给人的感受存在着客观上的代表性意义,但在每个人的眼里所实际感受到的色彩存在着大大小小的差异。从一个客户网站分析公司KISSmetrics的调查报告图表中,我们清晰的看到,男性和女性都喜欢蓝色和绿色,或许这是自然中最常见的色彩;男性和女性都比较讨厌橙色和褐色。而不同的是男性喜欢黑色,而女性则讨厌灰色;女性则喜欢紫色,而男性则讨厌紫色。因而得知男性和女性对于色彩的喜好度是有所偏差的。所以在选择配色时不仿多考虑不同观赏者的角度下所呈现的样子来做选择、深入体会阅读者的感受。

Image title

色彩能够在理解和决策阶段起到决定性作用:

美国流行色彩研究中心的一项调查表明,人们在挑选商品的时候存在一个"7秒钟定律":面对琳琅满目的商品,人们只需7秒钟就可以确定对这些商品是否感兴趣。在这短暂而关键的7秒钟内,色彩的作用占到67%,成为决定人们对商品好恶的重要因素,这就是20世纪80年代出现的"色彩营销"的理论依据。同样道理,在界面设计中,如果色彩的选择和搭配恰到好处,可以在段时间内给新用户留下深刻的印象,会给我们的设计带来意想不到的效果。

色彩能够决定转化率的差距:

美国数字营销公司Hubspot曾经做过一场A/BTesting,用于测试不同颜色对于用户点击转化造成的差异。在下图中,左右两个测试页面在内容上完全一致,唯一不同的是按钮的颜色,在超过2000人次的样本测试中,最终红色方案的点击率超过绿色方案的点击率足足21%。而在测试之前,大部分的研究员都猜测绿色方案会获得更高的点击,因为就直觉而言,绿色代表着通行、准许通过的意思,而红色则更倾向于警告、阻止意味。

Image title

因为红色具有刺激心血的紧迫感,常出现在清仓场景,而橙色的呼叫意味浓厚,用于创建下订、购买、出售的行动,所以红色和橙色一般用于购物网站或App的购买和支付按钮。另外还会用于一些错误提示页面,表示警示提醒你注意。

Image title

 因为绿色代表着安全、通行、准许的意思,可以让人感到轻松,缓解压力,所以绿色通常用于开始按钮和下载按钮,还有成功提示页面。

Image title

 所以在设计时,不能单纯凭借自己的喜好去配色,还有很大一部分原因由产品本身的定位以及标准色和整体的色调而决定,另外我们要充分的考虑用户使用时的感受,虽然不能完全满足所有用户,但起码我们要顾及大部分的用户。当然色彩的运用不是限定死的,并非说购买按钮一定用红色、橙色,而下载按钮一定用绿色。具体的色彩风格需去认真的了解设计需求,跟甲方讨论产品的定位与感觉,比如:稳重、可信赖、活泼、简洁、科技感…等等,了解到客户对产品的定位,我们就可以确定如何选择最合适的色彩方向来进行设计。

好了今天就先总结到这里,下次再继续总结色彩其他应用。

更新:2016-02-25

收藏

3人已收藏

Drimary_梦

设计源于细节,而我愿倾尽所有只为这一细节

  • 135

    作品

  • 102

    粉丝

  • 5

    关注

  • Figma零基础学习
  • 基础交互知识6种常见的隐藏菜单
  • 10个极简主义UI设计案例
  • PS中小技巧
相关标签

    猜你喜欢

      2016-02-25 原创文章 经验/观点 举报 1189 3 5 0

      新手的成长记录点滴(四)

      0.0°

      你确定要举报新手的成长记录点滴(四)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年02月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录