CN105511871A - 基于移动终端的用户界面设计系统及方法 - Google Patents

Abstract

本发明提供一种基于移动终端的用户界面设计系统及方法，该用户界面设计系统包括：背景设置单元，用于形成用户界面的界面背景层并根据背景指令为形成的所述界面背景层设置背景，所述界面背景层的大小适配于移动终端的显示屏幕的大小；以及与所述背景设置单元连接的处理单元，用于根据查看指令形成对应的查看命令并将所述查看命令发送给所述背景设置单元，所述背景设置单元将形成的所述界面背景层发送给所述移动终端的显示屏幕进行显示。通过移动终端为UI工程师提供了设计界面和查看界面的平台，避免了UI工程师和软件工程师之间反复进行设计、编译和查看的问题，还避免了电脑和手机的显示差异，有效提高了用户界面设计的效率。

Description

基于移动终端的用户界面设计系统及方法

技术领域

本发明涉及系统设备管理领域，特别是涉及一种基于移动终端的用户界面设计系统及方法。

背景技术

现在android的应用在研发的时候由UI工程师设计图片，软件工程师把这些图片放到代码编译后给UI工程师审查，中间因为图片在电脑和手机上的显示问题的一些差异，会出现在电脑上画出的效果到了手机上有变形，还有的时候当几张图片和文字组合后一起看的时候会和设计的时候有差异，这样就会出现UI工程师再次画出图片给软件工程师，软件工程师把图片放到代码编译后给UI工程师审查，出现反复设计、编译、和查看的问题，这样对工作效率有很大的影响。

发明内容

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种基于移动终端的用户界面设计系统及方法，用于解决现有的用户界面设计时出现的反复设计、编译和查看的问题和工作效率低的问题。

为实现上述目的及其他相关目的，本发明提供一种基于移动终端的用户界面设计系统，包括：背景设置单元，用于形成用户界面的界面背景层并根据背景指令为形成的所述界面背景层设置背景，所述界面背景层的大小适配于移动终端的显示屏幕的大小，所述背景指令包括图片指令或颜色指令，所述图片指令用于形成以图片为背景的界面背景层，所述颜色指令用于形成以颜色为背景的界面背景层；以及与所述背景设置单元连接的处理单元，用于根据查看指令形成对应的查看命令并将所述查看命令发送给所述背景设置单元，所述背景设置单元根据接收的所述查看命令发送所述界面背景层给所述移动终端的显示屏幕进行显示。

优选地，所述用户界面设计系统还包括与所述处理单元连接的区域设置单元，用于形成用户界面的区域设置层并根据区域指令在所述区域设置层中设置用户界面区域，为每一个用户界面区域进行区域设置，所述区域设置层位于所述用户界面层之上；所述区域设置单元还用于根据接收到的所述处理单元中的所述查看命令发送所述区域设置层给所述移动终端的显示屏幕进行显示。

优选地，在所述显示屏幕上包括用于分别形成图片指令和颜色指令的的图片按键和颜色按键；所述背景设置单元用于根据背景指令对应形成界面背景层，包括：所述背景设置单元读取接收到的图片指令中所指定的所述移动终端内存储的图片，并将读取的图片作为界面背景层的背景；以及所述背景设置单元读取接收到的所述颜色指令中所指定的颜色并将对应的颜色作为界面背景层的背景。

优选地，所述区域指令包括区域大小、区域坐标、区域背景、以及区域内容；

在所述显示屏幕上包括用于分别形成所述的区域大小、区域坐标、区域背景以及区域内容的区域大小按键、区域坐标按键、区域背景按键、以及区域元素按键；

所述区域设置单元用于根据区域指令在所述区域设置层中设置用户界面区域，为每一个用户界面区域进行区域设置，包括：

所述区域设置单元根据所述区域大小按键形成的区域大小中所指定的尺寸形成具有对应尺寸的用户界面区域；

所述区域设置单元根据所述区域坐标按键形成的区域坐标中所指定的坐标位置形成位于所述坐标位置的用户界面区域；

所述区域设置单元根据所述区域背景按键形成的区域背景中所指定的背景形成具有对应背景的用户界面区域，所述区域背景中所指定的背景为图片或者颜色；

所述区域设置单元根据所述区域元素按键形成的区域内容中所指定的元素形成具有所述元素的用户界面区域，所述区域内容中所指定的元素包括图片元素、颜色元素、以及文字元素。

优选地，在所述显示屏幕上还包括添加区域按键，用于形成新的区域指令以增加新的用户界面区域。

本发明还提供了一种基于移动终端的用户界面设计方法，包括：

为用户界面设置界面背景层；

根据背景指令而在所述界面背景层中设置背景，所述背景为适配于所述移动终端的显示屏幕的全屏显示，所述背景指令包括图片指令或颜色指令，通过所述图片指令形成以图片为背景的界面背景层，通过所述颜色指令形成以颜色为背景的界面背景层；以及

根据查看指令将经过背景设置的所述界面背景层通过所述显示屏幕显示设置效果。

优选地，所述用户界面设计方法还包括：

为用户界面设置区域设置层，所述区域设置层位于所述界面背景层之上；

根据区域指令，在所述区域设置层中设置用户界面区域，为一个用户界面区域进行区域设置；以及

根据查看指令将经过背景设置的所述界面背景层和区域设置的所述区域设置层通过所述显示屏幕显示设置效果。

优选地，于所述移动终端的显示屏幕上设置图片按键和颜色按键；

根据背景指令而在所述界面背景层中设置背景，包括：

通过触控所述图片按键并选定图片存储路径以形成所述图片指令，将所述图片指令中所指定的移动终端内存储的图片作为界面背景层的背景；以及

通过触控所述颜色按键并选定颜色以形成所述颜色指令，将所述颜色指令中所指定的颜色作为界面背景层的背景。

优选地，于所述移动终端的显示屏幕上设置区域大小按键、区域坐标按键、、区域背景按键、以及区域元素按键；

根据区域指令，为每一个用户界面区域进行区域设置，包括：

通过触控所述区域大小按键并指定区域大小，以所述区域大小中所指定的尺寸形成具有对应尺寸的用户界面区域；

通过触控所述区域坐标按键并指定区域坐标，以所述区域坐标中所指定的坐标位置形成位于所述坐标位置的用户界面区域；

通过触控所述区域背景按键并指定区域背景，以所述区域背景中所指定的背景形成具有对应背景的用户界面区域，所述区域背景中所指定的背景为图片或者颜色；以及

通过触控所述区域元素按键并指定区域内容，以所述区域内容中所指定的元素形成具有所述元素的用户界面区域，所述区域内容中所指定的元素包括图片元素、颜色元素、以及文字元素。

优选地，于所述移动终端的显示屏幕设置添加区域按键，通过触控所述添加区域按键形成新的区域指令以于所述区域设置层内增加新的用户界面区域。

本发明所提供的一种基于移动终端的用户界面设计系统及方法，具有以下有益效果：

本发明的基于移动终端的用户界面设计系统及方法，通过移动终端为UI工程师提供了设计界面和查看界面的平台，避免了UI工程师和软件工程师之间反复进行设计、编译和查看的问题，还避免了电脑和手机的显示差异，有效提高了用户界面设计的效率。

附图说明

图1显示为本发明基于移动终端的用户界面设计系统的结构框图。

图2显示为本发明基于移动终端的用户界面设计方法的流程图。

元件标号说明

10用户界面设计系统

101背景设置单元

102处理单元

103区域设置单元

20显示屏幕

S11～S13步骤

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

请参阅图1，本发明提供一种基于移动终端的用户界面设计系统，还提供了一种基于移动终端的用户界面设计方法，利用移动终端实现了一个设计平台，使得UI工程师可以基于移动终端进行用户界面的设计并直接进行效果查看，避免了由于电脑和手机上的显示差异而引起的工作效率低的问题。本发明的基于移动终端的用户界面设计系统能够提供图片、文字、以及颜色的设计组合，满足用户界面的设计参数要求，同时还提供了查看整体效果的功能，UI工程师可以直接方便的查看设计效果，省去了软件工程师的编译过程，UI工程师还能够直接进行用户界面的修改，这样极大地提高了用户界面的设计效率。下面结合附图对本发明基于移动终端的用户界面设计系统进行说明。

如图1所示，本发明基于移动终端的用户界面设计系统10包括背景设置单元101、处理单元102、以及区域设置单元103，背景设置单元101和区域设置单元103均与处理单元102连接，其中背景设置单元101用于形成界面背景层，区域设置单元103用于形成区域设置层，形成的区域设置层位于界面背景层之上，在用户界面中最多包括两层，第一层为界面背景层，第二层为根据实际情况把整个界面分成多个区域而形成的具有多个用户界面区域的区域设置层，用户界面为一层时就只有界面背景层。

背景设置单元101用于形成用户界面的界面背景层，背景设置单元101根据背景指令为界面背景层设置背景，该界面背景层的大小适配于移动终端的显示屏幕20的大小。该界面背景层作为设计的用户界面的背景，其为全屏显示，该界面背景层可以是图片，也可以是颜色。相应地，背景指令包括图片指令或颜色指令，在移动终端的显示屏幕20上形成供用户选择的图片按键和颜色按键，通过触控图片按键进行图片存放路径的选定而形成图片指令，该图片指令被背景设置单元101接收，背景设置单元101读取图片指令所指定的移动终端内存储的图片并将读取的图片作为界面背景层的背景。通过触控颜色按键进行颜色的选定而形成颜色指令，该颜色指令被背景设置单元101接收，背景设置单元101将该颜色指令中所指定的颜色作为界面背景层的背景。其中的背景指令根据用户的选择而形成，用户通过触控图片按键并选定图片的存储路径而形成图片指令，用户通过触控颜色按键并选定颜色而形成颜色指令，实现了按照用户的需求设计界面背景层的背景。

在移动终端上的显示屏幕20上显示有界面背景层，图片按键和颜色按键，选择图片按键后选定一张事先存放在移动终端的存储卡上的图片，即为用户界面的界面背景层选定了图片背景；或者选择颜色按键后直接输入颜色，即为用户界面的界面背景层选定了颜色背景；这样就为用户界面的界面背景层设置好了背景。

区域设置单元103用于形成用户界面的区域设置层，该区域设置层位于界面背景层之上，区域设置单元103根据区域指令在区域设置层中设置用户界面区域，为每一个用户界面区域进行区域设置，该区域指令包括区域大小、区域坐标、区域背景、以及区域内容，根据多个区域指令可以形成多个用户界面区域，通过区域大小、坐标、背景、以及内容实现区域设置。在移动终端的显示屏幕20上设置区域大小按键、区域坐标按键、区域背景按键、以及区域元素按键，通过触控区域大小按键指定区域大小，对用户界面区域的长度和宽度进行设计；通过触控区域坐标按键指定区域坐标，触控区域坐标按键后输入用户界面区域左上角的坐标信息以设定区域设置层的位置；通过触控区域背景按键指定区域背景，该区域背景为图片或者颜色，在该区域背景按键处设有供选择的图片和颜色的按键，通过图片按键选定图片作为背景，通过颜色指定颜色作为背景；通过触控区域元素按键指定区域内容，该区域内容中指定的元素包括图片元素、颜色元素、以及文字元素，在图片元素下需要设置该图片元素的坐标和选择移动终端的存储卡上存储的图片，在颜色元素下需要设置该颜色元素的坐标，需要设置颜色的大小范围，也就是形成颜色元素的区域大小，在文字元素下需要设置该文字元素的坐标，需要设置字体的大小，在每一用户界面区域下设有添加元素的按键，通过添加元素的按键可以根据需要随意添加图片、颜色、文字元素，也就是每一用户界面区域内可以包含多个图片元素、多个颜色元素、和/或多个文字元素。设置的区域大小、区域坐标、区域背景、以及区域内容被区域设置单元103接收，区域设置单元103根据接收到的区域指令在区域设置层中形成用户界面区域，包括：区域设置单元103根据区域大小按键形成的区域大小中所指定的尺寸形成具有对应尺寸的用户界面区域；区域设置单元103根据区域坐标按键形成的区域坐标中所指定的坐标位置形成位于该坐标位置的用户界面区域；区域设置单元103根据区域背景按键形成的区域背景中所指定的背景形成具有该对应背景的用户界面区域；区域设置单元103根据区域元素按键形成的区域内容中所指定的元素形成具有该元素的用户界面区域，区域设置单元103根据区域指令中所包含的区域大小、区域坐标、区域背景、以及区域内容完成了一个用户界面区域的设计，用户可以根据自身的需求设定区域指令中的各个要素，这样就完成了一个用户界面区域的设计。

在移动终端的显示屏幕20上设有添加区域按键，该添加区域按键用于形成新的区域指令，区域设置单元103根据新的区域指令形成新的用户界面区域，实现编辑设计多个用户界面区域。在用户界面的第二层(区域设置层)上包括多个用户界面区域，通过添加区域按键来增加用户界面区域。

处理单元102与背景设置单元101和区域设置单元103连接，该处理单元102根据查看指令形成对应的查看命令，将该查看命令发送给背景设置单元101和区域设置单元103，背景设置单元101根据收到的查看命令将形成的界面背景层发送给移动终端的显示屏幕20进行显示，区域设置单元103根据收到的查看命令将形成的区域设置层发送给移动终端的显示屏幕20进行显示。这样通过移动终端的显示屏幕20即可查看到用户界面的整体效果。在移动终端的显示屏幕20上设有查看效果按键，通过触控查看效果按键可以直接查看设计的界面背景层和区域设置层的整体效果，触控查看效果按键形成了查看命令，该查看命令被处理模块102接收并进行响应。若设计的用户界面仅有一层，即只有界面背景层，这样在进行选择时仅设置界面背景层即可，无需再进行区域设置层的设计，设计完成界面背景层后即可通过触控查看效果按键进行效果的查看。

在本发明的基于移动终端的用户界面设计系统中区域设置层的大小单位为dp，区域设置层的坐标包括X轴坐标和Y轴坐标，文字元素的字体大小单位为dp，sp，px。

下面对本发明基于移动终端的用户界面设计方法进行说明。

如图2所示，本发明基于移动终端的用户界面设计方法包括：

执行步骤S11，为用户界面设置界面背景层，根据背景指令而在该界面背景层中设置背景；该界面背景层适配于移动终端的显示屏幕的大小，界面背景层中的背景为显示屏幕的全屏显示，其中的背景指令包括图片指令或颜色指令，通过图片指令形成以图片为背景的界面背景层，通过颜色指令形成以颜色为背景的界面背景层。该界面背景层为设计的用户界面的背景，可以是图片，也可以是颜色，于移动终端的显示屏幕上设置图片按键和颜色按键，通过触控图片按键选定图片的存储路径而形成图片指令，根据该图片指令读取其指定的移动终端内存储的图片，将该读取的图片作为界面背景层的背景；通过触控颜色按键选定颜色而形成颜色指令，将该颜色指令所指定的颜色作为界面背景层的背景，这样为界面背景层设置好了背景。用户界面最多包括两层，第一层为界面背景层，第二层为区域设置层，当然用户界面也可以只包括一层，即仅有界面背景层，若只有界面背景层则直接执行步骤S13，若还包括有区域设置层，则接着执行步骤S12。

执行步骤S12，为用户界面设置区域设置层，该区域设置层位于界面背景层之上的区域设置层；根据区域指令，在区域设置层中设置用户界面区域，为每一个用户界面区域进行区域设置，该区域指令包括区域大小、区域坐标、区域背景、以及区域元素，于移动终端的显示屏幕上设有区域大小按键、区域坐标按键、、区域背景按键、以及区域元素按键；通过触控区域大小按键指定区域大小，该区域大小按键用于设置用户界面区域的长度和宽度，该长度和宽度的单块为dp；通过触控区域坐标按键指定区域坐标，该区域坐标按键用于输入用户界面区域的X轴坐标信息和Y轴坐标信息，以确定用户界面区域的具体位置；通过触控区域背景按键指定区域背景，若在区域背景按键处选择图片，则以选择的存储在移动终端的存储卡上的图片作为用户界面区域的背景，若在区域背景按键处选择颜色，则以选择的颜色作为用户界面区域的背景；通过触控区域元素按键指定区域内容，该区域内容中所指定的元素包括图片元素、颜色元素、以及文字元素，其中图片元素需要设置图片的坐标和选择移动终端的存储卡上存储的图片，颜色元素需要设置颜色元素的坐标和设置该颜色的大小范围高和宽，单位为dp，文字元素需要设置文字元素的坐标和文字的字体的大小，单位为dp，sp，px。一个用户界面区域内可以包括多个图片元素、多个颜色元素、和/或多个文字元素，根据需要进行随意添加。在每一个用户界面区域下设有添加元素按键，通过添加元素按键可以根据需要随意添加图片、颜色、文字元素。在移动终端上根据区域指令对应形成在区域设置层中的用户界面区域包括：通过触控区域大小按键指定区域大小，并根据该区域大小中所指定的尺寸形成具有对应尺寸的用户界面区域；通过触控区域坐标按键指定区域坐标，并根据该区域坐标中所指定的坐标位置形成位于该坐标位置的用户界面区域；通过触控区域背景按键指定区域背景，并根据该区域背景中所指定的背景形成具有对应背景的用户界面区域；通过触控区域元素按键指定区域内容并根据该区域内容中所指定的元素形成具有所述元素的用户界面区域。根据区域指令中所包含的区域大小、区域坐标、区域背景、以及区域内容完成了一个用户界面区域的设计。在用户界面的第二层(区域设置层)可以包括多个用户界面区域，在移动终端的显示屏幕设有添加区域按键，通过触控添加区域按键形成新的区域指令以增加新的用户界面区域。设计完成区域设置层后，接着执行步骤S13。

执行步骤S13，于移动终端上根据查看指令将界面背景层和区域设置层通过显示屏幕显示设置效果。在移动终端的显示屏幕上设有供选择的查看效果按键，通过触控查看效果按键形成查看指令，通过该查看指令将形成的界面背景层和区域设置层一并发送给显示屏幕进行显示，可以直观的看到整体的效果。若此时的用户界面仅有界面背景层一层时，查看效果按键形成的查询指令将经过背景设置的界面背景层通过显示屏幕显示设置效果。

下面以一具体事例对本发明基于移动终端的用户界面设计方法进行说明。

在移动终端的显示屏幕上设置有界面背景层和区域设置层，在界面背景层的区域内设有图片按键和颜色按键，通过图片按键和颜色按键对界面背景层的背景进行设置。在触控图片按键后弹出移动终端存储路径的选择，选定事先存储的图片，即为界面背景层指定了图片为背景；在触控颜色按键后，需要设置颜色的相关参数，具体包括有颜色背景的坐标位置，高度和宽度，以及颜色值的设定，比如可以将颜色的X坐标设为150，Y坐标设为140，高度为100，宽度为200，颜色值为ff00ff，这样就为界面背景层指定了颜色为背景，此时颜色的背景为全屏显示。在对界面背景层设置背景时，该背景为图片或者颜色，所以设置背景时，只能选择图片按键或者颜色按键。在区域设置层的区域内设有第一用户界面区域、第二用户界面区域、以及添加区域按键，第一用户界面区域和第二用户界面区域中需要指定的参数相同，下面以第一用户界面区域为例进行说明，在对第一用户界面区域进行区域设置时，在显示屏幕上的第一用户界面区域内设有区域大小按键、区域坐标按键、区域背景按键、以及区域元素按键，区域大小按键包括高度和宽度的参数设定，比如触控区域大小按键并输入高度100，宽度200，就形成了高度100，宽度200的第一用户界面区域；区域坐标按键包括X坐标和Y坐标的参数设定，通过X坐标和Y坐标指定第一用户界面区域左上角的角度位置，以实现第一用户区域的位置设定，比如触控区域坐标按键并输入X坐标50，Y坐标40，就在显示屏幕的X坐标50，Y坐标40的位置点放置第一用户界面区域的左上角；区域背景按键包括图片或者颜色的背景参数设定，选择图片为背景时需要指定图片的存储路径，选择颜色为背景时需要设置颜色背景的坐标位置，高度和宽度，以及颜色值；区域元素按键包括图片元素、颜色元素、文字元素、以及添加元素，通过图片元素设置图片的坐标参数和图片的路径参数，通过颜色元素设置颜色的坐标参数、高度和宽度参数、以及颜色值参数，通过文字元素设置文字的坐标、字体的大小、以及文字内容，通过添加元素可以根据需要任意增加图片元素、颜色元素、或文字元素，对于一个用户界面区域，通过设定该用户界面区域的大小、坐标、背景、以及内容，可以较好的且全面的满足用户界面设计的需求。通过添加区域按键可以增加新的用户界面区域，根据需求能够任意设置用户界面区域的数量。在显示屏幕上还设有查看效果，在设置完成用户界面后，可通过查看效果将设置将设置好的用户界面通过显示屏幕显示效果，能够方便直观的查看效果，有效的提高了工作效率。

综上所述，本发明基于移动终端的用户界面设计系统及方法，实现了在移动终端上进行用户界面设计的功能，基于移动终端为UI工程师提供用户界面的设计平台，使得UI工程师可直接方便地在移动终端上查看用户界面的设计效果，而无需借助软件工程师的编译，这样有效地提高了工作效率，且本发明能够根据需求设置图片、文字以及颜色的属性，满足UI工程师对用户界面的设计要求。所以，本发明有效克服了现有技术中的种种缺点而具高度产业利用价值。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。

Claims (10)

1.一种基于移动终端的用户界面设计系统，其特征在于，所述系统包括：

背景设置单元，用于形成用户界面的界面背景层并根据背景指令为形成的所述界面背景层设置背景，所述界面背景层的大小适配于移动终端的显示屏幕的大小，所述背景指令包括图片指令或颜色指令，所述图片指令用于形成以图片为背景的界面背景层，所述颜色指令用于形成以颜色为背景的界面背景层；以及

与所述背景设置单元连接的处理单元，用于根据查看指令形成对应的查看命令并将所述查看命令发送给所述背景设置单元，所述背景设置单元根据接收的所述查看命令发送所述界面背景层给所述移动终端的显示屏幕进行显示。

2.如权利要求1所述的基于移动终端的用户界面设计系统，其特征在于，还包括与所述处理单元连接的区域设置单元，用于形成用户界面的区域设置层并根据区域指令在所述区域设置层中设置用户界面区域，为每一个用户界面区域进行区域设置，所述区域设置层位于所述用户界面层之上；所述区域设置单元还用于根据接收到的所述处理单元中的所述查看命令将形成的所述区域设置层发送给所述移动终端的显示屏幕进行显示。

3.如权利要求1或2所述的基于移动终端的用户界面设计系统，其特征在于，

在所述显示屏幕上包括用于分别形成图片指令和颜色指令的图片按键和颜色按键；

所述背景设置单元用于根据背景指令对应形成界面背景层，包括：所述背景设置单元读取接收到的图片指令中所指定的所述移动终端内存储的图片，并将读取的图片作为界面背景层的背景；以及所述背景设置单元读取接收到的所述颜色指令中所指定的颜色并将对应的颜色作为界面背景层的背景。

4.如权利要求2所述的基于移动终端的用户界面设计系统，其特征在于，所述区域指令包括区域大小、区域坐标、区域背景、以及区域内容；

在所述显示屏幕上包括用于分别形成所述的区域大小、区域坐标、区域背景以及区域内容的区域大小按键、区域坐标按键、区域背景按键、以及区域元素按键；

所述区域设置单元用于根据区域指令在所述区域设置层中设置用户界面区域，为每一个用户界面区域进行区域设置，包括：

所述区域设置单元根据所述区域大小按键形成的区域大小中所指定的尺寸形成具有对应尺寸的用户界面区域；

所述区域设置单元根据所述区域坐标按键形成的区域坐标中所指定的坐标位置形成位于所述坐标位置的用户界面区域；

所述区域设置单元根据所述区域背景按键形成的区域背景中所指定的背景形成具有对应背景的用户界面区域，所述区域背景中所指定的背景为图片或者颜色；以及

所述区域设置单元根据所述区域元素按键形成的区域内容中所指定的元素形成具有所述元素的用户界面区域，所述区域内容中所指定的元素包括图片元素、颜色元素、以及文字元素。

5.如权利要求4所述的基于移动终端的用户界面设计系统，其特征在于，在所述显示屏幕上还包括添加区域按键，用于形成新的区域指令以增加新的用户界面区域。

6.一种基于移动终端的用户界面设计方法，其特征在于，包括：

为用户界面设置界面背景层；

根据背景指令而在所述界面背景层中设置背景，所述背景为适配于所述移动终端中显示屏幕的全屏显示；所述背景指令包括图片指令或颜色指令，通过所述图片指令形成以图片为背景的界面背景层，通过所述颜色指令形成以颜色为背景的界面背景层；以及

根据查看指令将经过背景设置的所述界面背景层通过所述显示屏幕显示设置效果。

7.如权利要求6所述的基于移动终端的用户界面设计方法，其特征在于，还包括：

为用户界面设置区域设置层，所述区域设置层位于所述界面背景层之上；

根据区域指令，在所述区域设置层中设置用户界面区域，为每一个用户界面区域进行区域设置；以及

根据查看指令将经过背景设置的所述界面背景层和区域设置的所述区域设置层通过所述显示屏幕显示设置效果。

8.如权利要求6或7所述的基于移动终端的用户界面设计方法，其特征在于，于所述移动终端的显示屏幕上设置图片按键和颜色按键；

根据背景指令而在所述界面背景层中设置背景，包括：

通过触控所述图片按键并选定图片存储路径以形成所述图片指令，将所述图片指令中所指定的移动终端内存储的图片作为界面背景层的背景；以及

通过触控所述颜色按键并选定颜色以形成所述颜色指令，将所述颜色指令中所指定的颜色作为界面背景层的背景。

9.如权利要求7所述的基于移动终端的用户界面设计方法，其特征在于，

于所述移动终端的显示屏幕上设置区域大小按键、区域坐标按键、区域背景按键、以及区域元素按键；

根据区域指令，为每一个用户界面区域进行区域设置，包括：

通过触控所述区域大小按键并指定区域大小，以所述区域大小中所指定的尺寸形成具有对应尺寸的用户界面区域；

通过触控所述区域坐标按键并指定区域坐标，以所述区域坐标中所指定的坐标位置形成位于所述坐标位置的用户界面区域；

通过触控所述区域背景按键并指定区域背景，以所述区域背景中所指定的背景形成具有对应背景的用户界面区域，所述区域背景中所指定的背景为图片或者颜色；以及

通过触控所述区域元素按键并指定区域内容，以所述区域内容中所指定的元素形成具有所述元素的用户界面区域，所述区域内容中所指定的元素包括图片元素、颜色元素、以及文字元素。

10.如权利要求9所述的基于移动终端的用户界面设计方法，其特征在于，

于所述移动终端的显示屏幕上设置添加区域按键，通过触控所述添加区域按键形成新的区域指令以于所述区域设置层内增加新的用户界面区域。