如何制定产品主色试试超容易上手的色彩理论取色法优设网

从零做一款产品的时候,需要制定产品的主色。怎么制定呢?

“归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系”,这是很多文章里面归纳出来的几步,使用的时候也有理论依据。但我想说点不一样的。在这个时代,产品五花八门,想用哪一类别的产品一搜一大把,在七麦数据搜索购物类的 APP 榜单,光第一页单榜就有 200 多个。

我们模糊一下这张图,你会发现 APP 最终记忆点是色彩。

换做在手机看也是一样的,打开你的 APP 列表,快速往下滑去找一个 APP,你会发现它们最终只剩下色彩——“我想找爱奇艺,它在我记忆中是绿色的,刚才快速滑过的红色黄色都不是”。当然,这只是拿来举例,通常你不需要这样去找一个APP。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征,是调性概括,是一种态度,甚至是你趁手的兵器。

随大众

不同的行业发展至今,已经自带色相了。比如电商购物是红黄色、医疗健康是蓝绿色、商务是蓝色...如果我们每次都用产品或者行业特性去推导色相,出来的大多数都是第一种思路。

反着来

使用和竞品色相相差大于 90 度(中差色、对比色、互补色)的,差别较大的就是反着来。这是逆向思维,通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来。

搞特殊

抖音和 keep 是我心中搞特殊的 top,既不使用行业相同的色相,也不使用相反的色相,而是双色相或双色相叠加。

用我做的小易 APP 来做例子说一下制定色系的过程吧

小易是一款助力销售的 CRM 产品,主打销售智能化。取色就要看你立足点是“数据智能”还是“销售”了。与数据智能相关的绕不开蓝绿色,与销售系统相关的绕不开橙色。这个产品是内部定制化的,不存在有竞品的情况,因此随大众更容易取得方案的通过。为免出现“这个颜色一点都不科技和智能”的质疑和返工,我非常科学(识相)地选择了蓝色作为主要色相。

这里加入一个空间的概念:假设产品是一个空间,里面主打智能和数据,我设定了大环境偏冷光,所以里面的物体会受冷光的影响。

在冷光环境下,蓝色的色相受环境影响,会往冷色偏移。色相偏移 15 度是同类色,偏移 45 度是近似色。我在两者之间取了中间值,约 25 度。对市面上的产品取色进行研究的时候,会发现它们的色值一般在拾色器九宫格的右上格,所以 S 值(饱和度)的取值范围大致在 77%-100%之间,我取了中间偏下的值 89%。B 值(明度)一般为 100%,除了黄绿色相本身明度偏高,则会适当降低明度。

WCAG 是网页无障碍指南其中关于颜色的使用标准,简单来说就是色彩要在页面中达到一定的对比度,才能让人看清。WCAG 用色标准中普通文本与背景对比度不低于 4.5:1,那么对于高亮文字颜色(通常是产品主色)是不是也需要达到这个标准呢。我用几个 APP 进行了测试,下列 APP 的对比度在白色页面中范围是 2.3-4.5。

我估计原因有二,一是饱和度太高有点太艳了,二是现在很多 APP 都有暗夜模式,观察这张图上的 APP 颜色情况,可以发现一个颜色在白色背景对比度越低,在黑色背景对比度就越高。且高亮文字使用的频次相比文本文字少,多数伴随色块按钮使用,所以 3-4 是较合适的对比值范围。

有个快速计算对比度的网页很好用,输入色值就可以得出结果。

还有个网站会更直观,输入色值后下面还有网页例子预览效果。

我选择的蓝色对比值在白色背景是 3.9,黑色背景是 5.2,在正常范围内。其实小易 APP 大概率不会有暗夜模式,因为需要投入更多的开发资源,浅色模式也不是不能用。在这个考量下,可以抛开黑色背景不考虑,但是话又说回来,做好准备总是没错的。

色系拓展需要拓展两类:中性色和辅助色。

中性色相对来说比较简单,所以放在前面先讲。前面我已经选定主色是#1b7aff,打开拾色器,将明度调为 10%,就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色,叠加白色(白色的透明度以 10%作为基础依次递减),得出中性色的色板。

看到这里你应该也发现规律了:

选色离不开色彩的理论知识。在理论的基础上不断尝试搭配,组合出不一样的色板。

我希望颜色能有更细腻的色相变化,所以我把色环按照 10 度作为基准细化。选择互补辅助色的时候,我没有选正互补色,偏移了 10 度。从黄色到绿色的亮度都很高,所以我的选色更多偏右边。以选取的这六种颜色作为小易的基础色,微调饱和度稍微降低色彩的黑白灰差值。

最近我在想一个问题:假如设计师负责一款全新的产品,不受已有规范的束缚,我们该如何定义产品的色彩体系呢?

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

壹健康产业集团有限公司 UED交互体验负责人

2012年成立至今,是国内极具人气的设计师交流学习平台

优设是国内专业设计师平台,2012年创办至今,作为行业风向标,我们13年来专注于设计师创作者的学习成长交流。 通过优设网、优优教程网、优创网分别沉淀优质内容。是一家集齐媒体、内容、服务的多元化平台。MCN矩阵@优设AIGC 在微博、微信、小红书、抖音、B站布局,全网粉丝过千万。

THE END
0.diffusion本课程是AI绘画工具stablediffusion的系统课程,内容通俗且细致,让小白也能上手。 课程大纲 基础部分 1.前置要求+整合包安装+启动器使用 2.纯净原版安装+使用介绍 3.文生图精讲 4.图生图精讲 5.涂鸦、局部重绘、涂鸦重绘 6.上传蒙版、批量处理 7.模型精讲 jvzquC41yy}/lrfpuj{/exr1r16:c49n
1.想入行AI工具必看:从学习到实操的成长路线图人工智能我见过不少人,一开始就想把所有AI模型和工具都学一遍,结果学得很痛苦,也学不精。我的建议是,先选择一个你最感兴趣、最容易上手的方向,比如LLM API调用,因为它能很快让你看到成果,获得正反馈。然后,通过这个方向,逐步扩展你的知识边界,比如再尝试微调一个模型,或者尝试计算机视觉的工具。这样,你的学习路径会像jvzquC41yy}/rqu0ep5gcz435;?5:>3jvor