视觉设计 | 如何选择产品的配色

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

chanpinpeise

众所周知产品经理工作涉及面广,对整个产品生命周期的每一个阶段都应该有所了解。而产品经理对于产品的配色虽然不需要自己面面俱到的去考虑,但是你得具有相关得知识,用相对专业得眼光去分析和评价一款产品的颜色选择。最近我阅读了《网页配色》和《解读色彩》两本书,整理之后谈谈我对产品配色选择的思考。

色彩理论基础

  • 三原色为:红,黄,蓝
  • 包含了两种原色的颜色称为二次色:黄+蓝=绿,蓝+红=紫,红+黄=橙
  • 在三原色和二次色中:冷色为蓝,绿和紫;暖色为红,黄和橙
  • 色环中相对的颜色为互补色,指这两种颜色用某种比例混合能产生白色:红绿,橙蓝,黄紫
  • 对比色:在24色相环上相距120度到180 度之间的两种颜色
  • 色彩包含三个属性:色相,明度和饱和度
  • 色相指色彩的样貌,用于区别不同的色彩,由光的波长引起的视觉感。比如红橙黄绿青蓝紫就是最典型的七种色相
  • 明度指色彩的明暗程度,任何一种纯度色都有明度特征,比如明度最高的黄色处于光谱中心地位,而明度最低的紫色处于光谱边缘地位
  • 纯度指色彩的鲜艳度或强度。加互补色和或者无色彩颜色可以改变其纯度。

不同色彩的意味

  • 红色调:兴奋、精力、热情、积极、欲望、速度、力量、热爱、侵略等
  • 橙色调:亲切、开朗、活力、精力、平衡、温暖、热情、颤动、率直等
  • 黄色调:机智、淘气、可爱、注目、享受、幸福、乐观、理想主义、想象力、希望、阳光
  • 绿色调:温顺、舒坦、服务、自然、宁静、健康、希望、智慧、安全
  • 青色调:宁静、深沉、朴实、智慧、深远、冷静、沉稳、聪明、敏感、锐利
  • 蓝色调:永恒、博大、凉爽、清新、理性、认真、诚实、和平、平静
  • 紫色调:华贵、娴静、优雅、高贵、神秘
  • 黑色调:庄严、神圣、悲哀、深沉、忧伤、肃穆、神秘、寂静、压抑
  • 白色调:纯真、朴素、神圣、明快、素雅、明朗
  • 灰色调:正派、诚实、温和、平凡、中立

产品的定位

了解了一些颜色的基本知识和意味之后,你就得思考自己的产品定位了,综合各种因素来选择自己的产品配色。比如产品是哪个领域?这个领域和什么颜色相关?我们的风格是严肃的还是偏娱乐的?风格活泼还是经典?

你要做一个恐怖类游戏,那么压抑的黑色加上有跳跃性和强烈的红色更能产生吓人一跳的效果;农业银行显然和绿色更搭配;新浪,网易这类门户网站用鲜艳而显眼的红色更加抢眼。

一些基本的配色手法

中间色搭配:确定两种色相后,可以选择在色环中这两种色相夹着的色相作为补充。这样整个色彩风格会趋于和谐。

色相的对比搭配:对比色放到一起能产生强烈的互斥感,用来突出某些部分。分为色相对比、明度对比、饱和度对比、冷暖对比、补色对比、色彩和消色的对比等。

色调搭配:具有某种相同性质(冷暖,明度,饱和度)的色彩搭配到一起。

实例分析

下面我们来看看一些公司的图标及网站的配色选择。

腾讯的图标为黄,红,绿组成的圆环中间抱着一个蓝色的企鹅。包含了三原色,基本是最常用的四个颜色,代表了自己是一个综合的互联网公司,有很多业务的组成,蓝色放中间也代表自己的主色是蓝色。腾讯网便是蓝色为主色,白色为背景。

再看看谷歌,依次为红黄蓝绿组成的google字母,而chome浏览器和腾讯配色一样,不过调换了一下颜色的位置,中间的企鹅变成了一个圆。我认为谷歌的理念和腾讯相同,包括能生成所有颜色的三原色,代表自己的业务大而广,横跨众多领域。

去哪网和携程都用了蓝色作为自己的主色,能让人想到天空,大海,自然等,符合自己机票,旅行的业务。

可以看到,京东,天猫,新浪,搜狐,网易,淘宝等等网站均用了红色和橙色作为自己的图标的主色。显然是因为橙色和红色更容易吸引人的眼球,更醒目。所以,如果产品的领域没有和特定的颜色有特别的联系,以红色和橙色为自己的主色是一个不错的选择。

 

本文为作者@殷杰 原创发布于人人都是产品经理, 未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 谢谢你的支持。你的文章已经拜读,挺喜欢四项工作法的。

    回复
加载中