色彩是我们感知世界的重要媒介,在设计中仅次于功能的另一要素。色彩与我们的生活息息相关,怎样科学配色、灵活用色成了绝大部分设计师的难题。
作为一名拥有多年拧螺丝经验的设计师,不免每天都会和色彩打交道,在配色的过程中,你是否也曾遇到过以下困扰:每次做项目随便吸色?
盲目运用色卡?
配色总是看起来不舒服?
色感差,天天被老板和同事Diss?
…
接下来,请你花几分钟看看谷歌等其他大厂,都在用的系统配色方案。以下以船长BI为例,做品牌色彩的规范引导。
船长BI:
深圳船奇科技有限公司-是中国专业的跨境电商SAAS系统服务企业。旗下船长BI,专注亚马逊精细化运营与大数据分析,为不同阶段、不同规模的企业提供全场景多维度分析,一站式精准推广和全链路供应链协同管理,帮助企业实现数智化运营。同是船奇科技也是亚马逊SPN服务商。
01
科学的系统配色
1-1 设计主张
船长BI系统是亚马逊精准化运营及大数据下钻分析的高效化共同体。从单功能运作到多功能融合,再到大数据多元化产品下钻、闭环及溯源,打破了亚马逊跨境运营服务商单点运作的局限。我们希望新的品牌色,能够为船长BI在跨境企业中营造更加权威、高效向数智化转型的视觉感知。
船长BI 设计语言:英文Captain BI Design Language简称CapDesign。
经过团队的诸多调研到佐证,我们将品牌标准色太平洋蓝(Pacific Blue),升级为更加科学、权威、智略的明亮立体的黑绿松石色(Dark Turquoise)。黑绿松石色在跨境电商行业中具有更多神秘的数智化意味,在实际应用中隐含着更多的生机和信任,表明了船长对进入数智化运营新挑战的气魄。同时,品牌色的升级能够快速区别于竞品,形成船长BI独特的色彩感知,通过色彩感知形成品牌记忆。
色彩命名源自潘通Pantone。
1-2 创建调色板
人的视觉系统在辨别颜色时,不会把色光分解成RGB或者CMYK几种单独颜色,而是按照色相度、纯度和明度来判断的,也就是HSB。HSB模式可以完美固定HSB中的某一个参数,只对其他两个参数做改变或者只改动其中的一个参数,符合人对色彩差异幅度的感知,而RGB、CMYK都是牵一发动全身的节奏。↗
我们以CapDesign品牌基准色#2AC5D4(H=185\ S=80\ B=83) 为起始点,S饱和度、B明度保持不变,H色相以185°为起点,以15°为增量或减量标准,生成24色色板。这个色板是我们选取辅助色的重要依据。
02
拓展丰富的辅助色
2-1 以邻近色、互补色、对比色为原则,选择绚丽多彩的辅助色↗
为了保有更多CapDesign 的品牌基调,我们选择了相对较多的邻近色,以保证整体色韵的清爽感和数智科技化意味。并利用对比色及互补色扩展色相,选择更加丰富多元的辅助色,使其色相对比鲜明,以保证能色彩够满足各种复杂场景。
Q:色相位到底选择多少个合适?
A:有的产品选择7个色相位,有的产品选择10几个色相位,都是允许的,选择的依据取决于:
1.色彩对比明显,选择色相数少;色彩对比柔和,选择色相数多;
2.产品功能的场景简单,选择色相数少;产品功能的场景复杂,选择色相数多;
Captain BI 是亚马逊运营与大数据集成,功能交叉比对及数据可视场景复杂,为迎合业务发展需要,CapColor选择的色相位为13个。
2-2 校正辅助色(波长和振幅)
虽然我们保持相同的饱和度和明度,使用科学的方法得到了较为合适的色相,但由于每个色相的波长各不相同,导致色彩在感官感受上存在差异。
在可见光波谱当中,波长越长其穿透力就越强;红色的波长是最长,穿透力就最强,感知度最高。↗
为了让不同色相在视觉感官上看起来更加协调,需要对色板的明度和饱和度进行反复的校验,以保证视觉感官更加和谐舒适。
校正原则
A.色相最好维系在同类色(色相环中15°夹角内的颜色)↗
B.色相感官保持平衡(明度和饱和度)
C.保证视障群体的识别度(WCAG 对比度)
调色的技巧
浅灰色调: 饱和度减少(S↓),明度增加(B↑)
深色色调: 饱和度减少(S↑),明度增加(B↓)
使用HSB调色模式时,可以参考以上规律,能让快速调和想要的颜色。校正后得到了以下色域清晰、对比明显的主色及辅助色。并且针对视障群体进行了色彩测试。
2-3 拓展梯度色谱
校正主色和辅助色后,我们需建立完整的梯度色板,来满足不同场景下颜色的应用。建立色彩层级,以提升品牌感知,达到信息传达辨识、强化界面层级等作用。
在梯度色板系统中,很多配色产品都是使用Tints and shades系统:通过在原有色相的基础上增加白色或者增加黑色,来改变它的明度和饱和度,形成梯度色板。但这种方法得到的调色板往往比较刻板生硬。CapColor在Material Design-Color的基础上进行了细化,构建更有层次感、空间感、立体感的梯度色板。
CapColor梯度色板:
1.在Primary的基础上,使用Tints and shades系统找到Light和Dark:
Light=(White+primary) 95%叠色;
Dark=Black 60%叠色;
Primary=原色相。
2.结合Material Design-Color实践,得到CapDesign梯度色板及相应的参数。
CapColor选择10阶梯度,对比稳健,更能凸显船长系列产品权威和成熟的形象;9阶梯度相对生硬跳跃,12阶梯度过于柔和平滑。
有的色相穿透性强、饱和度高,所以还需要进一步的校验,如蓝色 RYB:
运用以上的方法,得到CapDesign丰富的调色板,为后期业务做支撑:
03
易用的中性灰色
Captain BI系统大部分是由容器、面板、列表、卡片等其他组件及元素构成。中性色为系统锐化布局、表达边界、建立信息层次起到决定性作用。
3-1 中性色
中性色的搭建同时满足暗黑模式、换肤及印刷等诸多场景,故在实现时按照透明度的呈现方式。
3-2 黑绿松石灰色
中性黑绿松石灰色解决更多复杂的场景,如表格和表单双底色、图标的颜色等。中性黑绿松石灰色增强布局、区别背景,起到强化信息层次的作用。
黑绿松石灰在中性灰色的基础上增加色相和饱和度,这样得到的蓝灰色还是有些许生硬,还需要对饱和度和明度进行微调,让颜色更有层次感。
中性黑绿松石灰的方法:
在配色模式HSB中:
H=185(Brand Color);
S=3(必要时微调);
B=保持不变。
3-3 WCAG 2.1测试
为保证视障用户的使用,保证足够的对比度,CapDesign 遵守 WCAG 2.1 的标准,对调色板对比度进行了可用性测试,为后期灵活用色奠定基础。以中性灰色为例:
WCAG 2.1中规范了A、AA、AAA的对比值范围及使用场景,感兴趣的朋友可以前往WCAG 2.1官网详细了解,在这不在赘述。
3-4 场景案列
实践是检验真理的唯一标准,以下通表格的微交互对中性色进行完美的诠释:左边的表头和表格背景粘连到一起,视觉及信息识别困难。通过交叉运用中性灰色,明显右边的表格结构、信息层级得到强化,视觉更聚焦。
结语
主观情感的取色,一开始可能没遇到什么大问题,但随着产品不断完善,主观取色往往不能满足业务发展诉求。科学的系统配色,真正满足和服务设计;同时对设计一致性及提升团队效率起到肯定的作用。
通过这个漫长的配色过程,你是否重新审视过去设计中的配色方法?希望对配色困扰的你有所帮助。
色彩系统中的系统配色部分已经完成,接下来我们将死熬,续更系统配色在实际项目中的应用,做到科学配色、灵活用色。