CN112035108A - 一种用户界面布局设计方法、系统、终端及介质 - Google Patents

Abstract

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

Description

一种用户界面布局设计方法、系统、终端及介质

技术领域

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

背景技术

现在操作系统的计算设备非常多。操作系统包括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和移动开发工具的可视化工具非常少，有一些可视化开发工具，做的可用性并不高(使用起来比较费劲)，主要原因有如下两个：

(1)移动平台需要支持的屏幕种类太多，可视化需要适配各种类型的屏幕；

(2)Web和一些移动平台(如Android)采用了流式布局，这种方式并不太适合做可视化工具(流式布局更适合直接写布局代码)；

所以目前在设计Web和移动App的UI时，通常会采用直接编写布局代码的方式，如编写Web的CSS，以及Android布局的XML配置文件。尽管有一些现成的布局组件和库可以利用，但对于不熟悉CSS、Android布局的开发人员并不友好。

6.容器布局：目前很多平台都采用了容器布局的方式。例如，如果让多个组件水平排列，需要先放置一个水平的布局容器，然后将组件都放在这个水平布局容器中。这样做非常不方便，而且设计一套拥有复杂UI的布局难度很大。

发明内容

针对现有技术中的缺陷，本发明提供一种用户界面布局设计方法、系统、终端及介质，适用于多种应用终端的用户界面布局设计，布局方式统一、支持可视化操作，操作简单易学。

第一方面，本发明实施例提供的一种用户界面布局设计方法，包括：

获取用户终端创建布局设计窗口的请求；

新建布局设计窗口；

获取用户终端选择布局设计应用终端；

根据应用终端自动调整布局设计窗口的尺寸；

获取待布局组件在布局设计窗口的布局样式；

将待布局组件的布局效果显示在预览窗口，并向用户终端发送是否确认采用当前预览效果；

接收用户终端发送的预览窗效果确认信息；

采用模拟器按实际比列显示窗口效果，完成布局设计。

第二方面，本发明提供实施例的一种用户界面布局设计系统，包括：应用终端选择模块、组件管理模块、布局属性设置模块、布局设计模块、布局设计窗口和效果预览窗口，

所述应用终端选择模块用于选择布局设计应用终端；

所述组件管理模块用于提供管理和维护多种组件信息；

所述布局属性设置模块用于设置组件的布局属性；

所述布局设计模块用于根据用户终端的操作设计待布局组件；

所述布局设计窗口用于根据选择的应用终端和用户终端的操作模拟显示待布局组件的布局设计样式；

所述效果预览窗口用于缩放显示当前布局设计窗口的待布局组件的布局样式。

第三方面，本发明提供实施例的一种智能终端，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行上述实施例描述的方法。

第四方面，本发明提供实施例的一种计算机可读存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行上述实施例描述的方法。

本发明的有益效果：

本发明实施例提供的一种用户界面布局设计方法、系统、终端及介质，可以同时适用于桌面应用、Web应用、移动终端应用以及其他任何需要UI的布局的应用，而且布局方式统一，支持可视化操作，用户只需要学习一种布局，就可以同时完成桌面应用、Web应用、移动终端应用以及其他应用的布局，用户操作简单、方便，大大降低了用户的学习成本。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。

图1示出了本发明第一实施例所提供的一种用户界面布局设计方法的流程图；

图2示出了本发明第一实施例中的普通布局的流程图；

图3示出了本发明第一实施例中的一键布局的流程图；

图4示出了本发明另一实施例所提供的一种用户界面布局设计系统的结构示意图；

图5示出了本发明另一实施例所提供的一种智能终端的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

还应当进一步理解，本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本发明所属领域技术人员所理解的通常意义。

图1示出了本发明第一实施例所提供的一种用户界面布局设计方法的流程图，该方法适用于用户界面布局设计系统，方法包括以下步骤：

S1:获取用户终端创建布局设计窗口的请求；

S2:新建布局设计窗口；

S3:获取用户终端选择布局设计应用终端；

S4:根据应用终端自动调整布局设计窗口的尺寸；

S5:获取待布局组件在布局设计窗口的布局样式；

S6:将待布局组件的布局效果显示在预览窗口，并向用户终端发送是否确认采用当前预览效果；

S7:接收用户终端发送的预览窗效果确认信息；

S8:采用模拟器按实际比列显示窗口效果，完成布局设计。

本实施例提供的用户界面布局设计方法，未采用各种平台的标准布局，而是一种新的布局方式，底层原理是根据应用终端的屏幕的尺寸，以及每一个组件的布局规则，通过动态调整待布局组件的x(横坐标)、y(纵坐标)、width(宽度)和height(高度)来实现的，由于调整组件的x、y、宽度和高度是所有终端类型及不同版本平台都支持的，所以该方法可以兼容各种终端和平台。

每一个组件的布局规则：是指每一个可视化组件(如按钮、标签、文本输入框、列表组件等)都有一个alignment属性，该属性可以设置一些预定义规则，包括但不限于：center(位于父容器中心)、LeftTop(位于父容器左上角)、leftCenter(位于父容器左边缘中心位置)、rightTop(位于父容器的右上角)、HorizontalMatchParent(父容器水平方向充满整个屏幕)、VerticalMatchParent(父容器垂直方向充满整个屏幕)、AllMatchParent(父容器充满整个屏幕)等。

除了alignment属性外，还有marginLeft(距离左侧组件的距离)、marginTop(距离顶端组件的距离)、marginRight(距离右侧组件的距离)、marginBottom(距离底端组件的距离)、horizontalWeight(水平方向组件宽度的比重，如果水平方向有多个组件设置了该属性，会根据设置的值按比例自动设置这些组件的宽度)、verticalWeight(垂直方向组件高度的比重，如果垂直方向有多个组件设置了该属性，会根据设置的值按比例自动设置这些组件的高度)。如果用户通过布局属性设置模块设置了这些属性，系统会根据具体的设置自动调整当前窗口中所有组件的宽度(width)、高度(height)、x和y。例如，如果设置位于窗口的组件的alignment属性值为rightTop，那么无论如何调整窗口的尺寸，该组件将永远位于窗口的右上角。系统会根据rightTop，确保该组件的x、y、width和height符合alignment属性值的要求。也就是说，这种调整并未使用特定平台(如Web、Android等)的布局系统，而是根据组件的alignment、marginRight、horizontalWeight等属性值，自动调整参与布局的所有组件的x、y、width和height，从而满足整体的布局要求。本发明的布局方法中的布局属性包括但不限于本实施例描述的几种属性和属性值。

在本实施例中，用户设计布局样式包括手动设计(普通布局)和一键设计(一键布局)。

如图2所示，用户进行普通布局的过程如下：

在布局之前，用户通过用户终端创建布局设计窗口，然后选择布局设计应用终端，如移动终端、平板电脑、桌面或Web，系统根据选择的应用终端自动调整布局设计窗口的尺寸，然后开始布局。用户在布局设计窗口上放置待布局组件，并将其拖放到窗口的合适位置。获取用户终端在布局设计窗口放置的多个待布局组件信息，所述信息包括组件名称和当前位置；获取待布局组件的布局属性；根据布局属性设置待布局组件在布局设计窗口的布局样式。将待布局组件的布局效果显示在预览窗口，并向用户终端发送是否确认采用当前预览效果。用户通过预览窗口观察布局的总体效果。如果总体效果满足要求，则进行后续的操作，若不满足要求，则继续返回将待布局组件拖放到合适的位置，直到预览效果满足要求为止。如果预览窗口显示的总体效果没问题，用户终端向系统发送预览窗口效果确认信息；系统采用模拟器按实际比列显示窗口效果，如果仍然没有问题，那么就完成布局设计。

如图3所示，用户进行一键布局的过程如下：

用户将待布局组件放置在设定位置附近，比如：如果要想将按钮组件摆放着窗口的右上角，那么需要将按钮摆放着窗口右上角附近，这样通过一个快捷键，就会自动将按钮的alignment属性值设置为RightTop。这里的附近是根据窗口当前的尺寸，组件的宽度计算确定的。例如，如果窗口的宽度和高度都是400，组件的宽度和高度都是50，那么当组件距离窗口的右边缘和上边缘的距离小于组件尺寸的1/3(这里的值是动态调整的，不一定是1/3)，就会被认为是在窗口右上角的附近。系统获取用户终端在布局设计窗口设定位置附近放置的待布局组件信息，所述信息包括组件名称和当前位置；获取待布局组件的布局属性；将待布局组件标记为选中状态；根据待布局组件的当前位置、布局属性和布局设计窗口的尺寸自动计算待布局组件在布局设计窗口的位置和尺寸。将待布局组件的布局效果显示在预览窗口，并向用户终端发送是否确认采用当前预览效果。用户通过预览窗口观察布局的总体效果。如果总体效果满足要求，则进行后续的操作，若不满足要求，则继续返回将待布局组件设定位置附近位置，系统自动布局，直到预览效果满足要求为止。如果预览窗口显示的总体效果没问题，用户终端向系统发送预览窗口效果确认信息；系统采用模拟器按实际比列显示窗口效果，如果仍然没有问题，那么就完成布局设计。

本发明另一实施例的用户界面布局设计方法中的获取待布局组件的布局属性的具体方法包括：获取输入框中对待布局组件设置的文字布局属性信息。用户通过用户终端在输入框中输入“放在左上角”，系统就将当前选中的组件的布局属性设置为放在左上角，也就是将alignment属性值设置为LeftTop。

本发明另一实施例的用户界面布局设计方法中的获取待布局组件的布局属性的具体方法包括：获取用户终端发送的对待布局组件的语音布局属性信息。用户对用户终端的麦克风说“放在右上角”，系统就将当前选中的组件的布局属性设置为放在右上角，也就是将alignment属性值设置为RightTop。通过多种途径获取布局属性信息，方便用户操作。

系统也可以将其他应用的窗口截图，或输入Web网站的Url(以及其他任何可以描述软件UI的方式)，系统利用图像识别、AI技术，自动识别图像或Web网站页面中的组件元素，并且自动生成相应的组件，然后根据被识别元素的位置自动设置组件的alignment属性。该特性可以克隆其他应用程序的UI。

本发明实施例提供的用户界面布局设计方法，可以同时适用于桌面应用、Web应用、移动终端应用以及其他任何需要UI的布局的应用，而且布局方式统一，支持可视化操作，用户只需要学习一种布局，就可以同时完成桌面应用、Web应用、移动终端应用以及其他应用的布局，用户操作简单、方便，大大降低了用户的学习成本，提升开发效率。

设计好的布局样式通用，在桌面应用布局完成，同样可以将布局样式不做任何修改用到Web应用和移动终端App上，布局中的组件会自动根据窗口的尺寸进行调整，从而实现一处布局，可以应用到多种终端的效果，并且兼容性好，开发效率高。

在上述第一实施例中提供了一种用户界面布局设计方法，与之相对应的，本申请还提供一种用户界面布局设计系统。请参考图4，其为本发明另一施例提供的一种用户界面布局设计系统的示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

如图4所示，示出了本发明另一实施例提供的一种用户界面布局设计系统的结构示意图，该系统包括：应用终端选择模块、组件管理模块、布局属性设置模块、布局设计模块、布局设计窗口和效果预览窗口，

所述应用终端选择模块用于选择布局设计应用终端；

所述组件管理模块用于提供管理和维护多种组件信息；

所述布局属性设置模块用于设置组件的布局属性；

所述布局设计模块用于根据用户终端的操作设计待布局组件；

所述布局设计窗口用于根据选择的应用终端和用户终端的操作模拟显示待布局组件的布局设计样式；

所述效果预览窗口用于缩放显示当前布局设计窗口的待布局组件的布局样式。

用户通过选择布局设计的应用终端，系统自动调取选择的应用终端所对应的用户界面的尺寸，用户可以看到实时观察布局的效果。组件管理模块管理多种组件(如按钮、标签、文本输入框、列表组件等)，用户从组件管理模块中选择要布局的组件，用户在布局设计窗口中设计布局组件，设计的布局样式在效果预览窗口中显示。

布局设计模块包括手动设计单元，所述手动设计单元获取用户终端在布局设计窗口放置的多个待布局组件信息，所述信息包括组件名称、当前位置和当前尺寸；

获取待布局组件的布局属性；

根据布局属性设置待布局组件在布局设计窗口的布局样式。

本实施例提供的用户界面布局设计系统，通过设置手动设计单元，实现了人工手动拖放实现对布局组件的布局，用户可根据自己的喜好设定组件的布局。

布局设计模块包括一键设计单元，所述一键设计单元获取用户终端在布局设计窗口设定位置附近放置的待布局组件信息，所述信息包括组件名称、当前位置和当前尺寸；

获取待布局组件的布局属性；

将待布局组件标记为选中状态；

根据待布局组件的当前位置、布局属性和布局设计窗口的尺寸自动计算待布局组件在布局设计窗口的位置和尺寸。

本实施例提供的用户界面布局设计系统，通过设置一键设计单元，实现了对布局组件的自动布局，无需人工手工拖放确定组件放置位置，提高布局效率。

本发明实施例提供的用户界面布局设计系统，可以同时适用于桌面应用、Web应用、移动终端应用以及其他任何需要UI的布局的应用，而且布局方式统一，支持可视化操作，用户只需要学习一种布局，就可以同时完成桌面应用、Web应用、移动终端应用以及其他应用的布局，用户操作简单、方便，大大降低了用户的学习成本。

设计好的布局样式通用，在桌面应用布局完成，同样可以将布局样式不做任何修改用到Web应用和移动终端App上，布局中的组件会自动根据窗口的尺寸进行调整，从而实现一处布局，可以应用到多种终端的效果，并且兼容性好，开发效率高。

如图5所示，示出了本发明另一实施例还提供一种智能终端的结构示意图，该终端包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行上述实施例描述的方法。

应当理解，在本发明实施例中，所称处理器可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

输入设备可以包括触控板、指纹采传感器(用于采集用户的指纹信息和指纹的方向信息)、麦克风等，输出设备可以包括显示器(LCD等)、扬声器等。

该存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据。存储器的一部分还可以包括非易失性随机存取存储器。例如，存储器还可以存储设备类型的信息。

具体实现中，本发明实施例中所描述的处理器、输入设备、输出设备可执行本发明实施例提供的方法实施例所描述的实现方式，也可执行本发明实施例所描述的系统实施例的实现方式，在此不再赘述。

在本发明还提供一种计算机可读存储介质的实施例，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行上述实施例描述的方法。

所述计算机可读存储介质可以是前述实施例所述的终端的内部存储单元，例如终端的硬盘或内存。所述计算机可读存储介质也可以是所述终端的外部存储设备，例如所述终端上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。进一步地，所述计算机可读存储介质还可以既包括所述终端的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述终端所需的其他程序和数据。所述计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的终端和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露终端和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

Claims (10)

1.一种用户界面布局设计方法，其特征在于，包括：

获取用户终端创建布局设计窗口的请求；

新建布局设计窗口；

获取用户终端选择布局设计应用终端；

根据应用终端自动调整布局设计窗口的尺寸；

获取待布局组件在布局设计窗口的布局样式；

将待布局组件的布局效果显示在预览窗口，并向用户终端发送是否确认采用当前预览效果；

接收用户终端发送的预览窗口效果确认信息；

采用模拟器按实际比列显示窗口效果，完成布局设计。

2.如权利要求1所述方法，其特征在于，所述获取组件在布局设计窗口的布局样式具体包括：

获取用户终端在布局设计窗口放置的多个待布局组件信息，所述信息包括组件名称、当前位置和当前尺寸；

获取待布局组件的布局属性；

根据布局属性设置待布局组件在布局设计窗口的布局样式。

3.如权利要求1所述的方法，其特征在于，所述获取组件在布局设计窗口的布局样式具体包括：

获取用户终端在布局设计窗口设定位置附近放置的待布局组件信息，所述信息包括组件名称、当前位置和当前尺寸；

获取待布局组件的布局属性；

将待布局组件标记为选中状态；

根据待布局组件的当前位置、布局属性和布局设计窗口的尺寸自动计算待布局组件在布局设计窗口的位置和尺寸。

4.如权利要求2或3所述的方法，其特征在于，获取待布局组件的布局属性的具体方法包括：获取用户输入的用于设置待布局组件的文字布局命令。

5.如权利要求2或3所述的方法，其特征在于，获取待布局组件的布局属性的具体方法包括：获取用户终端发送的对待布局组件的语音布局属性信息。

6.一种用户界面布局设计系统，其特征在于，包括：应用终端选择模块、组件管理模块、布局属性设置模块、布局设计模块、布局设计窗口和效果预览窗口，

所述应用终端选择模块用于选择布局设计应用终端；

所述组件管理模块用于提供管理和维护多种组件信息；

所述布局属性设置模块用于设置组件的布局属性；

所述布局设计模块用于根据用户终端的操作设计待布局组件；

所述布局设计窗口用于根据选择的应用终端和用户终端的操作模拟显示待布局组件的布局设计样式；

所述效果预览窗口用于缩放显示当前布局设计窗口的待布局组件的布局样式。

7.如权利要求6所述的系统，其特征在于，所述布局设计模块包括手动设计单元，所述手动设计单元获取用户终端在布局设计窗口放置的多个待布局组件信息，所述信息包括组件名称、当前位置和当前尺寸；

获取待布局组件的布局属性；

根据布局属性设置待布局组件的在布局设计窗口的布局样式。

8.如权利要求6所述的系统，其特征在于，所述布局设计模块包括一键设计单元，所述一键设计单元获取用户终端在布局设计窗口设定位置附近放置的待布局组件信息，所述信息包括组件名称、当前位置和当前尺寸；

获取待布局组件的布局属性；

将待布局组件标记为选中状态；

根据待布局组件的当前位置、当前尺寸、布局属性和布局设计窗口的尺寸自动计算待布局组件在布局设计窗口的位置和尺寸。

9.一种智能终端，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，其特征在于，所述处理器被配置用于调用所述程序指令，执行如权利要求1-5任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1-5任一项所述的方法。

Images