ui一款全新的产品该如何定义色彩体系

1、假如设计师负责一款全新的产品，不受已有规范的束缚，我们该如何定义产品的色彩体系呢？有些设计师可能会凭自己的主观想法定义色值，觉得这个颜色在界面里好看就用了，但是我觉得这样是不够规范的，更多应该考虑到全局的通用性和科学性。色彩色彩是设计系统的重要组成部分，可以使用在品牌感、信息层级、操作指引、交互反馈的场景。在细分层面，色彩可以分为主色、辅助色和中性色。设计师调整颜色的时候，建议使用 HSB 模式，调整色彩更直观，符合心理预期，因为人脑也是通过这个模式来辨别颜色的。其中，H代表色相，S代表饱和度，B代表亮度。色相是区别各种不同色彩的标准，通过360圆形色环来取色，每一度代表一个色相。饱和度指色彩

2、的纯度，饱和度越低，越往白色过渡。亮度指色彩的明亮程度，亮度越低，越往黑色过渡。这是常用软件 HSB 模式调整颜色的截图，帮助大家理解。主色主色一般和产品的品牌色相关联，很大程度决定了产品整体的调性和视觉风格，常用于主按钮、文字高亮、强调操作等界面场景。产品1.0版本以上，Logo一般都会有定义好的品牌色，界面设计中的主色和品牌色保持一致即可，可以传递统一的理念。如果从0开始的新产品还没有定义Logo和品牌色，界面要先设计开发，这时我们可以结合产品行业特性、产品理念、产品名称、用户特征等进行思考，提取关键字和情绪板，从而提取多个色系，最终和多角色沟通确定主色系，避免后续反复调整的成本。确定主色

3、系后，设计师该如何定义具体色值呢？可能大部分设计师都是直接吸取同色系的大厂产品色值，再微调下参数做出差异性就确定了。这确实是一个取巧方法，毕竟不容易出错。但我觉得设计师需要有自己的思考过程，所以进行了国内外大厂产品主色的调研分析，总结了一些共同点和差异点。我发现Apple系和国内产品的主色倾向于饱和度和明度较高的颜色，基本分布在横竖向三等分的右上角，我认为主色取值可以参考这个区域。看下部分产品字色、按钮色、深色模式的效果，还可以。而谷歌系、微软系产品倾向于明度稍低的颜色。从设计层面来看，颜色有点暗、有点脏，不太建议。我有点不太理解国外设计师的视觉审美，研究了WCAG 2.1无障碍标准后，才发现

4、他们在为障碍（色盲）用户着想，主色都符合WCAG 2.1的4.5:1最小对比度（AA 级）。这个标准涵盖了使Web内容更易于访问的各种建议，遵循这些准则将使更多残疾人更容易获取网站内容。从分析的国内产品中，我只发现知乎的主色符合这个标准。这其实就引发了我们的思考，视觉效果和无障碍人群体验，哪个更重要呢？我觉得两个层面都挺重要的，不过在实际场景中，建议设计师更多是结合品牌调性、视觉效果去定义具体色值，在美感、可读性、可用性之间得到平衡。注意一点，明度不宜太低，颜色会比较脏，也不太符合年轻用户的审美。如果我负责一款产品，已经确定蓝色系为主色，我会选择明亮一点的色值，在文字、按钮、深色模式等常用场景

5、下保证可读性和可用性。色值定为#247FFF，后面讲辅助色的时候会用到。辅助色辅助色，可以用于特定功能、状态反馈、应用图标等场景，反馈的成功、失败、警告状态最常用到了。基于主色，我们怎么定义辅助色呢？我总结了点小方法。1. 以主色的色相为基础，差值为15，围绕360色环提取24色。（差值15的颜色属于同类色临界点，有利于我们划分色度层级，又不会失去想要的色系）2. 参考常用配色理论：相似色、邻近色、三分色、互补色，得出部分色值。3. 结合界面场景和使用效果，对颜色进行删减和补充，最终确定所需要的辅助色。（建议最多12种，避免色彩太多，不利于设计师理解使用）4、将辅助色和主色对比，进行视觉感官明

6、度校正。（虽然色彩的饱和度和明度一样，但不同色相的视觉感官明度是不一样的，绿色、黄色、青色实际看起来特别浅，所以我们要手动调整）校准方式：在颜色上面叠加纯黑色图层，图层模式选择色相，就可以直观地看到无彩色视觉感官明度。相差大的颜色可以以5为差值调整饱和度或明度，最后再根据效果进行微调。（色相的差值能被5整除，饱和度和明度同样适用）调色板为了满足界面对色彩的需求，需要对主色和辅助色进行色板延伸，建立不同梯度的调色板。这里有两种计算方法：1. 浅色调色板，在颜色上依次叠加20%、40%、60%、80%、90%不透明度的白色；深色调色板，在颜色上依次叠加20%、40%、60%、80%不透明度的黑色。

7、2. 浅色调色板，色相（H）往感光明度高的色相依次差值2，饱和度（S）依次减少15，明度（B）依次增加5；深色调色板，色相（H）往感光明度低的色相依次差值2，明度（B）依次减少15，饱和度（S）依次增加5。（Ant Design和Material Design调色板也都加了色相旋转）。从对比效果来看，比较建议使用第2种方法，使用 HSB 模式的值进行递减/递增得到完整渐变色板，颜色更加明亮通透。Ant Design官网也有在线生成调色板功能，和第二种方法逻辑类似，可以快速生成，大家可以去使用。最终生成主色和辅助色的调色板，效果如下。中性色中性色包含黑、白、灰，合理地使用中性色能够使界面信息层级主次分明，助力于浏览体验，常用于字色、控件色、背景色的场景。由于纯灰色显得比较脏，人眼对偏蓝的灰色阅读体验更好，在桌面端更建议使用灰色相加点蓝。计算方法：1. 选择和主色视觉感官明度相同的灰色，按调色板方法建立梯度色板。