设计教程:设计色彩从哪来看「色彩设计有哪些方法」

今天给大家普及一下设计教程:设计色彩从哪来看「色彩设计有哪些方法」相关知识，最近很多在问设计教程:设计色彩从哪来看「色彩设计有哪些方法」，希望能帮助到您。

一、色彩从哪里来？

之前@无言感动提问：一个从0到1的产品，可以从哪几个维度去提炼它的视觉语言？ 视觉语言有色彩、线条、形状、明暗、质感、空间。

单独讲色彩的话，换句话说就是：从0到1的产品，色彩从哪里来？

我总结了色彩的4个方向和1个提取方法：

1.品牌

2.产品或服务

3.受众群体偏好

4质感

5.情绪板

01 .取决于品牌

首先，色彩作为视觉的主导要素，不同颜色，唤起人们的心理情绪反应也不同。

同时，色彩在品牌设计里也是非常重要的一环。聪明的公司会通过占用一个独特的色彩，成为它的品牌情绪，确保 在其所处的行业中形成一种强烈、可传播的视觉符号。

举个例子：网易旗下很多产品（有道、蜗牛读书、游戏、未央）都使用的品牌红。所以，在我们团队，做新业务、 新孵化产品时，都会优先考虑用品牌红来定主色。

02 .取决于行业或服务

第二，色彩取决于产品所处的行业和服务。

通常商务类型的APP：例如：钉钉、企业微信、TEAMBITION会使用蓝色，因为蓝色心理学暗示代表严谨稳重。 而电商平台：例如：淘宝、天猫、京东、拼多多使用红橙，因为红橙使人兴奋愉悦，能够刺激消费。还有很多色彩的暗示，大家可以搜索下，这里不一一讲述。

03 .取决于受众群体偏好

第三，要考虑产品所针对的受众群体偏好和禁忌。禁忌就比如，女性品牌应当避免过于硬朗的颜色。

偏好的话，SNAPCHAT的用户群体大多数是年轻人，所以采用了明快的亮黄作为品牌色。这种大胆和打破常规的思 维，不仅让用户更容易记住，而且做到了区别于竞争对手的差异化设计。

04 .取决于质感

第四，色彩也可以通过质感获取。

例如，I0S备忘录APP,映射了现实世界便签纸的颜色。同样，界面背景底色也模仿了纸张的纹理

05.设计方法：情绪板提取

@小梦浪人提问：情绪板中的词汇是通过什么方法提炼出来的？如何更科学精准的制作情绪板。

最后，介绍一下情绪板的色彩提取方法。情绪板的设计过程依次是：品牌关键词-衍生关键词-搜索图片素材-＞创 建情绪板一提取视觉风格。

A.品牌关键词

以网易严选举例：

网易严选是生活类电商品牌，关键词是“严”代表严译的态度；“选”是甄选天下好物。

这一步关键词的提炼，需要靠公司品牌部、营销部门，根据产品的战略定位，敲定品牌关键词和SLOGAN。

B.衍生关键词

确定好“严谨”、“甄选”的关键词后，还需要发散一些衍生关键词，这一步可以通过设计组内部同事一起脑暴。 网易严选的SLOGAN是“好的生活，没那么贵”。可以想象一下，当你躺在懒人沙发悠闲的看书，或是靠在阳台上 享受午后阳光，意在追求品质，享受宁静。所以衍生关键词是：品质、生活、宁静、简约、精致、自然。

C.搜索图片素材

接着，就可以通过衍生关键词去搜索对应的图片了。

D.创建情绪板

按照衍生关键词对应的图片保存，进行分类，生成情绪板。

二、色彩搭配：黄金法则

60： 30： 10

@WCQ提问：如果已有品牌色是很刺眼的红蓝撞色，在做线上产品的时候颜色该如何融入？

不管是一种颜色，或者两种颜色。颜色的构成比例遵循60： 30： 10的黄金法则是个不错的方法。

60%的颜色决定 画面的主基调（明、暗、色彩倾向）

30%的颜色辅助搭配

剩下的10%用来强调和点缀

以APPLE官网为例，60%的颜色是白，体现了画面的浅色基调；30%的颜色是灰黑色，用于文字和导航，剩下的 10%是按钮、链接色、提示色。

三、色彩平衡：视觉降噪

值得注意的是，单个页面的色彩不易过多。

有个原则叫做色不过三，是指除了中性色外，带有色彩倾向的颜色最好不超过3种。

无论是平面设计，网页设计还是APP设计，都需要遵循这个原则，否则页面会眼花缭乱，也不高级。

我记得，早期版本的INSTAGRAM顶栏是有一个蓝色背景，并且用户ID也是蓝色的。 然而，在新版本，这种大包块的设计语言消失了，取WHITE DESIGN%

INS的设计师认为，颜色应直接来自社区的照片或视频。

可以看到新界面用户名改成了中性包、甚至包括"MORE" s "VIEW COMMENTS"这类可点击文本的颜鱼也埼视觉噪音，这就是以内容为中心的设计。所以，我认为小红书、微博、马蜂离、NICEs电商一类以图片内容为主的产品，应当运用视觉降噪去设计。

四、色彩纯度：纯灰和纯黑色

世界上没有绝对意义上的纯灰或纯黑鱼，因为有光的存在，物体会受环境鱼的影响。

如说你是美术生、画过水粉，老师一定教过你：不要用纯黑，这不真卖、反光的地方58量融入周边物体的顏色。 回到我Il'lUIS面设计时，也是同样的道理。可以看5JI0SK颜色规范，所有的灰色里都加了一点点蓝。

其实不止I0S,应该说整个APPLE的体系都是这样设计的。 以苹果官网举例，我用CHROME按F12,提取了主/ 副标题的颜色，果不其然，数值上也是偏蓝的。

这样的例子还有很多，像KEEP也在灰色中融入了一点点紫色，同时可以呼应品牌色，是一个很好融入品牌基因的设计。所以下次不要再使用#333333、#666666、#999999一种纯灰色的色值了。

五、色彩识别：考虑可读性

对于浅色模式，可诿性的问题其卖还好。

但对于黑暗模式来说就特别需要注意，后面我们专门抽一节课来讲如何设计黑暗模式、以及颜色语义化等概念。

六、色彩建议

最后，给大家一些色彩建议。

01.APPLE

HIG苹果I0S提供了一系列系统颜色可供参考，这些颜色可以自动适应辅助功能设置的更改，例如，增加对比度和减少透明度。

在浅色和深色背景上，以及浅色和深色模式下，这些系统颜色都可以单独使用或组合使用。

以下提供的颜色值，你可以在APP的设计过程中参考。

02.潘通色

潘通色是选择、确定、配对和控制油墨色彩方面最权威的国际参照标准色。

潘通每年都会发布当年的年度流行色，每年在设计界都会引起不小的讨论。