一种用户界面的生成方法和装置与流程

1.本技术涉及用户界面技术领域，具体而言，涉及一种用户界面的生成方法、装置、介质和电子设备。


背景技术：

2.在车机应用中，目标用户界面(英文全称user interface，简称ui)设计的重要性不言而喻，因为它是用户与车机系统之间的主要交互方式，能够帮助用户更快地理解和使用车机功能，从而提高使用效率。
3.目前，ui设计的创意是层出不穷的。ui设计师在完成设计后，需要将设计图交给ui开发人员，ui开发人员需要将设计图中的功能项切片，然后手工设置在车机的程序中，这样会增加开发人员工作负荷的，且开发人员设置好的ui界面并不能完全的反映一个好的ui设计的精髓。
4.因此，本技术提供了一种用户界面的生成方法，以解决上述技术问题。


技术实现要素：

5.本技术的目的在于提供一种用户界面的生成方法、装置、介质和电子设备，能够解决上述提到的至少一个技术问题。具体方案如下：
6.根据本技术的具体实施方式，第一方面，本技术提供一种用户界面的生成方法，包括：
7.获取参考图像，其中，所述参考图像中包括功能图像；
8.基于所述参考图像获得所述功能图像和所述功能图像的布置信息；
9.基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息；
10.基于所述功能图像和所述功能图像的布置信息生成目标用户界面中的功能元素，且所述功能元素能够触发所述调用对象信息所指示的调用对象完成相应的功能。
11.可选的，所述基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，包括：
12.基于所述功能图像中获取多个图形特征信息；
13.将所述多个图形特征信息与所述模板数据集中多个功能模板各自的图形模板信息分别进行相似度匹配，获得所述多个功能模板各自的相似度匹配结果；
14.从所述多个功能模板各自的相似度匹配结果中确定最大相似度匹配结果；
15.当所述最大相似度匹配结果大于预设相似度阈值时，确定所述最大相似度匹配结果所对应的功能模板为匹配功能模板；
16.基于所述匹配功能模板从所述模板数据集中获取对应的调用对象信息。
17.可选的，所述基于所述功能图像中获取多个图形特征信息，包括：
18.对所述功能图像进行二值化处理，获得二值化图像；
19.从所述二值化图像中提取所述多个图形特征信息。
20.可选的，所述从所述二值化图像中提取所述多个图形特征信息之前，还包括：
21.对所述二值化图像进行增强处理，获得增强的二值化图像。
22.可选的，所述预设相似度阈值为0.8。
23.根据本技术的具体实施方式，第二方面，本技术提供一种用户界面的生成装置，包括：
24.获取单元，用于获取参考图像，其中，所述参考图像中包括功能图像；
25.获得单元，用于基于所述参考图像获得所述功能图像和所述功能图像的布置信息；
26.匹配单元，用于基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息；
27.生成单元，用于基于所述功能图像和所述功能图像的布置信息生成目标用户界面中的功能元素，且所述功能元素能够触发所述调用对象信息所指示的调用对象完成相应的功能。
28.可选的，所述基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，包括：
29.基于所述功能图像中获取多个图形特征信息；
30.将所述多个图形特征信息与所述模板数据集中多个功能模板各自的图形模板信息分别进行相似度匹配，获得所述多个功能模板各自的相似度匹配结果；
31.从所述多个功能模板各自的相似度匹配结果中确定最大相似度匹配结果；
32.当所述最大相似度匹配结果大于预设相似度阈值时，确定所述最大相似度匹配结果所对应的功能模板为匹配功能模板；
33.基于所述匹配功能模板从所述模板数据集中获取对应的调用对象信息。
34.可选的，所述基于所述功能图像中获取多个图形特征信息，包括：
35.对所述功能图像进行二值化处理，获得二值化图像；
36.从所述二值化图像中提取所述多个图形特征信息。
37.可选的，所述从所述二值化图像中提取所述多个图形特征信息之前，还包括：
38.对所述二值化图像进行增强处理，获得增强的二值化图像。
39.可选的，所述预设相似度阈值为0.8。
40.根据本技术的具体实施方式，第三方面，本技术提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上任一项所述用户界面的生成方法。
41.根据本技术的具体实施方式，第四方面，本技术提供一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上任一项所述用户界面的生成方法。
42.本技术实施例的上述方案与现有技术相比，至少具有以下有益效果：
43.本技术提供了一种用户界面的生成方法、装置、介质和电子设备。本技术从参考图像中获得功能图像和所述功能图像的布置信息，通过功能图像的布置信息能够将功能图像自动复制到目标用户界面中，使目标用户界面能够完美生成与参考图像相同的设计效果；
同时，通过功能图像与模板数据集中获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，从而使生成的目标用户界面中的功能图像成为功能元素，能够触发所述调用对象信息所指示的调用对象完成相应的功能。从而自动完成了目标用户界面的开发工作，减少ui开发人员设置目标用户界面的时间，减轻ui开发人员的工作负荷，能够完整还原参考图像的设计精髓，提高目标用户界面的美观度。
附图说明
44.图1示出了根据本技术实施例的用户界面的生成方法的流程图；
45.图2示出了根据本技术实施例的用户界面的生成装置的单元框图。
具体实施方式
46.为了使本技术的目的、技术方案和优点更加清楚，下面将结合附图对本技术作进一步地详细描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本技术保护的范围。
47.在本技术实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本技术。在本技术实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种。
48.应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
49.应当理解，尽管在本技术实施例中可能采用术语第一、第二、第三等来描述，但这些描述不应限于这些术语。这些术语仅用来将描述区分开。例如，在不脱离本技术实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。
50.取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。
51.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的商品或者装置中还存在另外的相同要素。
52.特别需要说明的是，在说明书中存在的符号和/或数字，如果在附图说明中未被标记的，均不是附图标记。
53.下面结合附图详细说明本技术的可选实施例。
54.对本技术提供的实施例，即一种用户界面的生成方法的实施例。
55.下面结合图1对本技术实施例进行详细说明。
56.步骤s101，获取参考图像。
57.其中，所述参考图像中包括功能图像。
58.所述参考图像是由ui设计师设计的，也可以是其他车型的成熟ui界面，通过手机或摄像头将参考界面拍摄下来，以供借鉴使用。
59.所述功能图像，是在参考图像中功能元素的图像，该功能元素将来在ui中是能够被操作的元素，例如，功能元素包括：空调的开关键、调温键、风向键以及工作模式键。
60.步骤s102，基于所述参考图像获得所述功能图像和所述功能图像的布置信息。
61.本技术实施例从所述参考图像将功能图像提取出来，并且获得功能图像的布置信息。
62.所述布置信息包括：功能图像的功能图尺寸、所述功能图像在所述参考图像中的图像位置和所述参考图像的整图尺寸。
63.通过所述功能图像的布置信息能够在自动生成目标用户界面时，将功能图像自动设置在相应的位置上，从而减少ui开发人员设置目标用户界面的时间，减轻ui开发人员的工作负荷，能够完整还原参考图像的设计精髓，提高目标用户界面的美观度。
64.步骤s103，基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息。
65.提取功能图像后，并不是知道该功能图像具体的用途和其与调用对象的关系，为此，本技术实施例提供了模板数据集。
66.模板数据集中包括每个功能模板与调用对象信息的对应关系。
67.每个功能模板均是一个衡量功能图像的标准。在模板数据集中包括多个功能模板。对应同一类功能图像在模板数据集中均有多个功能模板，例如，在模板数据集中具有针对空调开关键的多种功能模板，以便能够满足匹配的需要。
68.所述调用对象信息用于指示调用对象，例如，调用对象信息是一个函数名称或方法名称，比如sdk中的一个函数名称或方法名称。
69.所述调用对象包括函数或方法。
70.本技术实施例将功能模板作为识别功能图像的标准，当功能图像与模板数据集中任一功能模板匹配，便可获得该功能模板所对应的调用对象信息。
71.在一些具体实施例中，所述基于所述功能图像与模板数据集中的多个功能模板分别进行相似度匹配，获取匹配功能模板所对应的调用对象，包括以下步骤：
72.步骤s103-1，基于所述功能图像中获取多个图形特征信息。
73.所述图形特征信息包括：正方形信息、长方形信息、圆形信息、椭圆形信息、字形信息和/或线条信息。
74.在一些具体实施例中，所述基于所述功能图像中获取多个图形特征信息，包括以下步骤：
75.步骤s103-1-1，对所述功能图像进行二值化处理，获得二值化图像。
76.二值化图像，就是将图像上的像素点的灰度值设置为0或255，也就是将整个图像呈现出明显的只有黑和白的视觉效果。
77.步骤s103-1-2，从所述二值化图像中提取所述多个图形特征信息。
78.本具体实施例，对功能图像进行二值化处理后，能够降低图像数据的维度，从而减少匹配时的计算量，提高图形匹配的效率，由于二值化图像保留了功能图像的关键信息，因
而简化了获取图形特征信息的难度，也提高了匹配的准确性。
79.在一些具体实施例中，所述从所述二值化图像中提取所述多个图形特征信息之前，还包括以下步骤：
80.对所述二值化图像进行增强处理，获得增强的二值化图像。
81.本具体实施例，对二值化图像进行增强处理，提高图像的清晰度和对比度，突出了功能图像的关键信息，从而能够更准确的获取图形特征信息。
82.步骤s103-2，将所述多个图形特征信息与所述模板数据集中多个功能模板各自的图形模板信息分别进行相似度匹配，获得所述多个功能模板各自的相似度匹配结果。
83.本具体实施例，模板数据集中包括每个功能模板各自的图形模板信息与调用对象信息的对应关系。
84.以功能图像的多个图形特征信息与每个功能模板各自的图形模板信息一一进行匹配，获得匹配结果。
85.步骤s103-3，从所述多个功能模板各自的相似度匹配结果中确定最大相似度匹配结果。
86.本具体实施例，将最大相似度匹配结果作为待选对象。
87.步骤s103-4，当所述最大相似度匹配结果大于预设相似度阈值时，确定所述最大相似度匹配结果所对应的功能模板为匹配功能模板。
88.最大相似度匹配结果所对应的功能模板并不一定是匹配功能模板。例如，多个功能模板的相似度匹配结果分别为：0.2、0.35、0.46和0.29，其中，0.46是最大相似度匹配结果，但是，0.46相似度过低，不能认定其为匹配功能模板。因此，本具体实施例提供了预设相似度阈值，只有所述最大相似度匹配结果大于预设相似度阈值时才能认定最大相似度匹配结果所对应的功能模板为匹配功能模板。从而保证匹配的准确性。
89.可选的，所述预设相似度阈值为0.8。可以理解为，只有高相似度的最大相似度匹配结果才能认定其对应的功能模板为匹配功能模板。从而降低了匹配的误判率，保证匹配的准确性。
90.步骤s103-5，基于所述匹配功能模板从所述模板数据集中获取对应的调用对象信息。
91.模板数据集中包括每个功能模板各自的图形模板信息与调用对象信息的对应关系。当获得匹配功能模板后，通过该对应关系能够获得匹配功能模板所对应的调用对象信息。
92.步骤s104，基于所述功能图像和所述功能图像的布置信息生成目标用户界面中的功能元素，且所述功能元素能够触发所述调用对象信息所指示的调用对象完成相应的功能。
93.在本技术实施例中，所述布置信息包括：功能图像的功能图尺寸、所述功能图像在所述参考图像中的图像位置和所述参考图像的整图尺寸。
94.基于功能图像的布置信息，按照等比例缩放的方式，将功能图像自动布置在当前目标用户界面中，而且还通过调用对象信息将目标用户界面中的功能图像与调用对象联系起来，使目标用户界面中的功能图像成为目标用户界面中的功能图像成为能够实现对应功能的功能元素。
95.本技术实施例从参考图像中获得功能图像和所述功能图像的布置信息，通过功能图像的布置信息能够将功能图像自动复制到目标用户界面中，使目标用户界面能够完美生成与参考图像相同的设计效果；同时，通过功能图像与模板数据集中获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，从而使生成的目标用户界面中的功能图像成为功能元素，能够触发所述调用对象信息所指示的调用对象完成相应的功能。从而自动完成了目标用户界面的开发工作，减少ui开发人员设置目标用户界面的时间，减轻ui开发人员的工作负荷，能够完整还原参考图像的设计精髓，提高目标用户界面的美观度。
96.本技术还提供了承接上述实施例的装置实施例，用于实现如上实施例所述的方法步骤，基于相同的名称含义的解释与如上实施例相同，具有与如上实施例相同的技术效果，此处不再赘述。
97.如图2所示，本技术提供一种用户界面的生成装置200，包括：
98.获取单元201，用于获取参考图像，其中，所述参考图像中包括功能图像；
99.获得单元202，用于基于所述参考图像获得所述功能图像和所述功能图像的布置信息；
100.匹配单元203，用于基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息；
101.生成单元204，用于基于所述功能图像和所述功能图像的布置信息生成目标用户界面中的功能元素，且所述功能元素能够触发所述调用对象信息所指示的调用对象完成相应的功能。
102.可选的，所述基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，包括：
103.基于所述功能图像中获取多个图形特征信息；
104.将所述多个图形特征信息与所述模板数据集中多个功能模板各自的图形模板信息分别进行相似度匹配，获得所述多个功能模板各自的相似度匹配结果；
105.从所述多个功能模板各自的相似度匹配结果中确定最大相似度匹配结果；
106.当所述最大相似度匹配结果大于预设相似度阈值时，确定所述最大相似度匹配结果所对应的功能模板为匹配功能模板；
107.基于所述匹配功能模板从所述模板数据集中获取对应的调用对象信息。
108.可选的，所述基于所述功能图像中获取多个图形特征信息，包括：
109.对所述功能图像进行二值化处理，获得二值化图像；
110.从所述二值化图像中提取所述多个图形特征信息。
111.可选的，所述从所述二值化图像中提取所述多个图形特征信息之前，还包括：
112.对所述二值化图像进行增强处理，获得增强的二值化图像。
113.可选的，所述预设相似度阈值为0.8。
114.本技术实施例从参考图像中获得功能图像和所述功能图像的布置信息，通过功能图像的布置信息能够将功能图像自动复制到目标用户界面中，使目标用户界面能够完美生成与参考图像相同的设计效果；同时，通过功能图像与模板数据集中获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，从而使生成的目标用户界面中的功能图像成为功能元素，能够触发所述调用对象信息所指示的调用对象完成相应的功能。从而自动完成
了目标用户界面的开发工作，减少ui开发人员设置目标用户界面的时间，减轻ui开发人员的工作负荷，能够完整还原参考图像的设计精髓，提高目标用户界面的美观度。
115.本实施例提供一种电子设备，所述电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上实施例所述的方法步骤。
116.本技术实施例提供了一种非易失性计算机存储介质，所述计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行如上实施例所述的方法步骤。
117.最后应说明的是：本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的系统或装置而言，由于其与实施例公开的方法相对应，所以描述比较简单，相关之处参见方法部分说明即可。
118.以上实施例仅用以说明本技术的技术方案，而非对其限制；尽管参照前述实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本技术各实施例技术方案的精神和范围。

技术特征：
1.一种用户界面的生成方法，其特征在于，包括：获取参考图像，其中，所述参考图像中包括功能图像；基于所述参考图像获得所述功能图像和所述功能图像的布置信息；基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息；基于所述功能图像和所述功能图像的布置信息生成目标用户界面中的功能元素，且所述功能元素能够触发所述调用对象信息所指示的调用对象完成相应的功能。2.根据权利要求1所述的方法，其特征在于，所述基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，包括：基于所述功能图像中获取多个图形特征信息；将所述多个图形特征信息与所述模板数据集中多个功能模板各自的图形模板信息分别进行相似度匹配，获得所述多个功能模板各自的相似度匹配结果；从所述多个功能模板各自的相似度匹配结果中确定最大相似度匹配结果；当所述最大相似度匹配结果大于预设相似度阈值时，确定所述最大相似度匹配结果所对应的功能模板为匹配功能模板；基于所述匹配功能模板从所述模板数据集中获取对应的调用对象信息。3.根据权利要求2所述的方法，其特征在于，所述基于所述功能图像中获取多个图形特征信息，包括：对所述功能图像进行二值化处理，获得二值化图像；从所述二值化图像中提取所述多个图形特征信息。4.根据权利要求3所述的方法，其特征在于，所述从所述二值化图像中提取所述多个图形特征信息之前，还包括：对所述二值化图像进行增强处理，获得增强的二值化图像。5.根据权利要求2所述的方法，其特征在于，所述预设相似度阈值为0.8。6.一种用户界面的生成装置，其特征在于，包括：获取单元，用于获取参考图像，其中，所述参考图像中包括功能图像；获得单元，用于基于所述参考图像获得所述功能图像和所述功能图像的布置信息；匹配单元，用于基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息；生成单元，用于基于所述功能图像和所述功能图像的布置信息生成目标用户界面中的功能元素，且所述功能元素能够触发所述调用对象信息所指示的调用对象完成相应的功能。7.根据权利要求6所述的装置，其特征在于，所述基于所述功能图像与模板数据集中的多个功能模板分别进行匹配，获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，包括：基于所述功能图像中获取多个图形特征信息；将所述多个图形特征信息与所述模板数据集中多个功能模板各自的图形模板信息分别进行相似度匹配，获得所述多个功能模板各自的相似度匹配结果；
从所述多个功能模板各自的相似度匹配结果中确定最大相似度匹配结果；当所述最大相似度匹配结果大于预设相似度阈值时，确定所述最大相似度匹配结果所对应的功能模板为匹配功能模板；基于所述匹配功能模板从所述模板数据集中获取对应的调用对象信息。8.根据权利要求7所述的装置，其特征在于，所述基于所述功能图像中获取多个图形特征信息，包括：对所述功能图像进行二值化处理，获得二值化图像；从所述二值化图像中提取所述多个图形特征信息。9.根据权利要求8所述的装置，其特征在于，所述从所述二值化图像中提取所述多个图形特征信息之前，还包括：对所述二值化图像进行增强处理，获得增强的二值化图像。10.根据权利要求7所述的装置，其特征在于，所述预设相似度阈值为0.8。

技术总结
本申请提供了一种用户界面的生成方法和装置。本申请从参考图像中获得功能图像和所述功能图像的布置信息，通过功能图像的布置信息能够将功能图像自动复制到目标用户界面中，使目标用户界面能够完美生成与参考图像相同的设计效果；同时，通过功能图像与模板数据集中获取匹配功能模板和所述匹配功能模板所对应的调用对象信息，从而使生成的目标用户界面中的功能图像成为功能元素，能够触发所述调用对象信息所指示的调用对象完成相应的功能。从而自动完成了目标用户界面的开发工作，减少UI开发人员设置目标用户界面的时间，减轻UI开发人员的工作负荷，能够完整还原参考图像的设计精髓，提高目标用户界面的美观度。提高目标用户界面的美观度。提高目标用户界面的美观度。


技术研发人员：王兆麟 丁冠源 回姝 王兆麒 郭富琦 黄嘉桐 郑彤 张文娟
受保护的技术使用者：中国第一汽车股份有限公司
技术研发日：2023.06.20
技术公布日：2023/10/8