被惯性思维牢笼禁锢的产品色彩“方法”

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
13104 23 315 2020-12-22


不知道大家有没有听过这么一个故事:某家餐厅销量一直不太好,老板究其原因也没有查明白到底是为啥,明明选址在闹市区,价格也很实惠,就是卖不出去;后来老板请了个“大师”帮忙一探究竟,大师说你家盘子颜色不行,换成橙色保准牛X;老板立马认购了一批橙色盘子,从那以后以后这家餐厅火爆了,王境泽都觉着香的不行…

听完这个故事,自此我幼小的心灵里把橙色和食欲划了等号。这个烙印直到我从业前几年还一直这么觉着。同时间段,在9年义务教育的美术课本上,我得到了有生以来第一次对色彩这门学问的细致输入,了解到了各种颜色对应的含义与情绪:

这种色彩与情绪的映射关系在我的脑袋里根深蒂固 / 无法磨灭,直到有那么一场面试或者汇报,面试官/老板问我,“为什么你要选择这个颜色作为品牌色呢?”

面对着一手塑造出来的社交应用,我解释到:“因为红色代表着热闹,这个颜色会赋予这款产品热闹的氛围”。坦诚的讲,这个解释自信但空洞,颜色本身并无好坏和指向,只看你用在了什么地方,不讲究场景就别轻易定性。

这也侧面反映出来惯性思维的不断吞噬着你我的思路,过往的“经验”可以让人习以为常,也可以让人尴尬不已,取决于是否洞察的到。如果抛弃惯性思维,到底如何去定义一款产品的主色呢?


STEP 1

说实话选取一个颜色作为品牌色是一个战略决策过程,一般来说行业里一定存在一种主流颜色,像旅游行业的携程/去哪儿和途牛,还有以淘宝为代表的电商行业通常是喜庆的大红大橙。

显而易见基于这个逻辑下,有3个做法,一条路是顺势而为,一条是逆向而去,还有一条是另辟蹊径。这块的选择一定程度上并不是设计师可以决定的,需要结合整个业务的方向去判断;在旅游行业里马蜂窝选择了逆向而去,在直播行业里抖音就选择了另辟蹊径。

我们试着揣测下抖音和马蜂窝的想法,在产品的定位和策略的打法上,他们更注重的是差异化,走反方向的路突出品牌,试图在用户的心里站得住。通过这个例子你或许会发现,黑色未必死气沉沉,ta也可以色彩斑斓;黄色未必只象征尊贵,ta也可以代表青春和希望;颜色没有偏向,只看使用在什么场景上。

主色的选择更需要贴合业务战略的发展,也更多的偏向于主观。给业务提供思路和方向,判断不好业务方向的时候,多提供思路帮助其更好的匹配颜色。


STEP 2

以往的面试里,我这种好事的面试官就特别喜欢问侯选人一个问题:“一个色相里有那么多色号,为什么你定了这个色号作为品牌色?”大部分候选人乍一听都是面露难色,心里大概想着这人是个傻X吧,能问这种问题,哈哈哈哈哈哈;废话不多说,我来简单分享下我的方法:

首先以黑白两色(#000000-#FFFFFF)作为起始点设置10个梯度,然后把第一个模块定义的色相扔进去,只需要调整HSB中的H就可以,这样一顿操作下来你就得到了一个完整的色彩序列:

第二步,基于序列主观调整下颜色,确定主色的同时确保其在黑白2种背景上对比度大于4.5:1(wcag色彩可用性标准),理论上来讲梯度中间是最合适的,饱和和亮度足够就可以。

上图是我用到的色彩可用性测试工具-color review(https://color.review/)


STEP 3

当你准备好了以上所有工作,最后一步就是拓展色系了;这里采用负能量补给站小商店的品牌色“叛逆橙” #FF774A(H15 S71 B100) 作为主色并结合下google的方法开始拓展色系。

首先 - 确认同色系辅助色:我们将主色的色相加减 30° (谷歌是以10为梯度,但色相变化不大,为了效果我们以3倍作为最小单位)获得2个新颜色,即同色系辅助色。

其次 - 确认对比色辅助色,将主色的色相加上 180° 获得其互补色,即对比色系辅助色。为了和主色的类似色对应,取互补色的同类色(色相加减 15°)和类似色(色相加减 30°)。从中选取需要的颜色作为最终的对比色系辅助色。

根据色彩需求取同类色2和类似色1作为最终的对比色系辅助色,这样,我们得到了主色和四个辅助色;同理你可以推理出无色彩倾向的中性色系(这里就不展开赘述)。

最后你可以通过编码的方式,赋予每个颜色一个token(密钥),方便团队的配合和使用。

以上就是我在选取色彩的大概思路,市面上也有很多讲颜色的好文,分享大家去找找。


总结一下

随着工作经验/时长的不多增加,我们往往会对事物的存在习以为常,思维的惯性会困住我们追根溯源的想法,但需求和场景是千变万化的,所有的方法也都针对的是通用场景,标准化的解决方案未必适用你当下的处境;试着在熟悉的环境用敏锐的洞察和科学的方法突围也许是最好的办法。


Powered by Froala Editor

全部评论:23

  • 小晓洋过

    2021-02-22 11:01

    实操了一下有以下问题请教:① 以黑白两色(#000000-#FFFFFF)作为起始点设置10个梯度是怎么得来的 ②得到10个梯度后把第一个模块定义的色相扔进去,只需要调整HSB中的H,那S部分是否需要调整,这部分实操好像有点问题

  • 邓多肉

    2021-02-21 16:58

    太好了

  • 乌拉那拉·其玲

    2021-01-22 14:57

    说实话,这个结论得出来的配色方案我觉得用处不大,真的用在ui 设计上效果不太好。

  • 乌拉那拉·其玲

    2021-01-22 14:55

    @佩佩奇: 按照什么颜色的透明度来的?黑色吗?依次在纯白色上上面叠加10%,20%,30%,,,,的黑色吗?我试过了,并不能得出作者的那个色板

  • 佩佩奇

    2021-01-13 16:57

    @好摄之徒: 有可能是按照透明度10%-100%来的

  • 好摄之徒

    2021-01-13 11:44

    “首先以黑白两色(#000000-#FFFFFF)作为起始点设置10个梯度”楼主请问下这10个梯度具体是怎么得出来的。

  • @浅时光

    2021-01-07 16:23

    跟着实操了一遍,很棒的一次思维洗礼,发现一个小错误,叛逆橙是减15度,叛逆绿是减30度,编辑有点小问题

  • 翼释者

    2021-01-07 15:38

    -30度的颜色不是目前这个颜色呀 是不是有问题

  • 谢店儿

    2020-12-31 16:16

    你这边加减30°,操作上就是HSB的H加减30°对吧

  • 林正南

    2020-12-30 09:56

    第 11 张图 右下角 那个颜色应该是 - 30 (亮绿色那个)

  • 歸青

    2020-12-26 17:06

    怎么给别人分享

  • 歸青

    2020-12-26 17:05

    怎么给别人分享

  • 厚涂浅话

    2020-12-24 17:10

    那个不是蓝色吗? 叛逆紫

  • 士林刘军

    2020-12-24 14:43

    很直白,有帮助!

  • 小小帅帅

    2020-12-24 11:05

    这样选配色用在绿色上就惨不忍睹

  • 巴泥的漂泊

    2020-12-24 10:26

    抖音那个色调除了设计师,别人想不出来的

  • 186***0368

    2020-12-23 23:19

    很喜欢这篇文章,打破了我被禁锢的思维。原来色彩还可以这样来用,而不是简单粗暴的直接下定义。

  • 2020-12-23 13:56

    总结里有个错别字

  • 158***7297

    2020-12-23 00:56

    @adsfdgfh: 真恶心

  • 151***3701

    2020-12-22 20:27

    评论一次

  • 151***3701

    2020-12-22 19:44

    测试一下看看

  • 小阿田a

    2020-12-22 16:37

    推荐

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票