Interface Generation Device Visual Focus Layout Adjustment
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing technologies require heavy development workloads and long development cycles to design and develop graphical user interfaces (GUIs) for different devices with varying screen resolutions, as developers must artificially design visual elements for each device.
Innovation Solution
An interface generation method that automatically adjusts the layout of visual elements on a to-be-generated interface by utilizing visual elements from existing interfaces, thereby quickly generating interfaces with improved layout effects and reduced development cycles.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If developers manually design visual elements for each device, then the interface layout can be optimized for each device, but the development workload increases and the development cycle lengthens
Solution Approach 1:
The patent applies the copying principle by extracting visual elements from an existing reference interface and reusing them in the to-be-generated interface. Instead of manually designing each visual element from scratch, the system copies elements such as buttons, icons, and text components from the reference interface, automatically adapting them to the target device's screen characteristics. This significantly reduces development workload while maintaining interface quality.
Solution Approach 2:
The patent implements parameter changes by automatically adjusting the size, position, and other attributes of visual elements based on the target device's screen resolution and physical characteristics. The system modifies parameters such as element dimensions, spacing, and layout coordinates to optimize the interface for different devices without requiring manual redesign, thus improving both efficiency and adaptability.
2Adaptability or versatility
If visual elements are manually designed for each device resolution, then the interface can be perfectly adapted to each device, but the development time increases
Solution Approach 1:
The patent applies universality by creating a reference interface that serves as a universal template containing all necessary visual elements. This reference interface can be used as the basis for generating interfaces across multiple devices with different resolutions. The system extracts elements from this universal template and adapts them to various target devices, eliminating the need to create separate designs for each device while maintaining high adaptability.
Solution Approach 2:
The patent implements preliminary action by pre-defining the visual elements and their arrangements in a reference interface before actual interface generation. The reference interface contains all necessary visual elements properly organized and configured. When generating interfaces for target devices, the system directly utilizes these pre-prepared elements, significantly reducing the time required for interface development while ensuring consistent quality across different devices.
3Manufacturing precision
If developers create custom interfaces for each device, then the interface quality can be maximized, but the development complexity increases
Solution Approach 1:
The patent applies the extraction principle by separating visual elements from the reference interface and extracting only the necessary components for the target device. The system identifies and extracts relevant visual elements such as buttons, icons, and text, while removing unnecessary elements. This extraction process simplifies the development complexity by working with a subset of elements rather than redesigning the entire interface from scratch.
Data Source
Figure 1a~1d
Figure 2
Figure 3
AI summary
Embodiments of this application provide an interface generation method and a device, where the method is applied to a device having a development function, and may provide a method for automatically adjusting a layout of a visual element on a to-be-generated interface to quickly generate an interface. The method includes: The device obtains a visual element of a reference interface, and obtains configuration information of a display of a target terminal device (501). Then, the device determines a visual focus of the visual element based on attribute information of the visual element (502). The device determines, based on the configuration information of the display, an interface layout template corresponding to the configuration information (503). Finally, the device adjusts, based on the visual focus and the interface layout template, a layout of the visual element on a to-be-generated interface, and generates an interface (504).