Patent Description:
With rapid development of network technologies, intelligent interactive devices such as smartphones, tablet computers, and interactive smart tablets become increasingly popular, bringing great convenience to people's lives, study, and work. As for different devices, resolutions may be different. For example, screen resolution of a smartphone is different from screen resolution of a tablet computer. Therefore, interface layouts of a graphical user interface (graphical user interface, GUI) of a same application are accordingly different on the smartphone and the tablet computer. In an existing technology, designing and developing the GUI of each device needs developers to artificially design a visual element on demand, which requires a relatively heavy development workload, and a relatively long development cycle.

<CIT> relates to generating a user interface. <CIT> relates to display input device, image forming apparatus, display control method, and recording medium.

This application provides an interface generation method and a device, to provide a method for automatically adjusting a layout of a visual element on a to-be-generated interface and quickly generating an interface. In this implementation of this application, the device may automatically adjust the layout of the visual element on the to-be-generated interface by using the visual element of an existing interface to quickly generate the interface. This improves utilization of the visual element and shortens a development cycle.

Based on certain implementations of this application, the device may determine a good visual focus by using the foregoing method. This helps improve an interface generation layout effect.

Based on certain implementations of this application, the device may generate an interface with a good layout effect according to the foregoing method. This improves utilization of the visual element, and shortens the development cycle.

Based on certain implementations of this application, according to the foregoing method, the device may automatically adjust a layout of the visual element on the to-be-generated interface by using a visual element of an interface displayed before screen splitting, to quickly generate the interface. This improves utilization of the visual element, and shortens the development cycle.

According to a second aspect, an implementation of this application further provides an apparatus. The apparatus includes means for performing the method according to any one of the first aspect or the possible designs of the first aspect. These means may be implemented by hardware, or may be implemented by hardware executing corresponding software.

According to a third aspect, an implementation of this application further provides a computer-readable storage medium. The computer-readable storage medium includes a computer program. When the computer program is run on a device, the device is enabled to perform the method according to any one of the first aspect or the possible designs of the first aspect.

These aspects or other aspects of this application are clearer and more comprehensible in the following descriptions of the implementations.

The following describes the technical solutions in implementations of this application with reference to the accompanying drawings in the implementations of this application. The terms "first" and "second" below in the descriptions of the implementations of this application are merely used for a description purpose, and shall not be understood as an indication or implication of relative importance or implicit indication of a quantity of indicated technical features. Therefore, a feature limited by "first" or "second" may explicitly or implicitly include one or more features. In the descriptions of the implementations of this application, unless otherwise stated, "a plurality of" means two or more than two.

For ease of understanding, example descriptions of some concepts related to the implementations of this application are provided for reference.

A visual element refers to image information visible to a user, for example, information such as a button, an image, or a text.

A visual focus refers to a location of a pixel that can attract most attention of the user, and usually refers to important information in the image information, such as a most attractive part of a face and landscape image.

A layout refers to an arrangement mode and a location that are of the visual element, such as a top margin, a left margin, a bottom margin, a right margin, a width, and a height that are of a control.

With popularization of mobile terminal devices such as smartphones and tablet computers, users are gradually accustomed to using application (Application, APP) client software to access the Internet. Currently, major domestic e-commerce companies have their own APP client software. This indicates that usage of the APP client software shows its superiority. However, with continuous development of resolution and screen sizes of the smartphones and tablet computers, the resolution and the screen sizes of devices of different models are different. For example, the resolution and the screen sizes of a smartphone <NUM>, a smart watch <NUM>, a tablet computer <NUM>, and a smart TV <NUM> shown in <FIG> are different. Therefore, if APP client software with a good layout effect on the smartphone <NUM> is directly installed and run on the smart watch <NUM>, a layout effect may be unsatisfactory. For example, an aspect ratio of an interface does not match with the smart watch <NUM>, or a location of a control on the interface is unreasonable.

For the foregoing problem, a common solution in an existing technology is: A user interface (user interface, UI) engineer redraws a set of image resources applicable to the smart watch. A software developer re-modifies code of the APP client software in an integrated development environment (integrated development environment, IDE), and compiles and packages the modified code and the new image resources to implement a good layout of the APP client software of the smart watch. The IDE is an application program used in a program development environment, and usually includes a code editor, a compiler, an adjuster, and a graphical UI tool. For example, Xcode programming software in an iOS system and Android Studio programming software in an Android system are typical IDEs. It can be learned that this solution relies on UI engineers to artificially design the visual element on demand. Consequently, a development workload is relatively heavy, a development cycle is relatively long, and an image resource reuse rate of the APP client software is low.

For a problem of the existing technology, an implementation of this application provides an interface generation method. The method may be applied to a device having a development function. The device first obtains a visual element of a reference interface and an interface layout template of a to-be-generated interface, then determines a visual focus of the visual element based on attribute information of the visual element and configuration information of a display of the device, to determine a layout of the visual element on the to-be-generated interface based on the visual focus and the interface layout template of the to-be-generated interface, and finally generates an interface with a good layout effect. In this implementation of this application, the device may automatically adjust the layout of the visual element on the to-be-generated interface by using the visual element of an existing interface, to quickly generate the interface. This improves utilization of the visual element, and shortens a development cycle.

As shown in <FIG>, an implementation of this application provides a communication system. The communication system includes terminal devices <NUM> and a device <NUM>. The terminal devices <NUM> and the device <NUM> may be directly connected by using a data cable, or may communicate with each other by using a communication network. The device <NUM> is installed with an integrated development environment (integrated development environment, IDE) for compiling and generating software packages of the terminal devices <NUM>.

The communication network may be a local area network, or may be a wide area network for switch over through a relay device or may include a local area network and a wide area network. When the communication network is a local area network, for example, the communication network may be a short-distance communication network such as a Wi-Fi hotspot network, a Wi-Fi direct network, a Bluetooth network, a ZigBee network, or a near field communication (near field communication, NFC) network. For example, when the communication network is a wide area network, for example, the communication network may be a 3rd generation wireless communication technology (3rd generation wireless communication technology, <NUM>) network, a 4th generation mobile communication technology (the 4th generation mobile communication technology, <NUM>) network, a 5th generation mobile communication technology (5th-generation mobile communication technology, <NUM>) network, a future evolved public land mobile network (public land mobile network, PLMN), or the Internet.

Specifically, the device <NUM> may automatically encode and generate the interface of the application by using the foregoing interface generation method, and a developer compiles and packs a software package on the device <NUM>. The terminal device <NUM> obtains a software package from the device <NUM>, and installs the software package locally. When the application is run on the terminal device <NUM>, a display of the terminal device <NUM> displays the interface generated according to the foregoing interface generation method.

In some implementations of this application, the device <NUM> may be a server or cloud server with a compilation function. <FIG> is a block diagram of a partial structure of the device <NUM> related to the implementations of this application. As shown in <FIG>, the device <NUM> may include a processor <NUM>, a memory <NUM>, and a transceiver <NUM>. One or more computer programs are stored in the memory <NUM> and configured to be executed by one or more processors <NUM>.

The processor <NUM> may be a central processing unit (central processing unit, CPU), a digital processing unit, or the like. As a control center of the device <NUM>, the processor <NUM> is connected to all parts of the entire device by using various interfaces and lines, and performs various functions and data processing of the device <NUM> by running or executing the computer programs stored in the memory <NUM> and invoking data stored in the memory <NUM>.

The memory <NUM> is configured to store a to-be-run computer program. If the device <NUM> is a cloud server, the memory <NUM> further stores a compilation result that is obtained from a server with a compilation function and that is generated through compilation by an operating system, where the compilation result includes an application software package of an application program. In addition, if the device <NUM> is a server with a compilation function, the memory <NUM> stores operating system source code and a compilation result generated through compilation by using the operating system source code. The compilation result includes the application software package of the application.

The transceiver <NUM> is configured to send the software package generated by the processor <NUM> to the terminal device <NUM>.

In this implementation of this application, a specific connection medium between the processor <NUM> and the memory <NUM> is not limited. In this implementation of this application, for example, the memory <NUM>, the processor <NUM>, and the transceiver <NUM> are connected by using a bus <NUM> in <FIG>. The bus is represented by using a bold line in <FIG>. A connection manner between other parts is merely an example for description, and is not limited thereto. The bus may be classified into an address bus, a data bus, a control bus, and the like. For ease of representation, only one bold line is used to represent the bus in <FIG>, but this does not mean that there is only one bus or only one type of bus.

The memory <NUM> may be a volatile memory (volatile memory) such as a random access memory (random access memory, RAM). Alternatively, the memory <NUM> may be a non-volatile memory (non-volatile memory) such as a read-only memory, a flash memory (flash memory), a hard disk drive (hard disk drive, HDD), or a solid-state drive (solid-state drive, SSD). Alternatively, the memory <NUM> is any other medium that can be used to carry or store expected program code in a form of an instruction or a data structure and can be accessed by a computer. The memory <NUM> may alternatively be a combination of the foregoing memories.

In some implementations of this application, the terminal device <NUM> may be a portable device, for example, a mobile phone, a tablet computer, or a wearable device (for example, a smart watch) with a wireless communication function. The portable device includes but is not limited to a portable device equipped with iOS®, Android®, Microsoft®, or another operating system. It should be further understood that, in some other implementations, the foregoing device may not be the portable device but a desktop computer.

<FIG> is a schematic diagram of a structure of the terminal device <NUM>.

The terminal device <NUM> may include a processor <NUM>, an external memory interface <NUM>, an internal memory <NUM>, a USB port <NUM>, a charging management module <NUM>, a power management module <NUM>, a battery <NUM>, an antenna <NUM>, an antenna <NUM>, a mobile communication module <NUM>, a wireless communication module <NUM>, an audio module <NUM>, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, a sensor module <NUM>, a key <NUM>, a motor <NUM>, an indicator <NUM>, a camera <NUM>, a display <NUM>, a SIM card interface <NUM>, and the like. The sensor module <NUM> may include a gyroscope sensor 180A, an acceleration sensor 180B, an optical proximity sensor <NUM>, a fingerprint sensor <NUM>, a touch sensor <NUM>, and a rotating shaft sensor <NUM> (where certainly, the terminal device <NUM> may further include another sensor, for example, a temperature sensor, a distance sensor, an ambient light sensor, a barometric pressure sensor, or a bone conduction sensor, which is not shown in the figure).

It may be understood that the structure shown in this implementation of the present disclosure does not constitute a specific limitation on the terminal device <NUM>. In some other implementations of this application, the terminal device <NUM> may include more or fewer parts than those shown in the figure, or combine some parts, or split some parts, or have different component arrangements. The parts shown in the figure may be implemented by hardware, software, or a combination of software and hardware.

The processor <NUM> may include one or more processing units. For example, the processor <NUM> may include an application processor (application processor, AP), a modem processor, a graphics processing unit (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), a controller, a memory, a video codec, a digital signal processor (digital signal processor, DSP), a baseband processor, and/or a neural-network processing unit (Neural-network Processing Unit, NPU). Different processing units may be independent components, or may be integrated into one or more processors. The controller may be a nerve center and a command center of the terminal device <NUM>. The controller may generate an operation control signal based on instruction operation code and a time sequence signal, to complete control of instruction reading and instruction execution.

A memory may be further disposed in the processor <NUM>, and is configured to store instructions and data. In some implementations, the memory in the processor <NUM> is a cache. The memory may store instructions or data used or cyclically used by the processor <NUM>. If the processor <NUM> needs to use the instructions or the data again, the processor may directly invoke the instructions or the data from the memory. This avoids repeated access and reduces waiting time of the processor <NUM>, so that system efficiency is improved. In this implementation of this application, the processor <NUM> may run the software package obtained from the device <NUM>.

The display <NUM> is configured to display an image, a video, and the like. The display <NUM> includes a display panel. The display panel may be a liquid crystal display (liquid crystal display, LCD), an organic light-emitting diode (organic light-emitting diode, OLED), an active-matrix organic light emitting diode (active-matrix organic light emitting diode, AMOLED), a flexible light-emitting diode (flex light-emitting diode, FLED), a Miniled, a MicroLed, a Micro-oLed, quantum dot light emitting diodes (quantum dot light emitting diodes, QLED), or the like. In some implementations, the terminal device <NUM> may include one or N displays <NUM>, where N is a positive integer greater than <NUM>.

The camera <NUM> (a front-facing camera, a rear-facing camera, or a camera that may serve as both a front-facing camera and a rear-facing camera) is configured to capture a static image or a video. Usually, the camera <NUM> may include photosensitive elements such as a lens group and an image sensor. The lens group includes a plurality of lenses (convex lenses or concave lenses), and is configured to: collect an optical signal reflected by a to-be-photographed object, and transfer the collected optical signal to the image sensor. The image sensor generates an original image of the to-be-photographed object based on the optical signal.

The internal memory <NUM> may be configured to store computer-executable program code. The executable program code includes instructions. The processor <NUM> runs the instructions stored in the internal memory <NUM>, to perform various function applications and data processing of the terminal device <NUM>. The internal memory <NUM> may include a program storage area and a data storage area. The program storage area may store code of an operating system, an application (for example, a camera application or a WeChat application), and the like. The data storage area may store data (for example, an image or a video collected by the camera application) created during use of the terminal device <NUM> and the like.

In addition, the internal memory <NUM> may include a high-speed random access memory, and may further include a non-volatile memory, for example, at least one magnetic disk storage device, a flash memory device, or a universal flash storage (universal flash storage, UFS).

The following describes functions of the sensor module <NUM>.

The gyroscope sensor 180A (or a gyroscope for short) is a main component of the IMU, and may be configured to determine a motion posture of the terminal device <NUM>. In some implementations, angular velocities of the terminal device <NUM> around three axes (namely, x, y, and z axes) may be determined by using the gyroscope sensor 180A.

The acceleration sensor 180B (or an accelerometer for short) is a main component of the IMU, and may be configured to detect values of accelerations of the terminal device <NUM> in all directions (usually on three axes). In other words, the acceleration sensor 180B may be configured to detect a current motion status of the terminal device <NUM>, for example, shaking or stationary.

The optical proximity sensor <NUM> may include, for example, a light-emitting diode (LED) and an optical detector such as a photodiode. The light-emitting diode may be an infrared light-emitting diode. The terminal device emits infrared light outwards by using the light-emitting diode. The terminal device detects infrared reflected light from a nearby object by using the photodiode. When plenty of reflected light is detected, the terminal device may determine that there is an object near the terminal device. When inadequate reflected light is detected, the terminal device may determine that there is no object near the terminal device.

The gyroscope sensor 180A (or the acceleration sensor 180B) may send detected motion status information (for example, the angular velocity) to the processor <NUM>. The processor <NUM> determines, based on the motion status information, whether the terminal device is currently in a handheld state or a tripod state (for example, when the angular velocity is not <NUM>, it indicates that the terminal device <NUM> is in the handheld state).

The fingerprint sensor <NUM> is configured to collect a fingerprint. The terminal device <NUM> may use a feature of the collected fingerprint to implement fingerprint-based unlocking, application lock access, fingerprint-based photographing, fingerprint-based call answering, and the like.

The touch sensor <NUM> is also referred to as a "touch panel". The touch sensor <NUM> may be disposed on the display <NUM>, and the touch sensor <NUM> and the display <NUM> form a touchscreen, which is also referred to as a "touch control screen". The touch sensor <NUM> is configured to detect a touch operation performed on or near the touch sensor <NUM>. The touch sensor may transfer the detected touch operation to the application processor, to determine a type of a touch event. A visual output related to the touch operation may be provided on the display <NUM>. In some other implementations, the touch sensor <NUM> may alternatively be disposed on a surface of the terminal device <NUM>, and at a location different from that of the display <NUM>.

For example, the display <NUM> of the terminal device <NUM> displays a home screen, and the home screen includes icons of a plurality of applications (for example, a camera application and WeChat). The user taps an icon of a sweeping robot application on the home screen by using the touch sensor <NUM> to trigger the processor <NUM> to start the sweeping robot application and open a sweeping map. The display <NUM> displays an interface of the sweeping robot application, such as a sweeping map interface.

A wireless communication function of the terminal device <NUM> may be implemented by using the antenna <NUM>, the antenna <NUM>, the mobile communication module <NUM>, the wireless communication module <NUM>, the modem processor, the baseband processor, and the like.

The antenna <NUM> and the antenna <NUM> are configured to transmit and receive electromagnetic wave signals. Each antenna in the terminal device <NUM> may be configured to cover a single or more communication bands. Different antennas may be further multiplexed, to improve antenna utilization. For example, the antenna <NUM> may be multiplexed as a diversity antenna in a wireless local area network. In some other implementations, the antenna may be used in combination with a tuning switch.

The mobile communication module <NUM> can provide a wireless communication solution that is applied to the terminal device <NUM>, and that includes <NUM>/<NUM>/<NUM>/<NUM> and the like. The mobile communication module <NUM> may include at least one filter, a switch, a power amplifier, a low noise amplifier (low noise amplifier, LNA), and the like. The mobile communication module <NUM> may receive an electromagnetic wave through the antenna <NUM>, perform processing such as filtering and amplification on the received electromagnetic wave, and transmit the electromagnetic wave to the modem processor for demodulation. The mobile communication module <NUM> may further amplify a signal modulated by the modem processor, and convert the signal into an electromagnetic wave for radiation through the antenna <NUM>. In some implementations, at least some functional modules of the mobile communication module <NUM> may be disposed in the processor <NUM>. In some implementations, at least some functional modules of the mobile communication module <NUM> and at least some modules of the processor <NUM> may be disposed in a same device.

The modem processor may include a modulator and a demodulator. The modulator is configured to modulate a to-be-sent low-frequency baseband signal into a medium/high-frequency signal. The demodulator is configured to demodulate a received electromagnetic wave signal into a low-frequency baseband signal. Then, the demodulator transmits the low-frequency baseband signal obtained through demodulation to the baseband processor for processing. The low-frequency baseband signal is processed by the baseband processor, and then transmitted to the application processor. The application processor outputs a sound signal by using an audio device (which is not limited to the speaker 170A, the receiver 170B, or the like), or displays an image or a video on the display <NUM>. In some implementations, the modem processor may be an independent component. In some other implementations, the modem processor may be independent of the processor <NUM>, and is disposed in a same device as the mobile communication module <NUM> or another functional module.

The wireless communication module <NUM> may provide a solution that is applied to the terminal device <NUM> and that includes wireless communication such as a wireless local area network (wireless local area network, WLAN) (for example, a wireless fidelity (wireless fidelity, Wi-Fi) network), Bluetooth (Bluetooth, BT), a global navigation satellite system (global navigation satellite system, GNSS), frequency modulation (frequency modulation, FM), a near field communication (near field communication, NFC) technology, and an infrared (infrared, IR) technology. The wireless communication module <NUM> may be one or more components integrating at least one communication processing module. The wireless communication module <NUM> receives an electromagnetic wave through the antenna <NUM>, performs frequency modulation and filtering processing on an electromagnetic wave signal, and sends a processed signal to the processor <NUM>. The wireless communication module <NUM> may further receive a to-be-sent signal from the processor <NUM>, perform frequency modulation and amplification on the signal, and convert the signal into an electromagnetic wave for radiation through the antenna <NUM>.

The terminal device <NUM> may implement an audio function by using the audio module <NUM>, the speaker 170A, the receiver 170B, the microphone 170C, the headset jack 170D, the application processor, and the like, for example, music playing and recording. The terminal device <NUM> may receive an input of the key <NUM>, and generate a key signal input related to user setting and function control of the terminal device <NUM>. The terminal device <NUM> may generate a vibration prompt (for example, an incoming call vibration prompt) by using the motor <NUM>. The indicator <NUM> in the terminal device <NUM> may be an indicator light, and may be configured to indicate a charging status and a power change, and may further be configured to indicate a message, a missed call, a notification, and the like. The SIM card interface <NUM> in the terminal device <NUM> is configured to connect to a SIM card. The SIM card may be inserted into the SIM card interface <NUM> or removed from the SIM card interface <NUM>, to implement contact with or separation from the terminal device <NUM>.

It should be understood that, in actual application, the terminal device <NUM> may include more or fewer parts than those shown in <FIG>. This is not limited in the implementations of this application.

<FIG> is a schematic flowchart of an interface generation method according to an implementation of this application. The method may be performed by the device <NUM>. More specifically, refer to <FIG>. The processor <NUM> in the device <NUM> may invoke a computer program stored in the memory <NUM> to perform the method in combination with the transceiver <NUM>. Specific steps are as follows.

Step <NUM>: The processor <NUM> in the device <NUM> may obtain a visual element of a reference interface by using the transceiver <NUM>, and obtain configuration information of a display of a target terminal device.

A visual element of a reference interface of an application program may come from the target terminal device, or may come from another terminal device. The visual element refers to an interface display object of the reference interface. The configuration information of the display of the target terminal device includes a screen size, screen resolution, whether a touch function is supported, whether full-screen display is performed, and the like.

Step <NUM>: The processor <NUM> in the device <NUM> determines a visual focus of the visual element based on attribute information of the visual element.

Specifically, the attribute information of the visual element refers to information such as a size, a center point, resolution, and a color of the visual element. The memory <NUM> in the device <NUM> may prestore a visual focus library. The visual focus library stores a correspondence between an image recognition result and the visual focus, a correspondence between a color of the visual element and the visual focus, and a correspondence between an image type of the visual element and the visual focus. Further, the processor <NUM> in the device <NUM> may match at least one that is obtained and of the image recognition result of the visual element, the color of the visual element, and the image type of the visual element with information in the visual focus library stored in the memory <NUM>, and determine at least one reference visual focus. Finally, the processor <NUM> in the device aggregates reference visual focuses, and calculates that a location with a largest probability is the obtained visual focus of the visual element.

Step <NUM>: The processor <NUM> in the device <NUM> determines, based on the obtained configuration information of the display, an interface layout template corresponding to the configuration information.

Specifically, different displays correspond to different interface layout templates. The interface layout template includes at least one of the following content: an interface display framework, a default layout parameter, and a control response manner. The interface display frame includes a location, a size, an arrangement manner, and the like of a to-be-displayed object. The to-be-displayed object may be an image resource, a control, or the like.

In a possible implementation, the memory <NUM> in the device <NUM> may prestore arrangement manner templates, location templates, alignment manner templates, and control location templates that are corresponding to different configuration information. The processor <NUM> in the device <NUM> aggregates these types of templates, and finally generates an interface layout template of a to-be-generated interface. As shown in FIG. 6a, the arrangement manner template may have three types: a horizontal arrangement manner (as shown in a in <FIG>), a vertical arrangement manner (as shown in b in <FIG>), and an overlapping arrangement manner (as shown in c in <FIG>). The location template may be shown in <FIG>. In a spatial coordinate system, the interface is divided into a plurality of areas, such as a title bar, an operation bar, a menu bar, a bottom operation, and a content area. As shown in FIG. 6c, the alignment manner template may include straight line alignment (as shown in a in <FIG>), curve alignment (as shown in b in <FIG>), and overlapping manner alignment (as shown in c in <FIG>). As shown in FIG. 6d, the control location template may have two types: a rectangular box distribution manner (as shown in a in <FIG>) and a circular box distribution manner (as shown in b in <FIG>).

Step <NUM>: The processor <NUM> in the device <NUM> adjusts, based on the visual focus obtained in step <NUM> and the interface layout template obtained in step <NUM>, a layout of the visual element obtained in step <NUM> on the to-be-generated interface, and generates an interface.

Specifically, the processor <NUM> in the device <NUM> may adjust, based on the interface layout template obtained in step <NUM>, a location of the visual element obtained in step <NUM> on the to-be-generated interface, and adjust a location of the control on the to-be-generated interface. Then, the processor <NUM> in the device <NUM> crops and/or scales the visual element obtained in step <NUM> by using the visual focus obtained in step <NUM> as a central point of the to-be-generated interface, and adjust a size of the control.

It can be learned from the foregoing descriptions that, the interface generation method provided in this implementation of this application can reduce development difficulty of an application interface, improve development efficiency, and reduce development costs.

In a possible implementation, the visual focus may be user-defined, or may be determined through image recognition, for example, an element such as a face and a clear object on the interface. In another possible implementation, the visual focus may be alternatively obtained by using a visual focus algorithm fusion. Specifically, the device <NUM> may determine a center point of a reference interface including the visual element as a first reference visual focus; perform image content recognition on the visual element, and determine a second reference visual focus corresponding to an image content recognition result; and determine a third reference visual focus corresponding to at least one of color information and a picture type that are of the visual element. Then, the device <NUM> aggregates the first reference visual focus, the second reference visual focus, and the third reference visual focus to obtain the visual focus of the visual element.

In a possible implementation, if a display mode of the to-be-generated interface is a screen splitting mode, and the target terminal device supports a screen splitting function, the device <NUM> may separately obtain a first visual element of a reference interface of a first application and a second visual element of a reference interface of a second application. Then, the device <NUM> determines a first visual focus of a first to-be-generated interface of the first application based on attribute information of the first visual element, and determines a second visual focus of a second to-be-generated interface of the second application based on attribute information of the second visual element. The device <NUM> determines, based on the configuration information of the display of the target terminal device and the screen splitting mode, the interface layout template of the to-be-generated interface in the screen splitting mode, and finally adjusts, based on the interface layout template of the to-be-generated interface in the screen splitting mode and the first visual focus, a layout of the first visual element on the first to-be-generated interface and generates an interface of the first application. The device <NUM> adjusts, based on the interface layout template of the to-be-generated interface in the split-screen mode and the second visual focus, a layout of the second visual element on the second to-be-generated interface, and generates an interface of the second application.

With reference to the accompanying drawings and specific application scenarios, the following describes the interface generation method provided in this implementation of this application by using examples. It is assumed that the memory <NUM> in the device <NUM> prestores a visual element of a reference interface shown in <FIG>, the reference interface is a reference interface of a magazine lock screen application, and the visual element of the reference interface is an image. Generally, the visual element has a relatively large size and relatively high resolution, to adapt to another terminal device.

The device <NUM> obtains a configuration parameter of the display of the smartphone <NUM> in <FIG>, for example, an aspect ratio or resolution of the display of the smartphone <NUM>. Then, the device <NUM> obtains an interface layout template corresponding to the configuration parameter. Specifically, the device <NUM> may obtain an arrangement manner template, a location template, an alignment manner template, a control location template, and the like that are corresponding to the configuration parameter, and finally generate an interface layout template shown in <FIG>. The device determines a visual focus (where the visual focus is an arrow location shown in <FIG>) of the visual element based on a color, a picture type, and an image recognition result of the visual element shown in <FIG>. Then, the device <NUM> crops and scales the visual element by using the visual focus as a center point of a to-be-generated interface, adjusts a layout of the visual element on the to-be-generated interface based on the interface layout template, and finally generates an interface shown in <FIG>.

The device <NUM> obtains a configuration parameter of the display of the smart watch <NUM> in a in <FIG>, for example, an aspect ratio or resolution of the display of the smart watch <NUM>. Then, the device <NUM> obtains an interface layout template corresponding to the configuration parameter. Specifically, the device <NUM> may obtain an arrangement manner template, a location template, an alignment manner template, a control location template, and the like that are corresponding to the configuration parameter, and finally generate an interface layout template shown in b in <FIG>. The device determines a visual focus (where the visual focus is an arrow location shown in <FIG>) of the visual element based on a color, a picture type, and an image recognition result of the visual element shown in <FIG>. Then, the device crops and scales the visual element by using the visual focus as a center point of a to-be-generated interface, adjusts a layout of the visual element on the to-be-generated interface based on the interface layout template shown in b in <FIG>, and finally generates an interface shown in c in <FIG>.

The device <NUM> obtains a configuration parameter of the display of the smart watch <NUM> in a in <FIG>, for example, an aspect ratio or resolution of the display of the smart watch <NUM>. Then, the device <NUM> obtains an interface layout template corresponding to the configuration parameter. Specifically, the device <NUM> may obtain an arrangement manner template, a location template, an alignment manner template, a control location template, and the like that are corresponding to the configuration parameter, and finally generate an interface layout template shown in b in <FIG>. The device <NUM> determines a visual focus (where the visual focus is an arrow location shown in <FIG>) of the visual element based on a color, a picture type, and an image recognition result of the visual element shown in <FIG>. Then, the device <NUM> crops and scales the visual element by using the visual focus as a center point of a to-be-generated interface, adjusts a layout of the visual element on the to-be-generated interface based on the interface layout template shown in b in <FIG>, and finally generates an interface shown in c in <FIG>.

The device <NUM> obtains a configuration parameter of the display of the tablet computer <NUM> in a in <FIG>, for example, an aspect ratio or resolution of the display of the tablet computer <NUM>. Then, the device <NUM> obtains an interface layout template corresponding to the configuration parameter. Specifically, the device <NUM> may obtain an arrangement manner template, a location template, an alignment manner template, a control location template, and the like that are corresponding to the configuration parameter, and finally generate an interface layout template shown in b in <FIG>. The device determines a visual focus (where the visual focus is an arrow location shown in <FIG>) of the visual element based on a color, a picture type, and an image recognition result of the visual element shown in <FIG>. Then, the device <NUM> crops and scales the visual element by using the visual focus as a center point of a to-be-generated interface, adjusts a layout of the visual element on the to-be-generated interface based on the interface layout template shown in b in <FIG>, and finally generates an interface shown in c in <FIG>.

The device <NUM> obtains a configuration parameter of the display of the smart TV <NUM> in a in <FIG>, for example, an aspect ratio or resolution of the display of the smart TV <NUM>. Then, the device <NUM> obtains an interface layout template corresponding to the configuration parameter. Specifically, the device <NUM> may obtain an arrangement manner template, a location template, an alignment manner template, a control location template, and the like that are corresponding to the configuration parameter, and finally generate an interface layout template shown in b in <FIG>. The device <NUM> determines a visual focus (where the visual focus is an arrow location shown in <FIG>) of the visual element based on a color, a picture type, and an image recognition result of the visual element shown in <FIG>. Then, the device <NUM> crops and scales the visual element by using the visual focus as a center point of a to-be-generated interface, adjusts a layout of the visual element on the to-be-generated interface based on the interface layout template shown in b in <FIG>, and finally generates an interface shown in c in <FIG>.

It is assumed that the smartphone <NUM> supports folding, for example, the smartphone <NUM> may be expanded from a first included angle to a second included angle. The included angle refers to an included angle between two screens of a foldable touchscreen. When a to-be-generated interface is an interface in a fully expanded state shown in c in <FIG>, the device <NUM> obtains a configuration parameter of the display of the smartphone <NUM> in a in <FIG>, for example, an aspect ratio, resolution, or a folding angle of the display of the smartphone <NUM>. Then, the device <NUM> obtains an interface layout template corresponding to the configuration parameter. Specifically, the device <NUM> may obtain an arrangement manner template, a location template, an alignment manner template, a control location template, and the like that are corresponding to the configuration parameter, and finally generate an interface layout template shown in b in <FIG>.

The device <NUM> determines a visual focus (where the visual focus is an arrow location shown in <FIG>) of the visual element based on a color, a picture type, and an image recognition result of the visual element shown in <FIG>. Then, the device <NUM> crops and scales the visual element by using the visual focus as a center point of the to-be-generated interface, adjusts a layout of the visual element on the to-be-generated interface based on the interface layout template shown in b in <FIG>, and finally generates an interface shown in c in <FIG>.

It is assumed that the smartphone <NUM> supports screen splitting. For example, screen splitting is performed on the smartphone <NUM>. After screen splitting, an upper half part is an interface of a gallery application, and a lower half part is an interface of a WeChat application. When a to-be-generated interface is an interface in a split-screen state shown in <FIG>, the device <NUM> obtains a configuration parameter of the display of the smartphone <NUM> in <FIG>, for example, an aspect ratio, resolution, or a split-screen state of the display of the smartphone <NUM>. Then, the device <NUM> obtains an interface layout template corresponding to the configuration parameter. Specifically, the device <NUM> may obtain an arrangement manner template, a location template, an alignment manner template, a control location template, and the like that are corresponding to the configuration parameter, and finally generate an interface layout template shown in <FIG>.

The device <NUM> determines a visual focus (where the visual focus is an arrow location shown in <FIG>) of the visual element based on a color, a picture type, and an image recognition result of the visual element shown in <FIG>. Then, the device <NUM> crops and scales the visual element by using the visual focus as a center point of a to-be-generated interface, adjusts a layout of the visual element on the to-be-generated interface based on the interface layout template shown in <FIG>, and finally generates an interface shown in <FIG>.

For another example, a magazine lock screen interface of the smart TV is shown in <FIG>. The device <NUM> obtains a visual element of a reference interface shown in <FIG>, and generates, according to the foregoing interface generation method, a magazine lock screen interface <NUM> of the smartphone shown in <FIG> and a magazine lock screen interface <NUM> of the smart watch shown in <FIG> by using the visual element.

In some other implementations of this application, the implementations of this application disclose a device having a development function. As shown in <FIG>, the device may include a touchscreen <NUM>, where the touchscreen <NUM> includes a touch panel <NUM> and a display <NUM>, one or more processors <NUM>, a memory <NUM>, one or more applications (not shown), and one or more computer programs <NUM>. The foregoing components may be connected by using one or more communication buses <NUM>. The one or more computer programs <NUM> are stored in the memory <NUM> and configured to be executed by the one or more processors <NUM>. The one or more computer programs <NUM> include instructions, and the instructions may be used to perform the steps in the corresponding implementation in <FIG>.

An implementation of this application further provides a computer storage medium. The computer storage medium stores computer instructions. When the computer instructions are run on the device, the device is enabled to perform the related method steps to implement the interface generation method in the foregoing implementations.

An implementation of this application further provides a computer program product. When the computer program product is run on a computer, the computer is enabled to perform the foregoing related steps, to implement the interface generation method in the foregoing implementations.

In addition, an implementation of this application further provides an apparatus. The apparatus may be specifically a chip, a component, or a module. The apparatus may include a processor and a memory that are connected. The memory is configured to store computer execution instructions. When the apparatus runs, the processor may execute the computer execution instructions stored in the memory, to enable the chip to perform the interface generation method in the foregoing method implementations.

The device, the computer storage medium, the computer program product, or the chip provided in the implementations of this application is configured to perform the corresponding method provided above. Therefore, for beneficial effects that can be achieved, refer to the beneficial effects in the corresponding method provided above.

Based on the foregoing descriptions of the implementations, a person skilled in the art may understand that for the purpose of convenient and brief descriptions, division into the foregoing functional modules is merely used as an example for description. In actual application, the foregoing functions can be allocated to different functional modules for implementation based on a requirement, that is, an inner structure of an apparatus is divided into different functional modules to implement all or some of the functions described above.

In the several implementations provided in this application, it should be understood that the disclosed apparatus and method may be implemented in other manners. For example, the described apparatus implementation is merely an example. For example, division into the modules or units is merely logical function division and may be other division in actual implementation. For example, a plurality of units or components may be combined or integrated into another apparatus, or some features may be ignored or not performed. In addition, the displayed or discussed mutual couplings or direct couplings or communication connections may be implemented through some interfaces. The indirect couplings or communication connections between the apparatuses or units may be implemented in electrical, mechanical, or another form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may be one or more physical units, may be located in one place, or may be distributed on different places. Some or all of the units may be selected based on an actual requirement to achieve an objective of the solutions of the implementations.

In addition, functional units in the implementations of this application may be integrated into one processing unit, or each of the units may exist alone physically, or two or more units may be integrated into one unit.

When the integrated unit is implemented in a form of a software function unit and sold or used as an independent product, the integrated unit may be stored in a readable storage medium. Based on such an understanding, the technical solutions of this application essentially, or the part contributing to the prior art, or all or some of the technical solutions may be implemented in the form of a software product. The software product is stored in a storage medium and includes several instructions for instructing a device (which may be a single-chip microcomputer, a chip or the like) or a processor (processor) to perform all or some of the steps of the methods described in the implementations of this application. The foregoing storage medium includes any medium that can store program code, such as a USB flash drive, a removable hard disk, a read only memory (read only memory, ROM), a random access memory (random-access memory, RAM), a magnetic disk, or an optical disc.

Claim 1:
An interface generation method, applied to a device having a development function, wherein the method comprises:
obtaining (<NUM>) a visual element of a reference interface, and determining a visual focus of the visual element based on attribute information of the visual element, wherein the attribute information of the visual element comprises information including a size, a center point, a resolution, and a color of the visual element;
obtaining (<NUM>) configuration information of a display of a target terminal device, and determining (<NUM>), based on the configuration information of the display, an interface layout template corresponding to the configuration information; and
adjusting (<NUM>), based on the visual focus and the interface layout template, a layout of the visual element on a to-be-generated interface, and generating an interface;
wherein the determining a visual focus of the visual element based on attribute information of the visual element comprises: determining a first reference visual focus, wherein the first reference visual focus is a center point of the reference interface; determining a second reference visual focus corresponding to an image content recognition result; and determining a third reference visual focus corresponding to at least one of color information of the visual element and a picture type of the visual element; and aggregating the first reference visual focus, the second reference visual focus, and the third reference visual focus to obtain the visual focus of the visual element;
wherein a visual focus library is stored in the device, wherein the visual focus library stores a correspondence between the image recognition result and the visual focus, a correspondence between the color of the visual element and the visual focus, and a correspondence between the image type of the visual element and the visual focus, and the determining a visual focus of the visual element based on attribute information of the visual element specifically comprises: determining the first reference visual focus, the second reference visual focus and the third reference visual focus based on the respective correspondences in the visual focus library;
wherein the interface layout template includes an interface display framework that includes at least a location, a size, and an arrangement manner of one or more to-be-displayed objects.