CN113360155A

CN113360155A - 前端界面背景配色方法、装置、设备及存储介质

Info

Publication number: CN113360155A
Application number: CN202110701536.6A
Authority: CN
Inventors: 周俊
Original assignee: Ping An Puhui Enterprise Management Co Ltd
Current assignee: Ping An Puhui Enterprise Management Co Ltd
Priority date: 2021-06-23
Filing date: 2021-06-23
Publication date: 2021-09-07

Abstract

本发明涉及研发管理技术，揭露了一种前端界面背景配色方法，包括：对原始前端界面中的界面元素进行变量设置，得到全局变量，利用全局变量对界面元素进行背景颜色固化处理，得到基础背景颜色变量，对基础背景颜色变量进行灰度值转化，得到基础亮度值，根据全局变量及基础亮度值计算背景颜色，及将基础亮度值与界面元素的边框进行关联，得到边框样式，根据背景颜色及边框样式生成界面元素的主题样式，利用主题样式得到界面元素的主题配色结果。此外，本发明还涉及区块链技术，所述主题样式可存储在区块链的节点中。本发明还提出一种页面背景配色装置、电子设备以及计算机可读存储介质。本发明可以解决前端界面背景配色效率较低的问题。

Description

前端界面背景配色方法、装置、设备及存储介质

技术领域

本发明涉及研发管理技术领域，尤其涉及一种前端界面背景配色方法、装置、电子设备及计算机可读存储介质。

背景技术

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。前端开发中通常会对前端界面的配色提出各种各样的需求，例如，对应不同的投放平台需要有不同的配色，或者在不同的节日对前端界面也需要进行不同的配色。现有技术中是针对不同的平台和相应的节日分别编写相应的主题配色，每种主题配色又需要有对应的字体颜色和内容边框颜色等。每种主题配色都需要再重复编写一套字体颜色和边框等颜色，当主题越来越多的时候，难以快速进行前端界面配色，使得前端界面配色效率较低且维护成本较高。

发明内容

本发明提供一种前端界面背景配色方法、装置、设备及存储介质，其主要目的在于解决前端界面背景配色效率较低的问题。

为实现上述目的，本发明提供的一种前端界面背景配色方法，包括：

对原始前端界面中的界面元素进行变量设置，得到全局变量；

利用所述全局变量对所述界面元素进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值；

根据所述全局变量及所述基础亮度值计算背景颜色，及将所述基础亮度值与所述界面元素的边框进行关联，得到边框样式；

根据所述背景颜色及所述边框样式生成所述界面元素的主题样式，利用所述主题样式得到所述界面元素的主题配色结果。

可选地，所述对原始前端界面中的界面元素进行变量设置，得到全局变量，包括：

提取所述原始前端界面中的界面元素；

计算所述界面元素中颜色变量的平均值，得到基础颜色变量；

获取预设的颜色临界变量及边框临界变量，将所述颜色临界变量、边框临界变量及所述基础颜色变量作为所述全局变量。

可选地，所述利用所述全局变量对所述界面元素进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值，包括：

利用预设的背景关联公式将所述全局变量中的基础颜色变量设置为所述界面元素的基础背景颜色变量；

对所述基础背景颜色变量进行灰度值转化，得到所述基础亮度值。

可选地，所述根据所述全局变量及所述基础亮度值计算背景颜色，包括：

计算所述基础亮度值与所述颜色临界变量的差值，得到颜色差值；

利用预设的第一比例系数及颜色转换公式计算所述颜色差值，得到所述背景颜色。

可选地，所述将所述基础亮度值与所述界面元素的边框进行关联，得到边框样式，包括：

计算所述基础亮度值与所述边框临界变量的差值，得到边框差值；

利用预设的第二比例系数及边框透明度公式对所述边框差值进行计算，得到边框透明度；

将所述边框透明度及所述基础颜色变量进行关联，得到所述边框样式。

可选地，所述利用所述主题样式得到所述界面元素的主题配色结果，包括：

接收用户输入的修改颜色数值；

利用所述修改颜色数值替换所述主题样式中基础颜色变量的数值，并生成基于所述修改颜色数值的修改背景颜色及修改边框样式，根据所述修改背景颜色及修改边框样式得到所述主题配色结果。

可选地，所述根据所述背景颜色及所述边框样式生成所述界面元素的主题样式，利用所述主题样式得到所述界面元素的主题配色结果之后，该方法还包括：

汇总所有界面元素的主题样式得到前端界面样式表，利用所述前端界面样式表生成待配色前端界面的主题配色结果。

为了解决上述问题，本发明还提供一种前端界面背景配色装置，所述装置包括：

变量设置模块，用于对原始前端界面中的界面元素进行变量设置，得到全局变量；

背景转化模块，用于利用所述全局变量对所述界面元素进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值；

边框关联模块，用于根据所述全局变量及所述基础亮度值计算背景颜色，及将所述基础亮度值与所述界面元素的边框进行关联，得到边框样式；

界面配色模块，用于根据所述背景颜色及所述边框样式生成所述界面元素的主题样式，利用所述主题样式得到所述界面元素的主题配色结果。

为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：

存储器，存储至少一个指令；及

处理器，执行所述存储器中存储的指令以实现上述所述的前端界面背景配色方法。

为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个指令，所述至少一个指令被电子设备中的处理器执行以实现上述所述的前端界面背景配色方法。

本发明通过全局变量进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值，利用所述基础亮度值关联背景颜色及边框，使得仅需更改全局变量便可进行前端界面配色，无需重新开发新的字体颜色和内容边框颜色，提高了前端界面配色的效率。同时，多个前端界面可以使用同一个前端界面样式表，降低了前端界面的代码数量，前端界面配色效率更高且更易于维护。因此本发明提出的前端界面背景配色方法、装置、电子设备及计算机可读存储介质，可以解决前端界面背景配色效率较低的问题。

附图说明

图1为本发明一实施例提供的前端界面背景配色方法的流程示意图；

图2为图1中其中一个步骤的详细实施流程示意图；

图3为本发明一实施例提供的前端界面背景配色装置的功能模块图；

图4为本发明一实施例提供的实现所述前端界面背景配色方法的电子设备的结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本申请实施例提供一种前端界面背景配色方法。所述前端界面背景配色方法的执行主体包括但不限于服务端、终端等能够被配置为执行本申请实施例提供的该方法的电子设备中的至少一种。换言之，所述前端界面背景配色方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。

参照图1所示，为本发明一实施例提供的前端界面背景配色方法的流程示意图。在本实施例中，所述前端界面背景配色方法包括：

S1、对原始前端界面中的界面元素进行变量设置，得到全局变量。

本发明实施例中，所述原始前端界面可以为各领域的前端界面，包括WEB页面或各种APP页面等。所述界面元素包括文本、图像、视频、超链接、图标等。

本发明实施例中，所述变量设置是指根据界面元素(如图标)中的颜色变量对界面元素进行全局设定，即令颜色变量作为可对界面元素进行全局性更改的基准变量，并将颜色变量和界面元素的背景、边框进行关联，使得通过更改颜色变量的数值可以对界面元素的背景、边框等进行全局更改。

具体地，参照图2所示，所述对原始前端界面中的界面元素进行变量设置，得到全局变量，包括：

S10、提取所述原始前端界面中的界面元素；

S11、计算所述界面元素中颜色变量的平均值，得到基础颜色变量；

S12、获取预设的颜色临界变量及边框临界变量，将所述颜色临界变量、边框临界变量及所述基础颜色变量作为所述全局变量。

本发明实施例中，所述颜色变量可以为RGB(Red、Green、Blue)颜色变量，所述RGB颜色变量是根据对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。所述颜色临界变量是指界面元素的背景颜色变化的临界值，所述边框临界变量是指界面元素边框透明度的临界值。

本发明实施例可以利用CSS(Cascading Style Sheets，层叠样式表)对原始前端界面中的界面元素进行变量设置。所述CSS层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

本发明一可选实施例中，以前端界面中的图标为例，通过计算图标中的RGB颜色变量的平均值得到基础颜色变量：red：44、green：135、blue：255，并将所述基础颜色变量和预设的颜色临界变量：threshold:0.5及边框临界变量：border-threshold:0.8一起定义为全局变量，其中，0.5是颜色变化的临界值，0.8是边框透明度的临界值。通过将基础颜色变量、颜色临界变量及边框临界变量设置为全局变量，便于后续关联图标背景颜色及边框。

S2、利用所述全局变量对所述界面元素进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值。

其中，所述背景颜色固化处理是指确定所述界面元素的基础背景颜色，并以所述基础背景颜色作为基准进行颜色变化。

具体地，所述S2，包括：

本发明实施例中，通过下述公式对所述基础背景颜色变量进行灰度值转化，得到所述基础亮度值：

lightness＝(red*0.2126+green*0.7152+blue*0.0722)/255

其中，lightness为所述基础亮度值，red、green及blue为所述基础背景颜色变量。

本发明一可选实施例中，所述预设的背景关联公式可以为CSS中的背景关联公式：background:rgb(var(--red),var(--green),var(--blue))，通过将全局变量与基础背景颜色变量进行关联，仅需改变全局变量的数值便可直接进行背景颜色变换，极大地提高了前端界面背景配色改变的效率。

S3、根据所述全局变量及所述基础亮度值计算背景颜色，及将所述基础亮度值与所述界面元素的边框进行关联，得到边框样式。

本发明实施例中，通过基础亮度值计算背景颜色及关联界面元素的边框，无需进行大量的背景开发代码及边框开发代码，降低了前端界面配色开发的复杂性。

具体地，所述根据所述全局变量及所述基础亮度值计算背景颜色，包括：

本发明实施例中，所述颜色转换公式可以为HSL(Hue、Saturation、Lightness，色相、饱和度、亮度)转换公式，所述第一比例系数可以为-10000000％，其中，所述HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法，HSL更好的反映了“饱和度”和“亮度”作为两个独立参数的直觉观念。

以图标为例，颜色转换公式为：color:hsl(0,0％,calc((var(--lightness)-var(--threshold))*-10000000％))，其中，calc()为CSS中的拼接函数，用来将各变量进行拼接，var()为CSS中的读取函数，用来读取各变量的数值，lightness为所述基础亮度值，threshold为所述颜色临界变量。

本发明实施例中，基础亮度值会在0-1之间游走，临界值是固定的0.5，如果亮度值小于0.5，亮度值减去临界值为负，由于预设的第一比例系数是很大很大的负数，负负得正，会得到一个巨大的正数，按照边界渲染原理，会按照100％渲染，于是颜色是白色，如果亮度值大于0.5，亮度值减去临界值为正，由于我们的比例系数是很大很大的负数，会得到一个巨大的负数，按照边界渲染原理，会按照0％渲染，于是颜色是黑色，使得图标中的文字颜色在浅色背景下为黑色，在深色背景下为白色。

详细地，所述将所述基础亮度值与所述界面元素的边框进行关联，得到边框样式，包括：

以图标为例，所述边框透明度公式可以为：border-alpha:calc((var(--lightness)-var(--border-threshold))*100)，其中，border-alpha为所述边框透明度，100为所述第二比例系数，calc()为CSS中的拼接函数，用来将各变量进行拼接，var()为CSS中的读取函数，用来读取各变量的数值，lightness为所述基础亮度值，border-threshold为所述边框临界变量。

本发明实施例中，由于基础亮度值在0-1之间游走，边框临界值是固定的0.8，如果亮度值小于0.8，亮度值减去边框临界值为负，在CSS中，负数透明度会按照边界0渲染，此时边框完全透明；如果亮度值大于0.8，亮度值减去边框临界值为正，此时的透明度计算值会在0～20之间游走，数值大于1的透明度值都会按照1渲染，此时，边框基本处于完全不透明状态，得到加深的边框。

本发明一可选实施例中，可以通过下述函数将边框透明度及基础颜色变量进行关联：border:.2em solid；border-color:rgba(calc(var(--red)-50),calc(var(--green)-50),calc(var(--blue)-50),var(--border-alpha))，其中，“.2em solid”表示预设的基础边框样式，“border-color”表示边框与基础颜色变量的关联函数，“50”为预设的颜色变量差值。

本发明实施例中，通过基础亮度值与界面元素中的背景及边框进行关联，只需确定基础的亮度值，即可通过改变基础颜色变量生成各种各样的风格主题，因此可以提高前端界面配色的效率。

S4、根据所述背景颜色及所述边框样式生成所述界面元素的主题样式，利用所述主题样式得到所述界面元素的主题配色结果。

本发明实施例中，所述界面元素的主题样式(如图标的主题样式)是指CSS样式表；以及所述主题配色结果是指最后生成的界面元素(如图标)配色结果。

具体地，所述利用所述主题样式得到所述界面元素的主题配色结果，包括：

接收用户输入的修改颜色数值；

本发明一可选实施例中，例如，根据背景颜色及边框样式生成图标的主题样式：border-color:rgba(calc(var(--red)-50),calc(var(--green)-50),calc(var(--blue)-50),var(--border-alpha))，其中，border-color是指边框样式及背景颜色，border-alpha是指边框透明度，red、green及blue是指基础颜色变量。通过改变基础颜色变量(--red:44；--green:135；--blue:255；)的数值即可生成各种风格的主题配色结果，如修改颜色数值为：red:125、green：125、blue：125，可将图标背景变为绿色。

本发明另一可选实施例中，在所述S4之后，还可以包括：汇总所有界面元素的主题样式得到前端界面样式表，利用所述前端界面样式表生成待配色前端界面的主题配色结果。

其中，所述待配色前端界面可以投放于不同平台，由于前端项目中通常会对前端界面的配色提出各种各样的需求，例如，对于不同的投放平台需要有不同的配色，或者在不同的节日对前端界面也需要进行不同的配色，利用所述前端界面样式表仅需要修改基础变量就可以直接对待配色前端界面进行主题配色，提高了前端界面配色的效率。

本发明实施例中，可以将所有界面元素的CSS样式表单独存放在一个CSS文件中，且由于CSS文件中的CSS样式表不属于任何前端界面文件，在任何前端界面文件中都可以将其引用，可以实现在多个前端界面中使用同一个CSS样式表。这样就可以实现多个前端界面风格的统一且无需另外编写样式文件，同时，对于新增的主题风格需求，无需重新复制一整套样式代码，减少整个前端界面的代码量，降低了维护成本。

本发明通过全局变量进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值，利用所述基础亮度值关联背景颜色及边框，使得仅需更改全局变量便可进行前端界面配色，无需重新开发新的字体颜色和内容边框颜色，提高了前端界面配色的效率。同时，多个前端界面可以使用同一个前端界面样式表，降低了前端界面的代码数量，前端界面配色效率更高且更易于维护。因此本发明实施例可以解决前端界面背景配色效率较低的问题。

如图3所示，是本发明一实施例提供的前端界面背景配色装置的功能模块图。

本发明所述前端界面背景配色装置100可以安装于电子设备中。根据实现的功能，所述前端界面背景配色装置100可以包括变量设置模块101、背景转化模块102、边框关联模块103及界面配色模块104。本发明所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。

在本实施例中，关于各模块/单元的功能如下：

所述变量设置模块101，用于对原始前端界面中的界面元素进行变量设置，得到全局变量。

具体地，所述所述变量设置模块101通过下述操作得到全局变量：

提取所述原始前端界面中的界面元素；

所述背景转化模块102，用于利用所述全局变量对所述界面元素进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值。

具体地，所述背景转化模块102通过下述操作得到基础亮度值：

lightness＝(red*0.2126+green*0.7152+blue*0.0722)/255

所述边框关联模块103，用于根据所述全局变量及所述基础亮度值计算背景颜色，及将所述基础亮度值与所述界面元素的边框进行关联，得到边框样式。

具体地，所述边框关联模块103通过下述操作计算背景颜色：

详细地，所述边框关联模块103通过下述操作得到边框样式：

所述界面配色模块104，用于根据所述背景颜色及所述边框样式生成所述界面元素的主题样式，利用所述主题样式得到所述界面元素的主题配色结果。

具体地，所述界面配色模块104通过下述操作得到所述界面元素的主题配色结果：

接收用户输入的修改颜色数值；

本发明另一可选实施例中，所述界面配色模块104还包括：汇总所有界面元素的主题样式得到前端界面样式表，利用所述前端界面样式表生成待配色前端界面的主题配色结果。

如图4所示，是本发明一实施例提供的前端界面背景配色方法的电子设备的结构示意图，包括处理器111、通信接口112、存储器113和通信总线114，其中，处理器111，通信接口112，存储器113通过通信总线114完成相互间的通信，

存储器113，用于存放计算机程序，如前端界面背景配色程序；

在本申请一个实施例中，处理器111，用于执行存储器113上所存放的程序时，实现前述任意一个方法实施例提供的前端界面背景配色方法，包括：

上述通信总线114可以是外设部件互连标准(PeripheralComponentInterconnect，简称PCI)总线或扩展工业标准结构(ExtendedIndustryStandardArchitecture，简称EISA)总线等。该通信总线114可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口112用于上述电子设备与其他设备之间的通信。

存储器113可以包括随机存取存储器(RandomAccessMemory，简称RAM)，也可以包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。可选的，存储器113还可以是至少一个位于远离前述处理器111的存储装置。

上述的处理器111可以是通用处理器，包括中央处理器(CentralProcessingUnit，简称CPU)、网络处理器(NetworkProcessor，简称NP)等；还可以是数字信号处理器(DigitalSignalProcessing，简称DSP)、专用集成电路(ApplicationSpecificIntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-ProgrammableGateArray，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

本发明还提供一种计算机可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：

在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。

因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims

1.一种前端界面背景配色方法，其特征在于，所述方法包括：

2.如权利要求1所述的前端界面背景配色方法，其特征在于，所述对原始前端界面中的界面元素进行变量设置，得到全局变量，包括：

提取所述原始前端界面中的界面元素；

3.如权利要求2所述的前端界面背景配色方法，其特征在于，所述利用所述全局变量对所述界面元素进行背景颜色固化处理，得到基础背景颜色变量，对所述基础背景颜色变量进行灰度值转化，得到基础亮度值，包括：

4.如权利要求3所述的前端界面背景配色方法，其特征在于，所述根据所述全局变量及所述基础亮度值计算背景颜色，包括：

5.如权利要求4所述的前端界面背景配色方法，其特征在于，所述将所述基础亮度值与所述界面元素的边框进行关联，得到边框样式，包括：

6.如权利要求5所述的前端界面背景配色方法，其特征在于，所述利用所述主题样式得到所述界面元素的主题配色结果，包括：

接收用户输入的修改颜色数值；

7.如权利要求1所述的前端界面背景配色方法，其特征在于，所述根据所述背景颜色及所述边框样式生成所述界面元素的主题样式，利用所述主题样式得到所述界面元素的主题配色结果之后，该方法还包括：

8.一种前端界面背景配色装置，其特征在于，所述装置包括：

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任意一项所述的前端界面背景配色方法。

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任意一项所述的前端界面背景配色方法。