Multi-platform-oriented visual communication design adaptive layout method

Abstract

The invention relates to the technical field of visual communication design, and discloses a multi-platform-oriented visual communication design adaptive layout method, which enables webpage contents to keep high consistency and readability on different devices through a flow layout strategy in combination with the design of a responsive navigation menu and interactive elements. Meanwhile, through application of fluid grid layout, an elastic picture technology and CSS media query, personalized layout for different devices is realized, and the user experience is further improved; besides, the method further pays attention to application of elasticity and relative units and loading of dynamic content and resources, so that the webpage can keep proper proportion and layout under different screen sizes and resolutions, and loading time and data consumption are reduced at the same time; the CSS Grid and Flexbox layout models are combined, so that webpage layout becomes flexible and changeable, various complex layout requirements are met, and the method adapts to display of different platforms.

Description

Technical Field

[0001] The present invention relates to the technical field of visual communication design, and in particular to a multi-platform oriented visual communication design adaptive layout method. Background Art

[0002] With the rapid development of information technology and the popularization of smart terminal devices, users have an increasing demand to access Internet content on different platforms and devices. Traditional fixed layout design can no longer meet the user experience requirements of multiple platforms and multiple screen sizes. Therefore, adaptive layout methods for multi-platform visual communication design have emerged.

[0003] In the early days of Internet design, web page layouts usually adopted a fixed width or fixed height approach, which provided a good user experience at a specific screen size. However, with the diversification of screen sizes and resolutions, fixed layout design gradually exposed problems such as poor adaptability and poor user experience. Especially on mobile devices, fixed layout design often results in incomplete content display, disordered layout, or requires users to perform additional zooming and scrolling operations, which seriously affects the user experience.

[0004] To solve these problems, the design community began to explore adaptive layout methods. The core idea of ​​adaptive layout is to dynamically adjust the layout and content of web pages according to the screen size, resolution and other characteristics of the device to ensure good visual effects and user experience on different platforms and devices. This method not only improves the adaptability and compatibility of web pages, but also greatly improves the convenience and comfort of users accessing web pages on different devices.

[0005] In actual application, adaptive layout is not an easy task. It requires designers and developers to have a deep understanding of the display characteristics and user habits of different platforms, master advanced layout techniques and development tools, and have rich design experience and optimization skills. Especially in the implementation of responsive design, the application of elastic and relative units, the loading of dynamic content and resources, etc., it is necessary to comprehensively consider multiple factors to ensure the rationality and effectiveness of the layout. For this reason, an adaptive layout method for visual communication design for multiple platforms is proposed. Summary of the invention

[0006] In view of the deficiencies of the prior art, the present invention provides a multi-platform oriented visual communication design adaptive layout method to solve the background technical problems.

[0007] To achieve the above object, the present invention provides the following technical solution: Preferably, a multi-platform visual communication design adaptive layout method comprises the following steps:

[0008] Preliminary preparation and demand analysis: clarify design goals, including target users, usage scenarios, and device types; analyze the display characteristics and user habits of different platforms, and determine design principles and styles; collect and organize design resources, including fonts, colors, and icons.

[0009] Layout strategy formulation and planning: determine the overall layout framework, including the header, body, and bottom structure; adopt a fluid layout strategy to plan the adaptive behavior of page elements under different screen sizes, so that page elements can automatically adjust their position and size according to the screen size; design responsive navigation menus and interactive elements to ensure the consistency and readability of content on different devices;

[0010] Implementation of responsive design: Adopt fluid grid layout and elastic image technology to ensure that content automatically adjusts to different screen sizes. At the same time, use CSS media query to obtain the width and height of the device, and apply different CSS rules based on the width and height of the device to achieve personalized layout for different devices;

[0011] Application of elasticity and relative units: In CSS design, use relative units (such as percentage, em, rem, etc.) instead of absolute units (such as pixels) to ensure that the content maintains proper proportion and layout under different screen sizes and resolutions;

[0012] Loading dynamic content and resources: Dynamically load images and video resources suitable for the device based on the screen size and resolution; use JavaScript to monitor screen size change events, and combine CSS media queries with JavaScript to monitor screen size changes. Use CSS media queries to define basic styles and layout rules, preset styles for different screen sizes and resolutions, and then use JavaScript to monitor screen size change events, dynamically adjust the size and position of page elements according to the real-time screen size, and load images and video resources suitable for the device;

[0013] Application of layout technology: Combining CSS Grid and Flexbox layout models; CSS Grid layout creates a complex grid system to achieve more flexible and powerful layout control; Flexbox layout model enables elements to freely expand and contract in the container to adapt to different screen sizes;

[0014] Utilization of design and development tools: Based on the formulation and planning of layout strategies, use design tools (such as Sketch, Adobe XD, Figma) for responsive design, quickly create and test design effects on different screen sizes, and use developer tools for debugging and optimization of layout and performance.

[0015] Performance optimization: compress images and videos, reduce unnecessary HTTP requests, merge CSS and JavaScript files, and use browser cache and CDN to accelerate content distribution.

[0016] Preferably, the formulation and planning of the layout strategy also includes barrier-free design, and the requirements of barrier-free design are taken into consideration in the process of designing the adaptive layout to ensure that the content can be easily accessed and used by all users.

[0017] Preferably, in the performance optimization, unnecessary HTTP requests are reduced, CSS and JavaScript files are merged, and browser cache and CDN are used to accelerate content distribution.

[0018] Preferably, the dynamic content and resources are loaded, and vector graphics are used for multi-platform visual communication design to ensure the clarity and quality of the graphics at different resolutions. Vector graphics ensure the clarity and quality of the graphics at different resolutions.

[0019] Preferably, in the implementation of the responsive design, different CSS rules are applied according to the resolution and orientation characteristics of the device, and nested media queries are used to define more complex layout rules for different screen sizes and resolutions.

[0020] Preferably, the formulation and planning of the layout strategy and the use of design and development tools are all based on the front-end framework and library for layout and development. The front-end framework and library provide a wealth of responsive layout components and styles to simplify the development process.

[0021] Preferably, the performance optimization also includes testing and debugging, testing the design effects on different devices and browsers to ensure compatibility and consistency, and using developer tools for debugging to optimize layout and performance.

[0022] Preferably, in the implementation of the responsive design, CSS variables (Custom Properties) and preprocessors (such as Sass, Less) are used to improve the maintainability and reusability of the code, and global variables are defined to uniformly manage design properties such as color and font size, so as to facilitate rapid adjustment of design styles in different devices and scenarios.

[0023] Preferably, the performance optimization also includes continuous monitoring and optimization, continuously monitoring the performance of the website on different devices and screen sizes, timely identifying problems and optimizing them, and continuously improving design strategies and technical implementations based on user feedback and data analysis.

[0024] Compared with the prior art, the present invention has the following beneficial effects:

[0025] 1. The present invention uses a fluid layout strategy, combined with the design of responsive navigation menus and interactive elements, so that web page content can maintain a high degree of consistency and readability on different devices. At the same time, through the application of fluid grid layout, elastic image technology and CSS media query, personalized layout for different devices is achieved, further improving the user experience; in addition, the method also focuses on the application of elasticity and relative units, as well as the loading of dynamic content and resources, so that the web page can maintain the appropriate proportion and layout under different screen sizes and resolutions, while reducing loading time and data consumption; combined with CSS Grid and Flexbox layout models, the web page layout becomes flexible and changeable, meeting various complex layout requirements and adapting to different platforms for display.

[0026] 2. The present invention implements barrier-free design to ensure that all users, including special groups such as the visually impaired and the hearing impaired, can easily access and use the content, greatly improving user experience and inclusiveness. At the same time, adaptive layout and responsive design enable content to be well presented on different devices and screen sizes, enhancing user satisfaction and loyalty.

[0027] 3. The present invention significantly improves the loading speed of web pages, reduces user waiting time, and improves the overall user experience by reducing unnecessary HTTP requests, merging CSS and JavaScript files, and utilizing browser cache and CDN to accelerate content distribution.

[0028] 4. The present invention uses vector graphics for multi-platform visual communication design, ensuring the clarity and quality of graphics at different resolutions, so that the design can maintain consistency and aesthetics on different devices. At the same time, the use of front-end frameworks and libraries also simplifies the development process and improves design efficiency.

[0029] 5. The present invention uses CSS variables and preprocessors to improve the maintainability and reusability of the code, so that design attributes can be managed in a unified manner, facilitating quick adjustment of design styles in different devices and scenarios. This reduces maintenance costs and improves development efficiency.

[0030] Other features and advantages of the present invention will be described in the following description, and partly become apparent from the description, or understood by practicing the present invention. The purpose and other advantages of the present invention can be realized and obtained by the structures pointed out in the description, claims and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 The present invention is a flow chart of the method for designing an adaptive layout for multi-platform visual communication. DETAILED DESCRIPTION

[0032] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this technical field without creative work are within the scope of protection of the present invention.

[0033] Referring to the figure, the present invention provides a multi-platform visual communication design adaptive layout method, including the following detailed steps:

[0034] Preliminary preparation and demand analysis

[0035] Clearly define the design goals: At the beginning of the project, the design goals were first defined. The target users include Internet users of all ages, and the usage scenarios cover various environments from mobile devices to desktop computers. The device types include smartphones, tablets, laptops and desktops, as well as the screen sizes and resolutions of different devices.

[0036] Analyze the display characteristics and user habits of different platforms: Study the display characteristics of different platforms (such as iOS, Android, Web, etc.), including color performance, font rendering, etc.; analyze user usage habits on different platforms, such as operation methods, interaction preferences, etc.; determine design principles and styles based on the analysis results to ensure the consistency and coordination of the design on different platforms.

[0037] Collect and organize design resources: select fonts that match the design style to ensure readability and aesthetics on different platforms; determine the color scheme, including primary colors, secondary colors, etc., to create a unified visual atmosphere; collect and organize icon resources, including commonly used function icons, decorative icons, etc., to enrich design elements.

[0038] Development and planning of layout strategies

[0039] Formulate corresponding layout strategies based on accurate and demand analysis in the early stage;

[0040] Determine the overall layout framework: Layout and develop the header, body, and bottom structure based on front-end frameworks and libraries (such as Bootstrap, Vue.js, etc.) to ensure the clarity and rationality of the page layout. These front-end frameworks and libraries provide a wealth of responsive layout components and styles, which greatly simplifies the development process; the header area can include brand logos, navigation menus, etc.; the body area is the content display area; the bottom area can be used to place copyright information, contact information, etc.

[0041] Adopt a fluid layout strategy: plan the adaptive behavior of page elements under different screen sizes, so that page elements can automatically adjust their position and size according to the screen size; use the CSS Flexbox layout model to enable elements to freely expand and contract in the container to adapt to different screen sizes.

[0042] Design responsive navigation menus and interactive elements: When designing navigation menus, you can use forms such as folding menus and hamburger menus to adapt to the display requirements of small-screen devices; ensure that interactive elements (such as buttons, links, etc.) are clickable and operable on different devices.

[0043] Accessibility: When designing adaptive layouts, consider the requirements of accessibility, such as providing text descriptions, increasing font sizes, etc., to ensure that the content can be easily accessed and used by all users.

[0044] Responsive design implementation

[0045] Use fluid grid layout and flexible image technology: Fluid grid layout is a percentage-based layout method that automatically adjusts the width and position of elements according to the screen width, while flexible image technology ensures that images maintain appropriate proportions and quality at different resolutions.

[0046] Use CSS media queries: Through CSS media queries, you can obtain device attributes such as width and height, as well as resolution, orientation and other aspects. Based on the attributes and characteristics of the device, different CSS rules are applied to achieve personalized layouts for different devices.

[0047] CSS design: CSS variables (Custom Properties) and preprocessors (such as Sass and Less) are used to improve the maintainability and reusability of the code. By defining global variables to uniformly manage design properties such as color and font size, we can quickly adjust the design style in different devices and scenarios. For example, a global color variable $primary-color:#007BFF is defined, and then the variable is used throughout the project to set the primary color.

[0048] Specifically, use the following code to apply different layouts for different screen sizes:

[0049] Css

[0050] / *For small screen devices* /

[0051] @media(max-width:576px){

[0052] / *Layout rules for small screen devices* /

[0053] }

[0054] / *For medium screen devices* /

[0055] @media(min-width:577px)and(max-width:768px){

[0056] / *Layout rules for medium screen devices* /

[0057] }

[0058] / *For large screen devices* /

[0059] @media(min-width:769px){

[0060] / *Layout rules for large screen devices* /

[0061] }

[0062] Application of elasticity and relative units

[0063] In CSS design, use relative units (such as percentages, em, rem, etc.) instead of absolute units (such as pixels) to ensure that the content maintains proper proportion and layout under different screen sizes and resolutions. For example, use width:100%; to set the width of an element to 100% of the parent container, so that when the width of the parent container changes, the width of the element will also adjust accordingly;

[0064] Loading dynamic content and resources

[0065] In order to load dynamic content and resources, CSS media queries and JavaScript monitoring of screen size changes are combined. First, CSS media queries are used to define basic styles and layout rules, and preset styles for different screen sizes and resolutions. Then, JavaScript is used to monitor screen size change events, dynamically adjust the size and position of page elements according to the real-time screen size, and load pictures and video resources suitable for the device; this method not only maintains the simplicity and maintainability of CSS styles, but also gives full play to the flexibility and dynamism of JavaScript, thereby achieving more complex and sophisticated responsive design and improving user experience.

[0066] Specifically, events are triggered based on specific CSS media query conditions:

[0067] HTML part:

[0068]

[0069]

[0070]

[0071]

[0072]

[0073]

[0074] HTML part: defines a simple page structure that includes image and video elements.

[0075] CSS part: Media queries are used to preset styles for different screen sizes and resolutions to ensure that images and video elements can be displayed well on different devices.

[0076] JavaScript part: listens to screen size change events and dynamically adjusts the src attributes of image and video elements according to the real-time screen size to load resources suitable for the device. At the same time, the adjustContent function is called once immediately when the page loads to process the initial state.

[0077] In addition, vector graphics (such as SVG) are used for multi-platform visual communication design to ensure the clarity and quality of graphics at different resolutions, because vector graphics are based on mathematical formulas and can be infinitely scaled without distortion.

[0078] Application of layout technology:

[0079] Based on the formulation and planning of layout strategies, the application of layout technology combines the CSS Grid and Flexbox layout models. The CSS Grid layout model is a two-dimensional layout system that allows developers to create complex grid systems to achieve more flexible and powerful layout control. The Grid layout can easily achieve page column division, alignment, nesting and other layout requirements;

[0080] Basic syntax:

[0081] display:grid;: Sets the element as a Grid container.

[0082] grid-template-columns: Defines the number of columns in the grid and the width of each column.

[0083] grid-template-rows: Defines the number of rows in the grid and the height of each row.

[0084] grid-gap (or row-gap and column-gap): defines the spacing between grid items.

[0085] grid-area: Defines the position and size of grid items within the grid.

[0086] For example, use the following code to create a simple CSS Grid layout:

[0087] Css

[0088] .container{

[0089] display:grid;

[0090] grid-template-columns:repeat(3,1fr); / *Three columns, each with equal width* /

[0091] grid-template-rows:100px 200px; / *Two rows, the first row is 100px, the second row is 200px* /

[0092] grid-gap:10px; / *The spacing between grid items is 10px* /

[0093] }

[0094] .item1{

[0095] grid-area:1 / 1 / 2 / 3; / *Spans the first row and the first two columns* /

[0096] }

[0097] .item2{

[0098] grid-area:2 / 1 / 3 / 2; / *Spans the second row and the previous column* /

[0099] }

[0100] .item3{

[0101] grid-area:2 / 2 / 3 / 4; / *Spans the second row and the last two columns* /

[0102] }

[0103] The Flexbox layout model is a one-dimensional layout system that allows elements within a container to scale freely to adapt to different screen sizes and container sizes. Flexbox layout is particularly suitable for creating responsive layouts and complex alignment requirements.

[0104] Basic syntax:

[0105] display:flex;: Sets the element as a flex container.

[0106] flex-direction: defines the direction of the main axis (horizontal by default).

[0107] flex-wrap: defines whether line wrapping is allowed.

[0108] justify-content: defines how an element is aligned on the main axis.

[0109] align-items: Defines how elements are aligned on the cross axis.

[0110] flex: defines the scalability of an element (including flex-grow, flex-shrink, and flex-basis)

[0111] For example, use the following code to create a simple Flexbox layout:

[0112] Css

[0113] .flex-container{

[0114] display:flex;

[0115] flex-direction:row; / *The main axis direction is horizontal* /

[0116] flex-wrap:wrap; / *Allow line breaks* /

[0117] justify-content:space-between; / *Elements are evenly distributed on the main axis and aligned at both ends* /

[0118] align-items:center; / *Elements are centered on the cross axis* /

[0119] }

[0120] .flex-item{

[0121] flex:1 1 200px; / *The element can be stretched, the base width is 200px* /

[0122] margin:10px; / *The spacing between elements is 10px* /

[0123] }

[0124] HTML structure:

[0125] <div class＝"container">

[0126] <div class＝"item1">Grid Item 1

[0127] <div class＝"item2">Grid Item 2

[0128] <div class＝"item3">Grid Item 3

[0129]

[0130] <div class＝"flex-container">

[0131] <div class＝"flex-item">Flex Item 1

[0132] <div class＝"flex-item">Flex Item 2

[0133] <div class＝"flex-item">Flex Item 3

[0134]

[0135] In actual projects, CSS Grid and Flexbox layout models are used in combination to take full advantage of their advantages. For example, you can use Grid layout to create the overall structure of the page (such as header, body, sidebar, and footer), and then use Flexbox layout to handle sub-elements in the body (such as cards, list items, etc.).

[0136] Utilization of design and development tools:

[0137] On the basis of the formulation and planning of layout strategies, design tools such as Sketch, Adobe XD, and Figma are used for responsive design; based on front-end frameworks and libraries, these tools have rich design elements and component libraries to help quickly create and test design effects under different screen sizes; at the same time, developer tools are used to debug and optimize layout and performance; these tools provide real-time code editing and preview functions, which can detect and fix problems in time.

[0138] Performance optimization:

[0139] In terms of performance optimization, images and videos are compressed to reduce file size and speed up loading. Specific operations include using professional image and video compression tools or online services. File size is considered during the design or shooting stage, and low-resolution or low-quality materials are used for preview and testing as much as possible. The resolution and quality of images and videos are appropriately reduced without affecting the user experience.

[0140] Unnecessary HTTP requests are reduced by merging CSS and JavaScript files; specific operations include using build tools (such as Webpack, Gulp, etc.) to automatically merge and compress CSS and JavaScript files; manually merge the contents of multiple CSS or JavaScript files into one file; and ensure that the merged files still maintain the original functions and styles.

[0141] The browser cache is also used to store commonly used resources and files to reduce the time of repeated loading. In addition, specific operations include setting appropriate cache policies (such as Cache-Control, Expires, etc.) in the server response header; using version numbers or hash values ​​to manage cache file updates to avoid using outdated resources and ensure that sensitive data (such as user information, session tokens, etc.) are not cached.

[0142] CDN is also used to speed up content distribution and reduce latency. Specific operations include choosing a reliable CDN service provider (such as Cloudflare, Akamai, etc.); uploading the website's static resources (such as CSS, JavaScript, images, videos, etc.) to CDN; configuring DNS to point the website's domain name to the URL provided by CDN; monitoring CDN performance and adjusting and optimizing as needed.

[0143] To ensure the compatibility and consistency of the design, the design effects were tested on different devices and browsers, and debugged and optimized using developer tools.

[0144] Finally, we also carried out continuous monitoring and optimization; we continuously monitored the performance of the website on different devices and screen sizes, discovered problems in a timely manner and optimized them; based on user feedback and data analysis, we continuously improved the design strategy and technical implementation to ensure the best user experience.

[0145] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not intended to limit the embodiments of the present invention. For those skilled in the art, other different forms of changes or modifications can be made based on the above description. It is not necessary and impossible to list all the embodiments here. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the claims of the present invention.

Claims

1. A multi-platform visual communication design adaptive layout method, characterized in that: The following steps are involved: Preliminary preparation and demand analysis: clarify design goals, including target users, usage scenarios, and device types; analyze the display characteristics and user habits of different platforms, and determine design principles and styles; collect and organize design resources, including fonts, colors, and icons. Layout strategy formulation and planning: determine the overall layout framework, including the header, body, and bottom structure; adopt a fluid layout strategy to plan the adaptive behavior of page elements under different screen sizes, so that page elements can automatically adjust their position and size according to the screen size; design responsive navigation menus and interactive elements to ensure the consistency and readability of content on different devices; Implementation of responsive design: Adopt fluid grid layout and elastic image technology to ensure that content automatically adjusts to different screen sizes. At the same time, use CSS media query to obtain the width and height of the device, and apply different CSS rules based on the width and height of the device to achieve personalized layout for different devices; Application of elasticity and relative units: In CSS design, use relative units (such as percentage, em, rem, etc.) instead of absolute units (such as pixels) to ensure that the content maintains proper proportion and layout under different screen sizes and resolutions; Dynamic content and resource loading: Dynamically load images and video resources suitable for the device based on screen size and resolution; Use JavaScript to monitor screen size change events, and combine CSS media queries with JavaScript to monitor screen size changes. Use CSS media queries to define basic styles and layout rules, preset styles for different screen sizes and resolutions, and then use JavaScript to monitor screen size change events, dynamically adjust the size and position of page elements according to the real-time screen size, and load pictures and video resources suitable for the device; Application of layout technology: Combining CSS Grid and Flexbox layout models; CSS Grid layout creates a complex grid system to achieve more flexible and powerful layout control; Flexbox layout model enables elements to freely expand and contract in the container to adapt to different screen sizes; Utilization of design and development tools: Based on the formulation and planning of layout strategies, use design tools (such as Sketch, Adobe XD, Figma) for responsive design, quickly create and test design effects on different screen sizes, and use developer tools for debugging and optimization of layout and performance. Performance optimization: compress images and videos, reduce unnecessary HTTP requests, merge CSS and JavaScript files, and use browser cache and CDN to accelerate content distribution.

2. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: The formulation and planning of the layout strategy also includes barrier-free design. The requirements of barrier-free design are taken into consideration during the design of the adaptive layout to ensure that the content can be easily accessed and used by all users.

3. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: In the performance optimization, unnecessary HTTP requests are reduced, CSS and JavaScript files are merged, and browser cache and CDN are used to accelerate content distribution.

4. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: The dynamic content and resource loading adopts vector graphics for multi-platform visual communication design to ensure the clarity and quality of the graphics at different resolutions. Vector graphics ensure the clarity and quality of the graphics at different resolutions.

5. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: In the implementation of the responsive design, different CSS rules are applied according to the resolution and orientation characteristics of the device, and nested media queries are used to define more complex layout rules for different screen sizes and resolutions.

6. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: The formulation and planning of the layout strategy and the use of design and development tools are all based on the front-end framework and library for layout and development. The front-end framework and library provide a wealth of responsive layout components and styles to simplify the development process.

7. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: The performance optimization also includes testing and debugging, testing the design effects on different devices and browsers to ensure compatibility and consistency, and using developer tools for debugging to optimize layout and performance.

8. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: In the implementation of the responsive design, CSS variables (Custom Properties) and preprocessors (such as Sass and Less) are used to improve the maintainability and reusability of the code. By defining global variables to uniformly manage design properties such as color and font size, it is convenient to quickly adjust the design style in different devices and scenarios.

9. The method for adaptive layout of visual communication design for multiple platforms according to claim 1, characterized in that: The performance optimization also includes continuous monitoring and optimization, continuously monitoring the performance of the website on different devices and screen sizes, promptly identifying problems and optimizing them, and continuously improving design strategies and technical implementations based on user feedback and data analysis.

Images