科学的系统配色

2022-9-2    博博



7秒的消费决策中,67%的决策取决于色彩。

色彩是我们感知世界的重要媒介,在设计中仅次于功能的另一要素。色彩与我们的生活息息相关,怎样科学配色、灵活用色成了绝大部分设计师的难题。



作为一名拥有多年拧螺丝经验的设计师,不免每天都会和色彩打交道,在配色的过程中,你是否也曾遇到过以下困扰:每次做项目随便吸色?

盲目运用色卡?

配色总是看起来不舒服?

色感差,天天被老板和同事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 场景案列

实践是检验真理的唯一标准,以下通表格的微交互对中性色进行完美的诠释:左边的表头和表格背景粘连到一起,视觉及信息识别困难。通过交叉运用中性灰色,明显右边的表格结构、信息层级得到强化,视觉更聚焦。



结语

主观情感的取色,一开始可能没遇到什么大问题,但随着产品不断完善,主观取色往往不能满足业务发展诉求。科学的系统配色,真正满足和服务设计;同时对设计一致性及提升团队效率起到肯定的作用。



通过这个漫长的配色过程,你是否重新审视过去设计中的配色方法?希望对配色困扰的你有所帮助。

色彩系统中的系统配色部分已经完成,接下来我们将死熬,续更系统配色在实际项目中的应用,做到科学配色、灵活用色。



作者:楚焱UX           



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档