CN110162367B - 用户界面自适应配置的方法、系统、设备和介质 - Google Patents

用户界面自适应配置的方法、系统、设备和介质 Download PDF

Info

Publication number
CN110162367B
CN110162367B CN201910392292.0A CN201910392292A CN110162367B CN 110162367 B CN110162367 B CN 110162367B CN 201910392292 A CN201910392292 A CN 201910392292A CN 110162367 B CN110162367 B CN 110162367B
Authority
CN
China
Prior art keywords
user interface
panel
regions
interface components
generate
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
CN201910392292.0A
Other languages
English (en)
Other versions
CN110162367A (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.)
Shanghai Lilith Technology Corp
Original Assignee
Shanghai Lilith Technology Corp
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 Shanghai Lilith Technology Corp filed Critical Shanghai Lilith Technology Corp
Priority to CN201910392292.0A priority Critical patent/CN110162367B/zh
Publication of CN110162367A publication Critical patent/CN110162367A/zh
Priority to PCT/CN2019/107840 priority patent/WO2020228221A1/zh
Priority to EP19929130.3A priority patent/EP3968153B1/en
Priority to US17/609,680 priority patent/US11748121B2/en
Priority to BR112021022192A priority patent/BR112021022192A2/pt
Application granted granted Critical
Publication of CN110162367B publication Critical patent/CN110162367B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/147—Digital output to display device ; Cooperation and interconnection of the display device with other functional units using display panels
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/36—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of a graphic pattern, e.g. using an all-points-addressable [APA] memory
    • G09G5/37—Details of the operation on graphic patterns
    • G09G5/373—Details of the operation on graphic patterns for modifying the size of the graphic pattern
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/36—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of a graphic pattern, e.g. using an all-points-addressable [APA] memory
    • G09G5/38—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of a graphic pattern, e.g. using an all-points-addressable [APA] memory with means for controlling the display position
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Computer Hardware Design (AREA)
  • User Interface Of Digital Computer (AREA)
  • Input From Keyboards Or The Like (AREA)

Abstract

本发明涉及用户界面显示技术领域，特别涉及用户界面自适应配置的方法、系统、设备和介质。本发明的方法包括：分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应；对多个区域以及一个或多个用户界面组件进行拉伸操作，并且对多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；分别将一个或多个适配用户界面组件放置到适配面板的对应区域，以生成适配用户界面。本发明简化了用户界面的设计步骤，可操作性强，实现用户界面自适应配置。

Description

用户界面自适应配置的方法、系统、设备和介质
技术领域
本发明涉及用户界面显示技术领域，特别涉及用户界面自适应配置的方法、系统、设备和介质。
背景技术
在设计用户界面时，由于多个使用者的多个设备通常具有不同的分辨率，因此用户界面设计者需要考虑各种可能性，使得用户界面适配于多个使用者的多个设备，这将耗费较大的人力成本。
现有的解决方案通常先设定可用区域，再在该可用区域中为不同的分辨率设计不同的用户界面逻辑。在现有的用户界面配置的过程中，需要考虑各种边界问题，从而导致用户界面的设计步骤繁琐，可操作性差，不能实现用户界面自适应配置。
发明内容
本发明的目的在于提供用户界面自适应配置的方法、系统、设备和介质，简化了用户界面的设计步骤，可操作性强，实现用户界面自适应配置。
本发明公开了一种用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：
分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。
可选地，所述面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。
可选地，分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应包括，根据每个用户界面组件的中心点，将所述每个用户界面组件与所述中心点所在的区域相对应。
可选地，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件包括，
获取所述面板的面板高度和面板宽度；
获取所述用户设备的屏幕高度和屏幕宽度；
计算拉伸比例，所述拉伸比例为所述屏幕高度和所述面板高度的比值、以及所述屏幕宽度和所述面板宽度的比值中的较小值；
根据所述拉伸比例，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作；
如果所述屏幕高度和所述面板高度的比值小于所述屏幕宽度和所述面板宽度的比值，则将最左列区域向左移动至所述用户设备的屏幕边缘，并且将最右列区域向右移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件；
如果所述屏幕高度和所述面板高度的比值大于所述屏幕宽度和所述面板宽度的比值，则将第一行区域向上移动至所述用户设备的屏幕边缘，并且将最末行区域向下移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件。
可选地，分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面包括，
在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系；
根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。
本发明公开了一种用户界面自适应配置的系统，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述系统包括：
组件对应模块，用于分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
拉伸移动模块，用于对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
界面生成模块，用于分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。
可选地，所述面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。
可选地，所述组件对应模块用于根据每个用户界面组件的中心点，将所述每个用户界面组件与所述中心点所在的区域相对应。
可选地，所述拉伸移动模块用于获取所述面板的面板高度和面板宽度；获取所述用户设备的屏幕高度和屏幕宽度；计算拉伸比例，所述拉伸比例为所述屏幕高度和所述面板高度的比值、以及所述屏幕宽度和所述面板宽度的比值中的较小值；根据所述拉伸比例，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作；如果所述屏幕高度和所述面板高度的比值小于所述屏幕宽度和所述面板宽度的比值，则将最左列区域向左移动至所述用户设备的屏幕边缘，并且将最右列区域向右移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件；如果所述屏幕高度和所述面板高度的比值大于所述屏幕宽度和所述面板宽度的比值，则将第一行区域向上移动至所述用户设备的屏幕边缘，并且将最末行区域向下移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件。
可选地，所述组件对应模块用于在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系；所述界面生成模块用于根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。
本发明公开了一种用户界面自适应配置的设备，所述设备包括存储有计算机可执行指令的存储器和处理器，所述处理器被配置为执行所述指令以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：
分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。
本发明公开了一种使用计算机程序编码的计算机存储介质，所述计算机程序包括指令，所述指令被一个以上的计算机执行以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：
分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。
本发明实施方式与现有技术相比，主要区别及其效果在于：
本发明通过组件对应步骤、拉伸移动步骤以及界面生成步骤，使得用户界面设计者可以在统一分辨率的面板上进行用户界面组件的添加和修改，以生成基础用户界面，简化了用户界面的设计步骤，同时不必考虑过多的边界问题，可操作性强，能够根据用户设备实现用户界面自适应配置。
附图说明
图1A-1H示出用户界面自适应配置的示意图；
图2示出用户界面自适应配置的方法的流程示意图；
图3示出用户界面自适应配置的系统的结构示意图。
具体实施方式
在以下的叙述中，为了使读者更好地理解本申请而提出了许多技术细节。但是，本领域的普通技术人员可以理解，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请各权利要求所要求保护的技术方案。
为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明的实施方式作进一步地详细描述。
在设计用户界面时，用户界面设计者可以在统一分辨率的面板上进行用户界面组件的添加和修改，以生成基础用户界面(以下被称为用户界面)。
图1A-1H示出用户界面自适应配置的示意图。如图1A所示，用户界面100为确认框，其包括面板101，以及被放置在面板101上的三个用户界面组件102,103,104。
可选地，用户界面100可以包括每个用户界面组件102,103,104的ID、类别、颜色、大小、内容和位置等信息。例如，每个用户界面组件102,103,104的信息被记录在表格中：
ID 用户界面组件类别 颜色 大小 内容 位置
1 按钮 红 30*10 取消 30,30
2 按钮 蓝 30*10 确认 70,30
3 文本 黑 50*10 是否确认？ 50,70
本发明的第一实施方式涉及一种用户界面自适应配置的方法。图2示出用户界面自适应配置的方法的流程示意图。
如图2所示，方法200包括：
步骤202，分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应。
可选地，面板具有以N乘M排列的N×M个区域，其中N和M都是正整数，并且N和M可以相同或不同。
可选地，面板具有以三乘三排列的九个区域。通过这样的划分，可以将面板划分为最左列区域、中间列区域和最右列区域以及第一行区域、中间行区域和最末行区域，从而在下面的步骤中可以方便对最左列区域和最右列区域或者第一行区域和最末行区域进行移动操作，同时可以保持中间列区域或者中间行区域的位置不变。
可选地，多个区域的大小可以相同或不同。
可选地，多个区域可以是规则形状或不规则形状。
如图1B所示，面板101具有以三乘三排列的九个区域，其中九个区域分别具有编号1-9。
可选地，根据每个用户界面组件的中心点，将每个用户界面组件与中心点所在的区域相对应。如果一个用户界面组件的中心点在多个区域的共同边界上，则可以设定组件对应规则或者根据用户的指令，将该用户界面组件与面板的多个区域中的一个区域相对应。
可选地，根据每个用户界面组件的定位点，将每个用户界面组件与定位点所在的区域相对应，其中定位点是用户界面组件的任意一个点。
可选地，根据用户的指令，分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应，其中一个区域是多个区域中的任意一个区域，从而可以更高级地自定义用户界面。
如图1C所示，根据用户界面组件102的中心点，将用户界面组件102与中心点所在的区域7相对应；根据用户界面组件103的中心点，将用户界面组件103与中心点所在的区域9相对应；根据用户界面组件104的中心点，将用户界面组件104与中心点所在的区域2相对应。
通过步骤202，面板可以具有多个区域，从而在下面的步骤中可以选择全部或部分区域进行拉伸操作和移动操作。与将面板作为整体进行适配操作相比，本申请可以对面板的中央区域和边缘区域进行不同的适配操作。另外，可以分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应，从而在下面的步骤中可以分别将一个或多个适配用户界面组件放置到适配面板的对应区域，以生成适配用户界面，其中适配用户界面中的一个或多个适配用户界面组件与用户界面中的一个或多个用户界面组件可以被放置在相同的对应区域。
步骤204，对多个区域以及一个或多个用户界面组件进行拉伸操作，并且对多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件。
可选地，获取面板的面板高度和面板宽度；获取用户设备的屏幕高度和屏幕宽度；计算拉伸比例，拉伸比例为屏幕高度和面板高度的比值、以及屏幕宽度和面板宽度的比值中的较小值；根据拉伸比例，对多个区域以及一个或多个用户界面组件进行拉伸操作；如果屏幕高度和面板高度的比值小于屏幕宽度和面板宽度的比值，则将最左列区域向左移动至用户设备的屏幕边缘，并且将最右列区域向右移动至用户设备的屏幕边缘，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；如果屏幕高度和面板高度的比值大于屏幕宽度和面板宽度的比值，则将第一行区域向上移动至用户设备的屏幕边缘，并且将最末行区域向下移动至用户设备的屏幕边缘，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件。
可选地，如果屏幕高度和面板高度的比值等于屏幕宽度和面板宽度的比值，则不对多个区域进行移动操作。
如图1D所示，获取面板101的面板高度H面板和面板宽度W面板；获取用户设备的屏幕111的屏幕高度H屏幕和屏幕宽度W屏幕；计算拉伸比例，拉伸比例为屏幕高度H屏幕和面板高度H面板的比值、以及屏幕宽度W屏幕和面板宽度W面板的比值中的较小值；根据拉伸比例，对九个区域1-9进行拉伸操作。
另外，图1D中未被示出，根据拉伸比例，对三个用户界面组件102,103,104进行拉伸操作，以生成三个适配用户界面组件102’,103’,104’。
如图1E所示，如果屏幕高度H屏幕和面板高度H面板的比值小于屏幕宽度W屏幕和面板宽度W面板的比值，则将最左列区域1,4,7向左移动至用户设备的屏幕111的边缘，并且将最右列区3,6,9域向右移动至用户设备的屏幕111的边缘，以生成适配面板101’。
如图1F所示，如果屏幕高度H屏幕和面板高度H面板的比值大于屏幕宽度W屏幕和面板宽度W面板的比值，则将第一行区域1,2,3向上移动至用户设备的屏幕111的边缘，并且将最末行区域7,8,9向下移动至用户设备的屏幕111的边缘，以生成适配面板101’。
通过步骤204，可以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件。与现有的用户界面配置相比，本申请只需要计算屏幕高度H屏幕和面板高度H面板的比值以及屏幕宽度W屏幕和面板宽度W面板的比值，并且只需要拉伸操作和移动操作，不必考虑过多的边界问题，可操作性强，能够根据用户设备实现用户界面自适应配置。
步骤206，分别将一个或多个适配用户界面组件放置到适配面板的对应区域，以生成适配用户界面。
可选地，在分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系；根据位置关系，将每个适配用户界面组件的中心点放置到适配面板的对应区域，以生成适配用户界面。
可选地，中心点与对应区域的位置关系，可以指中心点在对应区域中的百分比坐标。例如，百分比坐标为：中心点(50％W对应区域,10％H对应区域)，即以对应区域的左下角的点为原点，向右移动50％W对应区域，再向上移动10％H对应区域，即得到该中心点，其中W对应区域是对应区域的宽度，H对应区域是对应区域的高度。在对多个区域以及一个或多个用户界面组件进行拉伸操作之后，百分比坐标能够保持不变。
可选地，在分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应时，确定每个用户界面组件的定位点与对应区域的位置关系；根据位置关系，将每个适配用户界面组件的定位点放置到适配面板的对应区域，以生成适配用户界面。类似于上面所讨论的中心点与对应区域的位置关系，可以确定定位点与对应区域的位置关系。
可选地，在根据用户的指令，分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应的情况下，可以确定每个用户界面组件的中心点或者定位点与对应区域的位置关系；根据位置关系，将每个适配用户界面组件的中心点或者定位点放置到适配面板的对应区域，以生成适配用户界面。
可选地，根据用户的指令，分别将一个或多个适配用户界面组件放置到适配面板的一个区域，以生成适配用户界面，其中一个区域是多个区域中的任意一个区域，从而可以更高级地自定义适配用户界面。
如图1G和图1H所示，将适配用户界面组件102’放置到适配面板101’的对应区域7，将适配用户界面组件103’放置到适配面板101’的对应区域9，将适配用户界面组件104’放置到适配面板101’的对应区域2，以生成适配用户界面100’。
可选地，适配用户界面100’可以包括每个用户界面组件102’,103’,104’的ID、类别、颜色、大小、内容和位置等信息。
通过步骤206，可以生成适配用户界面，其中适配用户界面中的一个或多个适配用户界面组件与用户界面中的一个或多个用户界面组件可以被放置在相同的对应区域，并且进一步地，适配用户界面中的一个或多个适配用户界面组件与用户界面中的一个或多个用户界面组件可以被放置在相同的对应区域中的相同的位置。
本发明的第二实施方式涉及一种用户界面自适应配置的系统。图3示出用户界面自适应配置的系统的结构示意图。
如图3所示，系统300包括：
组件对应模块302，用于分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应；
拉伸移动模块304，用于对多个区域以及一个或多个用户界面组件进行拉伸操作，并且对多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
界面生成模块306，用于分别将一个或多个适配用户界面组件放置到适配面板的对应区域，以生成适配用户界面。
可选地，面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。
可选地，组件对应模块302用于根据每个用户界面组件的中心点，将每个用户界面组件与中心点所在的区域相对应。
可选地，拉伸移动模块304用于获取面板的面板高度和面板宽度；获取用户设备的屏幕高度和屏幕宽度；计算拉伸比例，拉伸比例为屏幕高度和面板高度的比值、以及屏幕宽度和面板宽度的比值中的较小值；根据拉伸比例，对多个区域以及一个或多个用户界面组件进行拉伸操作；如果屏幕高度和面板高度的比值小于屏幕宽度和面板宽度的比值，则将最左列区域向左移动至用户设备的屏幕边缘，并且将最右列区域向右移动至用户设备的屏幕边缘，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；如果屏幕高度和面板高度的比值大于屏幕宽度和面板宽度的比值，则将第一行区域向上移动至用户设备的屏幕边缘，并且将最末行区域向下移动至用户设备的屏幕边缘，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件。
可选地，组件对应模块302用于在分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系；界面生成模块306用于根据位置关系，将每个适配用户界面组件的中心点放置到适配面板的对应区域，以生成适配用户界面。
第一实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。
本发明的第三实施方式涉及一种用户界面自适应配置的设备，设备包括存储有计算机可执行指令的存储器和处理器，处理器被配置为执行指令以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在面板上的一个或多个用户界面组件，方法包括：
分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应；
对多个区域以及一个或多个用户界面组件进行拉伸操作，并且对多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将一个或多个适配用户界面组件放置到适配面板的对应区域，以生成适配用户界面。
第一实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。
本发明的第四实施方式涉及一种使用计算机程序编码的计算机存储介质，计算机程序包括指令，指令被一个以上的计算机执行以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在面板上的一个或多个用户界面组件，方法包括：
分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应；
对多个区域以及一个或多个用户界面组件进行拉伸操作，并且对多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将一个或多个适配用户界面组件放置到适配面板的对应区域，以生成适配用户界面。
第一实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。
需要说明的是，本发明的各方法实施方式均可以以软件、硬件、固件等方式实现。不管本发明是以软件、硬件、还是固件方式实现，指令代码都可以存储在任何类型的计算机可访问的存储器中(例如永久的或者可修改的，易失性的或者非易失性的，固态的或者非固态的，固定的或者可更换的介质等等)。同样，存储器可以例如是可编程阵列逻辑(Programmable Array Logic，简称“PAL”)、随机存取存储器(Random Access Memory，简称“RAM”)、可编程只读存储器(Programmable Read Only Memory，简称“PROM”)、只读存储器(Read-Only Memory，简称“ROM”)、电可擦除可编程只读存储器(Electrically ErasableProgrammable ROM，简称“EEPROM”)、磁盘、光盘、数字通用光盘(Digital Versatile Disc，简称“DVD”)等等。
需要说明的是，本发明各设备实施方式中提到的各单元/模块都是逻辑单元/模块，在物理上，一个逻辑单元可以是一个物理单元，也可以是一个物理单元的一部分，还可以以多个物理单元的组合实现，这些逻辑单元本身的物理实现方式并不是最重要的，这些逻辑单元所实现的功能的组合才是解决本发明所提出的技术问题的关键。此外，为了突出本发明的创新部分，本发明上述各设备实施方式并没有将与解决本发明所提出的技术问题关系不太密切的单元引入，这并不表明上述设备实施方式并不存在其它的单元。
需要说明的是，在本专利的权利要求和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
虽然通过参照本发明的某些优选实施方式，已经对本发明进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本发明的精神和范围。

Claims (9)

1.一种用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，其特征在于，所述方法包括：
分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面，
其中，分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面包括，
在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系，其中，每个用户界面组件的中心点与对应区域的位置关系包括中心点在对应区域中的百分比坐标；
根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。
2.根据权利要求1所述的方法，其特征在于，所述面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。
3.根据权利要求1所述的方法，其特征在于，分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应包括，根据每个用户界面组件的中心点，将所述每个用户界面组件与所述中心点所在的区域相对应。
4.根据权利要求1所述的方法，其特征在于，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件包括，
获取所述面板的面板高度和面板宽度；
获取所述用户设备的屏幕高度和屏幕宽度；
计算拉伸比例，所述拉伸比例为所述屏幕高度和所述面板高度的比值、以及所述屏幕宽度和所述面板宽度的比值中的较小值；
根据所述拉伸比例，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作；
如果所述屏幕高度和所述面板高度的比值小于所述屏幕宽度和所述面板宽度的比值，则将最左列区域向左移动至所述用户设备的屏幕边缘，并且将最右列区域向右移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件；
如果所述屏幕高度和所述面板高度的比值大于所述屏幕宽度和所述面板宽度的比值，则将第一行区域向上移动至所述用户设备的屏幕边缘，并且将最末行区域向下移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件。
5.一种用户界面自适应配置的系统，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，其特征在于，所述系统包括：
组件对应模块，用于分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
拉伸移动模块，用于对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
界面生成模块，用于分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面，
其中，分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面包括，
在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系，其中，每个用户界面组件的中心点与对应区域的位置关系包括中心点在对应区域中的百分比坐标；
根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。
6.根据权利要求5所述的系统，其特征在于，所述面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。
7.根据权利要求5所述的系统，其特征在于，所述拉伸移动模块用于获取所述面板的面板高度和面板宽度；获取所述用户设备的屏幕高度和屏幕宽度；计算拉伸比例，所述拉伸比例为所述屏幕高度和所述面板高度的比值、以及所述屏幕宽度和所述面板宽度的比值中的较小值；根据所述拉伸比例，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作；如果所述屏幕高度和所述面板高度的比值小于所述屏幕宽度和所述面板宽度的比值，则将最左列区域向左移动至所述用户设备的屏幕边缘，并且将最右列区域向右移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件；如果所述屏幕高度和所述面板高度的比值大于所述屏幕宽度和所述面板宽度的比值，则将第一行区域向上移动至所述用户设备的屏幕边缘，并且将最末行区域向下移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件。
8.一种用户界面自适应配置的设备，其特征在于，所述设备包括存储有计算机可执行指令的存储器和处理器，所述处理器被配置为执行所述指令以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：
分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面，
其中，分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面包括，
在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系，其中，每个用户界面组件的中心点与对应区域的位置关系包括中心点在对应区域中的百分比坐标；
根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。
9.一种使用计算机程序编码的计算机存储介质，其特征在于，所述计算机程序包括指令，所述指令被一个以上的计算机执行以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：
分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；
对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；
分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面，
其中，分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面包括，
在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系，其中，每个用户界面组件的中心点与对应区域的位置关系包括中心点在对应区域中的百分比坐标；
根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。
CN201910392292.0A 2019-05-10 2019-05-10 用户界面自适应配置的方法、系统、设备和介质 Active CN110162367B (zh)

Priority Applications (5)

Application Number Priority Date Filing Date Title
CN201910392292.0A CN110162367B (zh) 2019-05-10 2019-05-10 用户界面自适应配置的方法、系统、设备和介质
PCT/CN2019/107840 WO2020228221A1 (zh) 2019-05-10 2019-09-25 用户界面自适应配置的方法、系统、设备和介质
EP19929130.3A EP3968153B1 (en) 2019-05-10 2019-09-25 Adaptive user-interface configuration method, system, and device, and medium
US17/609,680 US11748121B2 (en) 2019-05-10 2019-09-25 Method, system, device and medium for adaptive configuration of a user interface employing stretching and moving
BR112021022192A BR112021022192A2 (pt) 2019-05-10 2019-09-25 Método, sistema, dispositivo e meio para configuração adaptativa de uma interface de usuário

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910392292.0A CN110162367B (zh) 2019-05-10 2019-05-10 用户界面自适应配置的方法、系统、设备和介质

Publications (2)

Publication Number Publication Date
CN110162367A CN110162367A (zh) 2019-08-23
CN110162367B true CN110162367B (zh) 2020-11-24

Family

ID=67634441

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910392292.0A Active CN110162367B (zh) 2019-05-10 2019-05-10 用户界面自适应配置的方法、系统、设备和介质

Country Status (5)

Country Link
US (1) US11748121B2 (zh)
EP (1) EP3968153B1 (zh)
CN (1) CN110162367B (zh)
BR (1) BR112021022192A2 (zh)
WO (1) WO2020228221A1 (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102103456A (zh) * 2009-12-18 2011-06-22 联想(北京)有限公司 一种展现窗口中的元素的方法及装置
CN103970436A (zh) * 2013-01-25 2014-08-06 人人游戏网络科技发展（上海）有限公司 在电子设备的屏幕上进行显示的方法和装置
CN107515751A (zh) * 2017-08-18 2017-12-26 无锡江南影视传播有限公司 一种ui布局自适应方法及装置
CN109343925A (zh) * 2018-09-25 2019-02-15 珠海格力电器股份有限公司 用户界面自适应调整方法和装置、工控显示终端

Family Cites Families (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7895522B2 (en) * 2001-09-28 2011-02-22 Ntt Docomo, Inc. Layout of platform specific graphical user interface widgets migrated between heterogeneous device platforms
US7173666B1 (en) * 2002-08-22 2007-02-06 Smal Camera Technologies System and method for displaying a non-standard aspect ratio image on a standard aspect ratio monitor
US20040056894A1 (en) * 2002-09-19 2004-03-25 Igor Zaika System and method for describing and instantiating extensible user interfaces
US20060107201A1 (en) * 2002-11-08 2006-05-18 Hon Hai Precision Ind. Co., Ltd. System and method for displaying patent classification information
US20050237321A1 (en) * 2004-03-31 2005-10-27 Young Kenneth L Grid canvas
US20060117253A1 (en) * 2004-12-01 2006-06-01 Peter Polash Methods for altering the display of table data suitably for visualization within visible display widths
US8933971B2 (en) * 2011-09-12 2015-01-13 Microsoft Corporation Scale factors for visual presentations
US8924926B1 (en) 2013-03-15 2014-12-30 Google Inc. Techniques for disambiguating unconnected components in a visual programming interface
US9530187B2 (en) * 2013-06-13 2016-12-27 Apple Inc. Controlling element layout on a display
CN104182270A (zh) 2014-08-25 2014-12-03 北京云巢动脉科技有限公司 虚拟机界面适应不同分辨率移动终端屏幕的显示方法
CN105760146A (zh) * 2014-12-16 2016-07-13 上海天脉聚源文化传媒有限公司 一种用户界面布局方法及系统
US11048484B2 (en) * 2015-10-09 2021-06-29 Oracle International Corporation Automated responsive grid-based layout design system
US10496727B1 (en) * 2016-08-10 2019-12-03 Vinyl Development LLC Weighted panels and panel group for responsive design system
CN107391467A (zh) * 2017-06-08 2017-11-24 北京小度信息科技有限公司 报表组件布局信息处理方法及装置
CN107273000B (zh) 2017-06-14 2020-04-14 电子科技大学 一种智能示波器的屏幕多分辨率适配方法
US10318629B2 (en) * 2017-11-01 2019-06-11 Microsoft Technology Licensing, Llc Adaptive content rendering for optimizing page layout
CN108363604A (zh) 2018-02-06 2018-08-03 四川虹美智能科技有限公司 一种分辨率适配方法、装置及业务系统
CN109254813A (zh) 2018-08-20 2019-01-22 中国平安人寿保险股份有限公司 屏幕适配方法、装置、计算机设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102103456A (zh) * 2009-12-18 2011-06-22 联想(北京)有限公司 一种展现窗口中的元素的方法及装置
CN103970436A (zh) * 2013-01-25 2014-08-06 人人游戏网络科技发展（上海）有限公司 在电子设备的屏幕上进行显示的方法和装置
CN107515751A (zh) * 2017-08-18 2017-12-26 无锡江南影视传播有限公司 一种ui布局自适应方法及装置
CN109343925A (zh) * 2018-09-25 2019-02-15 珠海格力电器股份有限公司 用户界面自适应调整方法和装置、工控显示终端

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
《H5游戏开发：横屏适配》;Tingglelaoo;《H5游戏开发：横屏适配》;20171215;第7页第5段-第8页第4段、第13页第1-6段；第8页Contain 模式下的缩放比例推导图 *

Also Published As

Publication number Publication date
US20220214893A1 (en) 2022-07-07
CN110162367A (zh) 2019-08-23
EP3968153A1 (en) 2022-03-16
WO2020228221A1 (zh) 2020-11-19
EP3968153A4 (en) 2023-01-18
BR112021022192A2 (pt) 2021-12-28
US11748121B2 (en) 2023-09-05
EP3968153B1 (en) 2024-03-06

Similar Documents

Publication Publication Date Title
RU2656685C1 (ru) Способ формирования пароля и устройство для его осуществления
CN103634650B (zh) 一种基于智能电视平台的图片处理方法及系统
CN105739935A (zh) 一种多终端联合显示方法、装置及系统
WO2016197470A1 (zh) 应用程序解锁界面背景图片的设置方法、装置及电子设备
US20180232888A1 (en) Removal of background information from digital images
US8984424B2 (en) Layout of user interface elements
CN109410295B (zh) 颜色设置方法、装置、设备及计算机可读存储介质
CN111192190A (zh) 消除图像水印的方法、装置及电子设备
US20220172193A1 (en) Method and apparatus for displaying identification code of application
CN110162367B (zh) 用户界面自适应配置的方法、系统、设备和介质
CN104571904A (zh) 一种信息处理方法及电子设备
CN110531881B (zh) 鼠标调用osd菜单的集中式kvm系统
US8085279B2 (en) Drawing an image with transparent regions on top of another image without using an alpha channel
CN109407955B (zh) 用户界面交互方法、计算机装置、计算机可读存储介质
US20110221775A1 (en) Method for transforming displaying images
CN109683798B (zh) 一种文本确定方法、终端及计算机可读存储介质
CN111698491A (zh) 一种多投影图像显示方法、装置及电子设备和存储介质
CN105930090A (zh) 一种基于移动终端的触摸屏坐标数据传输方法及系统
KR100746000B1 (ko) 크로스워드 게임을 자동으로 생성하는 방법 및 장치
RU2790027C1 (ru) Способ, система и устройство для адаптивного конфигурирования пользовательского интерфейса и носитель информации
US20150277676A1 (en) Creating an interaction area for listing user-selectable items
CN104571889A (zh) 图像切换方法及装置
US20170115877A1 (en) Electronic device and method for correcting character
KR100784692B1 (ko) 그래픽 유저 인터페이스의 이미지 처리방법
CN109447210B (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