CN110554816B - 一种界面生成方法及设备 - Google Patents

一种界面生成方法及设备 Download PDF

Info

Publication number
CN110554816B
CN110554816B CN201910678586.XA CN201910678586A CN110554816B CN 110554816 B CN110554816 B CN 110554816B CN 201910678586 A CN201910678586 A CN 201910678586A CN 110554816 B CN110554816 B CN 110554816B
Authority
CN
China
Prior art keywords
interface
visual
generated
visual element
application
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
CN201910678586.XA
Other languages
English (en)
Other versions
CN110554816A (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.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies 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 Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN201910678586.XA priority Critical patent/CN110554816B/zh
Publication of CN110554816A publication Critical patent/CN110554816A/zh
Priority to PCT/CN2020/103840 priority patent/WO2021013226A1/zh
Priority to EP20843213.8A priority patent/EP3982238A4/en
Priority to US17/629,216 priority patent/US11947781B2/en
Application granted granted Critical
Publication of CN110554816B publication Critical patent/CN110554816B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • 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/011—Arrangements for interaction with the human body, e.g. for user immersion in virtual reality
    • G06F3/013—Eye tracking input arrangements
    • 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
    • G06F3/033—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor
    • G06F3/0346—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor with detection of the device orientation or free movement in a 3D space, e.g. 3D mice, 6-DOF [six degrees of freedom] pointers using gyroscopes, accelerometers or tilt-sensors
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
    • G06F1/16—Constructional details or arrangements
    • G06F1/1613—Constructional details or arrangements for portable computers
    • G06F1/1615—Constructional details or arrangements for portable computers with several enclosures having relative motions, each enclosure supporting at least one I/O or computing function
    • G06F1/1616—Constructional details or arrangements for portable computers with several enclosures having relative motions, each enclosure supporting at least one I/O or computing function with folding flat displays, e.g. laptop computers or notebooks having a clamshell configuration, with body parts pivoting to an open position around an axis parallel to the plane they define in closed position
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
    • G06F1/16—Constructional details or arrangements
    • G06F1/1613—Constructional details or arrangements for portable computers
    • G06F1/1626—Constructional details or arrangements for portable computers with a single-body enclosure integrating a flat display, e.g. Personal Digital Assistants [PDAs]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
    • G06F1/16—Constructional details or arrangements
    • G06F1/1613—Constructional details or arrangements for portable computers
    • G06F1/163—Wearable computers, e.g. on a belt
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
    • G06F1/16—Constructional details or arrangements
    • G06F1/1613—Constructional details or arrangements for portable computers
    • G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
    • G06F1/1637—Details related to the display arrangement, including those related to the mounting of the display in the housing
    • G06F1/1641—Details related to the display arrangement, including those related to the mounting of the display in the housing the display being formed by a plurality of foldable display components
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
    • G06F1/16—Constructional details or arrangements
    • G06F1/1613—Constructional details or arrangements for portable computers
    • G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
    • G06F1/1637—Details related to the display arrangement, including those related to the mounting of the display in the housing
    • G06F1/1652—Details related to the display arrangement, including those related to the mounting of the display in the housing the display being flexible, e.g. mimicking a sheet of paper, or rollable
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
    • G06F1/16—Constructional details or arrangements
    • G06F1/1613—Constructional details or arrangements for portable computers
    • G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
    • G06F1/1675—Miscellaneous details related to the relative movement between the different enclosures or enclosure parts
    • G06F1/1677—Miscellaneous details related to the relative movement between the different enclosures or enclosure parts for detecting open or closed state or particular intermediate positions assumed by movable parts of the enclosure, e.g. detection of display lid position with respect to main body in a laptop, detection of opening of the cover of battery compartment
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
    • G06F1/16—Constructional details or arrangements
    • G06F1/1613—Constructional details or arrangements for portable computers
    • G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
    • G06F1/1684—Constructional details or arrangements related to integrated I/O peripherals not covered by groups G06F1/1635 - G06F1/1675
    • G06F1/1694—Constructional details or arrangements related to integrated I/O peripherals not covered by groups G06F1/1635 - G06F1/1675 the I/O peripheral being a single or a set of motion sensors for pointer control or gesture input obtained by sensing movements of the portable computer
    • 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/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • 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/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • 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/1454—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • 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
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V20/00—Scenes; Scene-specific elements
    • G06V20/60—Type of objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2200/00—Indexing scheme relating to G06F1/04 - G06F1/32
    • G06F2200/16—Indexing scheme relating to G06F1/16 - G06F1/18
    • G06F2200/161—Indexing scheme relating to constructional details of the monitor
    • G06F2200/1614—Image rotation following screen orientation, e.g. switching from landscape to portrait mode
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas
    • 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
    • G09G2340/0492—Change of orientation of the displayed image, e.g. upside-down, mirrored
    • 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/14—Solving problems related to the presentation of information to be displayed
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2370/00—Aspects of data communication
    • G09G2370/16—Use of wireless transmission of display information
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2370/00—Aspects of data communication
    • G09G2370/20—Details of the management of multiple sources of image data
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2380/00—Specific applications
    • G09G2380/02—Flexible displays

Landscapes

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

Abstract

本申请实施例提供一种界面生成方法及设备，该方法应用于具有开发功能的设备中，可以提供一种自动调整视觉元素在待生成界面中的布局，快速生成界面的方法，该方法包括：设备先获取参考界面的视觉元素，以及获取目标终端设备的显示屏的配置信息，然后根据视觉元素的属性信息，确定视觉元素的视觉焦点。设备根据显示屏的配置信息，确定与配置信息对应的界面布局模板。最终设备根据视觉焦点和与界面布局模板，调整视觉元素在待生成界面中的布局，并生成界面。

Description

一种界面生成方法及设备
技术领域
本申请涉及终端技术领域，尤其涉及一种界面生成方法及设备。
背景技术
随着网络技术的快速发展，诸如智能手机、平板电脑、交互智能平板等智能交互设备越来越普及，给人们的生活、学***板电脑的屏幕分辨率不同，所以同一应用的图形用户界面(graphical user interface，GUI)在智能手机和平板电脑上的界面布局也不相同。现有技术在设计开发每种设备的GUI时，依赖开发人员人为地对视觉元素进行按需设计，开发工作量比较大，开发周期也较长。
发明内容
本申请提供一种界面生成方法及设备，用以提供一种自动调整视觉元素在待生成界面中的布局，快速生成界面的方法。
第一方面，本申请实施例提供了一种界面生成方法，所述方法适用于具有开发功能的设备，该方法包括：设备先获取参考界面的视觉元素，以及获取目标终端设备的显示屏的配置信息，然后根据视觉元素的属性信息，确定视觉元素的视觉焦点。设备根据显示屏的配置信息，确定与配置信息对应的界面布局模板。最终设备根据视觉焦点和与界面布局模板，调整视觉元素在待生成界面中的布局，并生成界面。
本申请实施例中，设备可以利用已有界面的视觉元素，自动调整视觉元素在待生成界面中的布局，快速生成界面，从而可以提高视觉元素的利用率，缩短开发周期。
在一种可能的设计中，设备确定视觉元素所构成的参考界面的中心点为第一参考视觉焦点；对视觉元素进行图像内容识别，确定与图像内容识别结果对应的第二参考视觉焦点；以及确定视觉元素的色彩信息和图片类型中的至少一种对应的第三参考视觉焦点；最终对第一参考视觉焦点、第二参考视觉焦点和第三参考视觉焦点进行聚合，得到视觉元素的视觉焦点。
本申请实施例中，设备通过上述方法可以确定一个较佳的视觉焦点，有助于提高界面生成的布局效果。
在一种可能的设计中，设备根据界面布局模板，调整视觉元素在待生成界面中的位置，以及调整控件在待生成界面中的位置；然后设备以视觉焦点作为待生成界面的中心点，对视觉元素进行剪裁和/或缩放，以及调整控件的大小。
本申请实施例中，设备按照上述方法可以生成布局效果良好的界面，可以提高视觉元素的利用率，缩短开发周期。
在一种可能的设计中，若目标终端设备支持分屏功能，待生成界面的显示模式为分屏模式，包括第一应用的第一待生成界面和第二应用的第二待生成界面；那么设备可以获取第一应用的参考界面的第一视觉元素和第二应用的参考界面的第二视觉元素；然后根据第一视觉元素的属性信息，确定第一应用的第一待生成界面的第一视觉焦点，以及，根据第二视觉元素的属性信息，确定第二应用的第二待生成界面的第二视觉焦点；以及根据显示屏的配置信息和分屏模式，确定在分屏模式下待生成界面的界面布局模板。最终设备根据在分屏模式下待生成界面的界面布局模板和第一视觉焦点，调整第一视觉元素在第一待生成界面中的布局，并生成第一应用的界面；以及根据在分屏模式下待生成界面的界面布局模板和第二视觉焦点，调整第二视觉元素在第二待生成界面中的布局，并生成第二应的界面。
本申请实施例中，设备按照上述方法可以利用分屏之前的界面的视觉元素，自动调整视觉元素在待生成界面中的布局，快速生成界面，从而可以提高视觉元素的利用率，缩短开发周期。
在一种可能的设计中，显示屏的配置信息包括如下至少一项内容：显示屏的形状、显示屏的分辨率、是否支持触摸、是否支持折叠；界面布局模板包括如下至少一项内容：界面显示样式、布局参数、控件响应方式。
第二方面，本申请实施例提供一种设备，包括处理器和存储器。其中，存储器用于存储一个或多个计算机程序；当存储器存储的一个或多个计算机程序被处理器执行时，使得该设备能够实现上述任一方面的任意一种可能的设计的方法。
第三方面，本申请实施例还提供一种装置，该装置包括执行上述任一方面的任意一种可能的设计的方法的模块/单元。这些模块/单元可以通过硬件实现，也可以通过硬件执行相应的软件实现。
第四方面，本申请实施例中还提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，当计算机程序在设备上运行时，使得所述设备执行上述任一方面的任意一种可能的设计的方法。
第五方面，本申请实施例还提供一种包含计算机程序产品，当所述计算机程序产品在终端上运行时，使得所述设备执行上述任一方面的任意一种可能的设计的方法。
本申请的这些方面或其他方面在以下实施例的描述中会更加简明易懂。
附图说明
图1为本申请实施例提供的多种终端设备的示意图；
图2为本申请实施例提供的一种通信***示意图；
图3为本申请实施例提供的一种设备的结构示意图；
图4为本申请实施例提供的一种终端设备的结构示意图；
图5为本申请实施例提供的一种界面生成方法示意图；
图6A至图6D为本申请实施例提供的一种界面布局模板示意图；
图7为本申请实施例提供的一种参考界面的视觉元素示意图；
图8a至图8b为本申请实施例提供的一种智能手机的界面示意图；
图9a至图9c和图10a至图10c为本申请实施例提供的一种智能手表的界面示意图；
图11a至图11c为本申请实施例提供的一种平板电脑的界面示意图；
图12a至图12c为本申请实施例提供的一种智能电视的界面示意图；
图13a至图13c为本申请实施例提供的一种具有可折叠触摸屏的智能手机的界面示意图；
图14a至图14c为本申请实施例提供的一种支持分屏的智能手机的界面示意图；
图15a至图15c为本申请实施例提供的多种终端设备的界面示意图；
图16为本申请实施例提供的终端设备结构界面示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。其中，在本申请实施例的描述中，以下，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。
为了便于理解，示例的给出了部分与本申请实施例相关概念的说明以供参考。
视觉元素，指用户肉眼可见的图像信息，比如按钮，图片，文本等信息。
视觉焦点，指最能够引起用户关注的像素点的位置，一般指图像信息中的重要信息，如人脸、风景图像中的最吸引人的部分。
布局，指视觉元素的排列方式和视觉元素的位置等，如控件的顶边距、左边距、底边距、右边距、宽和高等。
随着智能手机和平板电脑等移动终端设备的普及，用户逐渐***板电脑的分辨率和屏幕尺寸的不断发展，不同机型的设备的分辨率以及屏幕尺寸会存在不同，例如，图1所示的智能手机10、智能手表20、平板电脑30和智能电视40的分辨率和屏幕尺寸均不相同。所以在智能手机10上布局效果良好的APP客户端软件，若直接安装和运行在智能手表20上可能出现布局效果不理想的问题，比如界面的长宽比例不协调或界面中的控件位置不合理等。
针对上述问题，现有技术常用的解决方法是，由用户界面(user interface，UI)工程师重新绘制一套适用于智能手表的图像资源，软件开发人员在集成开发环境(integrated development environment，IDE)中重新修改该APP客户端软件的代码，并对修改后的代码和新的图像资源进行编译和打包，以实现智能手表的APP客户端软件的良好布局。其中，IDE为用于程序开发环境的应用程序，一般包括代码编辑器、编译器、调整器和图形UI工具，如iOS***上的Xcode编程软件和Android***上的AndroidStudio编程软件均为典型的IDE。可见，这一解决方法依赖UI工程师人为地对视觉元素进行按需设计，开发工作量比较大，开发周期也较长，APP客户端软件的图像资源复用率偏低。
针对现有技术问题，本申请实施例提供一种界面生成方法，该方法可以应用于具有开发功能的设备中，设备先获取参考界面的视觉元素和待生成界面的界面布局模板，然后设备根据视觉元素的属性信息和设备的显示屏的配置信息，确定所述视觉元素的视觉焦点，从而根据视觉焦点和待生成界面的界面布局模板确定视觉元素在待生成界面中的布局，最终生成布局效果良好的界面。本申请实施例中，设备可以利用已有界面的视觉元素，自动调整视觉元素在待生成界面中的布局，快速生成界面，从而可以提高视觉元素的利用率，缩短开发周期。
如图2所示，本申请实施例提供一种通信***，该通信***包括终端设备100和设备200，终端设备100和设备200可以通过数据线直连，也可以通过通信网络互相通信。其中，设备200安装有集成开发环境(integrated development environment，IDE)，用于编译生成终端设备100的软件包。
其中，通信网络可以是局域网，也可以是通过中继(relay)设备转接的广域网，或者包括局域网和广域网。当该通信网络为局域网时，示例性的，该通信网络可以是wifi热点网络、wifi直连网络、蓝牙网络、zigbee网络或近场通信(near field communication，NFC)网络等近距离通信网络。当该通信网络为广域网时，示例性的，该通信网络可以是第三代移动通信技术(3rd-generation wireless telephone technology，3G)网络、***移动通信技术(the 4th generation mobile communication technology，4G)网络、第五代移动通信技术(5th-generation mobile communication technology，5G)网络、未来演进的公共陆地移动网络(public land mobile network，PLMN)或因特网等。
具体来说，设备200可以利用上述界面生成方法自动编码生成应用的界面，开发人员在设备200上编译、打包生成软件包。终端设备100从设备200获取软件包，并安装到本地，当应用在终端设备100上运行时，终端设备100的显示屏显示按照上述界面生成方法所生成的界面。
在本申请一些实施例中，设备200可以为具有编译功能的服务器或者云服务器。图3示出的是与本申请各实施例相关的设备200的部分结构的框图。如图3所示，该设备200可以包括：处理器201、存储器202以及收发器203。其中该一个或多个计算机程序被存储在上述存储器202中并被配置为被该一个或多个处理器201执行。
处理器201，可以是中央处理单元(central processing unit，CPU)，或者为数字处理单元等，处理器201是设备200的控制中心，利用各种接口和线路连接整个设备的各个部分，通过运行或执行存储在存储器202内的计算机程序，以及调用存储在存储器202内的数据，执行设备200的各种功能和数据处理。
存储器202，用于存储待运行的计算机程序，若该设备200是云服务器，则存储器202中还存储有从具有编译功能的服务器获取的操作***编译生成的编译结果，其中编译结果包括应用程序的应用软件包。另外，若该设备200是具有编译功能的服务器，则存储器202中存储有操作***源码和该操作***源码编译生成的编译结果。其中编译结果包括应用程序的应用软件包。
收发器203，用于将处理器201生成的软件包发送至终端设备100。
本申请实施例中不限定上述处理器201以及存储器202之间的具体连接介质。本申请实施例在图3中以存储器202、处理器201以及收发器203之间通过总线204连接为例，总线在图3中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
其中，存储器202可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器202也可以是非易失性存储器(non-volatilememory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器202是能够用于携带或存储具有指令或数据结构形式的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器202还可以是上述存储器的组合。
在本申请一些实施例中，终端设备100可以是便携式设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴设备(如智能手表)等。便携式设备包括但不限于搭载 或者其它操作***的便携式设备。还应当理解的是，在本申请其他一些实施例中，上述设备也可以不是便携式设备，而是台式计算机。
图4示出了上述终端设备100的一种结构示意图。
终端设备100可以包括处理器110，外部存储器接口120，内部存储器121，USB接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块151，无线通信模块152，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及SIM卡接口195等。其中传感器模块180可以包括陀螺仪传感器180A、加速度传感器180B、接近光传感器180G、指纹传感器180H、触摸传感器180K、转轴传感器180M(当然，终端设备100还可以包括其它传感器，比如温度传感器，距离传感器、环境光传感器、气压传感器、骨传导传感器等，图中未示出)。
可以理解的是，本发明实施例示意的结构并不构成对终端设备100的具体限定。在本申请另一些实施例中，终端设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor,ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor,DSP)，基带处理器，和/或神经网络处理器(Neural-network Processing Unit,NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。其中，控制器可以是终端设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了***的效率。在本申请实施例中，处理器110可以运行从设备200获取的软件包。
显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，终端设备100可以包括1个或N个显示屏194，N为大于1的正整数。
摄像头193(前置摄像头或者后置摄像头，或者一个摄像头既可作为前置摄像头，也可作为后置摄像头)用于捕获静态图像或视频。通常，摄像头193可以包括感光元件比如镜头组和图像传感器，其中，镜头组包括多个透镜(凸透镜或凹透镜)，用于采集待拍摄物体反射的光信号，并将采集的光信号传递给图像传感器。图像传感器根据光信号生成待拍摄物体的原始图像。
内部存储器121可以用于存储计算机可执行程序代码，可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行终端设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作***，应用程序(比如相机应用，微信应用等)的代码等。存储数据区可存储终端设备100使用过程中所创建的数据(比如相机应用采集的图像、视频等)等。
此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。
下面介绍传感器模块180的功能。
陀螺仪传感器180A(或者简称为陀螺仪)，为IMU的主要器件，可以用于确定终端设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180A确定终端设备100围绕三个轴(即，x，y和z轴)的角速度。
加速度传感器180B(或者简称为加速度计)，为IMU的主要器件，可以用于检测终端设备100在各个方向上(一般为三轴)加速度的大小。即加速度传感器180B可以用于检测终端设备100当前的运动状态，比如抖动还是静止。
接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。终端设备通过发光二极管向外发射红外光。终端设备使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定终端设备附近有物体。当检测到不充分的反射光时，终端设备可以确定终端设备附近没有物体。
陀螺仪传感器180A(或加速度传感器180B)可以将检测到的运动状态信息(比如角速度)发送给处理器110。处理器110基于运动状态信息确定当前是手持状态还是脚架状态(比如，角速度不为0时，说明终端设备100处于手持状态)。
指纹传感器180H用于采集指纹。终端设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于终端设备100的表面，与显示屏194所处的位置不同。
示例性的，终端设备100的显示屏194显示主界面，主界面中包括多个应用(比如相机应用、微信应用等)的图标。用户通过触摸传感器180K点击主界面中扫地机器人应用的图标，触发处理器110启动扫地机器人应用，打开作业地图。显示屏194显示扫地机器人应用的界面，例如作业地图界面。
终端设备100的无线通信功能可以通过天线1，天线2，移动通信模块151，无线通信模块152，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。终端设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块151可以提供应用在终端设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块151可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块151可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块151还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块151的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块151的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块151或其他功能模块设置在同一个器件中。
无线通信模块152可以提供应用在终端设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星***(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块152可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块152经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块152还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
另外，终端设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。终端设备100可以接收按键190输入，产生与终端设备100的用户设置以及功能控制有关的键信号输入。终端设备100可以利用马达191产生振动提示(比如来电振动提示)。终端设备100中的指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。终端设备100中的SIM卡接口195用于连接SIM卡。SIM卡可以通过***SIM卡接口195，或从SIM卡接口195拔出，实现和终端设备100的接触和分离。
应理解，在实际应用中，终端设备100可以包括比图4所示的更多或更少的部件，本申请实施例不作限定。
如图5所示，为本申请实施例提供一种界面生成方法流程示意图，该方法可以由设备200执行，更具体地，请参阅图3所示，可以由设备200中的处理器201调用存储器202中存储的计算机程序，结合收发器203来执行。具体步骤如下。
步骤501，设备200中的处理器201可以通过收发器203获取参考界面的视觉元素，以及获取目标终端设备的显示屏的配置信息。
其中，应用程序的参考界面的视觉元素可以来自于目标终端设备，也可以来自于其它终端设备。视觉元素指的是参考界面的界面显示对象。目标终端设备的显示屏的配置信息包括屏幕大小、屏幕分辨率、是否支持触摸功能、是否全屏显示等。
步骤502，设备200中的处理器201根据视觉元素的属性信息，确定所述视觉元素的视觉焦点。
具体地，视觉元素的属性信息指的是视觉元素的大小尺寸、中心点、分辨率、色彩等信息。设备200中的存储器202中可以预先存储有视觉焦点库，该视觉焦点库存储有图像识别结果与视觉焦点的对应关系、视觉元素的色彩与视觉焦点的对应关系、视觉元素的图像类型与视觉焦点的对应关系。进而设备200中的处理器201可以将获取的视觉元素的图像识别结果、视觉元素的色彩和视觉元素的图像类型中的至少一种与存储器202中存储的视觉焦点库中的信息进行匹配，确定出至少一个参考视觉焦点。最终，设备中的处理器201对各个参考视觉焦点进行聚合，计算出概率最大的位置为获取的所述视觉元素的视觉焦点。
步骤503，设备200中的处理器201根据获取的显示屏的配置信息，确定与配置信息对应的界面布局模板。
具体地，不同的显示屏对应有不同的界面布局模板。其中界面布局模板中包括如下至少一项内容：界面显示框架、默认布局参数、控件响应方式。界面显示框架中包括待显示对象的位置、大小、排列方式等。待显示对象可以是图像资源、控件等。
在一种可能的实施例中，设备200中的存储器202中可以预先存储有不同配置信息对应的排列方式模板、位置模板、对齐方式模板、控件位置模板，设备200中的处理器201将这几类模板进行聚合，最终生成待生成界面的界面布局模板。其中，如图6A所示，排列方式模板可以有横向排列方式(如图6A中的a所示)、竖向排列方式(如图6A中的b所示)、重叠排列方式(如图6A中的c所示)这三种；位置模板可以如图6B所示，在空间坐标系中，界面被划分为多个区域，分别是标题栏、操作栏、菜单栏、底部操作以及内容区等区域；如图6C所示，对齐方式模板可以包括直线对齐(如图6C中的a所示)、曲线对齐(如图6C中的b所示)和重叠方式对齐(如图6C中的c所示)。如图6D所示，控件位置模板可以有矩形框分布方式(如图6D中的a所示)和圆形框分布方式(如图6D中的b所示)这两种。
步骤504，设备200中的处理器201根据上述步骤502得到的视觉焦点和上述步骤503得到的界面布局模板，调整上述步骤501中获取的视觉元素在待生成界面中的布局，并生成界面。
具体地，设备200中的处理器201可以根据上述步骤503得到的界面布局模板，调整上述步骤501中获取的视觉元素在待生成界面中位置，以及调整控件在所述待生成界面中的位置。然后设备200中的处理器201以上述步骤502得到的所述视觉焦点作为所述待生成界面的中心点，对上述步骤501中获取的所述视觉元素进行剪裁和/或缩放，以及调整所述控件的大小。
综上描述可见，本申请实施例所提供的界面生成方法可以减小应用界面的开发难度，提高开发效率，降低开发成本。
在一种可能的实施例中，视觉焦点可以是用户自定义的，也可以通过图像识别确定出来的，例如界面中的人脸，清晰的物体等元素。在另一种可能的实施例中，视觉焦点也可以通过视觉焦点算法融合得到。具体地，设备200可以确定视觉元素所构成的参考界面的中心点为第一参考视觉焦点；对视觉元素进行图像内容识别，确定与图像内容识别结果对应的第二参考视觉焦点；确定视觉元素的色彩信息和图片类型中的至少一种对应的第三参考视觉焦点；然后设备200对第一参考视觉焦点、第二参考视觉焦点和第三参考视觉焦点进行聚合，得到视觉元素的视觉焦点。
在一种可能的实施例中，若待生成界面的显示模式为分屏模式，目标终端设备支持分屏功能，那么设备200可以分别获取第一应用的参考界面的第一视觉元素和第二应用的参考界面的第二视觉元素，然后根据第一视觉元素的属性信息，确定第一应用的第一待生成界面的第一视觉焦点，以及，根据第二视觉元素的属性信息，确定第二应用的第二待生成界面的第二视觉焦点。设备200根据目标终端设备的显示屏的配置信息和分屏模式，确定在分屏模式下待生成界面的界面布局模板，最终根据在分屏模式下待生成界面的界面布局模板和第一视觉焦点，调整第一视觉元素在第一待生成界面中的布局，并生成第一应用的界面；根据在分屏模式下待生成界面的界面布局模板和第二视觉焦点，调整第二视觉元素在第二待生成界面中的布局，并生成第二应的界面。
以下结合附图和具体的应用场景，对本申请实施例提供的界面生成方法进行举例说明。假设设备200中的存储器202中预先存储有如图7所示的参考界面的视觉元素，该参考界面为杂志锁屏应用中的一个参考界面，该参考界面的视觉元素为一副图像。一般地，该视觉元素的尺寸较大和分辨率较高，以便于适配到其它的终端设备。
场景一
设备200获取图1中智能手机10的显示屏的配置参数，例如智能手机10的显示屏的长宽比、分辨率等。然后设备200获取与该配置参数对应的界面布局模板。具体地，设备200可以获取与该配置参数对应的排列方式模板、位置模板、对齐方式模板、控件位置模板等，最终生成图8a所示的界面布局模板。设备根据图7所示的视觉元素的色彩、图片类型和图像识别结果确定视觉元素的视觉焦点(视觉焦点如图7中的箭头位置)。然后设备200以该视觉焦点为待生成界面的中心点，对视觉元素进行剪裁和缩放，按照界面布局模板调整视觉元素在待生成界面中的布局，最终生成如图8b所示的界面。
场景二
设备200获取图9a中智能手表20的显示屏的配置参数，例如智能手表20的显示屏的长宽比、分辨率等。然后设备200获取与该配置参数对应的界面布局模板。具体地，设备200可以获取与该配置参数对应的排列方式模板、位置模板、对齐方式模板、控件位置模板等，最终生成图9b所示的界面布局模板。设备根据图7所示的视觉元素的色彩、图片类型和图像识别结果确定视觉元素的视觉焦点(视觉焦点如图7中的箭头位置)。然后设备以该视觉焦点为待生成界面的中心点，对视觉元素进行剪裁和缩放，按照图9b所示的界面布局模板调整视觉元素在待生成界面中的布局，最终生成如图9c所示的界面。
场景三
设备200获取图10a中智能手表20的显示屏的配置参数，例如智能手表20的显示屏的长宽比、分辨率等。然后设备200获取与该配置参数对应的界面布局模板。具体地，设备200可以获取与该配置参数对应的排列方式模板、位置模板、对齐方式模板、控件位置模板等，最终生成图10b所示的界面布局模板。设备200根据图7所示的视觉元素的色彩、图片类型和图像识别结果确定视觉元素的视觉焦点(视觉焦点如图7中的箭头位置)。然后设备200以该视觉焦点为待生成界面的中心点，对视觉元素进行剪裁和缩放，按照图10b所示的界面布局模板调整视觉元素在待生成界面中的布局，最终生成如图10c所示的界面。
场景四
设备200获取图11a中平板电脑30的显示屏的配置参数，例如平板电脑30的显示屏的长宽比、分辨率等。然后设备200获取与该配置参数对应的界面布局模板。具体地，设备200可以获取与该配置参数对应的排列方式模板、位置模板、对齐方式模板、控件位置模板等，最终生成图11b所示的界面布局模板。设备根据图7所示的视觉元素的色彩、图片类型和图像识别结果确定视觉元素的视觉焦点(视觉焦点如图7中的箭头位置)。然后设备200以该视觉焦点为待生成界面的中心点，对视觉元素进行剪裁和缩放，按照图11b所示的界面布局模板调整视觉元素在待生成界面中的布局，最终生成如图11c所示的界面。
场景五
设备200获取图12a中智能电视40的显示屏的配置参数，例如智能电视40的显示屏的长宽比、分辨率等。然后设备200获取与该配置参数对应的界面布局模板。具体地，设备200可以获取与该配置参数对应的排列方式模板、位置模板、对齐方式模板、控件位置模板等，最终生成图12b所示的界面布局模板。设备200根据图7所示的视觉元素的色彩、图片类型和图像识别结果确定视觉元素的视觉焦点(视觉焦点如图7中的箭头位置)。然后设备200以该视觉焦点为待生成界面的中心点，对视觉元素进行剪裁和缩放，按照图12b所示的界面布局模板调整视觉元素在待生成界面中的布局，最终生成如图12c所示的界面。
场景六
假设智能手机10支持折叠，例如智能手机10可以从第一夹角展开至第二夹角。所谓夹角指的是可折叠触摸屏的两个屏之间的夹角。当待生成界面为图13c所示的完全展开状态的界面时，设备200获取图13a中智能手机10的显示屏的配置参数，例如智能手机10的显示屏的长宽比、分辨率、折叠角度等。然后设备200获取与该配置参数对应的界面布局模板。具体地，设备200可以获取与该配置参数对应的排列方式模板、位置模板、对齐方式模板、控件位置模板等，最终生成图13b所示的界面布局模板。
设备200获取根据图7所示的视觉元素的色彩、图片类型和图像识别结果确定视觉元素的视觉焦点(视觉焦点如图7中的箭头位置)。然后设备200以该视觉焦点为待生成界面的中心点，对视觉元素进行剪裁和缩放，按照图13b所示的界面布局模板调整视觉元素在待生成界面中的布局，最终生成如图13c所示的界面。
场景七
假设智能手机10支持分屏，例如将智能手机10进行分屏，分屏之后上半部分为图库应用的界面，下半部分为微信应用的界面。当待生成界面为图14c所示处于分屏状态的界面时，设备200获取图14a中智能手机10的显示屏的配置参数，例如智能手机10的显示屏的长宽比、分辨率、分屏状态等。然后设备200获取与该配置参数对应的界面布局模板。具体地，设备200可以获取与该配置参数对应的排列方式模板、位置模板、对齐方式模板、控件位置模板等，最终生成图14b所示的界面布局模板。
设备200获取根据图7所示的视觉元素的色彩、图片类型和图像识别结果确定视觉元素的视觉焦点(视觉焦点如图7中的箭头位置)。然后设备200以该视觉焦点为待生成界面的中心点，对视觉元素进行剪裁和缩放，按照图14b所示的界面布局模板调整视觉元素在待生成界面中的布局，最终生成如图14c所示的界面。
再比如说，智能电视的杂志锁屏界面如图15a所示。设备200获取图15a所示的参考界面中的视觉元素，利用该视觉元素，按照上述界面生成方法生成如图15b所示的智能手机的杂志锁屏界面1501，以及生成如图15b所示的智能手表的杂志锁屏界面1502。
在本申请的另一些实施例中，本申请实施例公开了一种具有开发功能的设备，如图16所示，该设备可以包括：触摸屏1601，其中，该触摸屏1601包括触控面板1606和显示屏1607；一个或多个处理器1602；存储器1603；一个或多个应用程序(未示出)以及一个或多个计算机程序1604，上述各器件可以通过一个或多个通信总线1605连接。其中该一个或多个计算机程序1604被存储在上述存储器1603中并被配置为被该一个或多个处理器1602执行，该一个或多个计算机程序1604包括指令，上述指令可以用于执行如图5相应实施例中的各个步骤。
本申请实施例还提供一种计算机存储介质，该计算机存储介质中存储有计算机指令，当该计算机指令在设备上运行时，使得设备执行上述相关方法步骤实现上述实施例中的界面生成方法。
本申请实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的界面生成方法。
另外，本申请的实施例还提供一种装置，这个装置具体可以是芯片，组件或模块，该装置可包括相连的处理器和存储器；其中，存储器用于存储计算机执行指令，当装置运行时，处理器可执行存储器存储的计算机执行指令，以使芯片执行上述各方法实施例中的界面生成方法。
其中，本申请实施例提供的设备、计算机存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法，因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。
通过以上实施方式的描述，所属领域的技术人员可以了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其他的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其他的形式。
作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是一个物理单元或多个物理单元，即可以位于一个地方，或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上内容，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种界面生成方法，应用于具有开发功能的设备，其特征在于，用于为目标终端设备生成界面，所述目标终端设备支持分屏功能，待生成界面的显示模式为分屏模式，包括第一应用的第一待生成界面和第二应用的第二待生成界面；所述方法包括：
获取所述第一应用的参考界面的第一视觉元素和所述第二应用的参考界面的第二视觉元素，以及获取目标终端设备的显示屏的配置信息；
根据所述第一视觉元素的属性信息，确定所述第一应用的第一待生成界面的第一视觉焦点，以及，根据所述第二视觉元素的属性信息，确定所述第二应用的第二待生成界面的第二视觉焦点；
根据所述显示屏的配置信息和所述分屏模式，确定在所述分屏模式下所述待生成界面的界面布局模板；
根据所述第一视觉焦点和在所述分屏模式下所述待生成界面的界面布局模板，调整所述第一视觉元素在所述第一待生成界面中的布局，并生成所述第一应用的界面；
根据所述第二视觉焦点和在所述分屏模式下所述待生成界面的界面布局模板，调整所述第二视觉元素在所述第二待生成界面中的布局，并生成所述第二应用的界面。
2.根据权利要求1所述的方法，其特征在于，针对于所述第一视觉元素和所述第二视觉元素中的任一视觉元素，根据所述视觉元素的属性信息，确定所述视觉元素的视觉焦点，包括：
确定所述视觉元素所构成的参考界面的中心点为第一参考视觉焦点；
对所述视觉元素进行图像内容识别，确定与图像内容识别结果对应的第二参考视觉焦点；
确定所述视觉元素的色彩信息和图片类型中的至少一种对应的第三参考视觉焦点；
对所述第一参考视觉焦点、所述第二参考视觉焦点和所述第三参考视觉焦点进行聚合，得到所述视觉元素的视觉焦点。
3.根据权利要求1或2所述的方法，其特征在于，针对于所述第一视觉元素和所述第二视觉元素中的任一视觉元素，根据所述视觉焦点和在所述分屏模式下所述待生成界面的界面布局模板，调整所述视觉元素在所对应的待生成界面中的布局，包括：
根据所述界面布局模板，调整所述视觉元素在所对应的待生成界面中的位置，以及调整控件在所对应的待生成界面中的位置；
以所述视觉焦点作为所对应的待生成界面的中心点，对所述视觉元素进行剪裁和/或缩放，以及调整所述控件的大小。
4.根据权利要求1或2所述的方法，其特征在于，所述显示屏的配置信息包括如下至少一项内容：显示屏的形状、显示屏的分辨率、是否支持触摸、是否支持折叠；
所述界面布局模板包括如下至少一项内容：界面显示样式、布局参数、控件响应方式。
5.一种设备，其特征在于，包括处理器和存储器；
所述存储器用于存储一个或多个计算机程序，当所述存储器存储的一个或多个计算机程序被所述处理器执行时，使得所述设备执行如下操作，以为目标终端设备生成界面，所述目标终端设备支持分屏功能，待生成界面的显示模式为分屏模式，包括第一应用的第一待生成界面和第二应用的第二待生成界面：
获取所述第一应用的参考界面的第一视觉元素和所述第二应用的参考界面的第二视觉元素，以及获取目标终端设备的显示屏的配置信息；
根据所述第一视觉元素的属性信息，确定所述第一应用的第一待生成界面的第一视觉元素的视觉焦点，以及，根据所述第二视觉元素的属性信息，确定所述第二应用的第二待生成界面的第二视觉焦点；
根据所述显示屏的配置信息和所述分屏模式，确定在所述分屏模式下所述待生成界面的界面布局模板；
根据所述第一视觉焦点和在所述分屏模式下所述待生成界面的界面布局模板，调整所述第一视觉元素在所述第一待生成界面中的布局，并生成所述第一应用的界面；
根据所述第二视觉焦点和在所述分屏模式下所述待生成界面的界面布局模板，调整所述第二视觉元素在所述第二待生成界面中的布局，并生成所述第二应用的界面。
6.根据权利要求5所述的设备，其特征在于，当所述存储器存储的一个或多个计算机程序被所述处理器执行时，使得所述设备针对于所述第一视觉元素和所述第二视觉元素中的任一视觉元素，具体执行：
确定所述视觉元素所构成的参考界面的中心点为第一参考视觉焦点；
对所述视觉元素进行图像内容识别，确定与所述图像内容识别结果对应的第二参考视觉焦点；
确定所述视觉元素的色彩信息和图片类型中的至少一种对应的第三参考视觉焦点；
对所述第一参考视觉焦点、所述第二参考视觉焦点和所述第三参考视觉焦点进行聚合，得到所述视觉元素的视觉焦点。
7.根据权利要求5或6所述的设备，其特征在于，当所述存储器存储的一个或多个计算机程序被所述处理器执行时，使得所述设备针对于所述第一视觉元素和所述第二视觉元素中的任一视觉元素，具体执行：
根据所述界面布局模板，调整所述视觉元素在所对应的待生成界面中位置，以及调整控件在所对应的待生成界面中的位置；
以所述视觉焦点作为所对应的待生成界面的中心点，对所述视觉元素进行剪裁和/或缩放，以及调整所述控件的大小。
8.根据权利要求5或6所述的设备，其特征在于，所述显示屏的配置信息包括如下至少一项内容：显示屏的形状、显示屏的分辨率、是否支持触摸、是否支持折叠；
所述界面布局模板包括如下至少一项内容：界面显示样式、布局参数、控件响应方式。
9.一种计算机可读存储介质，其特征在于，包括计算机指令，当所述计算机指令在设备上运行时，使得所述设备执行如权利要求1至4任一项所述的界面生成方法。
10.一种芯片，其特征在于，所述芯片与存储器耦合，用于执行所述存储器中存储的计算机程序，以执行如权利要求1至4任一项所述的界面生成方法。
CN201910678586.XA 2019-07-25 2019-07-25 一种界面生成方法及设备 Active CN110554816B (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN201910678586.XA CN110554816B (zh) 2019-07-25 2019-07-25 一种界面生成方法及设备
PCT/CN2020/103840 WO2021013226A1 (zh) 2019-07-25 2020-07-23 一种界面生成方法及设备
EP20843213.8A EP3982238A4 (en) 2019-07-25 2020-07-23 INTERFACE GENERATION METHOD AND APPARATUS
US17/629,216 US11947781B2 (en) 2019-07-25 2020-07-23 Automatically adjusting a layout of a visual element on a to-be-generated interface and quickly generating an interface

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910678586.XA CN110554816B (zh) 2019-07-25 2019-07-25 一种界面生成方法及设备

Publications (2)

Publication Number Publication Date
CN110554816A CN110554816A (zh) 2019-12-10
CN110554816B true CN110554816B (zh) 2024-05-07

Family

ID=68735788

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910678586.XA Active CN110554816B (zh) 2019-07-25 2019-07-25 一种界面生成方法及设备

Country Status (4)

Country Link
US (1) US11947781B2 (zh)
EP (1) EP3982238A4 (zh)
CN (1) CN110554816B (zh)
WO (1) WO2021013226A1 (zh)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110554816B (zh) * 2019-07-25 2024-05-07 华为技术有限公司 一种界面生成方法及设备
CN111443884A (zh) * 2020-04-23 2020-07-24 华为技术有限公司 投屏方法、装置和电子设备
CN111796819A (zh) * 2020-05-19 2020-10-20 北京三快在线科技有限公司 小程序界面生成方法、装置、电子设备及可读存储介质
CN111754488A (zh) * 2020-06-27 2020-10-09 北京百度网讯科技有限公司 界面的视觉可读性检测方法、装置、设备以及存储介质
CN114579223A (zh) * 2020-12-02 2022-06-03 华为技术有限公司 一种界面布局方法、电子设备和计算机可读存储介质
CN112888083B (zh) * 2021-01-22 2022-11-04 惠州Tcl移动通信有限公司 移动终端wifi直连处理方法、装置、移动终端及介质
CN116450251A (zh) * 2022-01-05 2023-07-18 华为技术有限公司 一种适配多设备的页面布局的方法及电子设备
CN116382825B (zh) * 2022-04-21 2024-03-01 华为技术有限公司 界面布局方法和装置
CN117008752A (zh) * 2022-04-28 2023-11-07 华为技术有限公司 一种显示方法、装置及存储介质
CN117710263A (zh) * 2022-09-09 2024-03-15 北京字跳网络技术有限公司 图像处理方法、装置、电子设备及存储介质
US11907606B1 (en) * 2023-03-15 2024-02-20 Motorola Mobility Llc Compute box and corresponding systems and methods for formatting content for presentation on flexible content presentation companion devices
CN116149520B (zh) * 2023-04-23 2023-07-21 深圳市微克科技有限公司 一种智能手表交互界面智能处理方法、***及介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102572217A (zh) * 2011-12-29 2012-07-11 华为技术有限公司 基于视觉关注的多媒体处理方法及装置
CN103744595A (zh) * 2013-12-30 2014-04-23 广州华多网络科技有限公司 自适应显示方法、配置文件生成方法和装置
CN105912318A (zh) * 2016-04-01 2016-08-31 北京京东尚科信息技术有限公司 一种终端屏幕自适应显示方法、终端、服务器及***
CN109471579A (zh) * 2018-11-13 2019-03-15 努比亚技术有限公司 终端屏幕信息布局调整方法、装置、移动终端及存储介质

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
GB2410664B (en) 2004-01-31 2009-04-08 Autodesk Canada Inc Generating a user interface
KR20120086119A (ko) * 2011-01-25 2012-08-02 한국전자통신연구원 마인드 어웨어 기반의 시각주의 장치 및 제어방법과 시각주의 장치를 이용한 영상출력 장치
US8872855B2 (en) * 2011-07-21 2014-10-28 Flipboard, Inc. Adjusting orientation of content regions in a page layout
KR102311221B1 (ko) * 2014-04-28 2021-10-13 삼성전자주식회사 오브젝트 운용 방법 및 이를 지원하는 전자 장치
KR20160080851A (ko) * 2014-12-29 2016-07-08 엘지전자 주식회사 디스플레이 장치 및 제어 방법
KR102362741B1 (ko) * 2015-05-27 2022-02-14 삼성전자주식회사 플렉서블 디스플레이 장치 및 플렉서블 디스플레이 장치의 디스플레이 방법
JP6569415B2 (ja) * 2015-09-15 2019-09-04 株式会社リコー 表示入力装置、画像形成装置及び電子機器と表示制御方法並びにプログラム
KR102387115B1 (ko) * 2015-11-18 2022-04-18 삼성전자주식회사 전자 장치 및 이의 제어 방법
US10070187B2 (en) * 2015-11-24 2018-09-04 DISH Technologies, LLC Simultaneous output of multiple television selections
CN106055337B (zh) 2016-06-07 2021-01-08 Tcl科技集团股份有限公司 一种界面生成方法及装置
US11137884B2 (en) * 2016-06-14 2021-10-05 International Business Machines Corporation Modifying an appearance of a GUI to improve GUI usability
US11100278B2 (en) 2016-07-28 2021-08-24 Ivanti, Inc. Systems and methods for presentation of a terminal application screen
US20180167634A1 (en) * 2016-12-09 2018-06-14 Nokia Technologies Oy Method and an apparatus and a computer program product for video encoding and decoding
CN110032420A (zh) * 2019-04-18 2019-07-19 合肥天毅网络传媒有限公司 一种前端网页设计***及其方法
CN110554816B (zh) 2019-07-25 2024-05-07 华为技术有限公司 一种界面生成方法及设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102572217A (zh) * 2011-12-29 2012-07-11 华为技术有限公司 基于视觉关注的多媒体处理方法及装置
CN103744595A (zh) * 2013-12-30 2014-04-23 广州华多网络科技有限公司 自适应显示方法、配置文件生成方法和装置
CN105912318A (zh) * 2016-04-01 2016-08-31 北京京东尚科信息技术有限公司 一种终端屏幕自适应显示方法、终端、服务器及***
CN109471579A (zh) * 2018-11-13 2019-03-15 努比亚技术有限公司 终端屏幕信息布局调整方法、装置、移动终端及存储介质

Also Published As

Publication number Publication date
EP3982238A1 (en) 2022-04-13
US20220269387A1 (en) 2022-08-25
WO2021013226A1 (zh) 2021-01-28
EP3982238A4 (en) 2022-07-27
US11947781B2 (en) 2024-04-02
CN110554816A (zh) 2019-12-10

Similar Documents

Publication Publication Date Title
CN110554816B (zh) 一种界面生成方法及设备
CN111399789B (zh) 界面布局方法、装置及***
CN111316333B (zh) 一种信息提示方法及电子设备
WO2020259470A1 (zh) 一种触摸屏的显示方法及电子设备
CN110661917A (zh) 一种显示方法及电子设备
CN112286618A (zh) 设备协作方法、装置、***、电子设备和存储介质
CN113994317A (zh) 一种用户界面布局方法及电子设备
CN111221845A (zh) 一种跨设备信息搜索方法及终端设备
CN115039378A (zh) 一种音频输出方法及终端设备
CN114442969B (zh) 一种设备间屏幕协同方法及设备
EP4280646A1 (en) In-vehicle infotainment product connection method and apparatus
CN116431044A (zh) 开启应用程序的方法、装置及终端设备
WO2022105793A1 (zh) 图像处理方法及其设备
CN115484404B (zh) 基于分布式控制的相机控制方法及终端设备
CN115686705B (zh) 一种界面显示方法及电子设备
CN111294320B (zh) 数据转换的方法和装置
CN115113832A (zh) 一种跨设备同步显示的控制方法及***
CN113076452A (zh) 应用分类的方法、装置、设备及计算机可读存储介质
CN116688494B (zh) 生成游戏预测帧的方法和电子设备
CN114449101B (zh) 一种界面显示方法、电子设备及存储介质
EP4246940A1 (en) Camera control method and apparatus, and storage medium
CN116795306A (zh) 图像显示方法和电子设备
CN116719487A (zh) 发送打印任务的方法和装置
CN117473578A (zh) 控制部件的方法及相关装置
CN118043836A (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