CN101135970B

CN101135970B - 一种用户界面设计系统和方法

Info

Publication number: CN101135970B
Application number: CN2007101642119A
Authority: CN
Inventors: 袁宁
Original assignee: ZTE Corp
Current assignee: ZTE Corp
Priority date: 2007-09-30
Filing date: 2007-09-30
Publication date: 2010-09-01
Anticipated expiration: 2027-09-30
Also published as: CN101135970A

Abstract

本发明公开了一种用户界面(UI)设计系统和方法，均由UI设计端控制UI目标端进行UI设计，UI目标端将设计UI所涉及的UI设计信息返回给UI设计端。可见，本发明所提供的UI设计系统和方法，由于改由UI决策端与UI目标端共同完成UI设计，因此在设计时所显示出的UI与在实际应用时所显示出的UI必然是相同的，这使得最初的UI设计初衷能够很好地实现，因而能够明显提高用户满意度。

Description

一种用户界面设计系统和方法

技术领域

本发明涉及计算机技术，具体涉及一种用户界面设计系统和方法。

背景技术

在为手机等用户设备(UE)进行用户界面(UI)设计时，大家都在尝试在Windows等操作环境下实现手机UI的可视化设计。在UI设计过程中，UI设计端依靠自身所设置的图形用户接口(GUI)为UI设计提供系统支持；当UI设计端完成UI设计并将所设计的UI内容发送给UI目标端使用时，UI目标端则依靠自身所设置的GUI为UI运行提供系统支持。

目前，UE所使用的GUI是多种多样的，并且UI设计端往往与UI目标端使用不同的GUI，这种情况下两种不同的GUI会分别提供完全不同的UI显示方式，导致在设计时所显示出的UI与在实际应用时所显示出的UI有所不同，这种不同会使最初的UI设计初衷无法很好地表现甚至无法实现，进而降低用户满意度。

发明内容

有鉴于此，本发明的主要目的在于提供一种用户界面设计系统和方法，尽量避免设计时所显示出的UI与在实际应用时所显示出的UI不同的情况，提高用户满意度。

为达到上述目的，本发明的技术方案是这样实现的：

一种UI设计系统，该系统包括：设置于UI目标端的设计执行单元以及设置于UI设计端的设计决策单元；UI目标端与UI设计端相连；其中，

所述设计决策单元，用于控制所述设计执行单元进行UI设计；

所述设计执行单元，用于将设计所述UI所涉及的UI设计信息返回给所述UI设计端。

所述设计决策单元进一步与设计记录单元相连；其中，

所述设计决策单元，用于进一步将来自所述设计执行单元的UI设计信息发送给所述设计记录单元，以及从所述设计记录单元中获取UI设计信息；

所述设计记录单元，用于保存以及提供UI设计信息。

所述设计决策单元进一步与设计展示单元相连；其中，

所述设计决策单元，进一步用于将收到的UI设计信息发送给所述设计展示单元；

所述设计展示单元，用于显示所收到的UI设计信息。

所述UI目标端与所述UI设计端之间进一步连接有代码编译器，用于将UI目标端所发送的UI设计信息的代码格式转换为UI设计端能够识别的代码格式。

一种UI设计方法，该方法包括：

UI设计端控制UI目标端进行UI设计，UI目标端将设计UI所涉及的UI设计信息返回给UI设计端。

所述控制方法包括：

UI设计端向UI目标端发送UI设计请求，UI目标端获取所述UI设计请求中所包含的UI设计内容，并根据所获取的UI设计内容进行UI设计。

所述返回过程包括：

在完成所述UI设计时，所述UI目标端将所述UI设计信息直接发送给所述UI设计端；

或者，在完成所述UI设计时，所述UI目标端通知所述UI设计端，并根据来自所述UI设计端的命令将所述UI设计信息发送给UI设计端。

进一步将所返回的所述UI设计信息的代码格式转换为所述UI设计端能够识别的代码格式。

进一步显示所返回的所述UI设计信息。

设计的所述UI是控件，所述UI设计信息是控件图像数据和控件描述。

可见，本发明所提供的用户界面设计系统和方法，由于改由IJI决策端与UI目标端共同完成UI设计，因此在设计时所显示出的UI与在实际应用时所显示出的UI必然是相同的，这使得最初的UI设计初衷能够很好地实现，因而能够明显提高用户满意度。

附图说明

图1为本发明一实施例的UI设计系统图；

图2为本发明一实施例的UI设计流程图；

图3为本发明UI设计流程简图。

具体实施方式

下面结合附图对本发明技术详细描述。

参见图1，图1为本发明一实施例的UI设计系统图。图1中，UI目标端与UI设计端相连，UI目标端中所设置的各器件可以与UI设计端中所设置的各器件进行通信交互。其中，UI目标端中设置有设计执行单元；UI设计端中设置有两两相连的设计决策单元、设计展示单元、设计记录单元。另外，UI设计端与UI目标端中分别设置有GUI，以便为UI设计提供系统支持；并且，UI设计端中的GUI与UI目标端中的GUI可以相同，也可以不同。

在实际应用中，当设计决策单元接收到来自用户的控件设计请求时，并不根据该请求中的控件设计内容(通常是控件实体信息)在本地进行控件设计，而是将所述控件设计请求发送给UI目标端中的设计执行单元。收到来自UI设计端的控件设计请求时，设计执行单元以解析请求等方式从该请求中获取控件设计内容，并根据所获取的控件设计内容进行控件设计。在完成控件设计后，设计执行单元可以将进行控件设计时所涉及的控件设计信息发送给相连的缓存装置(图中未示出)保存起来。设计执行单元还可以向设计决策单元发送控件设计响应，通知UI设计端已经完成所要求的控件设计；在收到来自设计执行单元的控件设计响应之后，设计决策单元则可以向设计执行单元发送控件传输命令，以获取设计完成的所述控件。

接下来，在完成控件设计或收到来自UI设计端的控件传输命令时，设计执行单元可以将进行控件设计时所涉及的控件设计信息发送给设计决策单元，具体的发送过程有多种，如：

第一种发送过程：在设计执行单元向缓存装置保存控件设计信息的情况下，设计执行单元从该缓存装置中获取所保存的控件设计信息，并将获取到的控件设计信息发送给设计决策单元。

第二种发送过程：在设计执行单元不向缓存装置保存控件设计信息的情况下，设计执行单元直接将进行控件设计时所涉及的控件设计信息发送给设计决策单元。

需要说明的是：设计执行单元所发送的控件设计信息有可能具有设计决策单元无法正确识别的代码格式，在这种情况下，需要先对设计执行单元所发送的控件设计信息的代码格式转换为设计决策单元能够正确识别的代码格式，之后再将完成格式转换的控件设计信息发送给设计决策单元。

收到来自设计执行单元的控件设计信息后，设计决策单元可以将该控件设计信息发送给相连的设计记录单元保存。另外，设计决策单元还可以进一步控制相连的设计展示单元显示所收到的控件设计信息。具体而言，所述控件设计信息通常包括控件图像数据和控件描述(控件图像数据和控件描述分别包含不同的数据包头，以便加以区分)，设计决策单元可以将收到的控件图像数据发送给设计展示单元；由设计展示单元根据收到的控件图像数据构造控件图像，还根据收到的控件描述确定控件的位置和大小，并将最终得到的控件显示出来。

所述的代码格式转换操作可以由连接于UI目标端与UI设计端之间的代码编译器实现。

在实际应用中，设计决策单元还可以将各阶段设计所得的控件设计信息发送给设计记录单元保存。

以图1的描述为基础，在实际应用中可以使用如下的操作方式：

UI设计端的GUI为Draw2D，UI目标端的GUI为Linux下的QTE，中间文件代码转换的最终代码格式为C代码，UI设计的系统环境为Eclipse3.2、Draw2D3.2.0、GEF3.2.0。

UI设计的服务进程选择Socket服务，UI设计端与UI目标端间的通信选择XML描述，XML解析使用DOM。下面是XML描述的片断：

<？xml version＝″1.0″encoding=″UTF-8″？>

</widget>

当UI设计端需要绘制某个控件实体时，UI设计端可以生成符合XML的控件设计请求，并且在将该请求发送给UI目标端时还可以启动一个同步线程，利用该同步线程等待UI目标端反馈的控件设计信息。

UI目标端接收到控件设计请求后，利用QTE进行控件实体的绘制，并将进行控件设计时所涉及的控件设计信息打包成BMP图片格式的图像数据反馈给UI设计端。当然通过所述XML，UI设计端也可以发起控件传输命令。

UI设计端收到来自UI目标端的控件设计信息后，就可以在需要绘制所述控件的位置将该控件显示出来。当然，如果需要进行中间文件的代码格式转换，则将UI目标端所发送的控件设计信息的代码格式转换为C代码。

可见，图1所示的用户界面设计系统所能实现的操作流程如图2所示。参见图2，图2为本发明一实施例的UI设计流程图，该流程包括以下步骤：

步骤201：UI设计端向UI目标端发送控件设计内容。

步骤202：UI目标端接收并解析来自UI设计端的控件设计内容。

步骤203：UI目标端根据解析所得的控件设计内容对控件进行设计。

步骤204：UI目标端保存设计所述控件所涉及的控件设计信息。

步骤205：UI目标端将保存的控件设计信息发送给UI设计端。

步骤206：判断是否需要进行中间文件代码转换，如果需要，进入步骤207；否则，直接进入步骤208。

步骤207：将UI目标端所发送的所述控件设计信息的代码格式转换为UI设计端能够识别的代码格式。

步骤208：UI设计端接收并显示所收到的控件设计信息。

在实际应用时，UI设计端还可以将来自UI目标端以及各阶段设计所得的控件设计信息保存起来。

由图1和图2可见，本发明最关键的操作如图3所示。参见图3，图3为本发明UI设计流程简图，该流程包括以下步骤：

步骤301：UI设计端控制UI目标端进行UI设计。

步骤302：UI目标端将设计UI所涉及的UI设计信息返回给UI设计端。

上述操作除了可以应用于控件设计以外，还可以应用于其它的UI设计。

由以上所述可见，本发明所提供的用户界面设计系统和方法，由于改由UI决策端与UI目标端共同完成UI设计，因此在设计时所显示出的UI与在实际应用时所显示出的UI必然是相同的，这使得最初的UI设计初衷能够很好地实现，因而能够明显提高用户满意度。

Claims

1.一种用户界面UI设计系统，其特征在于，该系统包括：

设置有GUI的UI设计端，用于将包含有控件设计内容的控件设计请求发送给与其相连的、设置有GUI的UI目标端，控制所述UI目标端进行UI设计，所述控件设计内容是控件实体信息；

所述UI目标端，用于以解析请求的方式从所述控件设计请求中获取控件设计内容，并根据所获取的控件设计内容进行控件设计，将设计所述UI所涉及的控件设计信息返回给所述UI设计端，所述控件设计信息包括控件图像数据和控件描述；

连接于所述UI目标端和所述UI设计端之间的代码编译器，用于在需要进行中间文件代码转换时，将UI目标端所发送的控件设计信息的代码格式转换为UI设计端能够识别的代码格式。

2.根据权利要求1所述的系统，其特征在于，所述UI设计端进一步用于将来自UI目标端以及各阶段设计所得的控件设计信息保存起来。

3.根据权利要求1所述的系统，其特征在于，所述UI设计端进一步用于接收并显示所收到的控件设计信息。

4.一种用户界面UI设计方法，其特征在于，该方法包括：

设置有GUI的UI设计端将包含有控件设计内容的控件设计请求发送给与其相连的设置有GUI的UI目标端，控制UI目标端进行UI设计，所述控件设计内容是控件实体信息；

UI目标端以解析请求的方式从所述控件设计请求中获取控件设计内容，并根据所获取的控件设计内容进行控件设计，将设计UI所涉及的控件设计信息返回给UI设计端，所述控件设计信息包括控件图像数据和控件描述；

连接于所述UI目标端和所述UI设计端之间的代码编译器，在需要进行中间文件代码转换时，将UI目标端所发送的控件设计信息的代码格式转换为UI设计端能够识别的代码格式。

5.根据权利要求4所述的方法，其特征在于，所述UI设计端进一步将来自UI目标端以及各阶段设计所得的控件设计信息保存起来。

6.根据权利要求4所述的方法，其特征在于，所述UI设计端进一步接收并显示所收到的控件设计信息。

7.根据权利要求4所述的方法，其特征在于，所述UI目标端将所述控件设计信息返回给所述UI设计端的过程包括：

在完成所述UI设计时，所述UI目标端将所述控件设计信息直接发送给所述UI设计端；

或者，在完成所述UI设计时，所述UI目标端通知所述UI设计端，并根据来自所述UI设计端的命令将所述控件设计信息发送给UI设计端。