Interface layout adaptation method and device, terminal and storage medium
By using the trained interface adaptation model, the user interface is automatically adjusted and adapted to adapt to different screen sizes and resolutions, the problem of manual adaptation in the prior art is solved, and efficient and accurate interface adaptation is achieved.
Patent Information
- Application Number
- CN202411576407.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-06
- Publication Date
- 2025-03-07
AI Technical Summary
In the prior art, manual adaptation and adjustment of user interfaces is required for different screen sizes and resolutions, which are inefficient and error-prone.
The trained interface adaptation model is used to obtain the screen size and resolution of the target platform, and preprocess this information and the user interface layout information to be adjusted, and input it into the model to generate the target user interface layout information.
It realizes automatic adjustment and adaptation of the user interface, improves adaptation efficiency and accuracy, and does not require manual adjustment or writing additional adaptation code, reducing development costs and time costs.
Smart Images
Figure CN119576322A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of user interface technology, and in particular to an interface layout adaptation method, device, terminal and storage medium. Background Art
[0002] With the rapid development of mobile Internet, the screen sizes and resolutions of different devices and platforms vary, which brings great challenges to the design of user interfaces. In order to ensure the best user interface layout on different platforms, designers need to adapt and adjust for different screen sizes and resolutions. However, this manual adaptation and adjustment method is not only inefficient, but also prone to errors.
[0003] Therefore, the prior art has defects and needs to be improved and developed. Summary of the invention
[0004] The present application provides an interface layout adaptation method, device, terminal and storage medium to solve the technical problem in the related art that manual adaptation and adjustment of the user interface is required for different screen sizes and resolutions.
[0005] To achieve the above objectives, this application adopts the following technical solutions:
[0006] A method for adapting an interface layout, wherein the method comprises:
[0007] Obtaining the screen size and screen resolution of the target platform, and inputting the screen size and screen resolution and the user interface layout information to be adjusted into the trained interface adaptation model to obtain the target user interface layout information;
[0008] Generate a target user interface based on the target user interface layout information, and apply the target user interface to the target platform;
[0009] The interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform.
[0010] According to the above-mentioned technical means, the embodiment of the present application utilizes the trained interface adaptation model to automatically adjust the user interface layout information to be adjusted according to the screen size and screen resolution of the target platform, and then applies it to the target platform without the need for manual adjustment by the developer, thereby improving the adaptation efficiency and accuracy of the user interface.
[0011] In one embodiment of the present application, the screen size and screen resolution of the target platform are obtained, and the screen size and screen resolution and the user interface layout information to be adjusted are input into the trained interface adaptation model to obtain the target user interface layout information, including:
[0012] Obtaining the screen size and screen resolution of the target platform, normalizing the screen size and screen resolution of the target platform, and converting the user interface layout information to be adjusted into an image, a vector, or a tensor;
[0013] The normalized screen size and screen resolution and the converted user interface layout information are input into the trained interface adaptation model to obtain the target user interface layout information.
[0014] According to the above technical means, the embodiment of the present application converts the screen size and screen resolution to the same scale through normalization processing, eliminates the difference in the numerical range between different devices, and enables the model to process screens of various sizes and resolutions more fairly and accurately; the normalized data helps the adaptation model to be better generalized to new devices with different sizes and resolutions, improving the versatility and adaptability of the model; normalization can also reduce errors in numerical calculations, improve the stability of model training and prediction, and thus ensure the accuracy and reliability of user interface layout adaptation. That is, by preprocessing the screen size and screen resolution of the target platform and the user interface layout information to be adjusted, and inputting them into the trained interface adaptation model, the target user interface layout information can be obtained quickly and accurately without manual adjustment or writing additional adaptation code, thereby improving the adaptation efficiency, reducing the workload of developers to test and adapt multiple devices and screen sizes one by one, and reducing development costs and time costs.
[0015] In one embodiment of the present application, the user interface layout information includes component positions, component sizes, and spacing between components of the user interface components.
[0016] According to the above technical means, the embodiment of the present application can clearly understand the position, size and spacing relationship of each component on the interface through layout information description, thereby conveniently realizing the layout design of the user interface.
[0017] In one embodiment of the present application, the training step of the interface adaptation model includes:
[0018] Obtain the pre-collected screen size, screen resolution and user interface layout information corresponding to several platforms and construct a data set;
[0019] determining a training set in the data set;
[0020] Normalizing the screen size and screen resolution in the training set, and converting the user interface layout information in the training set into an image, a vector or a tensor to obtain preprocessed data;
[0021] A pre-constructed initial interface adaptation model is obtained, and the initial interface adaptation model is trained based on the pre-processed data to obtain a trained interface adaptation model.
[0022] According to the above technical means, the embodiment of the present application can construct a diverse and representative data set by collecting screen size, screen resolution and user interface layout information corresponding to several platforms, which helps the model learn the layout features under different devices and screen sizes, thereby improving the generalization ability of the model and enabling it to better adapt to unknown devices and screen sizes; determining the training set in the data set can clarify the goal and scope of model training, and can avoid introducing irrelevant or redundant data during the training process, thereby improving training efficiency and effect; by selecting a suitable training set, it can ensure that the model learns the most important features and laws during the training process, thereby optimizing the performance of the model and enabling it to better adapt to the layout requirements under different devices and screen sizes. In addition, normalizing the screen size and screen resolution, and converting the user interface layout information into images, vectors or tensors can improve the quality and consistency of the data, and help the model capture and learn layout features more accurately during the training process; preprocessing data can simplify the complexity of model training and improve the training speed. By converting the data into a format suitable for model processing, the amount of calculation and memory consumption of the model during the training process can be reduced, thereby accelerating the training process. The trained interface adaptation model can quickly complete the adaptation of the user interface layout without manual intervention or writing additional adaptation code. This greatly improves the adaptation efficiency and effect and reduces development costs and time costs. That is, the embodiment of the present application trains the initial interface adaptation model to more effectively achieve automatic adaptation of the cross-platform user interface.
[0023] In one embodiment of the present application, after obtaining the pre-collected screen size, screen resolution and user interface layout information corresponding to several platforms and constructing the data set, the following is further included:
[0024] A validation set and a test set are determined in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained interface adaptation model.
[0025] According to the above-mentioned technical means, the embodiment of the present application can monitor the performance of the model on unseen data (i.e., validation set) during the training process by dividing the data set into a training set, a validation set, and a test set, which helps to promptly discover whether the model begins to overfit the training data, i.e., the model performs well on the training data but the generalization ability on the new data decreases. The validation set provides an independent data set for adjusting the hyperparameters of the model (such as learning rate, batch size, number of network layers, number of neurons, etc.), and by training the model under different hyperparameter configurations and evaluating its performance on the validation set, the best hyperparameter combination can be found, thereby improving the generalization ability of the model. By comparing the performance of the model on the test set with the performance on the training set and the validation set, it can be determined whether the generalization ability of the model is strong enough, and whether the model needs to be further adjusted or optimized. That is, the embodiment of the present application determines the validation set and the test set, and uses them respectively to adjust the hyperparameters of the model and evaluate the performance of the trained interface adaptation model, which can more effectively train and optimize the model and improve the generalization ability and credibility of the model.
[0026] In one embodiment of the present application, the initial interface adaptation model is constructed based on a convolutional neural network, a recurrent neural network or a Transformer model.
[0027] According to the above-mentioned technical means, the embodiment of the present application constructs an initial interface adaptation model based on a convolutional neural network, a recurrent neural network or a Transformer model, thereby realizing automatic adaptation of a cross-platform user interface.
[0028] In one embodiment of the present application, applying the target user interface to the target platform includes:
[0029] The target user interface is integrated tested and deployed on the target platform.
[0030] According to the above-mentioned technical means, the embodiment of the present application can ensure that the target user interface can run normally on the target platform through integration testing, and there will be no problems such as crashes and freezes. The optimized user interface is more in line with the user's usage habits and needs, and improves user satisfaction and loyalty. Integration testing is performed before deployment to timely discover and fix potential problems, reducing the risk of problems in the production environment. The monitoring and feedback mechanism can timely discover and handle problems encountered by users during use, avoiding the expansion and deterioration of the problems. By continuously optimizing the user interface and performance, maintenance costs can be reduced and the stability of the system can be improved.
[0031] The present application also provides an interface layout adaptation device, wherein the device comprises:
[0032] An input module, used to obtain the screen size and screen resolution of the target platform, and input the screen size and screen resolution and the user interface layout information to be adjusted into the trained interface adaptation model to obtain the target user interface layout information;
[0033] An application module, configured to generate a target user interface based on the target user interface layout information, and apply the target user interface to the target platform;
[0034] The interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform.
[0035] In one embodiment of the present application, the input module includes:
[0036] Obtaining the screen size and screen resolution of the target platform, normalizing the screen size and screen resolution of the target platform, and converting the user interface layout information to be adjusted into an image, a vector, or a tensor;
[0037] The normalized screen size and screen resolution and the converted user interface layout information are input into the trained interface adaptation model to obtain the target user interface layout information.
[0038] In one embodiment of the present application, the user interface layout information includes component positions, component sizes, and spacing between components of the user interface components.
[0039] In one embodiment of the present application, the interface layout adaptation device further includes:
[0040] A data set construction module is used to obtain the screen size, screen resolution and user interface layout information corresponding to several platforms collected in advance to construct a data set;
[0041] A first determination module, used to determine a training set in the data set;
[0042] A preprocessing module, used for normalizing the screen size and screen resolution in the training set, and converting the user interface layout information in the training set into an image, a vector or a tensor to obtain preprocessed data;
[0043] The training module is used to obtain a pre-built initial interface adaptation model, train the initial interface adaptation model based on the pre-processed data, and obtain a trained interface adaptation model.
[0044] In one embodiment of the present application, the interface layout adaptation device further includes:
[0045] The second determination module is used to determine a validation set and a test set in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained interface adaptation model.
[0046] In one embodiment of the present application, the initial interface adaptation model is constructed based on a convolutional neural network, a recurrent neural network or a Transformer model.
[0047] In one embodiment of the present application, the application module is further used to perform integration testing and deployment on the target user interface on the target platform.
[0048] The present application also provides a terminal, which includes: a memory, a processor, and an interface layout adaptation program stored in the memory and executable on the processor, wherein the interface layout adaptation program implements the steps of the interface layout adaptation method described above when executed by the processor.
[0049] The present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and the computer program can be executed to implement the steps of the interface layout adaptation method as described above.
[0050] The present invention achieves the following beneficial effects:
[0051] (1) The embodiment of the present application utilizes a trained interface adaptation model to automatically adjust the user interface layout information to be adjusted according to the screen size and screen resolution of the target platform, and then applies it to the target platform without the need for manual adjustment by the developer, thereby improving the adaptation efficiency and accuracy of the user interface.
[0052] (2) The embodiment of the present application pre-processes the screen size and screen resolution of the target platform and the user interface layout information to be adjusted, and inputs them into the trained interface adaptation model, so as to quickly and accurately obtain the target user interface layout information without manual adjustment or writing additional adaptation code, thereby improving the adaptation efficiency, reducing the workload of developers to test and adapt multiple devices and screen sizes one by one, and reducing development costs and time costs.
[0053] (3) The embodiment of the present application trains the initial interface adaptation model to more effectively achieve automatic adaptation of the cross-platform user interface.
[0054] (4) The embodiment of the present application determines a validation set and a test set, and uses them to adjust the hyperparameters of the model and evaluate the performance of the trained interface adaptation model, respectively, so as to more effectively train and optimize the model and improve the generalization ability and credibility of the model. BRIEF DESCRIPTION OF THE DRAWINGS
[0055] Figure 1 It is a flow chart of a preferred embodiment of the interface layout adaptation method in the present invention.
[0056] Figure 2 It is a functional principle block diagram of a preferred embodiment of the interface layout adaptation device in the present invention.
[0057] Figure 3 It is a functional principle block diagram of a preferred embodiment of the terminal in the present invention. DETAILED DESCRIPTION
[0058] In order to make the purpose, technical solution and advantages of the present invention clearer and more specific, the present invention is further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.
[0059] User Interface (UI) refers to the overall design of the human-computer interaction, operation logic, and interface aesthetics of the software. It is the medium for interaction and information exchange between the system and the user. User interface components encapsulate one or several code segments that complete their respective functions into one or several independent parts, which together complete the representation of the user interface. UI components are the basic elements for building user interfaces. By combining and configuring these components, you can quickly develop application programs with rich functions and beautiful interfaces.
[0060] With the rapid development of mobile Internet, the screen sizes and resolutions of different devices and platforms vary, which brings great challenges to the design of user interfaces. In order to ensure the best user interface layout on different platforms, designers need to adapt and adjust for different screen sizes and resolutions. However, this manual adaptation and adjustment method is not only inefficient, but also prone to errors.
[0061] In response to the problem that the user interface needs to be manually adapted and adjusted for different screen sizes and resolutions in the above-mentioned related technologies, the present application provides an interface layout adaptation method, in which the screen size and screen resolution of the target platform are obtained, and the screen size and screen resolution and the user interface layout information to be adjusted are input into a trained interface adaptation model to obtain the target user interface layout information; a target user interface is generated based on the target user interface layout information, and the target user interface is applied to the target platform; wherein the interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform. The embodiment of the present application automatically adjusts the user interface layout information to be adjusted according to the screen size and screen resolution of the target platform by utilizing the trained interface adaptation model, and then applies it to the target platform, without the need for manual adjustment by the developer, thereby improving the adaptation efficiency and accuracy of the user interface.
[0062] See also Figure 1 The interface layout adaptation method described in the embodiment of the present invention comprises the following steps:
[0063] Step S100: Obtain the screen size and screen resolution of the target platform, input the screen size and screen resolution and the user interface layout information to be adjusted into the trained interface adaptation model, and obtain the target user interface layout information.
[0064] Specifically, screen size refers to the length of the diagonal of the display screen, which is generally expressed in inches. Screen size is an important criterion for measuring the size of the same type of display. In order to adapt to the consumption capacity and usage habits of different groups of people, there will be various sizes. For example, the size and resolution of the LCD screen of a laptop are determined according to its market positioning. Screen resolution refers to the number of pixels in the horizontal and vertical directions of the display, usually expressed as "vertical pixels × horizontal pixels", such as 1920×1080. Resolution is a key parameter to measure the fineness of the picture. The more pixels a display can display, the finer the picture, and the more information can be displayed in the same screen area. High resolution means that there are more pixels in the display screen area, the image is more precise, and the display effect is more delicate and clear. For example, the content that can be displayed simultaneously at a resolution of 1600×1280 may only be partially displayed at a resolution of 640×480.
[0065] In the embodiment of the present application, the step S100 specifically includes:
[0066] Step S110: acquiring the screen size and screen resolution of the target platform, normalizing the screen size and screen resolution of the target platform, and converting the user interface layout information to be adjusted into an image, a vector or a tensor;
[0067] Step S120: input the normalized screen size and screen resolution and the converted user interface layout information into the trained interface adaptation model to obtain target user interface layout information.
[0068] Specifically, the screen size (such as diagonal length, width and height) and screen resolution (such as pixel width and pixel height) of the target platform (such as mobile phones, tablets, computers, etc.) are obtained. Normalization methods include scaling the size and resolution to a fixed range (such as between 0 and 1), or converting them to a ratio relative to a certain reference size or resolution. User interface layout information is usually stored in a structured format (such as XML, JSON, etc.), describing the layout, style and interaction logic of interface elements. In order to input it into the deep learning model, this information needs to be converted into a format that the model can understand, such as an image (by rendering the layout and capturing the image), a vector (extracting key layout features and converting them into vectors) or a tensor (a multidimensional array that can contain multiple dimensions of layout information). The conversion process includes steps such as parsing the layout information, feature extraction and encoding.
[0069] After calculation and processing by the model, the model will output the adjusted user interface layout information to adapt to the screen size and screen resolution of the target platform. The output result can be a vector, tensor or image. If the output result is a vector or tensor, it needs to be further parsed and converted to obtain specific layout information.
[0070] The embodiment of the present application converts the screen size and screen resolution to the same scale through normalization processing, eliminates the difference in numerical ranges between different devices, and enables the model to process screens of various sizes and resolutions more fairly and accurately; the normalized data helps the adaptation model to be better generalized to new devices with different sizes and resolutions, improving the versatility and adaptability of the model; normalization can also reduce errors in numerical calculations, improve the stability of model training and prediction, and thus ensure the accuracy and reliability of user interface layout adaptation. That is, by preprocessing the screen size and screen resolution of the target platform and the user interface layout information to be adjusted, and inputting them into the trained interface adaptation model, the target user interface layout information can be obtained quickly and accurately without manual adjustment or writing additional adaptation code, thereby improving adaptation efficiency, reducing the workload of developers to test and adapt multiple devices and screen sizes one by one, and reducing development costs and time costs.
[0071] In the embodiment of the present application, the user interface layout information includes component positions, component sizes, and spacing between components of the user interface components.
[0072] For example, if you design a login interface for a mobile application, the user interface components include a username input box, a password input box, and a login button. The user interface layout information includes the component positions, component sizes, and spacing between components corresponding to the username input box, password input box, and login button. For example, the component position of the username input box is 50 pixels below the top of the screen and centered horizontally; the component size of the username input box is 80% of the screen width and 50 pixels in height; the spacing between components is 50 pixels from the top of the screen. The component position of the password input box is 20 pixels below the username input box and centered horizontally; the component size of the password input box is 80% of the screen width and 50 pixels in height; the spacing between components is 20 pixels from the username input box. The component position of the login button is 30 pixels below the password input box and centered horizontally; the component size of the login button is 60% of the screen width and 60 pixels in height; the spacing between components is 30 pixels from the password input box. In the above examples, the spacing between components refers to the vertical distance between adjacent components. The horizontal spacing between components can also be considered. The position of a component is usually determined by an offset relative to a reference point (such as the top, bottom, left, or right side of the screen). In the above examples, the vertical offset relative to the top of the screen and the horizontal offset relative to the center of the screen are used to determine the position of the component. The size of a component is usually described by width and height. In the above examples, the size of a component is defined using a percentage of the screen width and a fixed pixel value.
[0073] The embodiments of the present application can clearly understand the position, size and spacing relationship of each component on the interface through layout information description, thereby conveniently implementing the layout design of the user interface.
[0074] like Figure 1 As shown, the interface layout adaptation method also includes the following steps:
[0075] Step S200: Generate a target user interface based on the target user interface layout information, and apply the target user interface to the target platform; wherein the interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform.
[0076] Specifically, the target user interface can be generated using UI design tools (such as Sketch, Figma, etc.) or programming frameworks (such as React Native, Flutter, etc.). In this process, the layout and style of the interface elements are adjusted according to the layout information to ensure that the interface can present the best effect on different devices.
[0077] For example, suppose the target platform is an Android phone with a resolution of 1080x1920 pixels and a screen size of 5.5 inches. Through the interface adaptation model, the following target user interface layout information is obtained: top navigation bar height (60 pixels), main content area width (80% of the screen width), button size (width 100 pixels, height 50 pixels), button spacing (20 pixels). Based on the above information, a concise and clear user interface is designed, in which there is a navigation bar at the top, the main content area is located in the center of the screen, and contains some buttons and text information. These buttons and text information are precisely laid out and styled according to the layout information. The designed user interface is applied to the target Android phone, tested and optimized. The test results show that the interface can maintain a relatively consistent proportion and layout on devices with different screen sizes and resolutions.
[0078] The embodiment of the present application uses an interface adaptation model to adjust the user interface layout information according to the screen size and screen resolution of the target platform, and generates a corresponding target user interface, which greatly improves the adaptation efficiency and effect of the user interface on different devices, thereby providing users with a more consistent and high-quality experience.
[0079] In the embodiment of the present application, the training step of the interface adaptation model includes:
[0080] Obtain the pre-collected screen size, screen resolution and user interface layout information corresponding to several platforms and construct a data set;
[0081] determining a training set in the data set;
[0082] Normalizing the screen size and screen resolution in the training set, and converting the user interface layout information in the training set into an image, a vector or a tensor to obtain preprocessed data;
[0083] A pre-constructed initial interface adaptation model is obtained, and the initial interface adaptation model is trained based on the pre-processed data to obtain a trained interface adaptation model.
[0084] Specifically, when training a model, various parameters in the training process are configured, such as learning rate, batch size, number of training rounds, etc. The selection of these parameters has an important impact on the training effect and convergence speed of the model. The preprocessed training data is input into the model for forward propagation and back propagation calculations. The difference between the model prediction results and the actual results is calculated based on the loss function (such as mean square error, cross entropy, etc.), and the optimization algorithm (such as gradient descent, Adam, etc.) is used to update the parameters of the model.
[0085] By collecting screen size, screen resolution and user interface layout information corresponding to several platforms, the embodiment of the present application can construct a diverse and representative data set, which helps the model learn the layout features under different devices and screen sizes, thereby improving the generalization ability of the model and enabling it to better adapt to unknown devices and screen sizes; determining the training set in the data set can clarify the goal and scope of model training, and can avoid introducing irrelevant or redundant data during the training process, thereby improving training efficiency and effect; by selecting a suitable training set, it can ensure that the model learns the most important features and laws during the training process, thereby optimizing the performance of the model and enabling it to better adapt to the layout requirements under different devices and screen sizes. In addition, normalizing the screen size and screen resolution, and converting the user interface layout information into images, vectors or tensors can improve the quality and consistency of the data, and help the model to more accurately capture and learn layout features during the training process; preprocessing data can simplify the complexity of model training and improve the training speed. By converting the data into a format suitable for model processing, the amount of calculation and memory consumption of the model during the training process can be reduced, thereby accelerating the training process. The trained interface adaptation model can quickly complete the adaptation of the user interface layout without manual intervention or writing additional adaptation code. This greatly improves the adaptation efficiency and effect and reduces development costs and time costs. That is, the embodiment of the present application trains the initial interface adaptation model to more effectively achieve automatic adaptation of the cross-platform user interface.
[0086] In one embodiment of the present application, after obtaining the pre-collected screen size, screen resolution and user interface layout information corresponding to several platforms and constructing the data set, the following is further included:
[0087] A validation set and a test set are determined in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained interface adaptation model.
[0088] Specifically, during the training process, the performance of the model on the validation set is regularly evaluated to monitor the model's training progress and avoid overfitting. If the performance of the validation set no longer improves, the training can be stopped or the training parameters can be adjusted. The performance of the model, including accuracy and generalization ability, is evaluated using the test set. If the model performance meets expectations, the training process ends; otherwise, the model architecture, training parameters, or data preprocessing methods may need to be adjusted and retrained.
[0089] The embodiment of the present application can monitor the performance of the model on unseen data (i.e., validation set) during the training process by dividing the data set into a training set, a validation set, and a test set, which helps to promptly discover whether the model begins to overfit the training data, i.e., the model performs well on the training data but the generalization ability decreases on the new data. The validation set provides an independent data set for adjusting the hyperparameters of the model (such as learning rate, batch size, number of network layers, number of neurons, etc.), and by training the model under different hyperparameter configurations and evaluating its performance on the validation set, the best hyperparameter combination can be found, thereby improving the generalization ability of the model. By comparing the performance of the model on the test set with the performance on the training set and the validation set, it can be judged whether the generalization ability of the model is strong enough, and whether the model needs to be further adjusted or optimized. That is, the embodiment of the present application can train and optimize the model more effectively and improve the generalization ability and credibility of the model by determining the validation set and the test set, and using them respectively for adjusting the hyperparameters of the model and evaluating the performance of the trained interface adaptation model.
[0090] In an embodiment of the present application, the initial interface adaptation model is constructed based on a convolutional neural network, a recurrent neural network or a Transformer model.
[0091] Specifically, convolutional neural networks (CNNs) extract features of input data through convolutional layers and pooling layers, and are particularly suitable for processing data with local feature correlations. Convolutional neural networks can automatically extract useful features from raw data, reducing reliance on artificial feature engineering; convolution operations can efficiently perform parallel calculations, which are suitable for processing large-scale data. Through training, convolutional neural network models can learn user interface layout features under different screen sizes and resolutions, thereby achieving good adaptation to new interfaces. Recurrent neural networks (RNNs) can capture time dependencies in input data through a cyclic connection structure; recurrent neural networks can process sequence data with time dependencies, and are suitable for processing component arrangements and hierarchical structures in interface layouts; recurrent neural networks can adapt to interface layout tasks of different complexities by adjusting network structures and parameters. The Transformer model is based on the self-attention mechanism and can efficiently process sequence data while capturing global dependencies. In the interface adaptation task, the Transformer can process component relationships in the user interface layout, such as the spacing and alignment between components, and capture the impact of these relationships on the overall layout. The Transformer model can efficiently perform parallel computing, improve training speed, and is suitable for processing large-scale data. The Transformer's self-attention mechanism can capture global dependencies in the interface layout, which helps to achieve more refined adaptation effects.
[0092] The embodiment of the present application constructs an initial interface adaptation model based on a convolutional neural network, a recurrent neural network or a Transformer model, thereby achieving automatic adaptation of a cross-platform user interface.
[0093] In one embodiment of the present application, applying the target user interface to the target platform includes:
[0094] The target user interface is integrated tested and deployed on the target platform.
[0095] Specifically, during integration testing, configure the same hardware and software environment as the target platform, including the operating system, database, middleware, etc., to ensure that there are no interfering factors in the test environment, such as viruses, firewall restrictions, etc.; design test cases to cover all functions and interaction scenarios of the target user interface; install the target user interface in the test environment, test each case one by one according to the test cases, record the test results and problems found, and track and fix any problems found.
[0096] During deployment, ensure that the production environment of the target platform has been configured, including servers, databases, networks, etc. Back up the production environment to prevent data loss caused by problems during deployment, deploy the target user interface that has been integrated tested and fixed to the production environment, and perform necessary configurations, such as database connection, middleware configuration, etc. Verify that the deployment is successful and ensure that the target user interface can be accessed and run normally. Use monitoring tools to monitor the performance and health of the target user interface in real time, collect user feedback, promptly handle problems encountered by users during use, and continuously optimize the target user interface based on monitoring data and user feedback.
[0097] Through integration testing, the embodiments of the present application can ensure that the target user interface can run normally on the target platform without crashing, freezing, and other problems. The optimized user interface is more in line with the user's usage habits and needs, thereby improving user satisfaction and loyalty. Integration testing before deployment can promptly discover and fix potential problems, reducing the risk of problems in the production environment. The monitoring and feedback mechanism can promptly discover and handle problems encountered by users during use, avoiding the expansion and deterioration of the problems. By continuously optimizing the user interface and performance, maintenance costs can be reduced and system stability can be improved.
[0098] In one embodiment, if Figure 2 As shown, based on the above interface layout adaptation method, the present invention also provides an interface layout adaptation device, including:
[0099] An input module 100 is used to obtain the screen size and screen resolution of the target platform, and input the screen size and screen resolution and the user interface layout information to be adjusted into the trained interface adaptation model to obtain the target user interface layout information;
[0100] An application module 200 is used to generate a target user interface based on the target user interface layout information, and apply the target user interface to the target platform;
[0101] The interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform.
[0102] In one embodiment of the present application, the input module 100 includes:
[0103] Obtaining the screen size and screen resolution of the target platform, normalizing the screen size and screen resolution of the target platform, and converting the user interface layout information to be adjusted into an image, a vector, or a tensor;
[0104] The normalized screen size and screen resolution and the converted user interface layout information are input into the trained interface adaptation model to obtain the target user interface layout information.
[0105] In one embodiment of the present application, the user interface layout information includes component positions, component sizes, and spacing between components of the user interface components.
[0106] In one embodiment of the present application, the interface layout adaptation device further includes:
[0107] A data set construction module is used to obtain the screen size, screen resolution and user interface layout information corresponding to several platforms collected in advance to construct a data set;
[0108] A first determination module, used to determine a training set in the data set;
[0109] A preprocessing module, used for normalizing the screen size and screen resolution in the training set, and converting the user interface layout information in the training set into an image, a vector or a tensor to obtain preprocessed data;
[0110] The training module is used to obtain a pre-built initial interface adaptation model, train the initial interface adaptation model based on the pre-processed data, and obtain a trained interface adaptation model.
[0111] In one embodiment of the present application, the interface layout adaptation device further includes:
[0112] The second determination module is used to determine a validation set and a test set in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained interface adaptation model.
[0113] In one embodiment of the present application, the initial interface adaptation model is constructed based on a convolutional neural network, a recurrent neural network or a Transformer model.
[0114] In one embodiment of the present application, the application module 200 is also used to perform integration testing and deployment on the target user interface on the target platform.
[0115] It should be noted that the aforementioned explanation of the embodiment of the interface layout adaptation method is also applicable to the interface layout adaptation device of this embodiment, and will not be repeated here.
[0116] The present invention discloses an interface layout adaptation device, which obtains the screen size and screen resolution of a target platform, inputs the screen size and screen resolution and user interface layout information to be adjusted into a trained interface adaptation model, and obtains target user interface layout information; generates a target user interface based on the target user interface layout information, and applies the target user interface to the target platform; wherein the interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform. The embodiment of the present application automatically adjusts the user interface layout information to be adjusted according to the screen size and screen resolution of the target platform by utilizing the trained interface adaptation model, and then applies it to the target platform, without the need for manual adjustment by developers, thereby improving the adaptation efficiency and accuracy of the user interface.
[0117] Figure 3 A schematic diagram of the structure of a terminal provided in an embodiment of the present application. The terminal may include:
[0118] A memory 501 , a processor 502 , and a computer program stored in the memory 501 and executable on the processor 502 .
[0119] When the processor 502 executes the program, the interface layout adaptation method provided in the above embodiment is implemented.
[0120] Furthermore, the terminal further includes:
[0121] The communication interface 503 is used for communication between the memory 501 and the processor 502 .
[0122] The memory 501 is used to store computer programs that can be executed on the processor 502 .
[0123] The memory 501 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.
[0124] If the memory 501, the processor 502 and the communication interface 503 are implemented independently, the communication interface 503, the memory 501 and the processor 502 can be connected to each other through a bus and communicate with each other. The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one line is used in the figure, but it does not mean that there is only one bus or one type of bus.
[0125] Optionally, in a specific implementation, if the memory 501, the processor 502 and the communication interface 503 are integrated on a chip, the memory 501, the processor 502 and the communication interface 503 can communicate with each other through an internal interface.
[0126] The processor 502 may be a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present application.
[0127] This embodiment also provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the above interface layout adaptation method is implemented.
[0128] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or N embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.
[0129] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise clearly and specifically defined.
[0130] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or N executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes additional implementations, in which the order shown or discussed may not be followed, including performing functions in a substantially simultaneous manner or in reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present application belong.
[0131] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can read instructions from an instruction execution system, device or apparatus and execute instructions), or in combination with these instruction execution systems, devices or apparatuses. For the purpose of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in combination with these instruction execution systems, devices or apparatuses. More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or N wirings (electronic devices), a portable computer disk box (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), a fiber optic device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be paper or other suitable medium on which the program is printed, since the program may be obtained electronically by optically scanning the paper or other medium and then editing, interpreting or otherwise processing in a suitable manner if necessary and then storing it in a computer memory.
[0132] It should be understood that the various parts of the present application can be implemented by hardware, software, firmware or a combination thereof. In the above embodiment, the N steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. If implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.
[0133] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.
[0134] In addition, each functional unit in each embodiment of the present application may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.
[0135] The storage medium mentioned above may be a read-only memory, a magnetic disk or an optical disk, etc. Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limiting the present application. A person of ordinary skill in the art may change, modify, replace and modify the above embodiments within the scope of the present application.
Claims
1. An interface layout adaptation method, characterized in that: The method comprises: Obtaining the screen size and screen resolution of the target platform, and inputting the screen size and screen resolution and the user interface layout information to be adjusted into the trained interface adaptation model to obtain the target user interface layout information; Generate a target user interface based on the target user interface layout information, and apply the target user interface to the target platform; The interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform.
2. The interface layout adaptation method according to claim 1, characterized in that: Obtaining the screen size and screen resolution of the target platform, inputting the screen size and screen resolution and the user interface layout information to be adjusted into the trained interface adaptation model, and obtaining the target user interface layout information, including: Obtaining the screen size and screen resolution of the target platform, normalizing the screen size and screen resolution of the target platform, and converting the user interface layout information to be adjusted into an image, a vector, or a tensor; The normalized screen size and screen resolution and the converted user interface layout information are input into the trained interface adaptation model to obtain the target user interface layout information.
3. The interface layout adaptation method according to claim 1, characterized in that: The user interface layout information includes component positions, component sizes, and spacing between components of the user interface components.
4. The interface layout adaptation method according to claim 3, characterized in that: The training steps of the interface adaptation model include: Obtain the pre-collected screen size, screen resolution and user interface layout information corresponding to several platforms and construct a data set; determining a training set in the data set; Normalizing the screen size and screen resolution in the training set, and converting the user interface layout information in the training set into an image, a vector or a tensor to obtain preprocessed data; A pre-constructed initial interface adaptation model is obtained, and the initial interface adaptation model is trained based on the pre-processed data to obtain a trained interface adaptation model.
5. The interface layout adaptation method according to claim 4, characterized in that: Obtain the screen size, screen resolution and user interface layout information corresponding to several platforms collected in advance. After constructing the data set, it also includes: A validation set and a test set are determined in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained interface adaptation model.
6. The interface layout adaptation method according to claim 4, characterized in that: The initial interface adaptation model is constructed based on a convolutional neural network, a recurrent neural network or a Transformer model.
7. The interface layout adaptation method according to claim 1, characterized in that: Applying the target user interface to the target platform includes: The target user interface is integrated tested and deployed on the target platform.
8. An interface layout adaptation device, characterized in that: The device comprises: An input module, used to obtain the screen size and screen resolution of the target platform, and input the screen size and screen resolution and the user interface layout information to be adjusted into the trained interface adaptation model to obtain the target user interface layout information; An application module, configured to generate a target user interface based on the target user interface layout information, and apply the target user interface to the target platform; The interface adaptation model is used to adjust the user interface layout information according to the screen size and screen resolution of the target platform.
9. A terminal, characterized in that: include: A memory, a processor, and an interface layout adaptation program stored in the memory and executable on the processor, wherein the interface layout adaptation program, when executed by the processor, implements the steps of the interface layout adaptation method according to any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and the computer program can be executed to implement the steps of the interface layout adaptation method according to any one of claims 1 to 7.