本發(fā)明涉及界面布局優(yōu)化，尤其涉及一種用于對(duì)用戶(hù)界面進(jìn)行自動(dòng)優(yōu)化的方法及系統(tǒng)。

背景技術(shù)：

1、隨著現(xiàn)代軟件開(kāi)發(fā)的復(fù)雜性和用戶(hù)需求的提升，用戶(hù)界面（ui）的設(shè)計(jì)已經(jīng)成為軟件產(chǎn)品成功的關(guān)鍵因素之一。良好的ui設(shè)計(jì)不僅影響用戶(hù)的操作體驗(yàn)，還直接影響到產(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力。傳統(tǒng)的ui設(shè)計(jì)過(guò)程中，開(kāi)發(fā)人員通常需要手動(dòng)設(shè)置每個(gè)組件的尺寸、間距和對(duì)齊方式，特別是對(duì)于包含大量組件和復(fù)雜嵌套布局的頁(yè)面，手動(dòng)調(diào)整變得尤為繁瑣。復(fù)雜頁(yè)面的布局不僅要求美觀、簡(jiǎn)潔，還需保證不同設(shè)備上的一致性，這使得ui設(shè)計(jì)成為開(kāi)發(fā)流程中費(fèi)時(shí)費(fèi)力的環(huán)節(jié)之一。

2、現(xiàn)有的一些ui設(shè)計(jì)工具雖然提供了部分自動(dòng)布局功能，但這些功能往往比較初級(jí)，不能全面解決復(fù)雜布局中的組件對(duì)齊、容器嵌套、布局優(yōu)化等問(wèn)題。例如，在多行多列的表單布局中，不同組件之間的間距、對(duì)齊方式容易出現(xiàn)不一致，影響頁(yè)面整體美觀。尤其在面對(duì)快速迭代開(kāi)發(fā)時(shí)，開(kāi)發(fā)人員頻繁調(diào)整頁(yè)面布局會(huì)導(dǎo)致大量重復(fù)勞動(dòng)，并且容易引入新的設(shè)計(jì)不規(guī)范或視覺(jué)錯(cuò)位問(wèn)題。

3、針對(duì)這些痛點(diǎn)，業(yè)內(nèi)亟需一種自動(dòng)化的ui美化解決方案，能夠根據(jù)現(xiàn)有的布局結(jié)構(gòu)，自動(dòng)調(diào)整組件的坐標(biāo)、間距和對(duì)齊方式，減少手動(dòng)干預(yù)，并在保證美觀和一致性的同時(shí)提高開(kāi)發(fā)效率。

技術(shù)實(shí)現(xiàn)思路

1、鑒于現(xiàn)有技術(shù)的上述缺點(diǎn)、不足，本發(fā)明提供一種用于對(duì)用戶(hù)界面進(jìn)行自動(dòng)優(yōu)化的方法及系統(tǒng)，其解決了現(xiàn)有技術(shù)中手動(dòng)布局不美觀且效率低、重復(fù)勞動(dòng)的技術(shù)問(wèn)題。

2、為了達(dá)到上述目的，本發(fā)明采用的主要技術(shù)方案包括：

3、第一方面，本發(fā)明實(shí)施例提供一種用于對(duì)用戶(hù)界面進(jìn)行自動(dòng)優(yōu)化的方法，包括：

4、s100、針對(duì)待優(yōu)化的用戶(hù)界面，獲取所述用戶(hù)界面的字典數(shù)據(jù)，所述字典數(shù)據(jù)包括：用戶(hù)界面中ui組件的基本信息和第一屬性信息；

5、s200、根據(jù)所述ui組件的基本信息，生成一個(gè)以上的第一類(lèi)型容器，所述第一類(lèi)型容器包括：具有至少一層父子層級(jí)關(guān)系的ui組件；

6、s300、根據(jù)所述第一類(lèi)型容器及字典數(shù)據(jù)，更新字典數(shù)據(jù)結(jié)構(gòu)，獲得更新后的字典；

7、s400、根據(jù)更新后的字典，采用投影算法和大語(yǔ)言模型從外到內(nèi)的順序獲取當(dāng)前字典中每一層級(jí)的各ui組件的布局及布局中各ui組件的位置關(guān)系；

8、s500、根據(jù)當(dāng)前字典中每一層級(jí)ui組件的布局及位置關(guān)系，從外向內(nèi)調(diào)整各ui組件的位置坐標(biāo)，生成優(yōu)化布局后的用戶(hù)界面。

9、可選地，ui組件的基本信息包括：組件名稱(chēng)、組件類(lèi)型、組件位置、組件寬度、和/或組件高度；

10、ui組件的屬性信息包括：組件顏色、組件字號(hào)、組件位置屬性、和/或flex布局屬性；所述flex布局屬性為所述s400中采用投影算法識(shí)別的屬性；

11、第一類(lèi)型容器、第二類(lèi)型容器和第三類(lèi)型容器中ui組件的數(shù)據(jù)結(jié)構(gòu)包括：層級(jí)關(guān)系結(jié)構(gòu)。

12、可選地，s400、根據(jù)更新后的字典，采用投影算法和大語(yǔ)言模型從外到內(nèi)的順序獲取當(dāng)前字典中每一層級(jí)的各ui組件的布局及布局中各ui組件的位置關(guān)系，包括：

13、s401、根據(jù)更新后的字典，采用投影算法從外到內(nèi)的順序判斷當(dāng)前字典中每一層級(jí)的各ui組件的布局及布局中各ui組件的第一位置關(guān)系；以及，根據(jù)布局中各ui組件的第一位置關(guān)系生成第二類(lèi)型容器；

14、s402、采用大語(yǔ)言模型對(duì)第二類(lèi)型容器進(jìn)行優(yōu)化，生成第三類(lèi)型容器及第三類(lèi)型容器中各ui組件的第二位置關(guān)系；

15、s403、將第二位置關(guān)系作為各ui組件之間是否屬于嵌套結(jié)構(gòu)的位置關(guān)系，根據(jù)識(shí)別的每一層級(jí)的ui組件的布局，獲得每一層級(jí)ui組件的flex布局屬性并添加到第一屬性信息中；

16、所述布局包括縱向布局或橫向布局。

17、可選地，s401、根據(jù)更新后的字典，采用投影算法從外到內(nèi)的順序判斷當(dāng)前字典中每一層級(jí)的各ui組件的布局及布局中各ui組件的第一位置關(guān)系；以及，根據(jù)布局中各ui組件的第一位置關(guān)系生成第二類(lèi)型容器，包括：

18、針對(duì)每一層級(jí)的ui組件，根據(jù)投影算法的從左到右的光束，判斷是否存在縱向布局的穿透線，若存在穿透線，則確定當(dāng)前層級(jí)的ui組件為縱向布局；

19、若不存在縱向布局的穿透線，則根據(jù)投影算法的從上到下的光束，確定是否存在橫向布局的穿透線，若存在，則確定當(dāng)前層級(jí)的ui組件為橫向布局；

20、同時(shí)，根據(jù)縱向布局的穿透線/橫向布局的穿透線，生成第二類(lèi)型容器。

21、可選地，s402、采用大語(yǔ)言模型對(duì)第二類(lèi)型容器進(jìn)行優(yōu)化，生成第三類(lèi)型容器及第三類(lèi)型容器中各ui組件的第二位置關(guān)系，包括：

22、針對(duì)每一層級(jí)的ui組件，將當(dāng)前層級(jí)ui組件的基本信息和第一屬性信息、當(dāng)前層級(jí)的下一層級(jí)中ui組件的基本信息和第一屬性信息輸入所述大語(yǔ)言模型的提示詞中，獲得大語(yǔ)言模型輸出的第三類(lèi)型容器；

23、所述提示詞是基于當(dāng)前層級(jí)及下一層級(jí)中ui組件的語(yǔ)義信息或語(yǔ)義結(jié)構(gòu)預(yù)先設(shè)置的。

24、可選地，根據(jù)當(dāng)前字典中每一層級(jí)ui組件的布局及位置關(guān)系，從外向內(nèi)調(diào)整各ui組件的位置坐標(biāo)，包括：

25、若布局為縱向布局，則針對(duì)每一層級(jí)的ui組件，當(dāng)前層級(jí)的ui組件為父容器，下一層級(jí)的ui組件為子組件/子容器；

26、將當(dāng)前層級(jí)內(nèi)所有子組件寬度調(diào)整為父容器寬度減去兩側(cè)邊距，該側(cè)邊距為預(yù)先設(shè)置的當(dāng)前父容器的側(cè)邊距；

27、確定該父容器內(nèi)是否存在不可變組件標(biāo)記的不可變組件，若是，則對(duì)不可變組件的界面xy坐標(biāo)修改；所述不可變組件的高度不變；

28、針對(duì)該父容器內(nèi)其他可變組件，按照原始高度數(shù)值比例分割剩余父容器高度；所述原始高度數(shù)值比例為字典數(shù)據(jù)中對(duì)應(yīng)ui組件的高度數(shù)值比例；

29、依序排列容器內(nèi)的其他可變組件，調(diào)整各可變組件的界面xy坐標(biāo)；

30、和/或，

31、若布局為橫向布局，則針對(duì)每一層級(jí)的ui組件，當(dāng)前層級(jí)的ui組件為父容器，下一層級(jí)的ui組件為子組件/子容器；

32、將當(dāng)前層級(jí)父容器內(nèi)所有子組件寬度按照原始寬度數(shù)值比例分割父容器寬度；所述原始寬度數(shù)值比例為字典數(shù)據(jù)中對(duì)應(yīng)ui組件的寬度數(shù)值比例；

33、確定該父容器內(nèi)是否存在不可變組件標(biāo)記的不可變組件，若是，則對(duì)不可變組件的界面xy坐標(biāo)修改；所述不可變組件的寬度不變；

34、針對(duì)該父容器內(nèi)其他可變組件，將其他可變組件的高度設(shè)置為所有不可變組件高度中的最大值；

35、依序排列該父容器內(nèi)的其他可變組件，調(diào)整各可變組件的界面xy坐標(biāo)。

36、可選地，針對(duì)每一層級(jí)，當(dāng)前層級(jí)的父容器及該父容器內(nèi)下一層級(jí)的子組件是聯(lián)動(dòng)調(diào)整；

37、父容器及子組件均為可變組件時(shí)，子組件的內(nèi)部坐標(biāo)隨著父容器坐標(biāo)調(diào)整自適應(yīng)調(diào)整。

38、可選地，根據(jù)當(dāng)前字典中每一層級(jí)ui組件的布局及位置關(guān)系，從外向內(nèi)調(diào)整各ui組件的位置坐標(biāo)，還包括：

39、根據(jù)每一層級(jí)的各ui組件的flex布局屬性，借助于訓(xùn)練的gbdt模型獲取各ui組件的對(duì)齊方式，調(diào)整當(dāng)前層級(jí)各ui組件的對(duì)齊模式；

40、所述對(duì)齊方式包括：左對(duì)齊、右對(duì)齊、中間對(duì)齊。

41、可選地，對(duì)于縱向布局中的等分布局或橫向布局中的等分布局即中間對(duì)齊，通過(guò)投影算法識(shí)別當(dāng)前層父容器內(nèi)子組件的行列數(shù)，重新計(jì)算每個(gè)子組件的xy坐標(biāo)以及寬度和高度；調(diào)整后的組件位置能夠保持一致的布局邏輯；

42、自適應(yīng)行間距：

43、

44、容器坐標(biāo)，：

45、；

46、；

47、；

48、其中：為當(dāng)前層父容器的總高度，為縱向分割間隙的數(shù)量，len表示求個(gè)數(shù)，表示縱向分布的間隔，dh表示容器內(nèi)部組件的高度，表示縱向組件的個(gè)數(shù)；

49、n表示容器內(nèi)所有組件的個(gè)數(shù)，%表示取余標(biāo)志，dw表示容器內(nèi)部組件的寬度；

50、是當(dāng)前層父容器的總寬度；12是當(dāng)前層父容器內(nèi)部?jī)蓚?cè)邊距；48是組件之間的固定間隔；是橫向分隔間隙的數(shù)量；

51、，為當(dāng)前層父容器坐標(biāo)。

52、第二方面，本發(fā)明實(shí)施例提供一種用于對(duì)用戶(hù)界面進(jìn)行自動(dòng)優(yōu)化的系統(tǒng)，包括：

53、字典數(shù)據(jù)獲取單元，用于針對(duì)待優(yōu)化的用戶(hù)界面，獲取所述用戶(hù)界面的字典數(shù)據(jù)，所述字典數(shù)據(jù)包括：用戶(hù)界面中ui組件的基本信息和第一屬性信息；

54、優(yōu)化布局單元，用于根據(jù)所述ui界面的基本信息，生成一個(gè)以上的第一類(lèi)型容器，所述第一類(lèi)型容器包括：具有至少一層父子層級(jí)關(guān)系的ui組件；

55、根據(jù)所述第一類(lèi)型容器及字典數(shù)據(jù)，更新字典數(shù)據(jù)結(jié)構(gòu)，獲得更新后的字典；

56、根據(jù)更新后的字典，采用投影算法和大語(yǔ)言模型從外到內(nèi)的順序獲取當(dāng)前字典中每一層級(jí)的各ui組件的布局及布局中各ui組件的位置關(guān)系；

57、根據(jù)當(dāng)前字典中每一層級(jí)ui組件的布局及位置關(guān)系，從外向內(nèi)調(diào)整各ui組件的位置坐標(biāo)，生成優(yōu)化布局后的用戶(hù)界面。

58、本發(fā)明的一種用于對(duì)用戶(hù)界面進(jìn)行自動(dòng)優(yōu)化的方法及系統(tǒng)，能夠根據(jù)現(xiàn)有的布局結(jié)構(gòu)，自動(dòng)調(diào)整組件的坐標(biāo)、間距和對(duì)齊方式，減少手動(dòng)干預(yù)，并在保證美觀和一致性的同時(shí)提高開(kāi)發(fā)效率。

59、本發(fā)明實(shí)施例中，通過(guò)解析字典數(shù)據(jù)，自動(dòng)識(shí)別組件關(guān)系和布局模式，智能優(yōu)化頁(yè)面的整體結(jié)構(gòu)，不僅能夠顯著減少開(kāi)發(fā)人員的工作量，還能提高ui設(shè)計(jì)的精確度和規(guī)范性，進(jìn)而提升用戶(hù)體驗(yàn)和產(chǎn)品質(zhì)量。