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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
色彩基础知识-冷暖色系
0.0°
2018-09-29 原创文章 经验/观点 举报 5657 9 11 0


色彩是一种感官元素,所以一般情况下我们都是通过视觉元素获取信息的。设计当中色彩是非常重要的元素,你对页面信息或者元素增加色彩都会有不一样的效果。今天我们来讲讲色系。


Image title


上图是一个色环。色环中以红色和黄色为中心的色彩属于暖色系色彩;以蓝色为中心的色彩属于冷色系色彩;位于两者之间的色彩被称为中性色系色彩。


但是色彩所代表的具体含义并不是全世界共通的,会因文化,传统和风土人情而异(比如国际股市红跌绿涨,中国大陆股市红涨绿跌,因为很多欧美人觉得红色代表暴力和禁忌)。但人类遗传基因总会存在一些共通的物质,色彩给人的感觉也不例外。



暖色


Image title


Image title


红色是彰显热情的色彩,给人留下强烈的印象。


信号灯红色,唇膏红色,广告宣传单价格标题红色以及交通警示灯红色等都是纯度最高,色调鲜明的红色,最能刺激人类情感的色彩。在产品设计统计中,红色的同类商品最受欢迎。



暖色系色彩可以刺激人的食欲。比如我们常见的外卖产品。



Image title


上图为美团和饿了么外卖平台的常规促销活动页面,主体色调定的都是暖色系,这样的色彩搭配就会使食物看起来很美味可口,有增进食欲的功能。另外,不知道大家有没有体会就是在外面吃饭很多餐饮店的灯光都是暖色的,主打烘托氛围的。



当然同暖色系色彩当中,色彩的明度和纯度不同,给人的感觉也是不同的。


Image title


最下面色相环中接近橙色,黄色的颜色给人“温暖”,“温和”的印象,接近紫色则给人“优雅”,“时尚”的印象。而粉色系则体现“活泼”,“可爱”的感觉,主要用于年轻女性。因此,受众群体年龄越大,所用红色的纯度就会越高。



Image title


上图为蘑菇街运营活动页面,左边表达出来的就是一种青春活力,而右边则是传达出一种优雅时尚的感觉,跟页面自身定位相符合。



冷色


Image title


蓝色使人感到寒冷和阴暗,同时能体现镇静感和清凉感。



红色系可以刺激人类情感,而蓝色系的色彩和绿色植物一样,具有净化人的心灵、使人镇静的功能。冷色系是属于夏季的的色系。在掺杂有绿色的蓝色和纯度较高的蓝色中加入白色,可以展现日光照射下蓝色的海面。


Image title


那么在实际产品应用当中,用的蓝色最多的便是金融类理财产品了,因为蓝色还代表了沉稳和安全,这正是理财产品所需要带给用户的一种情感诠释,只有让用户信任平台,才会有可能购买。如下图所示。


Image title


我们来看看明度和纯度。


Image title



如上图所示,冷色系纯度越低,清凉感就越强,纯度越高,安静、沉静、冷漠的感觉就越强。另外,明度越高,温和、安逸的印象也越强烈。从下面色相角度看,如果接近绿色,容易使人联想到翡翠绿色的海洋,感受到自然的清凉感和爽快感。相反,如果接近紫色,就会成为充满神秘的,富有内涵深度的艳丽色彩。


Image title


上图左边是好好住产品商城的运营活动图,高明度的背景色,给人营造安逸的氛围,符合产品卖点。右边是keep的一个跑步计划预告图,用高纯度紫色打造神秘感,也契合了产品本身的主色调。



中性色


Image title


绿色能够使人感到平静,具有抚慰心灵的功能。


绿色是自然界中最常见的颜色,介于青与黄之间,属于一种平和的颜色。搭配冷色可以使人的的情绪趋于平静,搭配暖色,则体现清新飘逸的潇洒感觉。绿色可冷可暖,是一种非常灵活的色彩。


Image title



由上图所知,明度越高,越有清爽的感觉,明度越低则体现厚重感;纯度越来越高,则鲜艳感就会越来越强。


Image title


上图左边,整体以夏天为主题做的蓝色清凉色系,搭配了明度偏高的绿色作为搭配,一下子就起到了一个点缀作用,在这里绿色就作为了暖色调和蓝色形成对比;右图为理财产品的一个暖色系背景的活动页,两边加上了纯度和明度都比较高的绿色,作为了一个对比,那么在这里绿色就成为了冷色调,传递着欢快的氛围。



可能有的初学者不太明白明度和纯度的关系,那么我们拿PS里的色板来举个例子。


Image title



明度是眼睛对光源和物体表面的明暗程度的感觉,主要是由光线强弱决定的一种视觉经验。一般来说,光线越强,看上去越亮,明度越高;光线越弱,看上去越暗,明度越低。同时也指颜色的明暗程度。那么在上图里面就是纵轴方向越靠上的位置明度就越高,越靠下明度越低。


那么我们来说说纯度。纯度通常是指色彩的鲜艳度。那么在上图横轴方向越靠右纯度就越高,越靠左纯度越低。在同一种色相里加白色会提高明度,降低纯度;加黑色会降低明度也会降低纯度。


那么这样解释明白了吧,嘿嘿。



总结:色彩丰富多样,不同颜色给人的感觉都是千差万别。做产品的时候,一定要注意很多因素,产品本身的定位、想要传达的情绪,目标人群,还有领导的喜好等等。因为视觉是获取信息的第一个条件,所以做好色彩的搭配能给设计本身带来很好的效果和表现力。以上是个人的经验所得,不喜勿喷。



参考书籍:《配色设计原理》




更新:2018-09-29

收藏

9人已收藏

Clien

欢迎大家与我交流设计,微信chencong9756

  • 26

    作品

  • 16

    粉丝

  • 37

    关注

  • 竞品分析-海外移民产品
  • MaterialDesign-UI上的颜色应用
  • MaterialDesign-响应式布局栅格
  • MaterialDesign-Dialogs对话框
相关标签
经验分享

    猜你喜欢

      2018-09-29 原创文章 经验/观点 举报 5657 9 11 0

      色彩基础知识-冷暖色系

      0.0°

      你确定要举报色彩基础知识-冷暖色系

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年09月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      9
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录