2023-3-26 ui设计分享达人
我们需要什么样的配色方案？
B端的系统的主色代表着一个系统的气质，与所在行业、产品的定位、用户群体都有一定的关系。前面调研了众多竟品及市场前沿配色方案，目的就是期望从它们身上找出共性，引领我们的系统找到最适合的方案，这是知彼。
光有“知彼”是不够的，我们还要清晰的知道自己是谁？这样我们才可以说我们的配色方案是最适合我们的，有理有据的方案。
B端系统的真正使用人群比较复杂，具有年龄跨度大，文化水平参差不等，从事行业广泛等特点。
源于自然之美的色调，突显灵活性与再生的创意！
依据彩通色彩研究所专家的说法，纽约时装周2021春夏季的色彩强调我们渴望能激发出巧思与创意的色彩，这些色彩的百搭性质穿越季节，容许更多的选择自由，适于表达原创的风格，也足够灵活来适应现代新的更片断化的生活方式 。
“2021春夏的色调呈现出大自然，强调我们渴望拥有全年皆宜的灵活色彩，这一季的色彩充满道地真实的感觉，这种感觉对色彩而言愈来愈重要，同时结合了某种程度的舒适与轻松感，并散发出活力，激励振奋我们的心情”
说到这里“主题色”如何来选择？
色彩对于人的大脑的冲击力大于造型，比如淘宝，我们会记忆起淘宝的主色是橙色；色彩是影响人类视觉思维的重要因素，色彩能直观的体现产品的性格和气质，所以选择一款适合产品的主色很重要。
我们的用户在更替，如何让产品年轻化、品牌年轻化是现在几乎所有企业都在思考的问题，新的用户群体从小接受的教育和喜好决定着产品的发展方向。
比如：我们这次颜色升级中律动、青春活力是核心关键词，而蓝色则可以让产品视觉符号得到延续。
对于主题色的选择指标有哪些？
通过关键词图片像素化提取颜色，同时参考B端产品颜色流行趋势和当年的年度流行色，以及竟品颜色分析结果，获取蓝色的色相、纯度、明度范围。
2020潘通年度颜色经典蓝（19-4052 Classic Blue），颜色值为#174A7B（H207 S81 B48）
2021潘通年度颜色搭配色鸟舍系列中19-4151Skydiver，颜色值为#02569D（H207 S99 B62）
假设：竟品的主题色蓝色的色相范围为205-225；纯度的范围为70-96，平均值为86；明度的范围为70-98，平均值为88，B端产品流行趋势的主色也多是蓝色系，色相范围为200-232；纯度的平均值为70；明度的平均值为68。
色彩的使用范围及色阶有哪些？
色彩的应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景；针对这些使用场景只有一个色值是不能满足所有场景使用的，所以我们要建立主题色的不同色阶来满足不同场景下颜色的使用。以建立色彩层级，或传达信息，或强化界面层级。
在色彩系统中，常使用 Tints and shades 系统来建立调色板，通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板，在符合无障标准的区域，选择不同明度饱和度的色彩，形成有梯度、有层级的彩色调色板。
B端产品中光有“主角”是不够的，还要有“配角” 所以我们还要看一下辅助颜色是如何定义的？
辅助色是为了帮助页面区分状态和层级而设立的颜色，主要包括图表类仪表盘颜色和功能色，通过合理的颜色传递产品正确的信息，让其信息传达更明确清晰。
辅助色的作用是配合衬托产品主色调，在不同的产品中，辅助色运用的策略是不同的，比如我们在竟品调研中发现，辅助色经常是取自主色的邻近色、对比色和互补色等。
仪表盘配色：通过对竟品的分析可得知，优秀的仪表盘的配色有多系列及低纯度的特点，多系列配色是为了满足用户个性化的需求，而低纯度是考虑用户在长时间使用产品，色彩对其心理的影响。
功能色：这类颜色在系统一般不会随意更改，而且特定的语义一般都有固定的色相，只需改变其纯度和明度，使其视觉上符合主色的气质，使其搭配和谐。
1.通过默认主题色选择辅助色及默认仪表盘颜色
我们以默认主题色为#467FEA（H 219 S 70 B 92) 为起始点，S（饱和度）、B（明度）保持不变，H（色相）以180°为起点，以15°为增量或减量标准，生成24色色板。这个色板是我们选取辅助色的重要依据。
以邻近色、互补色、对比色为原则选择丰富的颜色
邻近色：在色相环中，相差15°的颜色为邻近色，凡在60°范围内的颜色都属于邻近色的范围，主色和邻近色的色系组成的搭配，可以在同一个色调中构建出丰富的视觉层次感和质感，赋予不同的功能含义，信息表达明确，和谐统一感很好，视觉上的趣味性，颜色的搭配显得很柔和。
对比色： 在色相环中，角度相差120°-180°之间的色彩，这里使用了120°为角度来选择对比色。
互补色： 在色相环中成180°角的两种颜色，互为补色；主色可以和其互补色的两个色彩的搭配，该色彩可以为邻近色，例如：蓝色和黄色、橙色的搭配；这种搭配既能保持互补色搭配强烈的对比度，区分关键信息，次要信息，又能增加视觉上的趣味性，色彩看上去丰富多彩。
例如：蓝色作为主色，互补色黄色作为辅助色应用在图表、图标和标签上，再选择黄色的邻近色橙色作为另外一个辅助色，应用在不同的关键信息上，有助于用户更好的阅读产品的功能和内容。
获得辅助色-9色相
通过邻近色、互补色和对比色的选择，我们从24色色相环中得到了9色相色环，9色相色盘优化后将做为图表的仪表盘颜色和语义类的功能色出现页面设计中。
校正辅助颜色
虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于色彩本身自带感官明度属性，导致在视觉感受上的感官体验并不同频。
黄色、绿色的明度即发光度较高，蓝色就稍微偏暗一些，导致色板看起来不一致，为了让不同色相看起来更加协调，需要调整色板的明度和饱和度，以保证视觉感官体验同频且更加和谐舒适。
校正后的颜色主要用于功能色和仪表盘颜色。
从辅助色中提取功能色及仪表盘色系
通过对竟品的分析总结同时结合默认主题色分析得出的9色色环，归纳分离，最后形成系统的默认仪表盘颜色。
功能色的目的是明确信息及状态，比如成功、出错、失败、提醒、链接等；功能色的选取需要遵守用户对色彩的基本认知，结合分析得出的9色色环，颜色校正，得出系统功能色。
辅助色的色阶
为了度量不同的可视化从高到低的数值，我们仪表盘颜色远远不够，所有为了保证视觉上的统一性，我们需要加入辅助色的明度色阶来区分数据层级。
同时我们产品有深色和浅色两种模式，由于视觉对比的原因，在深色的场景看下看的颜色，和浅色场景下看到的颜色是两种感受，深色场景下颜色会发亮，所以为了保持视觉上统一，我们也需要加入辅助色的色阶。
辅助色色阶建立方法与主色的色阶建立方法一致，使用 Tints and shades 系统，通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板。
模拟方案一主色、辅助色及消色汇总
通过以上分析我们得出模拟的主题色、仪表盘颜色、功能色及消色。为了方便记忆，我们分别给颜色取了名字和编号，命名方式采用植物色彩命名，这也是200多年前颜色数值出来之前的命名方式，最早见于1814 年出版的《维尔纳色彩命名法》
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。