CN113377380B - 用户界面组件部署方法和装置 - Google Patents

用户界面组件部署方法和装置 Download PDF

Info

Publication number
CN113377380B
CN113377380B CN202010162397.XA CN202010162397A CN113377380B CN 113377380 B CN113377380 B CN 113377380B CN 202010162397 A CN202010162397 A CN 202010162397A CN 113377380 B CN113377380 B CN 113377380B
Authority
CN
China
Prior art keywords
user interface
interface component
pixel
attribute information
frame
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010162397.XA
Other languages
English (en)
Other versions
CN113377380A (zh
Inventor
韩欣峰
狄涛
李智尧
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Zhenshi Information Technology Co Ltd
Original Assignee
Beijing Jingdong Zhenshi Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Zhenshi Information Technology Co Ltd filed Critical Beijing Jingdong Zhenshi Information Technology Co Ltd
Priority to CN202010162397.XA priority Critical patent/CN113377380B/zh
Publication of CN113377380A publication Critical patent/CN113377380A/zh
Application granted granted Critical
Publication of CN113377380B publication Critical patent/CN113377380B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/60Software deployment
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种用户界面组件部署方法和装置,涉及计算机技术领域。该方法的一具体实施方式包括:构建出多个用户界面组件之间的属性联动关系;根据属性联动关系,为每一个用户界面组件生成对应的属性信息;根据每一个用户界面组件对应的属性信息,在目标用户界面部署多个用户界面组件。该实施方式能够有效地提高用户界面组件部署效率。

Description

用户界面组件部署方法和装置
技术领域
本发明涉及计算机技术领域,尤其涉及一种用户界面组件部署方法和装置。
背景技术
目前,各种应用所对应的用户界面包括各种组件如输入框、不同功能的控制按钮等。
为了能够在用户界面上合理部署这些组件,往往需要为这些组件设计不同尺寸。通过不断地测试展示这些组件,根据测试展示的结果,调整这些组件的尺寸,直至测试展示的结果能够产生较好的视觉效果。
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:
现有的这种在调整用户界面上的各个组件时,需要对每一个组件尺寸进行试调整,导致用户界面组件部署效率较低。
发明内容
有鉴于此,本发明实施例提供一种用户界面组件部署方法和装置,能够有效地提高用户界面组件部署效率。
为实现上述目的,根据本发明实施例的一个方面,提供了一种用户界面组件部署方法,包括:
构建出多个用户界面组件之间的属性联动关系;
根据所述属性联动关系,为每一个所述用户界面组件生成对应的属性信息;
根据每一个所述用户界面组件对应的属性信息,在目标用户界面部署所述多个用户界面组件。
优选地,所述用户界面组件部署方法,进一步包括:
当接收到针对所述多个用户界面组件的修改事件时,
根据所述属性联动关系和所述修改事件包括的任一用户界面组件的属性调变信息,调整每一个所述用户界面组件对应的属性信息;
根据调整后的属性信息,重新部署所述多个用户界面组件。
优选地,
所述属性联动关系,包括:进制转换值、规格参数、每两个所述用户界面组件之间的规格比例关系以及每一个所述用户界面组件中相邻两个边框之间的边框比例关系;
所述为每一个所述用户界面组件生成对应的属性信息的步骤包括:
利用所述进制转换值、所述规格参数、所述规格比例关系以及所述边框比例关系,计算每一个所述用户界面组件包括的每一条边框的像素值;
确定所述用户界面组件包括的每一条边框的像素值属于所述用户界面组件对应的属性信息。
优选地,所述用户界面组件部署方法,进一步包括:为每一种类型的边框设置对应的第一像素阈值和第二像素阈值,其中,所述第一像素阈值大于所述第二像素阈值,且所述第二像素阈值大于零;
在所述计算每一个所述用户界面组件包括的每一条边框的像素值步骤之后,进一步包括:
搜索属于同一类型的多条边框;
将所述属于同一类型的多条边框的像素值分别与所述属于同一类型的多条边框对应的第一像素阈值和第二像素阈值进行对比;
针对所述属于同一类型的多条边框的像素值,执行:
将对比的结果中大于所述第一像素阈值的像素值调整为所述第一像素阈值;
将对比的结果中小于所述第二像素阈值的像素值调整为所述第二像素阈值。
优选地,所述用户界面组件部署方法,进一步包括:为每一种规格参数设置对应的字属性;
根据每两个所述用户界面组件之间的规格比例关系和所述用户界面组件的属性信息包括的规格参数,确定所述用户界面组件对应的规格参数;
根据所述用户界面组件对应的规格参数,为所述用户界面组件部署所显示的字。
优选地,
每一个所述用户界面组件中相邻两个边框之间的边框比例关系满足:
每一个所述用户界面组件中相邻两个边框之间的基础比例为3:8,且每一个所述用户界面组件中相邻两个边框的像素值之间差值为5的倍数。
优选地,
所述进制转换值为4;和/或,
所述规格参数为正整数。
第二方面,本发明实施例提供一种用户界面组件部署装置,包括:构建单元、处理单元以及部署单元,其中,
所述构建单元,用于构建出多个用户界面组件之间的属性联动关系;
所述处理单元,用于确定所述多个用户界面组件中用户界面组件的属性信息;根据获取到的所述用户界面组件的属性信息以及所述构建单元构建出的所述属性联动关系,为每一个所述用户界面组件生成对应的属性信息;
所述部署单元,用于根据所述处理单元生成的每一个所述用户界面组件对应的属性信息,在目标用户界面部署所述多个用户界面组件。
上述发明中的一个实施例具有如下优点或有益效果:通过多个用户界面组件之间的属性联动关系,即可为多个用户界面组件中的每一个用户界面组件生成对应的属性信息,而无须用户为每一用户界面组件设置对应的属性信息。由于每一个所述用户界面组件对应的属性信息是用户界面组件部署的基础,与现有的人工方式为每一用户界面组件设置对应的属性信息相比,本发明实施例提供的方案能够快速地为每一个所述用户界面组件生成对应的属性信息,因此,本发明实施例提供的方案能够有效地提高用户界面组件部署效率。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明,不构成对本发明的不当限定。其中:
图1是根据本发明实施例的用户界面组件部署的方法的主要流程的示意图;
图 2 是根据本发明实施例的用户界面组件的示意图;
图 3 是根据本发明实施例的用户界面组件的示意图;
图4是根据本发明实施例的用户界面组件部署的方法的主要流程的示意图;
图5是根据本发明实施例的用户界面组件部署装置的主要单元的示意图;
图 6 是本发明实施例可以应用于其中的示例性系统架构图;
图7是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明,其中包括本发明实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本发明的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
属性联动关系指示一个用户界面组件的属性的确定或更改带动另一个用户界面组件属性的确定或更改。其中,属性可以为用户界面组件的边框的像素值、进制转换值、规格参数、字体、字号等。
进制转换值是指用户界面组件的边框像素值确定或更改的基础像素值,比如,进制转换值为4pt(4个像素长度)则以该4pt为基础像素值,结合规格参数等,确定边框像素值;又比如,进制转换值为4pt(4个像素长度)则以该4pt为基础像素值增加或减少边框像素值,从而实现更改边框像素值。
图1是根据本发明实施例的一种用户界面组件部署方法。如图1所示,该用户界面组件部署方法可包括如下步骤:
101:构建出多个用户界面组件之间的属性联动关系;
102:根据所述属性联动关系,为每一个所述用户界面组件生成对应的属性信息;
103:根据每一个所述用户界面组件对应的属性信息,在目标用户界面部署所述多个用户界面组件。
在图1所示的实施例中,通过多个用户界面组件之间的属性联动关系以及确定出的用户界面组件的属性信息,即可为多个用户界面组件中的每一个用户界面组件生成对应的属性信息,而无须用户为每一用户界面组件设置对应的属性信息,与现有的人工方式为每一用户界面组件设置对应的属性信息相比,本发明实施例提供的方案能够快速地为每一个所述用户界面组件生成对应的属性信息,从而能够有效地提高用户界面组件部署效率。
其中,上述步骤101的实现方式可以为以表格的形式展示多个用户界面组件之间的边框基础比例;也可以为以脚本的形式封装每两个所述用户界面组件之间的规格比例关系以及每一个所述用户界面组件中相邻两个边框之间的边框比例关系、相邻的两个用户界面组件之间的间距基准参数等。
其中,属性信息可以包括进制转换值、规格参数、边框的属性值、与相邻的用户界面组件之间的间距、所显示的字的字号、字体、字到边框的间距等。
值得说明的是,在目标用户界面部署所述多个用户界面组件的步骤可包括:根据待展示目标用户界面的终端的尺寸和基准尺寸,部署多个用户界面组件。计算待展示目标用户界面的终端的尺寸与基准尺寸之间的比例,根据该比例,等比例缩放或扩大用户界面组件的边框的像素值以及用户界面组件所显示的字。比如,待展示目标用户界面的终端的尺寸与基准尺寸之间的比例为5,则扩大用户界面组件的边框的像素值以及用户界面组件所显示的字为属性信息中的边框的像素值以及字的大小的5倍。
在本发明一个实施例中,上述用户界面组件部署方法,可进一步包括:当接收到针对所述多个用户界面组件的修改事件时,根据所述属性联动关系和所述修改事件包括的任一用户界面组件的属性调变信息,调整每一个所述用户界面组件对应的属性信息;根据调整后的属性信息,重新部署所述多个用户界面组件。该对用户界面组件对应的属性信息进行修改,以调整用户界面组件,只需调整一个用户界面组件的属性信息即属性调变信息,即可实现对多个用户界面组件的属性信息的调整,从而实现重新部署所述多个用户界面组件。因此,本发明实施例提供的方案能够有效地提高重新部署多个用户界面组件的效率。
上述修改事件指示对多个用户界面组件中的任意一个目标用户界面组件的属性信息进行修改,相应地,该修改事件可包括该目标用户界面组件的属性信息即属性调变信息。
在本发明一个实施例中,所述属性联动关系,包括:进制转换值、规格参数、每两个所述用户界面组件之间的规格比例关系以及每一个所述用户界面组件中相邻两个边框之间的边框比例关系;相应地,
所述为每一个所述用户界面组件生成对应的属性信息的步骤包括:
利用所述进制转换值、所述规格参数、所述规格比例关系以及所述边框比例关系,计算每一个所述用户界面组件包括的每一条边框的像素值;
确定所述用户界面组件包括的每一条边框的像素值属于所述用户界面组件对应的属性信息。
其中,规格参数是指从多个用户界面组件中选取出任意一个用户界面组件作为基准用户界面组件,用户为该基准用户界面组件设置的规格,比如,该规格参数可以为:1,2,3,4等。该规格参数可以为预先设置好的多个待选规格参数中选择出一个作为规格参数。
基础比例是一个底层标准,这个规格参数就相当于区分不同级别控件大小的系数。比如,乘以1则为基础像素值大小,乘以2则为小型控件大小,乘以3则为中型控件大小,乘以4则为大型控件大小。
规格比例关系指示每两个用户界面组件之间的规格基础比例,比如:两个用户界面组件之间的规格比例可以为4:3,还可以为8:6,其中,4:3为规格基础比例,相应地,4和3为规格基础比例中的规格基础值。
边框比例关系指示每一个所述用户界面组件中相邻两个边框之间的边框基础比例,比如,相邻两个边框之间的边框比例为3:8或者12:32,则3:8为该边框基础比例。其中,3和8为边框基础比例中的边框基础值。
其中,计算每一个所述用户界面组件包括的每一条边框的像素值的具体实施方式可包括:
利用下述计算公式(1),计算每一个所述用户界面组件包括的每一条边框的像素值;
其中,表征第i个用户界面组件中第j类边框的像素值;/>表征第j类边框对应的边框基础比例中的边框基础值;K表征进制转换值;/>表征为多个用户界面组件中的基准用户界面组件设置的规格参数;/>表征根据每两个所述用户界面组件之间的规格比例关系确定出的第i个用户界面组件与基准用户界面组件之间的规格比例。
其中,根据每两个所述用户界面组件之间的规格比例关系确定出的第i个用户界面组件与基准用户界面组件之间的规格比例具体实现方式:
从每两个所述用户界面组件之间的规格比例关系,确定出第i个用户界面组件的规格基础值以及基准用户界面组件的规格基础值/>
利用第i个用户界面组件的规格基础值以及基准用户界面组件的规格基础值,确定第i个用户界面组件与基准用户界面组件之间的规格比例。比如,规格比例关系中包括第1个用户界面组件与基准用户界面组件之间的规格比例为4:3,第1个用户界面组件与第i个用户界面组件之间的规格比例为2:1,则第i个用户界面组件与基准用户界面组件之间的规格比例为2:3。
如图2所示,在用户界面上显示的三个用户界面组件(一级按钮、二级按钮以及三级按钮),通过上述S101构建出的三个用户界面组件之间的属性联动关系可包括:一级按钮规格与二级按钮规格的基础比例为4:3,二级按钮规格与三级按钮规格的基础比例为3:2(三个用户界面组件之间的属性联动关系还可以为一级按钮规格与二级按钮规格的基础比例为4:3,一级按钮规格与三级按钮规格的基础比例为2:1),进制转换值为4,以一级按钮作为基准按钮,相应地,规格参数即可为设置的一级按钮的规格参数比如4。每一个用户界面组件中相邻两个边框之间的边框比例为3:8,则根据上述计算公式(1)计算出:一级按钮的第1类边框的像素值为;一级按钮的第2类边框的像素值为;二级按钮的第1类边框的像素值为/>;二级按钮的第2类边框的像素值为/>;三级按钮的第1类边框的像素值为/>;二级按钮的第2类边框的像素值为/>。其中,pt表征像素值的单位。
其中,每一个用户界面组件中相邻两个边框之间的边框比例为3:8属于斐波那契数列,由于斐波那契数列是最近似黄金比例的数列,而黄金比例在美学中是最让人舒适的比例,因此,基于每一个用户界面组件中相邻两个边框之间的边框比例为3:8得到的用户界面组件使用户视觉感官更舒服,从而提高用户体验。引用斐波那契数列搭建比例,使用户界面组件的设计以科学为基础。
采用进制转换值作为进制,使界面中元素的尺寸灵活变动,另外,通过进制转换值为4可避免出现不适配等问题。而且能够提高用户界面组件的规范以及部署效率。
值得说明的是,本发明实施例所提及的用户界面组件为如图3所示的任意一种用户界面组件,该用户界面组件中相对的两个边框互相平行且类型相同,用户界面组件中相邻的两个边框相交且类型不同。
针对图3中的用户界面组件,边框对应的像素值是指与该边框相邻的两个相互平行的边框之间的最大间距。
比如,针对图3中第一类用户界面组件中,第1类边框对应的像素值是指两个平行的第2类边框之间的最大间距;第2类边框对应的像素值是指两个平行的第1类边框之间的最大间距;针对图3中第二类用户界面组件中,第3类边框对应的像素值是指两个平行的第4类边框之间的最大间距;第4类边框对应的像素值是指两个平行的第3类边框之间的最大间距,针对图3中第三类用户界面组件中,第5类边框对应的像素值是指两个平行的第6类边框之间的最大间距;第6类边框对应的像素值是指两个平行的第5类边框之间的最大间距等等。
值得说明的是,当边框具有弧度时,可通过人为方式为基准用户界面组件中的目标类边框设置该弧度,针对每一个与基准用户界面组件直接或间接相关的用户界面组件,为与目标类边框相同类的边框均以该弧度部署并展示,以符合用户视觉审美,同时进一步提高用户界面组件部署效率,提高用户体验。
在本发明一个实施例中,上述用户界面组件部署方法,进一步包括:为每一种类型的边框设置对应的第一像素阈值和第二像素阈值,其中,所述第一像素阈值大于所述第二像素阈值,且所述第二像素阈值大于零;相应地,
在所述计算每一个所述用户界面组件包括的每一条边框的像素值步骤之后,进一步包括:搜索属于同一类型的多条边框;将所述属于同一类型的多条边框的像素值分别与所述属于同一类型的多条边框对应的第一像素阈值和第二像素阈值进行对比;相应地,
针对所述属于同一类型的多条边框的像素值,执行:
将对比的结果中大于所述第一像素阈值的像素值调整为所述第一像素阈值;
将对比的结果中小于所述第二像素阈值的像素值调整为所述第二像素阈值。
比如,对于图2示出的第1类边框对应的第一像素阈值为128pt,第二像素阈值为64pt,比如,当存在图2以外的用户界面组件A中的第1类边框的像素值大于128pt,则将该用户界面组件A中的第1类边框的像素值调整为128pt,相应地,为了使每一个用户界面组件中相邻两个边框之间的边框比例为3:8,则该用户界面组件A中的第2类边框的像素值调整为48。又比如,当存在图2以外的用户界面组件B中的第1类边框的像素值小于64pt,则将该用户界面组件B中的第1类边框的像素值调整为64pt,相应地,为了使每一个用户界面组件中相邻两个边框之间的边框比例为3:8,则该用户界面组件B中的第2类边框的像素值调整为24。
通过上述过程可避免用户界面组件的尺寸过大而超出用户界面,也可避免用户界面组件的尺寸过小而导致的用户界面组件操作不方便。从而实现了灵活调变用户界面组件。
在本发明一个实施例中,每一个所述用户界面组件中相邻两个边框之间的边框比例关系满足:每一个所述用户界面组件中相邻两个边框之间的基础比例为3:8,且每一个所述用户界面组件中相邻两个边框的像素值之间差值为5的倍数。
在本发明一个实施例中,如图4所示,用户界面组件部署方法可进一步包括如下步骤:
401:为每一种规格参数设置对应的字属性;
402:根据每两个所述用户界面组件之间的规格比例关系和所述用户界面组件的属性信息包括的规格参数,确定所述用户界面组件对应的规格参数;
403:根据所述用户界面组件对应的规格参数,为所述用户界面组件部署所显示的字。
通过上述过程实现了对用户界面组件所显示的字部署,同时能够使用户界面组件所显示的字比较规范且合理,同时能够满足用户视觉需求。
其中,字属性可为字号、字体等。比如,为规格参数4设置对应的字属性为字号为17号、字体为宋体;为规格参数3设置对应的字属性为字号为14号、字体为宋体;为规格参数2设置对应的字属性为字号为11号、字体为宋体等。
另外,在本发明一个实施例中,还可为每一个用户界面组件设置对应的字个数限制,比如,设置最多字数为5个,最少字数为2个等。从而能够在用户界面组件内能够合理部署显示的字。
另外,在本发明一个实施例中,还可以固定用户界面组件中的字与边框之间的间距,则边框根据字数进行相应地调整,该过程与上述每一个用户界面组件中相邻两个边框之间的边框比例为3:8可以二选一的形式存在。
因此,本发明实施例以黄金比例为基准,结合4进制(进制转换值=4)以及实际场景建立的全新部署方式。可以节省设计师调整布局时间,同时也减少研发及修改代码的成本。
如图5所示,本发明实施例提供一种用户界面组件部署装置500,该用户界面组件部署装置500包括:构建单元501、处理单元502以及部署单元503,其中,
所述构建单元501,用于构建出多个用户界面组件之间的属性联动关系;
所述处理单元502,用于确定所述多个用户界面组件中用户界面组件的属性信息;根据获取到的所述用户界面组件的属性信息以及所述构建单元501构建出的所述属性联动关系,为每一个所述用户界面组件生成对应的属性信息;
所述部署单元503,用于根据所述处理单元502生成的每一个所述用户界面组件对应的属性信息,在目标用户界面部署所述多个用户界面组件。
在本发明一个实施例中,所述处理单元502,进一步用于当接收到针对所述多个用户界面组件的修改事件时,根据所述属性联动关系和所述修改事件包括的任一用户界面组件的属性调变信息,调整每一个所述用户界面组件对应的属性信息;
所述部署单元503,进一步用于根据所述处理单元502调整后的属性信息,重新部署所述多个用户界面组件。
在本发明一个实施例中,所述属性联动关系,包括:进制转换值、规格参数、每两个所述用户界面组件之间的规格比例关系以及每一个所述用户界面组件中相邻两个边框之间的边框比例关系;相应地,
所述处理单元502,进一步用于利用所述进制转换值、所述规格参数、所述规格比例关系以及所述边框比例关系,计算每一个所述用户界面组件包括的每一条边框的像素值;确定所述用户界面组件包括的每一条边框的像素值属于所述用户界面组件对应的属性信息。
在本发明一个实施例中,用户界面组件部署装置500进一步包括:设置单元(图中未示出),其中,
设置单元(图中未示出),用于为每一种类型的边框设置对应的第一像素阈值和第二像素阈值,其中,所述第一像素阈值大于所述第二像素阈值,且所述第二像素阈值大于零;
所述处理单元502,进一步用于搜索属于同一类型的多条边框;将所述属于同一类型的多条边框的像素值分别与所述属于同一类型的多条边框对应的第一像素阈值和第二像素阈值进行对比;针对所述属于同一类型的多条边框的像素值,执行:将对比的结果中大于所述第一像素阈值的像素值调整为所述第一像素阈值;将对比的结果中小于所述第二像素阈值的像素值调整为所述第二像素阈值。
在本发明一个实施例中,设置单元(图中未示出),进一步用于为每一种规格参数设置对应的字属性;
所述处理单元502,进一步用于根据每两个所述用户界面组件之间的规格比例关系和所述用户界面组件的属性信息包括的规格参数,确定所述用户界面组件对应的规格参数;
所述部署单元503,进一步用于根据所述用户界面组件对应的规格参数,为所述用户界面组件部署所显示的字。
在本发明一个实施例中,所述属性联动关系进一步包括:相邻的两个用户界面组件之间的间距基准参数;所述用户界面组件的属性信息进一步包括:所述用户界面组件与相邻的用户界面组件之间的间距;相应地,
所述部署单元503,进一步用于根据所述间距基准参数和所述用户界面组件与相邻的用户界面组件之间的间距,确定所述多个用户界面组件之间的相对位置;根据所述相对位置关系和目标用户界面的尺寸,确定所述多个用户界面组件在所述目标用户界面上的位置。
图6示出了可以应用本发明实施例的用户界面组件部署方法或用户界面组件部署装置的示例性系统架构600。
如图所示,系统架构600可以包括终端设备601、602、603,网络604和服务器605。网络604用以在终端设备601、602、603和服务器605之间提供通信链路的介质。网络604可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备601、602、603通过网络604与服务器605交互,以接收或发送消息等。终端设备601、602、603上可以安装有各种通讯客户端应用,例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。
终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备,包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器605可以是提供各种服务的服务器,例如对用户利用终端设备601、602、603所浏览的网站或客户端提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对所浏览的网站或客户端中的用户界面中的用户界面组件等信息进行分析等处理,并将处理结果(例如用户界面中的用户界面组件部署结果--仅为示例)反馈给终端设备。
需要说明的是,本发明实施例所提供的用户界面组件部署方法一般由服务器605执行,相应地,用户界面组件部署装置一般设置于服务器605中。
应该理解,图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
下面参考图7,其示出了适于用来实现本发明实施例的终端设备或服务器的计算机系统700的结构示意图。图7示出的终端设备或服务器仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图7所示,计算机系统700包括中央处理单元(CPU)701,其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中,还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。
以下部件连接至I/O接口705:包括键盘、鼠标等的输入部分706;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707;包括硬盘等的存储部分708;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器710上,以便于从其上读出的计算机程序根据需要被安装入存储部分708。
特别地,根据本发明公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本发明公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分709从网络上被下载和安装,和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时,执行本发明的系统中限定的上述功能。
需要说明的是,本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
附图中的流程图和框图,图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中,例如,可以描述为:一种处理器包括构建单元、处理单元以及部署单元。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定,例如,构建单元还可以被描述为“构建出多个用户界面组件之间的属性联动关系的单元”。
作为另一方面,本发明还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的设备中所包含的;也可以是单独存在,而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该设备执行时,使得该设备包括:构建出多个用户界面组件之间的属性联动关系;根据所述属性联动关系,为每一个所述用户界面组件生成对应的属性信息;根据每一个所述用户界面组件对应的属性信息,在目标用户界面部署所述多个用户界面组件。
根据本发明实施例的技术方案,通过多个用户界面组件之间的属性联动关系,即可为多个用户界面组件中的每一个用户界面组件生成对应的属性信息,而无须用户为每一用户界面组件设置对应的属性信息。由于每一个所述用户界面组件对应的属性信息是用户界面组件部署的基础,与现有的人工方式为每一用户界面组件设置对应的属性信息相比,本发明实施例提供的方案能够快速地为每一个所述用户界面组件生成对应的属性信息,因此,本发明实施例提供的方案能够有效地提高用户界面组件部署效率。
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。

Claims (7)

1.一种用户界面组件部署方法,其特征在于,包括:
构建出多个用户界面组件之间的属性联动关系;
根据所述属性联动关系,为每一个所述用户界面组件生成对应的属性信息;
根据每一个所述用户界面组件对应的属性信息,在目标用户界面部署所述多个用户界面组件;
所述属性联动关系,包括:进制转换值、规格参数、每两个所述用户界面组件之间的规格比例关系以及每一个所述用户界面组件中相邻两个边框之间的边框比例关系;
所述为每一个所述用户界面组件生成对应的属性信息的步骤包括:
利用所述进制转换值、所述规格参数、所述规格比例关系以及所述边框比例关系,计算每一个所述用户界面组件包括的每一条边框的像素值;
确定所述用户界面组件包括的每一条边框的像素值属于所述用户界面组件对应的属性信息;
所述方法进一步包括:为每一种规格参数设置对应的字属性;
根据每两个所述用户界面组件之间的规格比例关系和所述用户界面组件的属性信息包括的规格参数,确定所述用户界面组件对应的规格参数;
根据所述用户界面组件对应的规格参数,为所述用户界面组件部署所显示的字;所述进制转换值是指用户界面组件的边框像素值确定或更改的基础像素值;
所述规格参数是指从多个用户界面组件中选取出任意一个用户界面组件作为基准用户界面组件,用户为该基准用户界面组件设置的规格;
每一个所述用户界面组件中相邻两个边框之间的边框比例关系满足:每一个所述用户界面组件中相邻两个边框之间的基础比例为3:8,且每一个所述用户界面组件中相邻两个边框的像素值之间差值为5的倍数。
2.根据权利要求1所述用户界面组件部署方法,其特征在于,进一步包括:
当接收到针对所述多个用户界面组件的修改事件时,
根据所述属性联动关系和所述修改事件包括的任一用户界面组件的属性调变信息,调整每一个所述用户界面组件对应的属性信息;
根据调整后的属性信息,重新部署所述多个用户界面组件。
3.根据权利要求1所述用户界面组件部署方法,其特征在于,
进一步包括:为每一种类型的边框设置对应的第一像素阈值和第二像素阈值,其中,所述第一像素阈值大于所述第二像素阈值,且所述第二像素阈值大于零;
在所述计算每一个所述用户界面组件包括的每一条边框的像素值步骤之后,进一步包括:
搜索属于同一类型的多条边框;
将所述属于同一类型的多条边框的像素值分别与所述属于同一类型的多条边框对应的第一像素阈值和第二像素阈值进行对比;
针对所述属于同一类型的多条边框的像素值,执行:
将对比的结果中大于所述第一像素阈值的像素值调整为所述第一像素阈值;
将对比的结果中小于所述第二像素阈值的像素值调整为所述第二像素阈值。
4.根据权利要求1所述用户界面组件部署方法,其特征在于,
所述进制转换值为4;和/或,
所述规格参数为正整数。
5.一种用户界面组件部署装置,其特征在于,包括:构建单元、处理单元以及部署单元,其中,
所述构建单元,用于构建出多个用户界面组件之间的属性联动关系;
所述处理单元,用于确定所述多个用户界面组件中用户界面组件的属性信息;根据获取到的所述用户界面组件的属性信息以及所述构建单元构建出的所述属性联动关系,为每一个所述用户界面组件生成对应的属性信息;
所述部署单元,用于根据所述处理单元生成的每一个所述用户界面组件对应的属性信息,在目标用户界面部署所述多个用户界面组件;
所述属性联动关系,包括:进制转换值、规格参数、每两个所述用户界面组件之间的规格比例关系以及每一个所述用户界面组件中相邻两个边框之间的边框比例关系;
所述部署单元,进一步用于利用所述进制转换值、所述规格参数、所述规格比例关系以及所述边框比例关系,计算每一个所述用户界面组件包括的每一条边框的像素值;确定所述用户界面组件包括的每一条边框的像素值属于所述用户界面组件对应的属性信息;
所述用户界面组件部署装置进一步包括:设置单元,其中,
所述设置单元,用于为每一种规格参数设置对应的字属性;
所述处理单元,进一步用于根据每两个所述用户界面组件之间的规格比例关系和所述用户界面组件的属性信息包括的规格参数,确定所述用户界面组件对应的规格参数;
所述部署单元,进一步用于根据所述用户界面组件对应的规格参数,为所述用户界面组件部署所显示的字;
所述进制转换值是指用户界面组件的边框像素值确定或更改的基础像素值;
所述规格参数是指从多个用户界面组件中选取出任意一个用户界面组件作为基准用户界面组件,用户为该基准用户界面组件设置的规格;
每一个所述用户界面组件中相邻两个边框之间的边框比例关系满足:每一个所述用户界面组件中相邻两个边框之间的基础比例为3:8,且每一个所述用户界面组件中相邻两个边框的像素值之间差值为5的倍数。
6.一种用户界面组件部署电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-4中任一所述的方法。
7.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1-4中任一所述的方法。
CN202010162397.XA 2020-03-10 2020-03-10 用户界面组件部署方法和装置 Active CN113377380B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010162397.XA CN113377380B (zh) 2020-03-10 2020-03-10 用户界面组件部署方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010162397.XA CN113377380B (zh) 2020-03-10 2020-03-10 用户界面组件部署方法和装置

Publications (2)

Publication Number Publication Date
CN113377380A CN113377380A (zh) 2021-09-10
CN113377380B true CN113377380B (zh) 2023-09-22

Family

ID=77568783

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010162397.XA Active CN113377380B (zh) 2020-03-10 2020-03-10 用户界面组件部署方法和装置

Country Status (1)

Country Link
CN (1) CN113377380B (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102207870A (zh) * 2011-06-08 2011-10-05 广东威创视讯科技股份有限公司 多语言版本的界面自适应方法及系统
CN106155686A (zh) * 2016-06-30 2016-11-23 华为技术有限公司 界面生成方法、装置和系统
WO2016187338A1 (en) * 2015-05-21 2016-11-24 Axtc, Inc. Multi-component data object
CN108196764A (zh) * 2017-11-30 2018-06-22 银联商务股份有限公司 应用架构部署方法、装置、系统及云平台
CN109491729A (zh) * 2017-09-08 2019-03-19 深圳市中兴微电子技术有限公司 一种界面自动调整装置及方法
CN109739605A (zh) * 2018-12-29 2019-05-10 北京百度网讯科技有限公司 生成信息的方法和装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102207870A (zh) * 2011-06-08 2011-10-05 广东威创视讯科技股份有限公司 多语言版本的界面自适应方法及系统
WO2016187338A1 (en) * 2015-05-21 2016-11-24 Axtc, Inc. Multi-component data object
CN106155686A (zh) * 2016-06-30 2016-11-23 华为技术有限公司 界面生成方法、装置和系统
CN109491729A (zh) * 2017-09-08 2019-03-19 深圳市中兴微电子技术有限公司 一种界面自动调整装置及方法
CN108196764A (zh) * 2017-11-30 2018-06-22 银联商务股份有限公司 应用架构部署方法、装置、系统及云平台
CN109739605A (zh) * 2018-12-29 2019-05-10 北京百度网讯科技有限公司 生成信息的方法和装置

Also Published As

Publication number Publication date
CN113377380A (zh) 2021-09-10

Similar Documents

Publication Publication Date Title
US10339209B2 (en) Webpage display method and device
CN113808231B (zh) 信息处理方法及装置、图像渲染方法及装置、电子设备
CN112634406A (zh) 生成图片的方法、装置、电子设备、存储介质和程序产品
CN113626113B (zh) 一种页面渲染方法和装置
CN113377380B (zh) 用户界面组件部署方法和装置
CN113761411A (zh) 一种页面处理方法和装置
CN113282852A (zh) 编辑网页的方法和装置
CN112256254A (zh) 一种生成布局代码的方法和装置
CN107741970B (zh) 用于对主页面进行布局的方法和装置
CN112667368A (zh) 一种任务数据处理方法和装置
CN110851522A (zh) 展示数据的方法和装置
CN111222302A (zh) 网页渲染的控制方法、控制装置以及计算机可读介质
CN111461969B (zh) 用于处理图片的方法、装置、电子设备和计算机可读介质
CN112882775A (zh) 页面模板自适应调整的方法和装置
CN110888583B (zh) 页面显示方法、系统、装置和电子设备
CN112632384A (zh) 针对应用程序的数据处理方法、装置、电子设备和介质
CN112966201A (zh) 对象处理方法、装置、电子设备以及存储介质
CN112861504A (zh) 文本交互方法、装置、设备、存储介质及程序产品
CN111695059A (zh) 一种信息视图列表处理方法、装置和显示设备
CN113032620B (zh) 针对音频数据的数据处理方法、装置、电子设备和介质
CN113743061B (zh) 数值范围调整方法、装置、电子设备和可读存储介质
CN116306496B (zh) 字符生成方法、字符生成模型的训练方法和装置
CN115209232B (zh) 一种视频处理方法、装置、电子设备及存储介质
CN112507671B (zh) 用于调整文本间距的方法、装置、以及可读介质
CN113760269A (zh) 配置方法和装置以及组件渲染方法、装置和系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant