Interface layout method
By dynamically adjusting the interface layout through a grid system, the problem of content not being able to be scaled in split-screen mode is solved, achieving adaptive content layout and improving user experience and content utilization.
Patent Information
- Application Number
- CN202511129992.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-08-13
- Publication Date
- 2025-11-18
AI Technical Summary
In existing technologies, the user interface cannot be properly laid out in split-screen mode, resulting in content that cannot be scaled and a poor user experience. This is especially true when navigation and multimedia are used simultaneously, as the split-screen application ratio is fixed and cannot be switched freely, leading to low content utilization and poor aesthetics.
The interface layout is dynamically adjusted through a grid system. Based on the user's needs, page link relationships, and resolution parameters, the grid is divided to generate multi-level content blocks. The layout coordinates of elements in the blocks are calculated to achieve content scaling and reasonable layout during split-screen operation.
It enables adaptive scaling and reasonable layout of content in split-screen mode, improves user experience, reduces development adaptation costs, provides a richer interactive experience, and solves the problem of content not being able to be scaled due to a fixed split-screen ratio.
Smart Images
Figure CN120973453A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of human-computer interaction interface, and particularly relates to a layout method of interface. BACKGROUND
[0002] User interface (UI) is a medium for interaction and information exchange between system and user, which realizes the conversion between internal form of information and form acceptable by human. The user interface is software related to the interaction between user and hardware, and the purpose is to enable the user to conveniently and efficiently operate the hardware to achieve bidirectional interaction, complete the work expected to be completed by the hardware, and the user interface is defined widely, including human-computer interaction and graphical user interface, and the field participating in information exchange between human and machine all exists user interface. With the improvement of intelligent level of the whole vehicle, the user has higher requirements for active intelligence. SUMMARY
[0003] The present application aims to solve at least one of the technical problems existing in the prior art, and provides a layout method of interface and system.
[0004] In the first aspect, the embodiment of the present application provides a layout method of interface, including: dividing a grid with a preset number of rows and a preset number of columns according to an interface resolution parameter; combining the grid to obtain a plurality of content blocks according to a link relationship of a user demand page and the grid, so as to allocate the corresponding content blocks to the user demand page; calculating layout coordinates of each element in the user demand page in the corresponding content block, and generating a display interface.
[0005] In the embodiment of the present application, combining the grid to obtain a plurality of content blocks according to a link relationship of a user demand page and the grid, so as to allocate the corresponding content blocks to the user demand page, includes: obtaining a first content block and a second content block according to a number of levels of a first page and a second page linked with the first page; the second content block is located below the first content block; the first content block is composed of at least two grids.
[0006] In the embodiment of the present application, dividing a grid with a preset number of rows and a preset number of columns according to an interface resolution parameter, includes: judging whether a split screen demand is received; the split screen demand at least includes a navigation demand or a player demand; if yes, splitting a screen to obtain a first interface and a second interface; for the interface with larger size in the first interface and the second interface, dividing a grid with a first preset number of rows and a first preset number of columns; if no, for the whole interface, dividing a grid with a second preset number of rows and a second preset number of columns.
[0007] In the embodiment of the present application, the splitting the first interface and the second interface comprises: splitting the first interface and the second interface according to the resolution of the first interface, the resolution of the second interface, the left margin and the split gap.
[0008] In the embodiment of the present application, the splitting the grid with the preset number of rows and the preset number of columns comprises: determining the row height, the column width and the slot width of the grid based on the grid minimum base number, the total width of the grid visible area, the left margin, the preset number of rows and the preset number of columns; and splitting the grid according to the row height, the column width and the slot width of the grid.
[0009] In the embodiment of the present application, the grid minimum base number is an even number.
[0010] In the embodiment of the present application, the method further comprises: in response to receiving the split screen demand, splitting the first interface and the second interface; for the interface with a larger size in the first interface and the second interface, splitting the updated grid; combining the updated grid to obtain the updated content block according to the grid combination mode of the original content block; calculating the position of each element in the original content block in the updated content block; and scaling the content.
[0011] In a second aspect, the present application provides a layout system of an interface, which can be used to implement the above method, and the system comprises: a splitting module configured to split a grid with a preset number of rows and a preset number of columns according to an interface resolution parameter; a combination module configured to combine the grid to obtain a multi-level content block for a user demand page according to a link relationship of the user demand page and the grid, so as to allocate a corresponding content block for the user demand page; and a display module configured to calculate layout coordinates of each element in the user demand page in the corresponding content block, and generate a display interface.
[0012] In a third aspect, the present application provides an electronic device, which comprises: one or more processors; and a memory configured to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors are caused to execute the above layout method of an interface.
[0013] In a fourth aspect, the present application further provides a computer readable storage medium, which stores executable instructions, and the instructions are executed by a processor to cause the processor to execute the above layout method of an interface.
[0014] The layout method of an interface provided by the present application dynamically adjusts the display interface layout according to the link relationship of a user demand page through a grid system, realizes the reasonable use of page layout, and improves the technical effect of user experience. BRIEF DESCRIPTION OF DRAWINGS
[0015] Figure 1A flowchart of a layout method of an interface provided by an embodiment of the present application is shown in the figure;
[0016] Figure 2 A schematic diagram of a grid minimum base of the method provided by an embodiment of the present application is shown in the figure;
[0017] Figure 3 A schematic diagram of grid division of the method provided by an embodiment of the present application is shown in the figure;
[0018] Figure 4 A schematic diagram of a content block of the method provided by an embodiment of the present application is shown in the figure;
[0019] Figure 5 A schematic diagram of split screen of the method provided by an embodiment of the present application is shown in the figure;
[0020] Figure 6 A schematic diagram of scaling content after split screen of the method provided by an embodiment of the present application is shown in the figure;
[0021] Figure 7 A structure block diagram of a layout system of an interface provided by an embodiment of the present application is shown in the figure;
[0022] Figure 8 A structure block diagram of an electronic device provided by an embodiment of the present application is shown in the figure. DETAILED DESCRIPTION
[0023] In order to enable those skilled in the art to better understand the technical solutions of the present application, the exemplary embodiments of the present application are described below with reference to the accompanying drawings, which include various details of the embodiments of the present application to help understanding, and should be considered as merely exemplary. Therefore, those skilled in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present application. Also, in order to be clear and concise, the description below omits the description of well-known functions and structures.
[0024] In the case of no conflict, each embodiment of the present application and each feature in the embodiments can be combined with each other.
[0025] As used herein, the term "and / or" includes any and all combinations of one or more of the associated listed items.
[0026] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used herein, the singular forms "a", "an" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will be further understood that the terms "comprises" and / or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and / or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof. "Connected" or "coupled" or similar terms are not restricted to physical or mechanical connections or links, but can also include electrical connections or links, whether direct or indirect.
[0027] Unless otherwise defined, all terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art. It will be further understood that terms, such as those defined in commonly used dictionaries, should be interpreted as having a meaning that is consistent with their meaning in the context of the relevant art and the present disclosure, and will not be interpreted in an overly literal or overly formal sense unless expressly so defined herein.
[0028] In the technical solutions of the present application, the collection, storage, use, processing, transmission, provision and disclosure of user personal information comply with relevant laws and regulations and do not violate public order and good customs. The use of user data in the technical solutions complies with relevant national laws and regulations (for example, "Information Security Technology Personal Information Security Specification" and the like). For example, appropriate measures are taken for personal information access control; the display of personal information is limited by regulations; the use purpose of personal information does not exceed the direct or reasonably related range; the use of personal information eliminates explicit identity pointing and avoids precise positioning to a specific individual.
[0029] First, the technical terms involved in the present application are described as follows:
[0030] Human Machine Interface (HMI): refers to an interactive layer or operation platform for information exchange and operation control between a user and a machine, equipment, software system or automated process, such as a touch screen, a graphical user interface.
[0031] Grid: the most basic visual unit cell or unit block constituting a grid system, which is the smallest reference unit in a grid layout.
[0032] Container: the total width of the page grid system, that is, the total width of the outer boundary containing all columns and slots.
[0033] Column and Gutter: column is the quantity unit of the grid, and gutter is the interval between adjacent two columns.
[0034] Margin: the outer margin between the total width of the grid and its external environment.
[0035] Col-n: content block, used to carry the content of an area, control the arrangement of content on different screen sizes.
[0036] The aggregation framework of local multimedia and online multimedia makes the interaction and visual consistency of multimedia after aggregation greatly improve the user experience of multimedia and reduce the learning cost of users. Figure 1 The flowchart of the layout method of the interface provided by the embodiment of the application is shown in Figure 1 The layout method of the interface provided by the embodiment of the application comprises: dividing the grid with a preset number of rows and a preset number of columns according to the interface resolution parameter; combining the grid to obtain a plurality of levels of content blocks according to the link relationship of the user demand page and the grid, so as to allocate the corresponding content blocks to the user demand page; calculating the layout coordinates of each element in the user demand page in the corresponding content block, and generating a display interface.
[0037] Through the embodiment of the application, the grid concept is used to build a multimedia aggregation framework, the content blocks are divided according to the link relationship of the user demand page, the learning cost of users is reduced, and the page layout is reasonably utilized.
[0038] On the basis of the above embodiment, combining the grid to obtain a plurality of levels of content blocks according to the link relationship of the user demand page and the grid, so as to allocate the corresponding content blocks to the user demand page, comprises: obtaining a first-level content block and a second-level content block according to the order of magnitude of the first-level page and the second-level page linked with the first-level page; the second-level content block is located below the first-level content block; the first-level content block is composed of at least two grids.
[0039] In this embodiment, after the basic grid is established, the content block, i.e. the content carrying an area, can be defined according to the grid. There are various block adaptation schemes according to the order of magnitude of the content. Figure 4 The schematic diagram of the content block of the method provided by the embodiment of the application is shown in Figure 4 As shown in the figure, the multimedia aggregation first-level page is suitable for 3+1 or 2+1, and the second-level page is suitable for 1.
[0040] Through the embodiment of the application, the user demand page is displayed in a waterfall layout according to the order of magnitude. Under this framework layout, the layout is clear and beautiful, the architecture is stable, the code is reusable, and the learning cost of users is reduced.
[0041] On the basis of the above embodiment, the grid of the preset number of rows and the preset number of columns is divided according to the interface resolution parameter, including: judging whether a split screen demand is received; the split screen demand at least includes a navigation demand or a player demand; if yes, a first interface and a second interface are obtained by splitting the screen; for the larger interface in the first interface and the second interface, a grid of the first preset number of rows and the first preset number of columns is obtained; if no, for the whole interface, a grid of the second preset number of rows and the second preset number of columns is obtained.
[0042] Through the embodiment of the application, the page layout is reasonably utilized, and full screen and split screen do not need to be greatly changed in framework and code, and can be self-adaptive.
[0043] On the basis of the above embodiment, the first interface and the second interface are obtained by splitting the screen, including: according to the resolution of the first interface, the resolution of the second interface, the left and right margins and the split screen gap, the first interface and the second interface are obtained by splitting the screen.
[0044] In this embodiment, Figure 5 The schematic diagram of the split screen of the method provided by the embodiment of the application is shown as Figure 5 As shown in the figure, the split screen includes the following steps: determining that the 1 / 3 screen resolution is 636px, the split screen gap is 12px, and the 2 / 3 screen resolution is 1272px. It is determined that the left and right margins are 56px, the total width of the grid visible area is C((Container), the number of columns is N, and the grid formula is: C(Container)=Column×N-Gutter, that is, 1144(Container)=294×4-32, that is, the column is 294px, the slot is 32px, and the column width is 262px.
[0045] Through the embodiment of the application, the split screen can be divided into 1 / 3 screen and 2 / 3 screen, the 1 / 3 screen displays the navigation or the multimedia player page, and there is no need to adapt the grid. The split screen user can change the window ratio, and the user experience is improved.
[0046] On the basis of the above embodiment, the grid of the preset number of rows and the preset number of columns is divided, including: determining the row height, the column width and the slot width of the grid based on the minimum base of the grid, the total width of the grid visible area, the left and right margins, the preset number of rows and the preset number of columns; and dividing the grid according to the row height, the column width and the slot width of the grid.
[0047] In this embodiment, Figure 3 The schematic diagram of the grid division of the method provided by the embodiment of the application is shown as Figure 3As shown, the margin is determined, the maximum width of the main stream vehicle-mounted HMI adaptation screen is 1920x1080px, and the left and right margins are 42px. When the margin is determined, the total width of the visible area of the grid is C((Container), the number of columns is N, and the grid formula is: C(Container)=Column*N-Gutter, so: 1792(Container)=306*6-44, that is, the column is 306px, the slot is 44px, and the column width is 262px.
[0048] By the embodiments of the present application, the five concepts of the grid system, that is, the grid (Grid), the total width of the grid (Container), the column and the slot (Column & Gutter), the margin (Margin), and the block (Col-n), are used to provide a multimedia aggregation and split-screen display method with reasonable layout, stable system, and high adaptation rate, and the content blocks are obtained by subsequent flexible combination.
[0049] On the basis of the above-mentioned embodiments, the minimum base of the grid is even.
[0050] By the embodiments of the present application, Figure 2 The schematic diagram of the minimum base of the grid provided by the method of the embodiments of the present application is as shown in Figure 2 As shown, in the design system of Ant Design, 2 is used as the minimum base of the grid, which can match most of the mainstream display devices while ensuring evenness, and can avoid the occurrence of half-pixel to the greatest extent.
[0051] It should be noted that, in the existing fusion scheme, taking the 1920x1080 screen resolution as an example, the left 1 / 3 vertical always-visible player and the sound source are displayed, and the right 2 / 3 is used to display the function switching and list. When the split screen is started, the 1 / 3 screen is used to adapt to display the player page, and the 2 / 3 screen is used to display the function list page. The player is a vertical structure, and when the right sound source switching is a Bluetooth music, if the Bluetooth device is not connected, the right function list page is empty as a whole, the page is not beautiful, and the utilization rate is low. The function allocation is unreasonable. When the split screen is started, the user cannot freely switch the split screen ratio, only the 1 / 3 and 2 / 3 screen content is switched, and the ratio of the two split screen applications does not change.
[0052] To solve the above technical problems, on the basis of the above-mentioned embodiments, the layout coordinates of each element in the user demand page in the corresponding content block are calculated, and a display interface is generated, and then the method further comprises: in response to receiving a split screen demand, a first interface and a second interface are obtained by splitting; for the larger interface in the first interface and the second interface, an updated grid is divided; the updated grid is combined to obtain an updated content block according to the grid combination mode of the original content block; the position of each element in the original content block in the updated content block is calculated, and the content is scaled.
[0053] Through the embodiments of the present invention Figure 6 This is a schematic diagram illustrating the scaling of content after screen splitting in the method provided in this embodiment of the invention, as shown below. Figure 6 As shown, after the split-screen grid is determined, the 2 / 3 screens, based on the customized grid, then scale and adapt the content while keeping the content unchanged. When users customize the split screen, it's not just a matter of swapping the content on both sides; the content can be adapted to fit the screen size, enhancing the user's diverse experience. This achieves the technical effects of balancing applicability in split-screen situations, reducing development and adaptation costs, and providing users with a richer interactive experience. It also solves the problem of content not being able to scale and rearrange when switching between split screens while users are simultaneously using navigation and multimedia.
[0054] Based on the above interface layout method, this disclosure also provides an interface layout system. The following will combine... Figure 7 The system is described in detail.
[0055] Figure 7 A structural block diagram of an interface layout system provided in an embodiment of the present invention is shown below. Figure 7 As shown, the present invention provides an interface layout system that can be used to implement the above method. The system includes: a division module, used to divide the interface into a grid with a preset number of rows and columns according to the interface resolution parameters; a combination module, used to combine the grid to obtain multi-level content blocks according to the link relationship of the user's requested page and the grid, so as to allocate corresponding content blocks to the user's requested page; and a display module, used to calculate the layout coordinates of each element in the user's requested page in the corresponding content block and generate a display interface.
[0056] Based on the same inventive concept, embodiments of the present invention also provide an electronic device. Figure 8 This is a structural block diagram of an electronic device provided in an embodiment of the present invention. Figure 8 As shown, an embodiment of the present invention provides an electronic device including: one or more processors 101, a memory 102, and one or more I / O interfaces 103. The memory 102 stores one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement a layout method of any of the interfaces described in the above embodiments; the one or more I / O interfaces 103 are connected between the processor and the memory, configured to enable information interaction between the processor and the memory.
[0057] The processor 101 is a device with data processing capability, including but not limited to a central processing unit (CPU) and the like; the memory 102 is a device with data storage capability, including but not limited to a random access memory (RAM, more specifically SDRAM, DDR, etc.), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), and a flash memory (FLASH); the I / O interface (read-write interface) 103 is connected between the processor 101 and the memory 102, and can realize information interaction between the processor 101 and the memory 102, including but not limited to a data bus (Bus) and the like.
[0058] In some embodiments, the processor 101, the memory 102, and the I / O interface 103 are connected to each other through the bus 104, and further connected to other components of the computing device.
[0059] In some embodiments, the one or more processors 101 include a field programmable gate array.
[0060] The embodiments of the present application also provide a computer readable medium. The computer readable medium stores a computer program, wherein the program is executed by a processor to implement the steps in the layout method of any of the above interfaces. The computer readable storage medium can be a volatile or non-volatile computer readable storage medium.
[0061] The embodiments of the present application also provide a computer program product, including computer readable code or a non-volatile computer readable storage medium carrying computer readable code, when the computer readable code is run in a processor of an electronic device, the processor in the electronic device executes the layout method of the above interface.
[0062] Those skilled in the art can understand that all or some of the steps in the above disclosed method, the functions of the modules / units in the system and the device can be implemented as software, firmware, hardware, and appropriate combinations thereof. In the hardware implementation, the division between the functional modules / units mentioned in the above description does not necessarily correspond to the division of physical components; for example, one physical component can have multiple functions, or one function or step can be performed by several physical components in cooperation. Some or all of the physical components can be implemented as software executed by a processor, such as a central processing unit, a digital signal processor, or a microprocessor, or as hardware, or as an integrated circuit, such as an application specific integrated circuit. Such software can be distributed on a computer readable storage medium, which can include computer storage media (or non-transitory media) and communication media (or transitory media).
[0063] As those skilled in the art will appreciate, the term computer storage media includes volatile and non-volatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable program instructions, data structures, program modules or other data. Computer storage media include, but are not limited to, random access memory (RAM), read only memory (ROM), erasable programmable read only memory (EPROM), electrically erasable programmable read only memory (EEPROM), static random access memory (SRAM), flash memory or other memory technology, portable compact disc read only memory (CD-ROM), digital versatile disk (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can be accessed by a computer. Further, as those skilled in the art will appreciate, communication media typically embodies computer readable program instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. The term "modulated data signal" means a signal that has one or more of its characteristics changed or set in a manner so as to encode information in the signal. By way of example, and not limitation, communication media includes wired media such as a wired network or direct-wired connection, and wireless media such as wireless networks, cellular telephone networks, code division multiple access (CDMA) networks, and other terrestrial and satellite radio frequency communication networks. Thus the computer readable program instructions and / or other program modules can be embodied in a computer readable storage medium, which can be any device or article that is enab!ed to store and / or carry computer readable program instructions and / or data structures. The computer readable storage medium can also be distributed over networked computer systems so that the computer readable program instructions and / or other program modules are stored and executed in a distributed fashion.
[0064] Computer readable program instructions described herein can be downloaded to respective computing / processing devices from a computer readable storage medium or to an external computer or external storage device via a network, for example, the Internet, a local area network, a wide area network and / or a wireless network. The network can comprise copper transmission cables, optical transmission fibers, wireless transmission, routers, firewalls, switches, gateway computers and / or edge servers. A network adapter card or network interface in each computing / processing device receives computer readable program instructions from the network and forwards the computer readable program instructions for storage in a computer readable storage medium within the respective computing / processing device.
[0065] Computer readable program instructions for carrying out operations of the present application can be assembler instructions, instruction-set-architecture (ISA) instructions, machine instructions, machine dependent instructions, microcode, firmware instructions, state-setting data, or either source code or object code written in any combination of one or more programming languages, including an object oriented programming language such as Smalltalk, C++ or the like, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The computer readable program instructions can execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or the connection can be made to an external computer (for example, through the Internet using an Internet Service Provider). In some embodiments, electronic circuitry including, for example, programmable logic circuitry, field-programmable gate array (FPGA), or programmable logic array (PLA) can execute the computer readable program instructions by utilizing state information of the computer readable program instructions to personalize the electronic circuitry, in order to perform aspects of the present application.
[0066] The computer program product described herein can be embodied in a specific manner by hardware, software, or a combination thereof. In an optional embodiment, the computer program product is embodied as a computer storage medium. In another optional embodiment, the computer program product is embodied as a software product, such as a software development kit (SDK), and the like.
[0067] The computer program product described herein can be embodied in a specific manner by hardware, software, or a combination thereof. In an optional embodiment, the computer program product is embodied as a computer storage medium. In another optional embodiment, the computer program product is embodied as a software product, such as a software development kit (SDK), and the like.
[0068] These computer readable program instructions can be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks. These computer readable program instructions can also be stored in a computer readable storage medium that can include a non-transitory computer readable storage medium that can be a computer- readable storage medium having no data storage cycles that change state. The instructions can be executed by one or more processors of a computer, other programmable data processing apparatus, or other devices to produce a computer-implemented process such that the instructions which execute via the one or more processors of the computer or other programmable data processing devices create means for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks. The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks.
[0069] The computer readable program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable apparatus or other device to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks.
[0070] The flow diagrams and the block diagrams in the drawings are presented to illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to the present application. In this regard, each block in the flow diagrams and the block diagrams can represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical functions ("instructions"). In some alternative implementations, the functions noted in the blocks can occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks can sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and / or flow diagrams, and combinations thereof, can be implemented by special purpose hardware-based systems that perform the specified functions or acts, or combinations of special purpose hardware and
[0071] Example embodiments have been disclosed herein and, although specific terms are employed, they are used in a generic and descriptive sense only and not for purposes of limitation. In some instances, it will be apparent to those skilled in the art that features, characteristics or aspects described in relation to one embodiment can be applied to other embodiments, unless otherwise clearly stated. It will also be apparent to one skilled in the art that various modifications, changes, additions and omissions can be made without departing from the scope of the present application as defined by the claims.
Claims
1. A method for layouting an interface, characterized in that, include: Based on the interface resolution parameters, a grid with a preset number of rows and columns is obtained; Based on the link relationships of the user request page and the grid, the grid is combined to obtain multi-level content blocks for allocating corresponding content blocks to the user request page; Calculate the layout coordinates of each element in the user request page within its corresponding content block, and generate the display interface.
2. The method according to claim 1, wherein, The step of combining the grid according to the link relationship of the user's requested page and the grid to obtain multi-level content blocks for allocating corresponding content blocks to the user's requested page includes: Based on the number of primary pages and secondary pages linked to primary pages, primary content blocks and secondary content blocks are obtained; the secondary content blocks are located below the primary content blocks; the primary content blocks consist of at least two grids.
3. The method according to claim 1, wherein, The process of dividing the grid into a preset number of rows and columns based on the interface resolution parameters includes: Determine whether a split-screen request has been received; the split-screen request includes at least a navigation request or a player request. If so, the screen is split to obtain a first interface and a second interface; for the larger interface between the first interface and the second interface, a grid with a first preset number of rows and a first preset number of columns is obtained. If not, then for the entire interface, a grid with a second preset number of rows and a second preset number of columns is obtained.
4. The method according to claim 3, wherein, The split-screen configuration results in a first interface and a second interface, including: The first interface and the second interface are divided based on the resolution of the first interface, the resolution of the second interface, the left and right margins, and the screen split gap.
5. The method according to claim 1, wherein, The division into a grid with a preset number of rows and a preset number of columns includes: The row height, column width, and slot width of the grid are determined based on the minimum grid cardinality, the total width of the visible area of the grid, the left and right margins, the preset number of rows, and the preset number of columns. The grid is divided according to the row height, column width, and slot width.
6. The method according to claim 5, wherein, The minimum cardinality of the grid is an even number.
7. The method according to claim 1, wherein, The process of calculating the layout coordinates of each element in the user request page within its corresponding content block and generating the display interface further includes: In response to the received split-screen request, a first screen and a second screen are generated; for the larger screen between the first screen and the second screen, an update grid is generated. Based on the grid combination method of the original content blocks, combine and update the grid to obtain the updated content blocks; Calculate the position of each element in the original content block within the updated content block, and scale the content.
8. A layout system for an interface, characterized in that, The system can be used to implement the method as described in any one of claims 1 to 7, including: The partitioning module is used to divide the grid into preset rows and columns based on the interface resolution parameters; The combination module is used to combine the grid to obtain multi-level content blocks based on the link relationship of the user's request page and the grid, so as to allocate the corresponding content blocks to the user's request page. The display module is used to calculate the layout coordinates of each element in the user-required page within its corresponding content block and generate the display interface.
9. An electronic device, characterized in that, include: One or more processors; Memory, used to store one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1 to 7.
10. A computer-readable medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method as described in any one of claims 1 to 7.