CN102043562A - 将程序图标与程序执行结果分离显示的系统、界面及其方法 - Google Patents

Abstract

本发明提供一种将程序图标与程序执行结果分离显示的系统、界面及其方法，其通过分别定义使用者界面中的图标区域以及执行区域后，提供在图标区域中的任意位置设置图标，以及提供执行区域所包含的显示范围给与图标对应的程序，使得程序所产生的执行结果被显示于显示范围内的技术手段，可以让开发者更容易的调整使用者界面，并达成让使用者在一定限度内调整使用者界面的技术功效。

Description

将程序图标与程序执行结果分离显示的系统、界面及其方法

技术领域

本发明涉及一种显示系统、界面及其方法，特别涉及一种将程序图标与程序执行结果分离显示的系统、界面及其方法。

背景技术

使用者界面(User Interface，UI)，是计算机软硬件与使用者之间进行信息交换的媒介，凡参与人类与机械的信息交流的领域都存在着使用者界面。使用者界面使得使用者能够方便有效率地去操作计算机软硬件以达成双向的互动，完成所希望借助计算机完成的工作。使用者和计算机软硬件之间一般用受限制的自然语言进行互动，但随着窗口操作系统的普及，目前的使用者界面大多是以图形使用者界面(Graphics User Interface，GUI)的方式呈现。

图形使用者界面使用图形的方式，帮助使用者方便地向计算机发出指令，启动操作，并将运行的结果以图形方式显示给用户。图形用户界面操作简单，省去了使用字符使用者界面的使用者必须记忆各种命令的麻烦。

然而，开发图形使用者界面的过程是非常不容易的，开发者需要为图形使用者界面中的每一个图形对象撰写相对应的程序代码，这将使得一个看起来简单的图形使用者界面会有着冗长的程序代码，同时，在程序代码中通常会定义每一个图形对象(如图标或是程序的执行结果的显示范围)的大小、位置等属性以及图形使用者界面的整体显示风格，一旦图形对象需要更动，例如更改大小、位置等，开发者便需要修改程序代码，这样使得图形使用者界面的开发更加辛苦。也因为图形使用者界面的程序代码定义了所有图形对象，因此图形使用者界面通常是固定而且单一的，使用者也不能根据个人需求进行调整，当使用者的操作环境和习惯与开发者所设计的使用环境有差别时，会严重的影响使用者操作的流畅度以及使用的意愿。

综上所述，可知现有技术中长期以来一直存在开发者无法轻易的调整使用者界面的问题，因此有必要提出改进的技术手段，来解决此问题。

发明内容

有鉴于现有技术存在开发者无法轻易的调整使用者界面的问题，本发明遂提供一种将程序图标与程序执行结果分离显示的系统、界面及其方法，其中：

本发明所提供的将程序图标与程序执行结果分离显示的界面，至少包含：图标区域，提供设置程序；图标，与程序对应，依据位置信息被显示于图标区域的特定位置，其中，位置信息于程序被设置于图标区域中时被产生；执行区域，包含显示范围，并与图标区域相邻或部分重叠，用以于图标被选定时，提供于显示范围中显示程序产生的执行结果。

本发明所提供的将程序图标与程序执行结果分离显示的系统，至少包含：区域定义模块，用以定义图标区域及与图标区域相邻或部分重叠的执行区域，其中，执行区域包含显示范围；图标设置模块，用以产生图标于图标区域中的位置信息，其中图标与被设置于图标区域的程序对应；储存模块，用以储存位置信息及与程序的文件路径；显示模块，用以依据位置信息显示图标于图标区域中；图标选定模块，用以选定图标；界面整合模块，用以提供显示范围予程序，使程序产生的执行结果显示于显示范围中。

本发明所提供的将程序图标与程序执行结果分离显示的方法，其步骤至少包括：定义图标区域及相邻或部分重叠于图标区域的执行区域；当程序被设置于图标区域后，产生对应程序的图标(icon)在图标区域中的位置信息；储存位置信息及程序的文件路径；依据位置信息显示图标于图标区域中；选定图标；提供包含于执行区域的显示范围予程序，使程序产生的执行结果显示于显示范围中。

本发明所提供的系统与方法如上，与现有技术之间的差异在于本发明通过分别定义使用者界面中的图标区域以及执行区域，并提供在图标区域中的任意位置设置图标，以及提供执行区域所包含的显示范围给与图标对应的程序，使得程序所产生的执行结果被显示于显示范围内，借以解决现有技术所存在的问题，并可以达成使用者也可以轻易的在一定限度内调整使用者界面的技术功效。

附图说明

图1A为本发明所提供的将程序图标与程序执行结果分离显示的界面示意图。

图1B为本发明所提供的另一种将程序图标与程序执行结果分离显示的界面示意图。

图2为本发明所提供的将程序图标与程序执行结果分离显示的系统架构图。

图3为本发明实施例所提供的拖曳图标以设置程序的示意图。

图4A为本发明实施例所提的点击设置程序的位置的示意图。

图4B为本发明实施例所提供的输入被设置的程序的文件位置的界面示意图。

图5为本发明实施例所提供的调整图标的位置信息的示意图。

图6为本发明所提供的将程序图标与程序执行结果分离显示的方法流程图。

图7A为本发明实施例所提供的电子辞典产生的执行结果被显示的示意图。

图7B为本发明实施例所提供的代表电子辞典的图标移动到重叠区域后电子辞典产生的执行结果被显示的示意图。

图8为本发明实施例所提供的调整图标区域与执行区域的相对位置的示意图。

图9A为本发明实施例所提供的以2x2的方式显示图标的示意图。

图9B为本发明实施例所提供的以一行的方式显示图标的示意图。

图10A为本发明所提供的调整图标的位置信息或显示大小的详细方法流程图。

图10B为本发明所提供的调整图标的显示大小的详细方法流程图。

图11A为本发明实施例所提供的以增设程序后图标区域所显示的图标的示意图。

图11B为本发明实施例所提供的缩小显示大小来显示所有图标的示意图。

【主要组件符号说明】

100使用者界面

110图标区域

120执行区域

121显示范围

130重叠区域

150图标

151图标

154图标

155图标

191第一坐标

192第二坐标

210区域定义模块

220图标设置模块

240储存模块

250显示模块

260图标选定模块

270界面整合模块

280背景设定模块

290图标调整模块

310弹出式窗口

320对话框

412     图标

700a    执行结果

700b    执行结果

具体实施方式

以下将配合图式及实施例来详细说明本发明的特征与实施方式，内容足以使任何本领域技术人员能够轻易地充分理解本发明解决技术问题所应用的技术手段并据以实施，借此实现本发明可达成的功效。

为了方便调整使用者界面，本发明将使用者界面100分为图标区域110以及执行区域120等两个区域，如图1A或图1B所示，如此，当需要调整使用者界面100时，只需要分别调整图标区域110及/或执行区域120即可，不再需要对整个使用者界面100进行调整。

图标区域110为显示图标(icon)的区域，图标区域110所显示的各个图标150用来表示与的对应的程序。本发明所提及的「调整图标区域」的描述，为新增图标到图标区域110中、调整图标150在图标区域110中的位置、或者调整图标150在图标区域110中的显示大小等一个行为或多个行为的组合，但本发明并不以此为限。

一般而言，显示在图标区域110中的图标通常包含在其所对应的程序的文件中，或是为执行本发明的环境(通常即为窗口操作系统，但并不以此为限)所提供的资源(resource)，甚至是自订的图像文件。其中，本发明所提供的图标的来源并不以上述三者为限。

值得一提的是，图标区域110的背景可以是透明的，被图标区域110所覆盖的窗口依然会被使用者观看到，也就是说，使用者在此情况下无法观看到图标区域110，只能在使用者界面100中观看到被显示在图标区域110中的各个图标150。

执行区域120提供显示与图标区域110中的各图标150对应的程序产生的执行结果，执行区域120提供显示的执行结果包含但不限于程序产生的使用者界面以及输出的数据等。

执行区域120包含显示范围，也就是显示范围的边界会包含在执行区域120的边界之内，显示范围被用来显示与图标区域110中的各图标150对应的程序产生的执行结果的区域，因此，与图标150对应的程序会将产生的执行结果显示在显示范围中。一般而言，显示范围即为整个执行区域120。

当执行区域120被调整时，通常即为执行区域120或显示范围的大小被调整。

与图标区域110相同的，执行区域120的背景也可以是透明的，事实上，执行区域120的背景更可以由使用者自订。

在图1A中，图标区域110与执行区域120相邻，也就是图标区域110的下缘与执行区域120的上缘重叠，事实上，本发明所提的图标区域110与执行区域120相邻，并不限于图标区域110的下缘与执行区域120的上缘重叠，也可以是图标区域110的上缘与执行区域120的下缘重叠、或是图标区域110的左缘与执行区域120的右缘重叠等。

在图1B中，重叠区域130为图标区域110与执行区域120重叠的部分，重叠区域130除了可以显示图标之外，若也涵盖了显示范围，则重叠区域130也可以显示执行结果。与图1A相似的，重叠区域130并不限于图标区域110的下方与执行区域120的上方重叠，也可以是图标区域110的上方与执行区域120的下方重叠、或是图标区域110的左方与执行区域120的右方重叠等。

特别值得一提的是，虽然重叠区域130可以显示图标也可以显示执行结果，但重叠区域130中的图标与执行结果不会重叠显示，也就是说，一旦图标先显示于重叠区域130后，执行结果将不可以显示在图标上，而只能显示在重叠区域130的其它位置，同样的，当执行结果先显示于重叠区域130中时，图标将不会被显示在执行结果上。

以下继续以图2本发明所提的将程序图标与程序执行结果分离显示的系统架构图来说明本发明的系统运作。如图2所示，本发明的系统含有区域定义模块210、图标设置模块220、储存模块240、显示模块250、图标选定模块260以及界面整合模块270。

区域定义模块210负责定义图标区域110以及执行区域120的范围。一般而言，区域定义模块210会以执行本发明的计算机的显示画面上的坐标来定义图标区域110以及执行区域120。

例如，区域定义模块210可以定义图标区域110左上角的坐标为「(69，77)」以及定义图标区域110右下角的坐标为「(413，208)」，如此图标区域110的范围便被区域定义模块210定义出来。区域定义模块210也可以同样的方式定义执行区域120的范围，当区域定义模块210定义执行区域120左上角的坐标为「(69，208)」时，表示执行区域120与图标区域110相邻；而若区域定义模块210定义执行区域120左上角的坐标为「(69，198)」时，表示执行区域120与图标区域110有重叠的部分，重叠区域130左上角的坐标即为「(69，198)」，而重叠区域130右下角的坐标为「(413，208)」。但区域定义模块210所定义的图标区域110与执行区域120的范围并不以上述为限。

区域定义模块210也会定义执行区域120所包含的显示范围，与图标区域110以及执行区域120相似的，区域定义模块210一般会以显示画面上的坐标来定义显示范围，例如定义与执行区域120相同大小的显示范围，其左上角以及右下角的坐标分别为「(69，208)」与「(413，532)」，或是定义出一个被执行区域120所涵盖的显示范围，其左上角以及右下角的坐标分别为「(77，216)」与「(405，524)」等。

图标设置模块220负责于程序被设置于图标区域110后，产生被设置的程序所对应的图式的位置信息。图标设置模块220所产生的位置信息表示被设置的程序所对应的图式在图标区域110中的位置。一般而言，图标设置模块220所产生的与程序对应的图标的位置信息的格式可能与区域定义模块210定义图标区域110以及执行区域120的方式相关，例如当区域定义模块210以坐标定义图标区域110以及执行区域120的范围时，图标的位置信息也会为图标的左上角在垂直方向以及水平方向距离图标区域110的左上角的像素(pixel)数，但图标设置模块220产生的位置信息并不限于以图标左上角作为依据，也不以坐标为限，其它位置信息的格式例如为图标的左上角在显示画面中的坐标等。

图标设置模块220也可以提供在图标区域110上设置程序，使用者或开发者可以如图3所示，将与程序对应的图标151(如在窗口操作系统中所显示的代表程序的图标412)拖曳到图标区域110中的某个位置后，便可以通过图标设置模块220所提供的功能在图标区域110中设置程序，而后，图标设置模块220便会依据代表程序的图标412被拖曳到图标区域110的位置产生相对应的位置信息；或者如图4A所示，图标设置模块220提供使用者或开发者在图标区域110中的某个位置点击(click)鼠标右键，并在点击鼠标右键后所显示的弹出式(popup)选单310中选择「增加程序」的选项后，图标设置模块220会产生如图4B的对话框320，并继续提供使用者于对话框320的「程序位置」中直接输入欲设置的程序的文件路径后完成程序的设置，或是提供使用者点击按键「浏览」，借以在现有的选择程序的对话框(图中未示)中选择欲设置的程序后，完成程序的设置。而在程序设置完成之后，图标设置模块220会依据使用者在图标区域110中点击鼠标右键的位置产生相对应的位置信息。其中，图标设置模块220提供在图标区域110上设置程序的方式并不以上述两种为限。

值得一提的是，使用者可以将各个图标150拖曳到图标区域110中的任何位置，例如将图标排为两列，或将两列的图标排成一列，甚至随意移动图标，使图标零散的分布在图标区域110中等。图标设置模块220会在各个图标150被移动后产生被移动的图标的位置信息，如此，使用者便可以方便且容易的调整使用者界面。

另外，由于被设置在图标区域110中的各个图标150仅仅是用来表示其所对应的程序，因此，图标设置模块220更可以提供设定与被设置于图标区域110中的程序相对应的图像文件，例如，使用者可以在图标151上点击鼠标右键，并在弹出式选单中选择「更换图标」的选项，借以选择新的图像文件后，图标设置模块220会设定使用者所选择的图像文件为与该程序对应的图标，但图标设置模块220提供设定与程序对应的图标的方式并不以此为限。

储存模块240负责储存图标设置模块220所产生的位置信息以及与图标对应的程序的文件路径等参数，储存模块240所储存的参数并不以此为限，凡与显示图标或执行程序相关的数据都可以包含于本发明所提的参数中。

显示模块250负责依据储存模块240所储存的图标的位置信息，在图标区域110中显示该图标。例如，图标的位置信息为坐标「(198，198)」时，若显示模块250将坐标「(198，198)」视为图标的左上角的坐标，则在显示模块250将图标显示在显示画面上时，被显示的图标的左上角会在显示画面中坐标为「(198，198)」的位置；又如，图标的位置信息为像素数「dw＝11，dh＝11」时，表示图标的左上角与图标区域110的左上角之间的水平距离为11个像素，垂直距离也为11个像素，也就是说，若图标区域110的左上角的坐标为「(69，77)」，则在显示模块250将图标显示在显示画面上时，被显示的图标的左上角会在坐标为「(80，88)」的位置。

随着图标的来源不同，显示模块250也会依据储存模块240所储存的图标所对应的程序的文件路径，读取包含于程序中的图标后，再将图标显示在图标区域110中，或是依据储存模块240所储存的参数中有关图标的项目后，读取执行本发明的环境所提供的图标，或是读取使用者或开发者自订的图标，再将读取出的图标显示在图标区域110中。

值得一提的是，显示模块250可以透明的背景来显示图标区域110以及执行区域120，也就是说，在图标区域110中，没有被图标150覆盖的部分将会是透明的，可以通过没有图标的图标区域110观看到在执行本发明的环境中，重叠在图标区域110之下的窗口，同样的，在执行区域120中，没有被程序产生的执行结果所覆盖的部分也会是透明的，此外，显示模块250也可以使用者或开发者自订的背景来显示执行区域120。

图标选定模块260负责选定被显示于图标区域110中的图标。一般而言，图标选定模块260会在使用者或开发者操作光标并点击显示于图标区域110中的某个图标后，接收该图标被点击的输入讯号，借以选定被点击的图标，但图标选定模块260选定图标的方式并不以此为限。

界面整合模块270负责在图标选定模块260选定图标后，依据储存模块240所储存的与被选定的图标对应的程序的文件路径，呼叫(call)与被选定的图标对应的程序，使得与被选定的图标对应的程序开始执行，并在呼叫与被选定的图标对应的程序时，提供执行区域120包含的显示范围给与被选定的图标对应的程序，使得与被选定的图标对应的程序所产生的执行结果可以依据显示范围的大小被显示在执行区域120中。一般而言，界面整合模块270会先依据显示范围产生相对应的显示位置数据后，再将显示位置数据以与被选定的图标对应的程序的参数的形式呼叫与被选定的图标对应的程序，借以将显示范围传递给与被选定的图标对应的程序，但界面整合模块270提供显示范围的方式并不以此为限，例如界面整合模块270也可以先唤起与被选定的图标对应的程序后，再以程序/线程间传递信息的方式，将显示位置数据传递给与被选定的图标对应的程序。

与被选定的图标对应的程序在被界面整合模块270所呼叫后，可能以本发明的子程序(process)或子线程(thread)，也可能已在执行本发明的环境中的新程序的形式执行。

此外，本发明更可以包含背景设定模块280以及图标调整模块290，分述如下。

背景设定模块280负责提供输入执行区域的背景，在使用者或开发者通过背景设定模块280输入自定义的背景后，储存模块240会储存被输入的自订背景，显示模块250会将使用者输入的自订背景显示为执行区域120的背景。

图标调整模块290负责调整显示模块250显示图标时所使用的显示大小、或调整图标设置模块220所产生的图标的位置信息。当使用者或开发者通过图标设置模块220所设置的图标太多，使得显示模块250无法以预定的显示大小将所有图标显示在图标区域110中时，也就是显示模块250以预定的显示大小无法在图标区域110中显示所有图标时，将会发生图标重叠的情况，图标调整模块290会调整显示大小，使得显示模块250在图标区域110中所显示的图标较小，例如将图标由100x100像素改为75x75像素来显示，借以在图标区域110中显示出所有的图标。

而在使用者拖曳图标155到图标区域110中，或在使用者拖曳在图标区域110中的图标155而改变图标155在图标区域110中的位置时，若如图5所示，被设置于图标区域110中的图标155与图标154产生重叠，则图标调整模块290会先在图标区域110中侦测出可以不与其它图标重叠而显示图标155的位置信息后，将造成重叠的图标155的位置信息调整到侦测出的新的位置信息，例如图标调整模块290以水平移动图标的方式调整图标155的位置信息，当图标调整模块290侦测出图标154与图标区域110的边界大于图标155的宽度时，便可以将图标155的左上角的坐标(位置信息)由第一坐标191移动到第二坐标192，使得被使用者拖曳的图标155在图标区域110中的位置被图标调整模块290移动到没有重叠的位置，但图标调整模块290调整图标的位置信息的方式并不以调整水平方向的坐标值为限。另外，图标调整模块290也可以调整显示模块250显示图标时所使用的显示大小，使得显示模块250以较小的显示大小来显示图标，例如，在无法侦测出可以不与其它图标重叠而显示图标155的位置信息后调整显示模块250显示图标所使用的显示大小，借以让图标不再重叠。

接着以第一实施例来解说本发明的运作系统与方法，并请参照图6本发明所提的将程序图标与程序执行结果分离显示的方法流程图。

若开发者使用本发明开发使用者界面，则需要先设定与图标区域110以及执行区域120相关的参数，如大小、相对位置等，假设开发者设定使用者界面100的图标区域110为「1024x 314像素」、执行区域120为「1024x542像素」，显示范围与执行区域120相同、重叠区域为「1024x88像素」、以及图标区域110与执行区域120的相对位置如图1B所示，图标区域110的下方部分与执行区域120的上方部份重叠，但使用本发明的使用者界面并不以此为限。

当本发明被执行时，区域定义模块210会依据图标区域110以及执行区域120的大小、相对位置等参数，定义出图标区域110以及执行区域120(步骤601)。例如，在本实施例中，执行本发明的环境给予使用本发明的使用者界面100的起始像素(通常为左上角的位置，但本发明并不以此为限)在显示画面中的坐标为「(413，208)」，则图标区域110的左上角以及右下角在显示画面上的坐标分别为「(413，208)」以及「(1436，521)」，重叠区域130的左上角以及右下角在显示画面上的坐标应分别为「(413，434)」至「(1436，521)」，而执行区域120的左上角以及右下角在显示画面上的坐标则分别为「(413，434)」以及「(1436，975)」。

在区域定义模块210定义图标区域110以及执行区域120(步骤601)后，开发者可以通过图标设置模块220所提供的功能，在图标区域110中设置可在使用者界面100中使用的程序(步骤611)。假设在本实施例中，开发者欲设定的程序为「电子辞典」，开发者可以如图3所示，将与「电子辞典」对应的图标151拖曳到图标区域110上的任意位置，借以设定「电子辞典」可以通过使用者界面100使用，或是以如图4A以及图4B的连续图所示，在图标区域110上的任意位置点击鼠标，借以在对话框320中输入「电子辞典」所在的文件路径来完成设定，但本发明所提的开发者在图标区域110上设定程序可以通过使用者界面100使用的方式并不以此为限。其中，与程序「电子辞典」对应的图标151在此即为执行本发明的环境所显示的代表「电子辞典」的图标412(请参考图3)。

在开发者设定可通过使用者界面100使用的程序后，图标设置模块220会依据与程序对应的图标被拖曳到图标区域110上的位置或是鼠标在图标区域110上点击的位置，产生图标在图标区域110中的位置信息(步骤612)。若在此实施例中，代表程序「电子辞典」的图标151被拖曳到图标区域110上的位置(或是鼠标在图标区域110上点击的位置为显示画面中的坐标)，假设如图3所示，为「(421，216)」，则图标设置模块220所产生的图标的位置信息可以为相对于图标区域110的左上角的水平距离以及垂直距离，也就是可以表示水平距离为8像素、垂直距离为8像素的数据，如「dw＝8，dh＝8」等，但本发明所提的位置信息并不以此为限。其中，本发明所提的图标被拖曳到图标区域110上的位置以及鼠标在图标区域110上点击的位置亦不以显示画面中的坐标为限。

值得一提的是，由于代表程序「电子辞典」的图标151可以被拖曳到图标区域110中的任何位置，因此可能被开发者拖曳到同属于图标区域110以及执行区域120的重叠区域130上。

在图标设置模块220产生与程序对应的图标在图标区域110中的位置信息(步骤612)后，储存模块240会储存图标在图标区域110中的位置信息以及与图标对应的程序的文件路径(步骤620)。之后，显示模块250会依据储存模块240所储存的图标的位置信息，将图标显示在图标区域110中(步骤650)。例如，在本实施例中，显示模块250会依据储存模块240所储存的位置信息「dw＝8，dh＝8」，在图标区域110中显示出代表程序「电子辞典」的图标151，使得代表「电子辞典」的图标151的左上角的水平坐标与垂直坐标都距离图标区域110的左上角为8像素，其中，显示模块250可以使用图标151的预设大小，如75x75像素，在图标区域110中显示图标151，显示模块250也可以使用自订的显示大小，如50x50或100x100等，在图标区域110中显示图标151，但显示模块250显示图标所使用的显示大小并不以此为限。

之后，当图标选定模块260选定代表程序「电子辞典」的图标151(步骤660)后，界面整合模块270可以直接呼叫程序「电子辞典」(「电子辞典」为本发明的子程序)，或是通过执行本发明的环境间接呼叫「电子辞典」(「电子辞典」为在执行本发明的环境中的独立执行的程序)，并在呼叫「电子辞典」时，将执行区域120包含的显示范围提供给被选定的图标所对应的程序(步骤680)。由于在本实施例中，开发者所设定的图标区域110的高度为「314像素」，重叠区域130的高度为「88像素」，而因为图标150距离图标区域110上缘的距离只有8像素，若图标151的高度为「100像素」，则表示图标151不会被显示在重叠区域130的范围内，故执行区域120包含的显示范围不会被改变，所以界面整合模块270可直接以「x413y434w1024h542」四个数据作为参数，将显示范围提供给图标151所对应的程序「电子辞典」，其中「x413y434」表示执行区域120的起始坐标(左上角的坐标)为「(413，434)」，「w1024h542」表示显示范围的宽与高，也就是执行区域120的宽与高，分别为1024像素以及542个像素，但界面整合模块270提供显示范围给被呼叫的程序的方式并不以此为限。

在界面整合模块270呼叫程序「电子辞典」后，「电子辞典」会将执行后所产生的执行结果700a(在本实施例中也就是提供使用者查询字词的使用者界面)依据显示范围显示在执行区域120中(步骤692)，如「图7A」所示。

在上述的实施例中，特别值得一提的是，若开发者在将程序「电子辞典」设置到图标区域110后，并不满意代表「电子辞典」的图标151在图标区域110中所显示的位置，则开发者可以在图标区域110中任意拖曳图标151，在开发者放开鼠标的按键而完成图标151的拖曳行为后，图标设置模块220会再次产生图标151的新的位置信息(步骤612)，储存模块240会以新的位置信息更新原先所储存的图标151的位置信息(步骤620)、显示模块250会依据新的位置信息重新显示图标151(步骤650)，如此，开发者便可以使用本发明轻易的建立使用者界面。

若代表程序「电子辞典」的图标151被开发者拖曳到同属于图标区域110以及执行区域120的重叠区域130上，例如，被显示模块250显示的图标151的左上角以及右下角的坐标分别为「(413，368)」以及「(512，467)」则，由于重叠区域130右下角的坐标为「(1436，434)」因此图标151最下方的34个像素(434～467)在重叠区域130之内，为了避免程序「电子辞典」的执行结果覆盖到代表「电子辞典」的图标151，因此界面整合模块270在提供显示范围给被呼叫的程序(在本实施例中即为「电子辞典」，但若图标区域110中有显示其它程序对应的图标，则被呼叫的程序可能为其它程序)时，需要先调整显示范围(步骤670)，在本实施例中也就是先依据图标151的位置信息(坐标「(413，368)」)、显示大小(100x100像素)、图标区域110的范围(坐标「(413，208)」以及1024x314像素)以及执行区域120的范围(坐标「(413，434)」以及1024x542像素)计算出图标151有34个像素在重叠区域130之内，因此显示范围的上缘需要下移34个像素，也就是显示范围的高度由542个像素调整为508个像素后，再依据调整后的显示范围产生参数「x413y468w1024h508」，并提供给被呼叫的程序，也就是「电子辞典」(步骤680)，使得「电子辞典」产生的执行结果700b依据调整后的显示范围被显示在执行区域120中，如图7B所示。

另外，开发者也可以视其需要任意的更改所设定的图标区域110的范围，如此可以轻易的调整图标区域110中的各图标150可以被显示的范围。同样的，开发者也可以任意的更改执行区域120或显示范围的大小，甚至更改图标区域110与执行区域120的相对位置等参数，由于界面整合模块270会将执行区域120包含的显示范围提供给被图标选定模块260选定的图标所对应的程序(步骤680)，使得程序在执行后所产生的执行结果会依据显示范围显示在执行区域120中(步骤692)，因此，当开发者改变执行区域120或显示范围的大小时，将会影响程序的执行结果被显示的大小，而当开发者改变执行区域120与图标区域110间的相对位置，例如让执行区域120与图标区域110重叠的位置或大小改变，将让使用者界面发生变化，如图8所示，将图标区域110向执行区域120的左方移动，如此将会造成程序所产生的执行结果700a在使用者界面100中的位置向右移动。

接着再以第二实施例来解说本发明的运作系统与方法，同样请参照图6。本实施例实际上与第一实施例相似，但差别在于本实施例中，开发者设定图标区域110的下缘与执行区域120的上缘相邻，如图9A所示。

在开发者完成使用者界面100的开发并发布给使用者使用后，当使用者执行本发明时，区域定义模块210会依据开发者设定的图标区域110以及执行区域120的大小、相对位置等参数，定义出图标区域110以及执行区域120(步骤601)。假设在本实施中，开发者所设定的图标区域110为「800x205像素」、执行区域120为「800x395像素」、显示范围121距离执行区域120的四个边界10个像素，若执行本发明的环境给予使用本发明的使用者界面的左上角在显示画面中的坐标为「(413，208)」，则图标区域110的左上角以及右下角在显示画面上的坐标将分别为「(413，208)」以及「(1212，412)」，执行区域120的左上角以及右下角在显示画面上的坐标分别为「(413，413)」以及「(1212，807)」，显示范围121的左上角以及右下角在显示画面上的坐标分别为「(403，403)」以及「(1202，797)」。

在区域定义模块210定义出图标区域110以及执行区域120(步骤601)后，显示模块250会依据储存模块240所储存的所有图标150的位置信息，将各个图标150显示在图标区域110中的特定位置(步骤650)。假设此时图标区域110中有四个图标，以2x2的方式排列在图标区域110中。

接着，图标设置模块220会提供使用者在图标区域110中设置欲通过使用者界面100来使用的程序(步骤611)，借以对使用者界面100进行一定的程度的调整。

假设在本实施例中，使用者并不喜欢以2x2的方式排列显示在图标区域110中的四个图标，故通过图标设置模块220，以在图标区域110中将下排的两个图标拖曳到上排的两个图标的后方，并将所有的图标拖曳到图标区域110的中间的部分，使得图标在图标区域110中排列为一列，如图9B所示，图标设置模块220会在使用者拖曳图标后，产生被拖曳的图标的新的位置信息(步骤612)，并由储存模块240储存(步骤620)。

若使用者还由其它的窗口中将代表压缩/解压缩的程序的图标拖曳到图标区域110中，借以通过图标设置模块220设置压缩/解压缩的程序(步骤611)可以通过使用者界面100使用，图标设置模块220也会产生对应压缩/解压缩的程序的图标的位置信息(步骤612)，并由储存模块240储存(步骤620)及由显示模块250依据对应压缩/解压缩的程序的图标的位置信息将对应压缩/解压缩的程序的图标显示在图标区域110中(步骤650)。若在本实施例中，使用者如图5所示，将代表压缩/解压缩的程序的图标155拖曳到图标区域110中时，造成图标155与图标154的重叠，则本发明附加的图标调整模块290会如图10A所示的流程，在判断出图标区域110中的图标产生重叠(步骤631)后，会调整图标区域110中所有图标的显示大小或调整重叠的图标的位置信息(步骤635)，借以使得图标155不再与图标154重叠。假设在本实施例中，图标调整模块290会如图5所示，将对应压缩/解压缩的程序的图标155水平移动，借以调整对应压缩/解压缩的程序的图标155的位置信息，但本发明并不以此为限。

若使用者继续拖曳其它的程序到图标区域110中，假设如图11A所示，显示模块250以预设的显示大小在图标区域110中显示所有图标时，图标区域110中未显示图标的剩余空间已无法在不重叠的条件下显示其它图标，因此当使用者继续拖曳代表其它程序的图标到图标区域110中时，势必会产生图标的重叠，如此，图标调整模块290会如图10B所示的流程，判断出显示在图标区域110中的图标产生重叠(步骤631)，并判断出无法以预设的显示大小在图标区域110中显示出所有图标(步骤632)，因此图标调整模块290会调整显示图标区域中所有图标的显示大小(步骤635b)，使得被显示模块250所显示在图标区域110中的图标缩小，如图11B所示。而若图标调整模块290判断出显示模块250可以预设的显示大小在图标区域110中显示出所有图标(步骤632)，则图标调整模块290会调整图标区域110中所有图标的显示大小(步骤635a)。

在使用者调整使用者界面100之后，若使用者使用鼠标点选对应程序「电子辞典」的图标，则图标选定模块260会在接收到对应程序「电子辞典」的图标被点击的输入讯号后，选定对应程序「电子辞典」的图标(步骤660)，并由界面整合模块270依据被图标选定模块260所选定的图标，自储存模块240中读出与被选定的图标对应的程序「电子辞典」的文件路径，并借以在呼叫「电子辞典」执行的同时，将显示范围以参数的方式提供给「电子辞典」(步骤680)，使得「电子辞典」的执行结果会被显示在显示范围内(步骤692)。

综上所述，可知本发明与现有技术之间的差异在于具有分别定义使用者界面中100的图标区域110以及执行区域120，并提供在图标区域110中的任意位置设置图标150，以及提供执行区域120所包含的显示范围给与图标对应的程序，使得程序所产生的执行结果被显示于显示范围内的技术手段，借由此技术手段可以解决现有技术所存在的开发者无法轻易的调整使用者界面的问题，进而达成使用者也可以轻易的在一定限度内调整使用者界面的技术功效。

再者，本发明的将程序图标与程序执行结果分离显示的方法，可实现于硬件、软件或硬件与软件的组合中，亦可在计算机系统中以集中方式实现或以不同组件散布于若干互连的计算机系统的分散方式实现。

虽然本发明所提供的实施方式如上，但所述的内容并非用以直接限定本发明的专利保护范围。任何本领域技术人员，在不脱离本发明所公开的精神和范围的前提下，对本发明的实施的形式上及细节上作些许的更动润饰，均属于本发明的专利保护范围。本发明的专利保护范围，仍须以所附的权利要求所界定者为准。

Claims (10)

1.一种将程序图标与程序执行结果分离显示的方法，其特征在于，该方法至少包含下列步骤：

定义一图标区域及相邻或部分重叠于该图标区域的一执行区域；

当一程序被设置于该图标区域后，产生对应该程序的一图标在该图标区域中的一位置信息；

储存该位置信息及该程序的文件路径；

依据该位置信息显示该图标于该图标区域中；

选定该图标；及

提供包含于该执行区域的一显示范围予该程序，使该程序产生的执行结果显示于该显示范围中。

2.如权利要求1所述的将程序图标与程序执行结果分离显示的方法，其特征在于，该程序被设置于该图标区域中的步骤为拖曳该图标至该图标区域中的特定位置，或于该图标区域中点击特定位置后输入该程序的文件路径的步骤。

3.如权利要求1所述的将程序图标与程序执行结果分离显示的方法，其特征在于，该方法于该产生该位置信息的步骤前，更包含判断该图标与显示于该图标区域中的其它图标重叠时，调整显示图标的一显示大小或调整该些图标的位置信息，使所有图标不重叠的显示于该图标区域中的步骤。

4.如权利要求1所述的将程序图标与程序执行结果分离显示的方法，其特征在于，该方法于该显示该图标的步骤前，更包含判断无法以一显示大小在该图标区域中显示所有图标时，调整该显示大小，使该图标区域显示出所有图标的步骤。

5.一种将程序图标与程序执行结果分离显示的界面，其特征在于，该界面至少包含：

一图标区域，提供设置一程序；

一图标，与该程序对应，依据一位置信息被显示于该图标区域的特定位置，该位置信息为于该程序被设置于该图标区域中时被产生，其中，当该图标与其它图标重叠时，该图标的显示大小或位置信息将被调整；及

一执行区域，包含一显示范围，并与该图标区域相邻或部分重叠，用以于该图标被选定时，提供于该显示范围中显示该程序产生的执行结果。

6.如权利要求5所述的将程序图标与程序执行结果分离显示的界面，其特征在于，该特定位置为该图标被拖曳至该图标区域中的位置，或显示输入该程序的文件路径的对话框前于该图标区域中所点击的位置，该位置信息用以表示该特定位置。

7.一种将程序图标与程序执行结果分离显示的系统，其特征在于，该将程序图标与程序执行结果分离显示的系统至少包含：

一区域定义模块，用以定义一图标区域及与该图标区域相邻或部分重叠的一执行区域，其中，该执行区域包含一显示范围；

一图标设置模块，用以产生一图标于该图标区域中的一位置信息，其中该图标与被设置于该图标区域的一程序对应；

一储存模块，用以储存该位置信息及与该程序的文件路径；

一显示模块，用以依据该位置信息显示该图标于该图标区域中；

一图标选定模块，用以选定该图标；及

一界面整合模块，用以提供该显示范围予该程序，使该程序产生的执行结果显示于该显示范围中。

8.如权利要求7所述的将程序图标与程序执行结果分离显示的系统，其特征在于，该图标设置模块更用以提供拖曳该图标至该图标区域中的任意位置，或提供点击该图标区域中的任意位置后输入该文件路径，借以提供设置该程序。

9.如权利要求7所述的将程序图标与程序执行结果分离显示的系统，其特征在于，该系统更包含一图标调整模块，用以于该图标与显示于该图标区域中的其它图标重叠时，调整显示图标的一显示大小或调整该些图标的位置信息，或于无法以该显示大小在该图标区域中显示所有图标时，调整该显示大小。

10.如权利要求7所述的将程序图标与程序执行结果分离显示的系统，其特征在于，该界面整合模块更用以依据该图标的位置信息、显示大小及该图标区域与该执行区域的范围调整该显示范围。

Images