[发明专利]屏幕尺寸的UI设计方法

说明书

本发明揭示了一种屏幕尺寸的UI设计方法，所述方法包括：用HTML5制作的页面需要设立标准的内容，通知承载HTML5的容器所述页面的标准；在HTML5的页面里用CSS统一设置所有HTML5使用到的标签和基础样式，告知不同的设备在展示时，按照设立的标准操作；编写监听事件来监控HTML5制作的页面的尺寸的变化；在HTML5布局中采用CSS浮动和Grid栅格系统进行页面切割，用来制作完整的组件模式；在CSS中编写查询代码，进行边界处理，提升用户的体验感及不同用户的使用习惯。本发明提出的屏幕尺寸的UI设计方法，可一次性编写代码，适用于不同的尺寸、不同设置的屏幕。

技术领域

本发明属于UI设计技术领域，涉及一种UI设计方法，尤其涉及一种屏幕尺寸的UI设计方法。

背景技术

现有的监控设备运行的显示屏幕多种多样，大到有4K尺寸的高清分辨率，小到手机端的小尺寸高清屏幕，中间还有各式各样，各种厂家的平台，大部分的厂家公司的产品和底层使用技术及适应的范围并没有统一，也没有标准。

由于整体的缺少统一标准，对于展示端的设计及开发带来很大成本。在实现技术上，目前主流的方式有很多种，针对不同的设备都有自己独立的设计理念。例如手机端尺寸适应，内容自适应，栅格系统设计，媒体查询，固定尺寸等设计，来解决目前市面上出现的不同尺寸，不同分辨率的问题。这样做的带来的直观问题就是，开发和调试的成本很高，维护和未来更多厂家生产的各种设备的不确定性，适应性也更差。

有鉴于此，如今迫切需要设计一种新的UI设计方式，以便克服现有UI设计方式存在的上述至少部分缺陷。

发明内容

本发明提供一种屏幕尺寸的UI设计方法，可一次性编写代码，适用于不同的尺寸、不同设置的屏幕。

为解决上述技术问题，根据本发明的一个方面，采用如下技术方案：

一种屏幕尺寸的UI设计方法，所述方法包括：

设立用HTML5制作的页面的标准，并将页面的标准通知承载HTML5的容器；

在HTML5的页面里用层叠样式表CSS统一设置所有HTML5使用到的标签和基础样式，告知不同的设备在展示时，按照设立的页面的标准来操作；

用javascript编写监听事件来监控HTML5制作的页面的尺寸的变化；

在HTML5布局中采用CSS浮动和Grid栅格系统进行页面切割用来制作完整的组件模式，增加屏幕内容展示的灵活性；

在CSS中编写媒体查询的代码，进行必要的边界处理，提升用户的体验感及不同用户的使用习惯。

根据本发明的一个方面，采用如下技术方案：一种屏幕尺寸的UI设计方法，所述方法包括：

用HTML5制作的页面需要设立标准的内容，通知承载HTML5的容器所述页面的标准；

在HTML5的页面里用层叠样式表CSS统一设置所有HTML5使用到的标签和基础样式，告知不同的设备在展示时，按照设立的标准操作；

编写监听事件来监控HTML5制作的页面的尺寸的变化；

在HTML5布局中采用CSS浮动和Grid栅格系统进行页面切割，用来制作完整的组件模式。

作为本发明的一种实施方式，所述方法进一步包括：在CSS中编写查询代码，进行边界处理，提升用户的体验感及不同用户的使用习惯。

本发明的有益效果在于：本发明提出的屏幕尺寸的UI设计方法，可一次性编写代码，适用于不同的尺寸、不同设置的屏幕。