一种自动换肤配色方法及终端与流程

1.本发明涉及界面设计领域，尤其涉及一种自动换肤配色方法及终端。


背景技术：

2.在ui(user interface，用户界面)设计中，通常都涉及到项目换肤配色及多终端换肤配色的设计工作；在实际项目设计过程中，不仅需要对当前项目终端做页面各元素的定制配色方案，还需要对不同终端做独立做配色方案，在同一个品牌客户中要做多个终端配色方案，大大增加人工成本，并且还存在以下问题：对项目做配色方案时没有统一的配色规范，凭个人感觉得出配色方案，不具备统一性和规范性；可选换肤配色方案有限，用户体验度降低。


技术实现要素：

3.本发明所要解决的技术问题是：提供一种自动换肤配色方法及终端，实现快捷高效的换肤配色设计。
4.为了解决上述技术问题，本发明采用的一种技术方案为：
5.一种自动换肤配色方法，包括步骤：
6.接收主色选择数据，所述主色选择数据包括色号，根据所述色号生成主色色板；
7.获取预置色板；
8.获取色彩配置单；
9.根据所述主色色板和所述预置色板填充所述色彩配置单。
10.为了解决上述技术问题，本发明采用的另一种技术方案为：
11.一种自动换肤配色终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
12.接收主色选择数据，所述主色选择数据包括色号，根据所述色号生成主色色板；
13.获取预置色板；
14.获取色彩配置单；
15.根据所述主色色板和所述预置色板填充所述色彩配置单。
16.本发明的有益效果在于：接收用户的主色选择数据，根据主色选择数据中的色号生成主色色板，并获取预置色板和色彩配置单，根据主色色板和预置色板填充色彩配置单，则各个终端可以直接读取色彩配置单实现对自身的主题颜色配置，无需在每个终端中都单独进行颜色的设置，并且根据用户提供的一个主色就能够生成对应整个界面使用的主色色板，无需用户对界面中各个元素对应的颜色进行一一指定，提高了进行主题颜色配置的效率。
附图说明
17.图1为本发明实施例的一种自动换肤配色方法的步骤流程图；
18.图2为本发明实施例的一种自动换肤配色终端的结构示意图；
19.图3为本发明实施例的一种自动换肤配色终端的流程示意图；
20.图4为本发明实施例的一种换肤关系的示意图；
21.图5为本发明实施例的一种主色选择示意图；
22.图6为本发明实施例的一种主色色板示意图；
23.图7为本发明实施例的一种基础色板示意图；
24.图8为本发明实施例的一种预置色板示意图；
25.图9为本发明实施例的一种分类色板示意图；
26.图10为本发明实施例的一种顺序色板示意图；
27.图11为本发明实施例的一种发散色板示意图；
28.图12为本发明实施例的一种叠加色板示意图；
29.图13为本发明实施例的一种强调色板示意图；
30.图14为本发明实施例的一种语义色板示意图；
31.图15为本发明实施例的一种色彩配置单示意图；
32.标号说明：
33.1、一种自动换肤配色终端；2、处理器；3、存储器。
具体实施方式
34.为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
35.请参照图1，一种自动换肤配色方法，包括步骤：
36.接收主色选择数据，所述主色选择数据包括色号，根据所述色号生成主色色板；
37.获取预置色板；
38.获取色彩配置单；
39.根据所述主色色板和所述预置色板填充所述色彩配置单。
40.从上述描述可知，本发明的有益效果在于：接收用户的主色选择数据，根据主色选择数据中的色号生成主色色板，并获取预置色板和色彩配置单，根据主色色板和预置色板填充色彩配置单，则各个终端可以直接读取色彩配置单实现对自身的主题颜色配置，无需在每个终端中都单独进行颜色的设置，并且根据用户提供的一个主色就能够生成对应整个界面使用的主色色板，无需用户对界面中各个元素对应的颜色进行一一指定，提高了进行主题颜色配置的效率。
41.进一步地，所述接收主色选择数据，根据所述主色选择数据生成主色色板包括：
42.根据所述色号对应的颜色做第一预设次数的加深操作或减淡操作，得到主色色板。
43.由上述描述可知，得到用户所选择的主色之后，对主色做第一预设次数的加深操作、第一预设次数的减淡操作，或是进行总次数为第一预设次数的加深及减淡操作，记录每一次操作得到的色号得到主色色板，就能够通过用户选择的一个色号得到一组与用户选择的色号相关联的主色，从而得到与用户选择的色号相关联的主色色板，供后续界面生成使用，给用户提供了灵活的选择空间的同时，实现了一定程度上的颜色扩展，满足界面生成的
需要。
44.进一步地，接收主色选择数据之后还包括：
45.根据所述色号在色环中的位置，确定第一预设数量的基础色，得到基础色板；
46.根据所述基础色板得到数据可视化色板；
47.所述根据所述主色色板和所述预置色板填充色彩配置单包括：
48.根据所述主色色板、基础色板、可视化色板以及预置色板填充色彩配置单。
49.由上述描述可知，在界面设计中，通常在保证主色调统一的基础行，还需要一些对比色进行点缀，根据用户选择的主色的色号在色环中的位置，选出相对应的基础色形成基础色板，同样作为界面元素颜色的备选，使得界面设计能够更加灵活和美观，提供了更多的颜色选择；并且在基础色板的基础上得到数据可视化色板，由主色色板、基础色板、可视化色板和预置色板共同填充色彩配置单，使得最终的界面色彩更加具有设计感。
50.进一步地，所述数据可视化色板包括分类色板；
51.所述根据所述基础色板得到数据可视化色板包括：
52.获取所述基础色板中的每一基础色，将每一所述基础色加深或减淡第一预设范围，得到分类色，所有所述分类色组成所述分类色板。
53.由上述描述可知，数据可视化色板中专门区分出分类色板，并且分类色板由基础色得到，在保证界面颜色统一的情况下，对需要进行分类的界面元素的用色提供了预备好的配色方案，并且能够根据主色选择数据中色号的变化进行变化。
54.进一步地，所述数据可视化色板包括顺序色板；
55.所述根据所述基础色板得到数据可视化色板包括：
56.获取所述基础色板中与所述主色最接近的第一基础色；将所述第一基础色做第二预设次数的加深操作或减淡操作，得到顺序色板。
57.由上述描述可知，专门区分出顺序色板，并且也由基础色得到，在保证界面颜色与用户所选择的主色的色号和谐的情况下，对顺序用色提出了预备好的配色方案，考虑到细节化的场景并进行预置，进一步提高了在终端上进行颜色配置的便捷性。
58.进一步地，还包括：
59.接收主题选择数据；
60.根据所述主题选择数据获取主色范围；
61.显示所述主色范围，并接收与所述主色范围对应的主色选择数据。
62.由上述描述可知，若接收到用户所选择的主题，根据主题选择数据限制主色的范围，用户只能在提供的主色选择范围之内进行主色的选择，避免了主题和主色冲突的情况，并且也能够提供主题下的色号自定义，在确保最终呈现效果的同时为用户提供了最大的搭配自由度。
63.进一步地，所述主题选择数据包括主题元素；
64.所述根据所述主色色板和所述预置色板填充所述色彩配置单之后包括：
65.根据所述主题元素替换原始页面元素。
66.由上述描述可知，根据主题选择数据中的主题元素替换原始页面中的元素，在更改主色的同时，添加上了主题中的对应元素，使得最终的换肤结果符合用户选择主题所要达到的呈现效果，提高用户的使用体验。
67.进一步地，所述获取色彩配置单之后包括：
68.根据所述主色色板及所述预置色板填充预设接口模板。
69.由上述描述可知，预设接口模板，在获取到主色色板和预设色板之后，填充预设接口模板，则通过调用对应的接口就能够获取到对应的色号，方便颜色在不同终端之间的取用配置。
70.进一步地，还包括：
71.接收模式设置数据；所述模式设置数据包括深色模式或正常模式；
72.根据所述模式设置数据调整所述主色色板。
73.由上述描述可知，根据模式设置数据中的值对主色色板进行调整，根据预置色板和调整后的主色色板填充色彩配置单，在正常模式转换为深色模式时并不是简单使用深色，而是和用户所选择的主色色号相对应的深色，提高用户的参与感，进一步提高用户的使用体验。
74.请参照图2，一种自动换肤配色终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述的一种自动换肤配色方法中的各个步骤。
75.本发明上述一种自动换肤配色方法及终端，能够适用于进行换肤配置的场景，特别是需要多端进行换肤的场景，以下通过具体实施方式进行说明。
76.请参照图1及图3-4，本发明的实施例一为：
77.一种自动换肤配色方法，包括步骤：
78.s1、接收主色选择数据，所述主色选择数据包括色号，根据所述色号生成主色色板，包括：
79.根据所述色号对应的颜色做第一预设次数的加深操作或减淡操作，得到主色色板；
80.请参照图5，为用户从提供的色号中选择了主色#2498fd；
81.在一种可选的实施方式中，可通过hsv(hue,saturation,value，色调、饱和度、明度)模型对色彩进行渐变，得到主色色板，请参照图6，为以主色为主色色板的中间位置即color-5，进行加深操作和减淡操作得到的主色色板；
82.s1中接收主色选择数据后还包括：
83.s11、根据所述色号在色环中的位置，确定第一预设数量的基础色，得到基础色板；请参照图7，为从色环中得到的与主色相应的12个基础色板；也可进一步得到基础色板中每一个基础色对应的渐变色板，类似主色色板的生成；
84.在一种可选的实施方式中，根据所选主色，分析主色的hsv(色调、饱和度、明度)，在饱和度和明度不变的情况下，在色环中以预设间隔获取相应角度的色调，比如色环一圈是360度，那间隔30度就可以获取到12个色调，间隔60度就可以获取6个色调，结合主色的饱和度和明度就可以得到12个或者6个基础色；可以以不同的预设间隔获取更多基础色，如间隔10度能够得到36个基础色；
85.s12、根据所述基础色板得到数据可视化色板；
86.其中，数据可视化色板包括分类色板、顺序色板、发散色板、叠加色板、强调色板以及语义色板；具体的，分类色板：利用基础色，可以从基础色里面选择第一预设个数的色号
作为分类色板；常用于业务类别不同的分类，第一预设个数可根据实际的业务类别确认；
87.顺序色板：是用于同业务类别中的轻重区分，可以用主色调做颜色hsv中的明度做渐变色，常用于一个数据的等级梯度；
88.发散色板：发散是从一个颜色的从深到浅，到另一个颜色的从浅到深的过程，深浅的色调与顺序色板算法一致；默认选用主色作为一个颜色，另一个颜色可以默认获取主色的对比色(或互补色)，也可以自定义选择；常用于气温冷热，海拔高低，股票涨跌等的表示；使用主色能够和主页面保持一致，使用对比色能够与在主题配色统一的情况下与主色区分开，方便用户识别；
89.叠加色板：根据主色的渐变色与另一个颜色(对比色或互补色)的渐变色相叠加，通过色彩叠加算法，形成一组新的颜色，这组颜色一个颜色代表两种变量数据，展示相对立的两个值的大小关系，观察事物两个维度变化的相关性；
90.强调色板：利用分类色板得出第二预设数量的分类色，然后对其做明度设为100％作为强调色，然后对分类色板中除变为强调色之外的其他分类色的明度设浅一点(如50％左右)作为非强调色；常用于强调重点要关注的分类数据；
91.语义色板：根据行业通用色彩习惯，固定红色、绿色、黄色三种固定的色调，然后根据主色的明度和饱和度做调整，得到红绿黄上三个颜色的语义色板；常用于约定俗成的场景色彩，如预警、红绿灯、红涨绿跌等；
92.请参照图9-图14，依次为分类色板、顺序色板、发散色板、叠加色板、强调色板以及语义色板的示意图；
93.s2、获取预置色板；
94.在一种可选的实施方式中，请参照图8，从灰度图像中得到13个色号的渐变色板，包括不同的黑、白以及灰；
95.s3、获取色彩配置单；
96.s4、根据所述主色色板和所述预置色板填充所述色彩配置单，包括：
97.根据所述主色色板、基础色板、可视化色板以及预置色板填充色彩配置单；
98.在一种可选的实施方式中，请参照图15，为色彩配置单的示意图，色彩配置单通过以上方式得到色彩配置单，包括：主色调、主色色板、基础色板、中性色板，大数据可用色板；通过色彩配置单匹配给对应产品类型页面的换肤相关的框架及元素上，比如产品类型是网站，那对应换肤的常用地方有主导航背景、按钮背景、字体颜色、重点突出色块背景等，如果产品类型是app，那对应换肤的地方也是页面设计对应需要换肤的元素；而需要匹配换肤的元素不是固定的，取决于页面的设计风格对换肤的要求；所以配置单上会根据产品类型匹配常用的页面元素，如果有需要换肤的就设置对应的换肤颜色，如背景-主色色板中的中间色号，图标-主色色板中的最末色号；则当主色色板改变后，可以自动读取新的主色色板中的颜色；不需要就不设置，默认用原页面颜色即可；
99.s5、根据所述主色色板、基础色板、可视化色板以及预置色板填充预设接口模板得到色彩接口，并在所述色彩配置单中调用所述色彩接口；通过提供统一的色彩接口，在修改色彩配置单中的相应色号时，能够直接通过色彩接口获取到对应的色号，无需在每个终端上进行颜色的单独配置，简化了多终端换肤的过程。
100.本发明的实施例二为：
101.一种自动换肤配色方法，其与实施例一的不同之处在于，在步骤s1之前还包括：
102.s010、接收主题选择数据，所述主题选择数据包括主题元素；
103.s020、根据所述主题选择数据获取主色范围；
104.则步骤s1包括：显示所述主色范围，并接收与所述主色范围对应的主色选择数据；
105.步骤s4或步骤s4之后还包括：根据所述主题元素替换原始页面元素；
106.本发明的实施例三为：
107.一种自动换肤配色方法，其与实施例一或实施例二的不同之处在于，在步骤s1之前还包括：
108.s030、接收模式设置数据，所述模式设置数据包括深色模式或正常模式；
109.s1包括：接收主色选择数据，根据所述模式设置数据调整所述主色选择数据中的色号。
110.请参照图2，本发明的实施例四为：
111.一种自动换肤配色终端1，包括处理器2、存储器3及存储在存储器3上并可在所述处理器2上运行的计算机程序，所述处理器2执行所述计算机程序时实现实施例一、实施例二或实施例三中的各个步骤。
112.综上所述，本发明提供了一种自动换肤配色方法及终端；通过根据用户选择的一个主色生成多个页面元素需要使用到的色板，并且为每个色板设置对应的接口，实现对色板的调用；同时设置色彩配置单，在存在多个终端的情况下，只需要通过色彩配置单连接不同接口获取颜色，就能实现对多个终端界面主色调的配置；同时，引入能够根据主色变化的深色模式下的色板和能够根据用户选择的主题中的主题元素改变界面元素，并且在用户选择了主题时，只提供符合改主题的主色供用户选择，在保证界面和谐的前提下确保了用户配置的灵活性，项目的多终端设计的项目主色是基本一致的，基于主色匹配的相应色板也相对一致的，将这些色板统一运用于各该项目的各终端设计。即可避免各种终端颜色重复设计，又可以保持该项目的各终端色彩统一性。只要对主色统一调配，结合深色模式即可实现动态换肤功能。当然也适用于不同项目的不同终端的换肤需求。
113.以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。