首页 新闻公司新闻 新干货!设计老师傅手把手教你推导一套色彩体系

新干货!设计老师傅手把手教你推导一套色彩体系

来源:创始人 | 时间:2021-12-06 14:39:52 | 浏览:0

色彩可以说是设计最关键的要素,色彩搭配的好可以说基本就赢了一大半,今天设计经验十几年的老师傅手把手告诉你色彩的搭配关键要素。

当我们看到红色时,我们能感受到热情、兴奋和危险。当我们看到绿色时,我们常常感到安全、自然和平静。可以说,色彩只需要一瞬间就能调动我们的情绪,它能在我们的记忆之中停留更长的时间。本文作者着重对色彩系统的五个维度进行分析,希望能对大家有所帮助。


在之前的原子设计之中,我说过原子是所有元素之中最小的单位,没有办法对它进行细分。它通常对应于产品设计的一般风格和零部件的最小颗粒。色彩作为整个设计系统之中最重要的原子之一,在心理模型之中起着至关重要的作用。


当我们看到红色时,我们能感受到热情、兴奋和危险。当我们看到绿色时,我们常常感到安全、自然和平静。可以说,色彩只需要一瞬间就能调动我们的情绪,它能在我们的记忆之中停留更长的时间。


接下来,笔者结合公司目前的业务CroV Dropshipping(下列简称DS)对配色系统进行探讨,以输出一套完整的配色方案。希望这次探索能给你一些启示。


1、 商业背景

CroV DS是面向美国市场的在线一体式分销平台(类似阿里巴巴的一体式分销业务),属于跨境电子商务B2C行业。该平台帮助用户顺利开展电子商务,没有任何初始成本和囤积,时间灵活可控,用户可以专注于销售本身。


2、 为什么我们需要色彩系统?

1. 对于商业而言

如今,crovds的业务越来越复杂,但除了品牌色彩之外,辅助色的定义过于武断。而且,随着业务场景的扩展,临时添加的颜色很容易被遗漏在绘图板的一个未知角落,导致一次性使用颜色的风险。(提示:一次性是我在之上一篇文章之中提到的设计,是一次性的,不能重复使用)

另外,颜色本身的随机性也导致研发结果的不统一,到处都是不同颜色的现象。

因此,我们需要根据自己的企业特点,生产出一套足够完善的色彩体系,使企业在色彩的使用之上达成基本共识。


2. 对于设计师来说

设计师在定义颜色时,通常直接在色板之上选择颜色,但这种方法有很多缺点。


1) Add decision

当许多设计师选择颜色时,可能会发生这种情况。一个觉得颜色脏,另一个觉得颜色太耀眼。有时完美主义会带来麻烦,甚至需要半天超过的时间才能得到满意的颜色。这种情况在多色匹配之中尤为严重。

事实上,这与没有网格系统的布局的原因是一样的(注:网格系统是一种可以极大地提高布局效率的方法,这将在前面讨论)。


色板之中的颜色选择范围接近无穷大。如果我们把HSB模式之下的单个h、s和B作为最小的单元,我们可以选择数百万个单元。粒径过细(实际上根本没有粒径)的情况导致我们在选色时反复微调和尝试。


2) 缺乏秩序性和逻辑性

调色板之中的直接色彩选择主要取决于“直觉”的存在,这是相对感性的。

例如,按钮的状态可以包括正常、悬停、按之下、禁用等。如果仅仅依靠自己的直觉来自由调节亮度和饱和度,最终的配色方案就缺乏内在的逻辑和秩序。


3) 对于具有复杂背景工具和场景的b端业务来说

很难重用,颜色经常被广泛使用。如果我们没有一个完美的颜色系统,当新的项目和业务场景需要新的颜色时,就很难重用之前定义的颜色,这就需要重新定义颜色。而且,这种相对主观的方法也缺乏说服力,难以体现专业性。


如果设计师事先定义一套色彩体系,一方面只需从相应的色板之中进行选择,大大降低了设计决策的难度。另一方面,颜色系统提供的不同颜色渐变也有助于各种需求和业务场景的重用。而且,色彩系统充满了逻辑和秩序,所以从中选择的色彩是一致的,这就大大减少了设计师依靠“直觉”的主观和不可控的效果。


3、 如何创建颜色系统?

支付宝设计团队提到:

同色系配色为主,多色系配色为辅。同色系是统一的色调,可以加深对品牌色彩的感知,使界面更加层次化,同时保持界面色彩的一致性;由于业务的多样化,需要多色搭配作为补充;多色辅助色,又称功能色,可以设定不同的任务属性和情感表达;然之后搭配中性色黑、白、灰,给色彩更多的变化和层次。这两种色彩搭配可以灵活的运用在各种场景的业务之中,通过主次搭配,并按比例使用,具有很好的可扩展性。


首先,所有颜色模型都采用HSB模型。正如蚂蚁设计团队所说,这种模式有利于在调整颜色时对颜色有明确的心理预期,有利于团队沟通。


上面是HSB模型的简单推广。H是色调,s是饱和度,B是亮度。S控制与白色混合的颜色量。s值越高,混合的白色越少,颜色越“纯”。B控制与黑色混合的颜色量。b值越高,混合的黑色越少,颜色越亮(一般分别代表亮区和暗区)。

色彩不仅仅是在饱和度、色调统一上,还有很多的辅助色和混合值度等等,色彩的搭配可以代表着很多的东西,作为一名设计师色彩是最基本的要求,每一位设计师都要拥有色彩的感觉,这篇文章就送给全部的设计师们,希望对大家在色彩方面有帮助哦!




TAG:
在线咨询
服务热线
服务热线:0791-82328830
TOP