CN112667233A - UI design method for screen size - Google Patents
UI design method for screen size Download PDFInfo
- Publication number
- CN112667233A CN112667233A CN202011529833.9A CN202011529833A CN112667233A CN 112667233 A CN112667233 A CN 112667233A CN 202011529833 A CN202011529833 A CN 202011529833A CN 112667233 A CN112667233 A CN 112667233A
- Authority
- CN
- China
- Prior art keywords
- html5
- page
- css
- standard
- size
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 238000013461 design Methods 0.000 title claims abstract description 29
- 238000012545 processing Methods 0.000 claims abstract description 7
- 238000012544 monitoring process Methods 0.000 claims description 5
- 238000004519 manufacturing process Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 description 7
- 238000012423 maintenance Methods 0.000 description 4
- 230000006978 adaptation Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
Images
Abstract
The invention discloses a UI (user interface) design method of a screen size, which comprises the following steps: the page made by HTML5 needs to set up standard content, and informs the container carrying HTML5 of the standard of the page; all tags and basic styles used by HTML5 are uniformly set in a page of HTML5 by using a CSS (cascading style sheets), and different devices are informed to operate according to set standards when being displayed; writing a listening event to monitor changes in the size of pages made by HTML 5; adopting CSS floating and Grid system to cut page in HTML5 layout to make complete module mode; and a query code is written in the CSS for boundary processing, so that the experience of a user and the use habits of different users are improved. The UI design method for the screen size can write codes at one time and is suitable for screens with different sizes and different settings.
Description
Technical Field
The invention belongs to the technical field of UI design, relates to a UI design method, and particularly relates to a UI design method for screen size.
Background
The existing monitoring equipment has various running display screens, the high-definition resolution of the size of 4K is achieved, the high-definition screen of the small size of the mobile phone end is small, various platforms of various manufacturers are arranged in the middle, and the application technologies and the application ranges of products and bottom layers of most manufacturers are not unified and have no standard.
Due to the lack of unified standards, the design and development of the display end are very costly. In the aspect of implementation technology, the current mainstream modes are various, and different devices have independent design concepts. For example, the mobile phone end size adaptation, the content adaptation, the grid system design, the media query, the fixed size and other designs are designed to solve the problems of different sizes and different resolutions in the market at present. The intuitive problems with this approach are high development and debugging costs, uncertainty in maintaining and future various devices produced by more manufacturers, and poor adaptability.
In view of the above, there is a need to design a new UI design to overcome at least some of the above-mentioned shortcomings of the existing UI design.
Disclosure of Invention
The invention provides a UI design method of screen size, which can write codes at one time and is suitable for screens with different sizes and different settings.
In order to solve the technical problem, according to one aspect of the present invention, the following technical solutions are adopted:
a method of screen-sized UI design, the method comprising:
setting up a standard of a page made with HTML5, and informing a container carrying HTML5 of the standard of the page;
the method comprises the steps that all tags and basic styles used by HTML5 are uniformly set in a page of the HTML5 through a Cascading Style Sheet (CSS), and different devices are informed to operate according to the set standard of the page when being displayed;
compiling a monitoring event by javascript to monitor the size change of the page made by HTML 5;
in the HTML5 layout, a CSS floating and Grid system is adopted to cut pages to manufacture a complete component mode, so that the flexibility of screen content display is improved;
codes for media query are written in the CSS, necessary boundary processing is carried out, and experience of users and use habits of different users are improved.
According to one aspect of the invention, the following technical scheme is adopted: a method of screen-sized UI design, the method comprising:
the page made by HTML5 needs to set up standard content, and informs the container carrying HTML5 of the standard of the page;
uniformly setting all labels and basic styles used by HTML5 in a page of HTML5 by using a Cascading Style Sheet (CSS), and informing different devices of operating according to set standards when displaying;
writing a listening event to monitor changes in the size of pages made by HTML 5;
CSS floating and Grid systems are used for page cutting in HTML5 layout to make complete component patterns.
As an embodiment of the present invention, the method further comprises: and a query code is written in the CSS for boundary processing, so that the experience of a user and the use habits of different users are improved.
The invention has the beneficial effects that: the UI design method for the screen size can write codes at one time and is suitable for screens with different sizes and different settings.
The invention provides a complete method for displaying pages aiming at screens with different sizes. The prior art can solve the problems, but only can be used for specific content under a specific condition. The invention can write codes once according to different sizes and different settings, and can repeatedly utilize new projects for later maintenance and development. The problems that the existing mode is long in development time, high in maintenance difficulty and poor in subsequent demand change adaptability are solved.
Drawings
FIG. 1 is a flowchart illustrating a UI design method for screen size according to an embodiment of the invention.
Detailed Description
Preferred embodiments of the present invention will be described in detail below with reference to the accompanying drawings.
For a further understanding of the invention, reference will now be made to the preferred embodiments of the invention by way of example, and it is to be understood that the description is intended to further illustrate features and advantages of the invention, and not to limit the scope of the claims.
The description in this section is for several exemplary embodiments only, and the present invention is not limited only to the scope of the embodiments described. It is within the scope of the present disclosure and protection that the same or similar prior art means and some features of the embodiments may be interchanged.
The steps in the embodiments in the specification are only expressed for convenience of description, and the implementation manner of the present application is not limited by the order of implementation of the steps. The term "connected" in the specification includes both direct connection and indirect connection.
The invention discloses a UI design method of screen size, and FIG. 1 is a flow chart of the UI design method of screen size in an embodiment of the invention; referring to fig. 1, the method includes:
step S1, the page made by HTML5 needs to set up standard content, and informs the container bearing HTML5 of the standard of the page;
step S2, uniformly setting all tags and basic styles used by the HTML5 in the page of the HTML5 by using the CSS, and informing different devices of operating according to the set standard when displaying;
step S3, compiling a monitoring event to monitor the change of the size of the page made by the HTML 5;
and step S4, performing page cutting in the HTML5 layout by adopting CSS floating and Grid system, and manufacturing a complete component mode.
In an embodiment, the method may further include step S5, writing a query code in the CSS, and performing boundary processing, so as to improve the experience of the user and the usage habits of different users.
In one embodiment of the invention, the invention can be used for UI-designing the size of the elevator screen.
The devices appearing on the market have various sizes, and the common devices have personal computers with the resolution of 1366 x 768, personal computers with the resolution of 1920 x 1080, android mobile phones with high-resolution small screens, apple mobile phones and various sizes with non-uniform resolution and non-uniform size. For these irregular scenes, a uniform UI design scheme needs to be established. In an embodiment of the present invention, a method for designing a screen-sized UI includes the steps of:
step S1, a standard of the page produced with HTML5 is established, and the container carrying HTML5 is notified of the standard of the page. The criteria for a page include: the scaling is not scaling, and the width is the width of the equipment; this prevents different vendors from initializing settings.
And step S2, uniformly setting all tags and basic styles used by the HTML5 in the page of the HTML5 by using the CSS, and informing different devices to operate according to the set standard of the page when the different devices are displayed.
The CSS is used for accurately controlling the position typesetting of objects in the webpage at a pixel level, supports almost all font size styles, has the capability of editing webpage objects and model styles, can carry out preliminary interactive design, and is the most excellent expression design language based on text display at present. The CSS is used for simplifying or optimizing writing methods according to the comprehension abilities of different users, and has strong readability for various crowds. By utilizing the characteristics of the box, when a page is designed, standards with different specifications can be set to adapt to different page scenes, the CSS is the best standard for rendering the page by the browser, and the box is designed based on the standards by utilizing the characteristics of the box, for example, the box model contains the attributes of inner and outer margins, frames and the like, so that the conflict with the CSS of other components can be effectively avoided when the component is manufactured.
Step S3, writing a monitoring event by javascript to monitor the size change of the page made by HTML 5. Therefore, better user experience can be achieved when the user performs non-full screen operation.
Step S4, adopting CSS floating and Grid system to cut page in HTML5 layout to make complete component mode, increasing flexibility of screen content display; this may provide flexibility for increased screen content presentation.
The Grid system is the most basic principle that pages are gridded, and page typesetting is carried out by utilizing 12 equal divisions and 24 equal divisions, so that the completeness, symmetry and attractiveness of the layout of the pages can be guaranteed. This is a design technique.
When designing a webpage, a reusable module, such as a login module, needs to be manufactured, so that the module can be reused and has complete functions, does not interfere with other modules, and can support screens with different sizes.
The design skill of the Grid system is matched with the attributes of a box model, absolute positioning, relative positioning and the like of the CSS. A complete, reusable assembly can be made.
And step S5, compiling media query codes in the CSS, and performing necessary boundary processing to improve the experience of users and the use habits of different users.
In summary, the UI design method for screen size provided by the present invention can write codes at one time, and is suitable for screens with different sizes and different settings.
The invention provides a complete method for displaying pages aiming at screens with different sizes. The prior art can solve the problems, but only can be used for a specific situation and specific content. The invention can write codes once according to different sizes and different settings, and can repeatedly utilize new projects for later maintenance and development. The problems that an existing development mode is long in development time, high in maintenance difficulty and poor in adaptability of follow-up demand change are solved.
The technical features of the embodiments described above may be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the embodiments described above are not described, but should be considered as being within the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The description and applications of the invention herein are illustrative and are not intended to limit the scope of the invention to the embodiments described above. Effects or advantages referred to in the embodiments may not be reflected in the embodiments due to interference of various factors, and the description of the effects or advantages is not intended to limit the embodiments. Variations and modifications of the embodiments disclosed herein are possible, and alternative and equivalent various components of the embodiments will be apparent to those skilled in the art. It will be clear to those skilled in the art that the present invention may be embodied in other forms, structures, arrangements, proportions, and with other components, materials, and parts, without departing from the spirit or essential characteristics thereof. Other variations and modifications of the embodiments disclosed herein may be made without departing from the scope and spirit of the invention.
Claims (3)
1. A method of UI design of a screen size, the method comprising:
setting up a standard of a page made with HTML5, and informing a container carrying HTML5 of the standard of the page;
the method comprises the steps that all tags and basic styles used by HTML5 are uniformly set in a page of the HTML5 through a Cascading Style Sheet (CSS), and different devices are informed to operate according to the set standard of the page when being displayed;
compiling a monitoring event by javascript to monitor the size change of the page made by HTML 5;
in the layout of HTML5, a cascading style sheet CSS floating and Grid system is adopted to cut pages to manufacture a complete component mode, so that the flexibility of screen content display is improved;
codes for media query are written in the CSS, necessary boundary processing is carried out, and experience of users and use habits of different users are improved.
2. A method of UI design of a screen size, the method comprising:
the page made by HTML5 needs to set up standard content, and informs the container carrying HTML5 of the standard of the page;
uniformly setting all labels and basic styles used by HTML5 in a page of HTML5 by using a Cascading Style Sheet (CSS), and informing different devices of operating according to set standards when displaying;
writing a listening event to monitor changes in the size of pages made by HTML 5;
and (3) performing page cutting by adopting a Cascading Style Sheet (CSS) floating and Grid system in the layout of the HTML5 to manufacture a complete component mode.
3. The screen-sized UI designing method according to claim 2, wherein:
the method further comprises: and compiling query codes in the cascading style sheet CSS for boundary processing, so that the experience of users and the use habits of different users are improved.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011529833.9A CN112667233A (en) | 2020-12-22 | 2020-12-22 | UI design method for screen size |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011529833.9A CN112667233A (en) | 2020-12-22 | 2020-12-22 | UI design method for screen size |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112667233A true CN112667233A (en) | 2021-04-16 |
Family
ID=75407613
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011529833.9A Pending CN112667233A (en) | 2020-12-22 | 2020-12-22 | UI design method for screen size |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112667233A (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103500166A (en) * | 2013-08-22 | 2014-01-08 | 合一网络技术(北京)有限公司 | Method for responsive web design with progressive enhancement function |
| US20150213117A1 (en) * | 2014-01-25 | 2015-07-30 | Microsoft Corporation | Adaptive ui for nested data categories across browser viewports |
| CN106021353A (en) * | 2016-05-09 | 2016-10-12 | Tcl集团股份有限公司 | Display adaption method and system of webpage |
| CN107797801A (en) * | 2017-10-20 | 2018-03-13 | 江苏电力信息技术有限公司 | A kind of adaptation method based on a variety of interface of mobile terminal |
| CN109471628A (en) * | 2018-10-30 | 2019-03-15 | 中译语通科技股份有限公司 | A kind of elastic response formula web data setting method |
| CN109683895A (en) * | 2018-12-21 | 2019-04-26 | 上海哔哩哔哩科技有限公司 | The method and system of a variety of browser sizes of webpage fit based on CSS preprocessor |
| CN110968385A (en) * | 2018-09-30 | 2020-04-07 | 北京国双科技有限公司 | Proportion display method and device |
-
2020
- 2020-12-22 CN CN202011529833.9A patent/CN112667233A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103500166A (en) * | 2013-08-22 | 2014-01-08 | 合一网络技术(北京)有限公司 | Method for responsive web design with progressive enhancement function |
| US20150213117A1 (en) * | 2014-01-25 | 2015-07-30 | Microsoft Corporation | Adaptive ui for nested data categories across browser viewports |
| CN106021353A (en) * | 2016-05-09 | 2016-10-12 | Tcl集团股份有限公司 | Display adaption method and system of webpage |
| CN107797801A (en) * | 2017-10-20 | 2018-03-13 | 江苏电力信息技术有限公司 | A kind of adaptation method based on a variety of interface of mobile terminal |
| CN110968385A (en) * | 2018-09-30 | 2020-04-07 | 北京国双科技有限公司 | Proportion display method and device |
| CN109471628A (en) * | 2018-10-30 | 2019-03-15 | 中译语通科技股份有限公司 | A kind of elastic response formula web data setting method |
| CN109683895A (en) * | 2018-12-21 | 2019-04-26 | 上海哔哩哔哩科技有限公司 | The method and system of a variety of browser sizes of webpage fit based on CSS preprocessor |
Non-Patent Citations (2)
| Title |
|---|
| MR_LIYANG: "css响应式设计", pages 1 - 10, Retrieved from the Internet <URL:https://www.cnblogs.com/Mr-liyang/p/6552530.html> * |
| WEIXIN_30565199: "移动端页面适配-viewport篇", pages 1, Retrieved from the Internet <URL:https://blog.csdn.net/weixin_30565199/article/details/95731050> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109801347B (en) | Method, device, equipment and medium for generating editable image template | |
| CN102591853B (en) | Webpage rearrangement method, webpage rearrangement device and mobile terminal | |
| JP4192150B2 (en) | Presentation of HTML content on the small screen terminal display | |
| US10339209B2 (en) | Webpage display method and device | |
| CN102968474B (en) | Webpage display process browsed by mobile communication equipment | |
| CN102662616A (en) | Screen graphics self-adaption method and system used for mobile terminal | |
| WO2020048326A1 (en) | Interface display method and system, and terminal device | |
| CN103593196A (en) | Page layout self-adaptation method and device | |
| CN104050185A (en) | Zoom-display processing method and device for page contents | |
| CN103135977A (en) | Information-inputting method in browser and device using the same | |
| US9767081B2 (en) | Method and apparatus for displaying a webpage in a mobile terminal | |
| CN101882055A (en) | Method and device for displaying page in zoomed mode on terminal | |
| US20150074519A1 (en) | Method and apparatus of controlling page element | |
| Harb et al. | Responsive web design | |
| US9548042B2 (en) | Responsive document breakpoints systems and methods | |
| Peng et al. | The design and research of responsive web supporting mobile learning devices | |
| CN106484388B (en) | Method and device for realizing user interface | |
| CN110310226B (en) | Picture mosaic display method and system | |
| US20170031889A1 (en) | Creating a communication editable in a browser independent of platform and operating system | |
| JP6395160B2 (en) | Document layout of electronic display | |
| CN105786987A (en) | Page configuration method and device | |
| AU2019341037B2 (en) | Dynamically adjusting text strings based on machine translation feedback | |
| CN112667233A (en) | UI design method for screen size | |
| CN110018863B (en) | Mobile terminal text display method, storage medium, equipment and system | |
| CN112800373B (en) | Webpage resource data generation method and device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |