B端中台系统红色主题设计的禁忌与思路

前言
此案例为我在服务于一家数据库运维产品的时候所遇到的实例，案例概要如下： 数据库应用场景广泛，任何行业任何领域任何平台都会涉及到数据的产生，使用数据库便是必不可少的，而数据库的使用必然会涉及数据库运维，zCloud便是一款提供数据库运维的软件产品；此次案例分享主要围绕着在Cloud数据库云管平台该软件进行拆解分析；

1.触发场景

zCloud运行在各行各业的数据库运维场景中，其中券商领域是zCloud产品的业务市场份额最大的；相信有过股票交易的人都知道，在股票交易中的“幸运色”是什么颜色，没错正是红色，这也是证券行业的症结所在；而zCloud产品使用的主题色却是在色相环上偏绿的“青色”为品牌主题色，本质上这是不符合用户预期的。

zCloud 品牌色在色相环上的位置

zCloud dashboard界面

如呈现所示，zCloud产品的整体界面色调以绿青为基调，这是券商类用户无法接受的，基于此提出来为券商用户定制化红色的主题的设想；由此接下来是我为zCloud进行换肤涉及的一些构想与实操。

2.设计过程

1.案例剖析

在进行红色主题皮肤设计前，我查阅了部分一线的平台设计框架，试图找到关于使用红色作为系统主题色的规律与突破点，结果不太理想，我发现这些一线的UI设计框架，在色系的定义上虽然避开了 HUE为0°的红色，但是大部分框架在切换为预设红色主题的时候，HUE均在正负10°左右（-10°至10°之间）；

Arco Design UI框架

Ant Design UI框架

Arco Design 红色皮肤在色相环的位置

ant Design 红色皮肤在色相环的位置

而我认为HUE为正负10°的红色不能作为理想的主题色使用，在色相环上正负10°的红色接近于正红色，而在UI设计中正红色往往代表了警示，警告，危险等意味。
如果使用正负10°内的红色做为主题内关键行动点的颜色（如：link、button、tab、input等），会给人紧张感，危险感，操作阻碍感，因为往往这些颜色都是由长期的约定俗成给人带来了不安的心理暗示。

同时我查询了国家标准 字号为“GB 2893—2008” 文件名为“安全色 ”的标准文件，根据该文件第2页，第4项第1子项描述的颜色表征信息，红色为传递禁止、停止、危险或提示消防设备、设施的信息的特殊用色。

国家标准 GB 2893—2008

2.设计方法

基于以上的分析过程，我在接下来的设计中避开了，色环上0°色相左右正负10°色相（350°-10°），选定了15°色相进行zCloud产品的红色主题风格设计。

同时我将最终选取的颜色（HUE15°）进行了饱和度亮度降低，以确保最终应用在界面设计得到更加舒适的视觉观感。

Dashboard视觉效果

最终我使用 色相为15° 饱和度为88 明度为88的值进行zCloud主题页面设计，避开警示色区域，这样设计的另一个好处是，在系统出现高危警告信息，或者高危操作的时候，使用350°-10°的警示色不会与主题色冲突，造成不必要的混淆。

但整个设计探索过程中我虽然偏离了色相环的正负10度色相（正红色），使用了15°色相的红色进行B端系统UI设计设计，但实际设计过程中使用红色还是会存在诸多问题与冲突，所以若非特殊情况（如券商类客户要求），我依然不建议使用任何红色的色相进行B端的中台系统设计。

欢迎访问：uppp.cc