[发明专利]一种用户界面布局设计方法、系统、终端及介质

说明书

本发明公开了一种用户界面布局设计方法，包括：获取用户终端创建布局设计窗口的请求；新建布局设计窗口；获取用户终端选择布局设计应用终端；根据应用终端自动调整布局设计窗口的尺寸；获取待布局组件在布局设计窗口的布局样式；将待布局组件的布局效果显示在预览窗口，并向用户终端发送是否确认采用当前预览效果；接收用户终端发送的预览窗口效果确认信息；采用模拟器按实际比列显示窗口效果，完成布局设计。该方法可以同时适用于不同终端的UI的布局的应用，而且布局方式统一，支持可视化操作，用户只需要学习一种布局，就可以同时完成桌面应用、Web应用、移动终端应用以及其他应用的布局，用户操作简单，提升了开发效率。

技术领域

本发明涉及用户界面布局设计的技术领域，具体涉及一种用户界面布局设计方法、系统、终端及介质。

背景技术

现在操作系统的计算设备非常多。操作系统包括Windows、macOS、Linux等。计算设备包括PC、手机、平板、智能手表、智能电视、车载电脑等。在同一种计算设备上的应用程序也会以多种方式运行，例如，在PC上，有桌面程序，也有在浏览器中运行的Web应用，在手机和平板电脑上，也会有移动App、Web应用、微信小程序等多种运行方式。尽管这些应用的运行方式和机理差别很大，但他们有一个共同特点，就是都有用户接口(UI)，也就是图像界面。既然有了图像界面，就涉及到布局问题。所谓布局，就是指将UI需要的组件(如按钮、文本输入框、标签、复选框等)摆放在特定的位置的过程。

不同的应用类型，使用的布局技术是不同的。例如，传统的桌面应用，通常用绝对定位进行布局，也就是直接指定组件的x和y坐标以及width和height，C#的form就是这么布局的。还有一些开发工具，采用了一些辅助布局方式，例如，可以将组件放在最左侧，或充满整个窗口，无论窗口的尺寸如何变化，组件始终在窗口最左侧或充满整个窗口，Delphi就采用了这种布局方式。而Web应用的布局通常会采用流式布局，通过CSS实现。移动App的UI布局千差万别，例如，Android App采用类似流式布局的方式，但由有一些不同，并不是使用CSS，而是使用Android特有的布局属性。iOS App与Android App的布局方式有很大差别，微信小程序的布局与Web布局非常像，也是使用CSS，但也会有一些差异。总之，各种类型的应用所采用的布局方式千差万别，总结起来有如下几点不足：

1.学习成本非常高：如果用户希望开发全平台的应用，如Windows、macOS、Linux、Android、iOS、Web、微信小程序等。那么就意味着需要掌握每一种平台的布局方式，这样大大增加了用户学习成本，需要更多的开发人员参与，无论时间成本、还是金钱成本，都增加了很多。

2.布局不通用：不同平台的布局系统采用了完全不同的方式，而且并不通用。例如，在Windows的form布局完成，在macOS form上需要再重新做一遍同样的布局，哪怕这两个平台的应用的功能和UI完全相同，也需要重新做一遍。Android App、iOS App、小程序也存在这个问题。

3.功能有限：有一些平台的布局在功能上十分有限。例如，Visual Studio的布局系统，只支持绝对布局。如果用户想让组件无论窗口的尺寸如何改变都在固定的位置(如窗口的最底端)，就需要用代码进行控制，非常麻烦。

4.兼容性问题：由于平台存在版本和浏览器的差异，所以就算同一个平台，在不同版本，或在不同浏览器(包括同一款浏览器的不同版本)上，布局也并不是完全适配。例如，一些布局在低版本的Android和高版本的Android，有时就会乱。还有就是Web应用，在不同的浏览器(如IE、Chrome、Firefox等)上的表现也不尽相同，这也会给开发人员造成困扰。

5.无法可视化：目前只有PC平台的开发工具支持高可用的可视化，例如，VisualStudio、macOS等。这主要是因为PC的屏幕差异比较小，屏幕的长宽比都差不多，所以可视化比较容易做。而Web和移动开发工具的可视化工具非常少，有一些可视化开发工具，做的可用性并不高(使用起来比较费劲)，主要原因有如下两个：