定义交互式用户界面的制作方法

专利名称：定义交互式用户界面的制作方法
技术领域：
本发明总体上涉及用于定义交互式计算机用户界面的方法和系统。
背景技术：
交互式应用通常具有由交互式元素(例如，按钮)组成的用户界面。交互式元素 通常具有对用户动作作出响应的多种状态。用户可以使用指示设备，通常为计算机鼠标，来 将指针放置在界面内的不同位置处。响应于诸如将鼠标指针放置在交互式元素上方(滚置 (rollover))的用户动作，在鼠标指针下方的交互式元素的不同图形可以被显示以指示交 互式元素的不同状态。通常，在交互式界面内的交互式元素可以与具有唯一一种状态(普通(normal)) 或者两种状态(普通和滚置)一样简单，或者可能与具有四种(普通、滚置、按下(pressed) 和禁用(disabled))或甚至更多状态一样复杂。交互式界面的作者可以将多个预定的功能 与任何已定义的元素相关联。现今，交互式应用通常由被称为“切割和放置”的方法来构建。首先，诸如
的图形创建和编辑软件被用来创作界面的整体外 观和布局。通常通过从整体布局定义并切割元素，并且然后保存为单个文件，来为每一个单 个交互式元素的每一种状态创建图形。对于诸如按钮的两种状态的元素，其典型地以普通 状态来显示，但是然后响应于鼠标位置以滚置状态来显示。作者在正确的几何位置处手动 创建并保存用于按钮的滚置状态的至少一个图像以及包含按钮的普通图像的背景图像。这 种方法在交互式界面很复杂时，诸如在期望多个交互式元素时，要求对大量图形文件进行 切割和放置。在某些情况下，对于包含多个具有多种状态的元素的界面，要求创建的图像的 数量“I”将是至少I = (EX(S-1))+1，其中‘ ”是在界面中的交互式元素的数量，以及“S” 是状态的数量(假设所有的元素具有相同数量的状态)。其它情况要求为单个交互式元素 中的每一个的每一种状态创建图形。在这些其它情况下，作者必须创建并管理的图形的数 量增加至I= (EXS)+1。构建过程的第二步骤要求将所创建的图像放置在其在界面内的恰当的几何 位置处。为了创建最终的界面，作者通常将需要诸如Adobe Flash 或Microsoft
Visual Studio 的第二软件应用。使用这些工具，作者针对背景图形为每一个交互式元素 的每一种状态放置单个图像，试图将交互式元素的各个状态图像放置回元素在整体布局内 的精确、原始位置中。当在切割阶段为每一个元素创建并保存单个图形文件时，文件仅保留 其大小信息，而不保留其与从之切割元素的整体界面有关的位置信息。由于在文件中缺乏 固有的位置信息，所以作者必须对图形的完成的、单个块中的每一个进行手动排列以达到预期的样子，通常要经过多轮辛苦的试验。最后，用于每一个交互式元素的每一种状态的图形必须被组装，并且被功能性定 义，使得预定的功能被分配给每一个元素的响应于用户输入的每一种状态。取决于输出平 台，定义可以发生在整体界面中重组元素层期间、或者作为单独步骤发生。整个过程是费时 的并且易于出错，使得“切割和放置”以及定义和重组效率低下并且耗损劳动。如果作者稍 后决定改变用于一个或多个元素的一种或多种状态的图像，或者决定添加状态，各个元素 的“切割和放置”以及定义和重组的整个过程必须被再次完整地执行。

发明内容
本发明提供了用于定义交互式用户界面的系统，并且包括图形用户界面，其用于 输入具有一种或多种状态的交互式用户界面的至少一个全屏图形。至少一个全屏图形中的 每一个可以与交互式用户界面的一种状态相关联。可以包括交互式图形工具，其用于定义 在交互式用户界面内的与在至少一个全屏图形中的任何/每一个内显示的一个或多个交 互式元素中的任何/每一个相对应的区域。可以包括数据存储设备，其用于存储交互式用 户界面的与一个或多个交互式元素中的每一个相对应的已定义的区域的几何特性和位置 信息。还可以包括输出生成器，其用于自动生成使一个或多个已定义的交互式元素中的每 一个的每一种状态能够被显示的计算机可读代码或图形。在本发明的一个方面中，用于一个或多个已定义的交互式元素中的每一个的每一 种状态的代码或图形从为相应状态输入的相应全屏图形以及从为相应交互式元素定义并 存储的几何特性和位置信息生成。在另一个方面中，用于一个或多个已定义的交互式元素 中的每一个的每一种状态的图形与由为相应交互式元素定义并存储的几何特性和位置信 息定界的为相应状态输入的全屏图形的部分相对应。在又一个方面中，由输出生成器生成的计算机可读代码使计算机能够响应于关于 相应状态和关于相应交互式元素的用户输入，在交互式用户界面内的为相应交互式元素定 义的区域中显示一个或多个交互式元素中的每一个的每一种状态。在该系统的某些实施例 中，交互式用户界面在Web浏览器中显示。本发明的系统还可以包括第二图形工具，其用于定义至少一个全屏图形中的每一 个与交互式用户界面的一种状态的关联。还可以包括第三图形工具，其用于将功能分配给 交互式元素中的每一个的每一种状态。本发明还提供了至少部分由机器实现的用于定义交互式用户界面的方法。该方 法可以包括以下步骤为交互式用户界面的每一种状态输入交互式用户界面的一个全屏图 形，其中交互式用户界面具有一种或多种状态和一个或多个交互式元素；为一个或多个交 互式元素中的每一个定义在交互式用户界面内的区域；以及自动生成使每一个交互式元素 的每一种状态能够被图形显示的计算机可读代码或图形。在该方法的一个实施例中，又一个步骤将存储交互式用户界面的与一个或多个交互式元素中的每一个相对应的已定义的区域的几何特性和位置信息。在另一个实施例中， 用于一个或多个已定义的交互式元素中的每一个的每一种状态的代码或图形从为相应状 态输入的相应全屏图形以及从为相应交互式元素定义并存储的几何特性和位置信息生成。 在又一个实施例中，用于一个或多个已定义的交互式元素中的每一个的每一种状态的图形与由为相应交互式元素定义并存储的几何特性和位置信息定界的为相应状态输入的全屏 图形的部分相对应。在本发明的一个方面中，所生成的计算机可读代码使计算机能够响应于关于相应 状态和关于相应交互式元素的用户输入，在交互式用户界面内的为相应交互式元素定义的 区域中显示一个或多个交互式元素中的每一个的每一种状态。在另一个方面中，交互式用 户界面在web浏览器中显示。在本发明的一个实施例中，进一步编辑交互式用户界面包括为待被添加或修订的 每一个交互式元素定义在交互式用户界面内的区域，以及自动生成使包括添加和修订的交 互式元素的每一个交互式元素的每一种状态能够被图 形显示的计算机可读代码。在另一个 实施例中，对交互式用户界面的进一步编辑包括为交互式用户界面的待被添加或修订的每 一种状态输入交互式用户界面的一个全屏图形；从所存储的与一个或多个交互式元素中的 每一个相对应的几何特性、位置信息检索；以及自动生成使每一个交互式元素的每一种状 态能够基于添加或修订的全屏图形被图形显示的计算机可读代码。本发明进一步提供了至少部分由用于机器实现的定义交互式用户界面的第二种 方法。在该方法中涉及为交互式用户界面的每一种状态输入交互式用户界面的一个全屏图 形，其中交互式用户界面具有一种或多种状态和一个或多个交互式元素；为一个或多个交 互式元素中的每一个定义在交互式用户界面内的区域；以及为每一个交互式元素的每一种 状态自动生成单个图形。在本发明的第二种方法的一个方面中，用于每一个交互式元素的每一种状态的单 个图形从用于相应状态的全屏图形以及从为相应交互式元素定义的区域生成。在另一个方 面中，用于每一个交互式元素的每一种状态的单个图形为由为相应交互式元素定义的区域 定界的用于相应状态的全屏图形的部分。该第二种方法的一个实施例进一步涉及存储交互式用户界面的与一个或多个交 互式元素中的每一个相对应的已定义的区域的几何特性和位置信息。在另一个实施例中， 该方法进一步包括创建交互式用户界面的计算机可读代码，其使计算机在交互式用户界面 内的为相应交互式元素定义的区域中并且响应于关于相应状态的用户输入，显示每一个单 个图形。


参考与附图相结合来考虑的下列描述将更好地理解本发明图1图示了在其中可以实现本发明的示例计算环境；图2图示了根据本发明的一个实施例的在系统存储器中的本发明的组件的示例；图3图示了根据本发明的一个实施例的存储在非易失性计算机可读介质上的本 发明的组件的示例；图4是图示了本发明的方法步骤的各方面的流程图；图5A和5B图示了 “切割和放置”方法的示例；图6A和6B示出了根据本发明的一个方面的两个示例全屏图形，其被用作为输入 以生成与在图5A和5B中示出的交互式元素相同的交互式元素；图7示出了处于设计模式(Design Mode)的本发明的一个实施例的示例图形界面；以及图8A和8B示出了处于预览模式(Preview Mode)的本发明的一个实施例的示例图形界面。
具体实施例方式示例计算环境图1和下列论述意在提供对适当的计算环境的简要描述，在该适当的计算环境中 可以实现本发明的示例实施例。然而，应当理解，将手持式、便携式以及所有种类的其它计 算设备与本发明结合使用是预期的。虽然在下面描述了通用计算机，但是只是一个示例。本 发明在具有网络服务器互操作性和交互性的瘦客户端上也可以是可操作的。因而，本发明 的示例实施例可以在联网的托管的服务的环境中实现，在所述环境中涉及非常少或最少的 客户端资源，例如在其中客户端设备仅用作为浏览器或至万维网的接口的联网的环境。尽管非必需，但是本发明可以经由应用程序接口(API)来实现，用于由开发者或 测试者使用，和/或被包括在由一个或多个计算机(例如，客户端工作站、服务器或其它设 备)执行的网络浏览软件内，所述网络浏览软件将在诸如程序模块的计算机可执行的指令 的通用环境中来描述。通常，程序模块包括执行特定任务或实现特定抽象数据类型的例行 程序、程序、对象、组件、数据结构等。典型地，程序模块的功能可以在各个实施例中按需被 组合或分布。此外，本领域技术人员将会理解，本发明可以利用其它计算机系统配置实践。 可能适于与本发明一起使用的其它众所周知的计算系统、环境和/或配置包括但不限于个 人计算机(PC)、服务器计算机、手持式或膝上型设备、多处理器系统、基于微处理器的系统、 可编程消费电子产品、网络PC、小型计算机、大型计算机等。本发明的实施例还可以在分布 式计算环境中实践，其中任务由通过通信网络或其它数据传输介质链接的远程处理设备来 执行。在分布式计算环境中，程序模块可以位于包括记忆存储设备的本地和远程计算机存 储介质两者中。因此，图1图示了在其中可以实现本发明的适当的计算系统环境100的示例，然而 如上面所解释的，计算系统环境100仅是适当的计算环境的一个示例，并且并不意在暗示 关于本发明的使用或功能的范围的任何限制。不应当将计算环境100解释为具有与在示例 操作环境100中图示的组件的任何一个或组合有关的任何依赖或要求。参考图1，用于实现本发明的示例系统包括以计算机110的形式的通用计算设备。 计算机110的组件可以包括但不限于处理单元120、系统存储器130以及将包括系统存储 器的各种系统组件耦接到处理单元120的系统总线121。系统总线121可以是包括使用多 种总线架构中的任何总线架构的存储器总线或存储器控制器、外围总线以及本地总线的数 种类型的总线结构中的任何总线结构。作为示例而非限制，这样的架构包括工业标准架构 (ISA)总线、微通道架构(MCA)总线、增强型ISA(EISA)总线、视频电子标准协会(VESA)本 地总线、外围组件互连(PCI)总线(也被称为夹层总线)以及PCI-Express总线。计算机110典型地包括多种计算机可读介质。计算机可读介质可以是可以由计算机110访问的任何可用的介质，并且包括易失性和非易失性、可移动和不可移动介质。作 为示例而非限制，计算机可读介质可以包括计算机存储介质和通信介质。计算机存储介质 包括以用于存储诸如计算机可读指令、数据结构、程序模块或其它数据的信息的任何方法或技术来实现的易失性和非易失性、可移动和不可移动介质。计算机存储介质包括但不限于随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、闪存 或其它存储器技术、光盘只读存储器(CDROM)、数字多功能盘(DVD)或其它光盘存储、盒式 磁带、磁带、磁盘存储或其它磁存储设备、或可以被用来存储期望的信息并且可以由计算机 110访问的任何其它介质。通信介质典型地包括计算机可读指令、数据结构、程序模块或 以诸如载波或其它传输机制的调制的数据信号形式的其它数据，并且包括任何信息递送介 质。术语“调制的数据信号”是指具有以将信息编码在信号中这样的方式来设置或改变的 其特征中的一个或多个的信号。作为示例而非限制，通信介质包括诸如有线网络或直接有 线连接的有线介质、以及诸如声学、射频(RF)、红外线和其它无线介质的无线介质。任何上 述的组合也应当被包括在计算机可读介质的范围内。系统存储器130包括以诸如ROM 131和RAM 132的易失性和/或非易失性存储器 形式的计算机存储介质。包含诸如在启动期间帮助在计算机110内的元件之间传送信息的 基本例行程序的基本输入/输出系统133 (BIOS)被典型地存储在ROM 131中。RAM 132典 型地包含对处理单元120来说可立即访问的和/或处理单元120目前正在其上操作的数据 和/或程序模块。作为示例而非限制，图1图示了操作系统134、应用程序135、其它程序模 块136以及程序数据137。RAM 132可以包含其它数据和/或程序模块。计算机110还可以包括其它可移动/不可移动、易失性/非易失性计算机存储介 质。仅作为示例，图1图示了读写不可移动、非易失性磁介质的硬盘驱动器141、读写可移 动、非易失性磁盘152的磁盘驱动器151、以及读写诸如CD ROM或其它光介质的可移动、非 易失性光盘156的光盘驱动器155。可以在示例操作环境中使用的其它可移动/不可移动、 易失性/非易失性计算机存储介质包括但不限于磁带盒、闪存卡、数字多功能盘、数字视频 带、固态RAM、固态ROM等。硬盘驱动器141典型地通过诸如接口 140的不可移动存储器接 口被连接到系统总线121，以及磁盘驱动器151和光盘驱动器155典型地经由诸如接口 150 的可移动存储器接口被连接到系统总线121。在上面论述的以及在图1中图示的驱动器和其相关联的计算机存储介质提供了 对用于计算机110的计算机可读指令、数据结构、程序模块以及其它数据的存储。例如，在 图1中，硬盘驱动器141被图示为存储操作系统144、应用程序145、其它程序模块146以及 程序数据147。注意到，这些组件可以同于或异于操作系统134、应用程序135、其它程序模 块136以及程序数据137。操作系统144、应用程序145、其它程序模块146以及程序数据 147在此被给予不同的数字以说明至少其为不同的副本。用户可以通过输入设备将命令和 信息输入到计算机110中，所述输入设备诸如键盘162和通常被认为是鼠标、跟踪球或触摸 板的指示设备161。其它输入设备(未示出)可以包括麦克风、操纵杆、游戏垫、卫星天线、 扫描仪等。这些和其它输入设备通常通过被耦接到系统总线121的用户输入接口 160被连 接到处理单元120，但是可以由诸如并行端口、游戏端口或通用串行总线(USB)的其它接口 和总线结构连接。监视器191或其它类型的显示设备经由诸如视频接口 190的接口也被连接到系统 总线121。除监视器191外，计算机还可以包括诸如扬声器和打印机(未示出)的其它外围 输出设备，其可以通过输出外围接口 195连接。使用到诸如远程计算机180的一个或多个远程计算机的逻辑连接，计算机110可以在联网的环境中操作。远程计算机180可以是个人计算机、服务器、路由器、网络PC、对等设备或其它常见的网络节点，并且典型地包括在上面关于计算机110描述的许多或所 有元件，尽管在图1中仅图示了记忆存储设备181。在图1中描述的逻辑连接包括局域网 (LAN) 171和广域网(WAN) 173，但是还可以包括其它网络。这样的网络环境在办公室、企业 范围的计算机网络、内联网和因特网中是常见的。当在LAN网络环境中被使用时，计算机110通过网络接口或适配器170被连接到 LAN 171。当在WAN网络环境中被使用时，计算机110典型地包括用于在诸如因特网的WAN 173上建立通信的装置。在联网的环境中，关于计算机110描述的程序模块或其部分可以被 存储在远程记忆存储设备中。作为示例而非限制，图1将远程应用程序185图示为驻存于 记忆设备181上。远程应用程序185包括但不限于诸如Microsoft 因特网信息服务(IIS) 和Apache HTTP服务器的web服务器应用，其将驻存于远程存储设备181或其它可访问的 存储设备上的内容提供给万维网。将理解的是，所示出的网络连接是示例性的，并且建立计 算机间的通信链接的其它装置可以被使用。本领域技术人员能够理解的是，计算机110或其它客户端设备可以被部署为计算 机网络的部分。从这点上说，本发明适合具有下述的任何计算机系统任何数量的存储器或 存储单元以及跨任何数量的存储单元或容量存在的任何数量的应用和过程。本发明的实施 例可以应用于带有被部署在网络环境中、具有远程或本地存储的服务器计算机和客户端计 算机的环境。本发明还可以应用于具有编程语言功能、解释和执行能力的独立计算设备。本发明本发明的正讨论的界面定义软件(雕刻站(Carving Station))通过独特地组织 信息并且使定义交互式用户界面的大部分过程自动化引入了一种创建交互式应用的新颖 方法。本发明的自动化过程可以为任何平台进行定制。在优选实施例中，雕刻站提供了用 于交互式界面的创作的设计模式，以及用于已创建的交互式界面的可视化和确认的预览模 式。图2图示了在本发明的一个实施例的系统存储器130中的雕刻站的组件。在该实 施例中，雕刻站210作为应用程序135中的一个驻存于系统存储器130中。图形用户界面 组件211被提供用于输入图形，以及图形工具212被提供用于定义交互式元素。最后，代码 生成器213被提供用于生成输出代码和图形。诸如可视化程序220的其它程序模块136被 提供用于创作的可视化和确认，如果需要的话。程序数据137包括但不限于输入图形230、 已定义的交互式元素的尺寸和位置数据(雕刻几何)240、背景图形250以及输出元素图形 260，如果所选择的输出平台需要的话。图3例示了存储在诸如硬盘的非易失性计算机可读介质设备141上的雕刻站的组 件的一个实施例。雕刻站程序310和其组件(用于输入图形的图形用户界面311、用于定义 交互式元素的图形工具312以及用于输出代码或图形的代码生成器313)作为应用程序145 被存储在计算机可读介质141上，并且可以在运行期间被读入系统存储器130中。计算机可 读介质还可以包含其它程序模块146，诸如用于创作的可视化和确认的可视化程序320的 副本。程序数据147包括但不限于输入图形330、关于已定义的元素的尺寸和位置数据(雕 刻几何)340、背景图形350以及关于交互式元素的图形360，如果输出平台需要的话。图4图示了本发明的方法步骤的各方面的流程图。在本发明的通用平台的实施例中，用于定义交互式用户界面的计算机化方法包括为交互式用户界面的每一种状态输入交 互式用户界面的一个全屏图形410，为一个或多个交互式元素中的每一个定义在交互式用 户界面内的区域420以及自动生成使每一个交互式元素的每一种状态能够被图形显示的 特定于平台的计算机可读代码430。此外，编辑已定义的交互式用户界面涉及为已定义的交 互式用户界面的待被修订442或添加444的每一种状态输入交互式用户界面的一个全屏图 形，为待被添加或修订的每一个交互式元素定义在交互式用户界面内的区域420 ；以及自 动生成使每一个交互式元素的每一种状态能够被图形显示的计算机可读代码430。更具体地，作者首先决定交互式用户界面的布局，包括关于交互式元素的状态的 数量。作者为每一种状态输入一个全屏图形410，其中一个全屏图形包含以各种状态显示 的所有交互式元素，而不是如通常所做的为每一个元素的每一种状态输入单个图形。例如， 对于滚置状态，作者输入唯一一个全屏图形，其中该一个全屏图形以每一个交互式元素的 滚置状态来示出每一个交互式元素。如在此所使用的，全屏图形可以指占据交互式界面的 整个预期的显示区域的图形，或者指交互式元素将驻存于其中的交互式界面的一部分的图 形。因此，作者必须创建的图像的数量等于状态的数量，I = E0因而，本发明极大地减 少了诸如图形和位置信息的作者必须供给并管理的单个数据点的数量。图5A和5B图示了 现有技术“切割和放置”方法的示例。对于具有五个两种状态的按钮的界面，必须创建总计 11个单个图形(对于普通状态510，五个按钮中的每一个一个图形(图5A)、对于滚置状态 520，五个按钮中的每一个一个图形(图1A)、以及一个背景图形530(图5B))。图6A和6B 图示了在本发明中由作者输入来生成在图5A和5B中示出的相同的五个按钮两种状态界面 的两个图像。使用雕刻站，作者为普通状态输入唯一一个全屏图形620，其以所有元素的普 通状态示出所有元素610 (图6A)，以及为滚置状态输入一个全屏图形640，其以所有元素的 滚置状态示出所有元素630 (图6B)。现参见图7，雕刻站以设计模式730提供了用于输入图形的图形用户界面311。作者将每一个创建的全屏图形输入到雕刻站中，并且将图形分配给其相对应的状态410。图 7图示了处于设计模式730的本发明的优选实施例710的图形用户界面的截屏。在图7的 实施例中，雕刻站710是独立的Windows应用，但是本发明可以适于其它应用，或者作为诸 如 Adobe Photoshop 、Flash 或Microsoft Visual Studio 的更大的软件包的组件。 如所示，界面向作者提供选项来在设计模式730和预览模式830之间选择(图8A和8B)。 作者还可以指定关于源艺术(Source Art) 750的位置，其中可以定位全屏图形(输入图形 330)。可以将用于每一个全屏图形的文件名输入到用于每一个各个层760的相对应的空间 中(每一个所包括的状态表示一个层)。全屏图形在显示区域790中被显示为层。在本发 明的一个实施例中，雕刻站710提供了四个状态层(普通、鼠标悬停(即滚置)、按下和禁 用)。在图7中所示的示例中，只有两种状态被使用(普通和鼠标悬停)，而未使用的状态 保持空白。作者还可以为输出文件760的集合指定位置，诸如存储到储存库；文件系统； Oracle 数据库；SQL Server数据库；以及Microsoft 内容管理服务器。可以使输出文件 760与各种格式相兼容，诸如Adobe Flash Movie ；PowerPoint .文件；HTML页；以及 Microsoft Sharepoint 服务器；等。作为在本发明的设计过程中的最后创作步骤，作者使用由雕刻站提供的工具212来图形地识别在全屏图形上的与期望的单个交互式元素相对应的区域420。在图7的示例 中，单个元素被定义为矩形780。被选择来定义交互式元素的区域(热点(Hot Spot))以不 同的颜色突出770。每一个热点被分配一个名称，并且在列表740中显示。用于所有状态 (或层)的所有交互式元素被同时定义。每一个交互式元素相对于全屏图形的大小和位置 信息(雕刻几何)240为表示每一个交互式元素的几何区域的定义所固有，并且在由作者定 义时被记录并保存。因此，消除了在外部保留位置信息的惯常需求，以及对通过反复试验手 动放置(或更替)元素的需要。在交互式界面定义过程期间的任何时候，作者可以将整个创作定义并保存426到 计算机可读介质147，包括所有图形以及交互式元素的所有位置和大小信息。用于交互式元 素的每一个的每一种状态的功能可以在元素定义期间被分配，或者作为在稍后时间的单独 步骤424。如果作者稍后希望改变状态的样子，则作者需要做的所有事是输入合并期望的改 变的全屏图形442、更替与各种状态相关联的原始图形760。本发明然后检测到源图形已改 变并且自动更新创作。作者然后可以存储更新的创作。如果作者希望将状态添加到已定义 的界面，则作者只是为作者意欲添加的每一种状态输入一个全屏图形444，并且将各个全屏 图形与适当的状态相关联760。如果作者希望添加交互式元素，则作者只是为待被添加的交 互式元素识别在全屏图形上的区域420。名称被分配给新近添加的元素740，并且添加的交 互式元素的大小和位置信息被自动地记录并保存426。因此，不需要供给、管理以及放置大 量的图形，或者不需要定义并重组在交互式用户界面中的每个元素层。由于本发明的设计 过程是独立于平台的，所以作者只需致力于界面的美学，而不需关注特定于平台的编码。预览模式830 (图8A和8B)使作者能够可视并确认所设计的交互式界面440。在 优选实施例中，特定平台由作者在设计过程的初始选择。在预览模式被选择时830，雕刻站 使用尺寸和位置信息(雕刻几何)240和所供给的源图形230来自动生成特定于所选择的 平台的图形和代码430。由作者设计的交互式界面作为用于预期的交互式界面发布的平 台的本原代码被预览。例如，如果作者选择将最终交互式界面作为正规网页发布，则雕刻 站将为单个交互式元素自动生成图形。由于创作保留元素图形的位置和大小信息两者，所 以雕刻站然后可以自动生成引用包含各个交互式元素的正确布局的图形的HTML文件。不 需要作者手动输入或调整位置信息。在一个实施例中，用于所选择的平台的适当的查看器 的实例在雕刻站预览窗口内被调用。在HTML网页的示例中，Internet Explorer Web浏 览器控件被使用。雕刻站可以在不对设计过程作任何变更的情况下容易地输出符合诸如 Microsoft · NET、PowerPoint 以及Adobe Flash 的其它平台的交互式界面。在作者 对所设计的交互式界面感到满意时，作者可以指示雕刻站“发布”交互式界面450。所有对 应的图形和代码由雕刻站自动生成并且被存储在诸如储存库目录720的作者定义的输出 目的地中。图8A和8B图示了处于预览模式830的雕刻站710的截屏。在图8A和8B图示 中，在图7中创建并示出的交互式界面在预览区域870中被显示。预览模式830的两个视 图(分别为图8A和8B)被示出来说明由作者定义的交互性。在图8A中，鼠标指针850被 放置在第一元素的上方，以及第一按钮以滚置状态840显示，而余下的元素仍然以普通状 态860显示。在图8B中，鼠标指针850被放置在第二元素的上方，以及第二元素以滚置状 态840显示，而第一、第三、第四和第五元素以普通状态860显示。
在优选实施例中，这样的显示在作者完成两个步骤创建过程后(即，在作者为每 一个期望的状态创建全屏图形后，并且在几何识别每一个交互式元素后)由文件创建的 自动化操作生成。在作者为每一种状态输入全屏图形，并且作者为每一个交互式元素定义 (识别)位置信息后，雕刻站为每一个元素的每一种状态自动生成图像文件。因此，雕刻站 自动生成多个图像，并且记录各个位置信息，这些曾经由用户通过“切割和放置”过程来辛 苦地创建。例如，在图5A和5B示例中，对于具有五个两种状态的按钮的界面，在作者为普 通状态输入一个全屏图形以及为滚置状态输入一个全屏图形后，并且在作者识别五个交互 式元素后，雕刻站将自动生成十个单个图形(即，对于普通状态510，五个按钮中的每一个 一个图形以及对于滚置状态520，五个按钮中的每一个一个图形)。因此，如图8B中所示， 在鼠标指针850被放置在第二元素的上方时，本发明为以滚置状态840的第二元素检索自 动生成的文件并且从而将该图像显示在预览区域870的第二元素位置中。在本发明的又一个实施例中，这样的显示交替地发生。例如，在如在图8B示例中 的鼠标指针被放置在第二元素的上方时，本发明可以引用为滚置状态创建并存储的全屏图 形，并且展示其各个部分，如由作者先前为第二元素定义的，而不是自动生成并稍后检索用 于在图8B示例中的第二元素的滚置状态840的特定图像。额外的替选实施例将使用于普 通状态的全屏图形在预览区域870中显示(例如，类似于在图5B中那样的样子)并且在如 在图8B示例中的鼠标指针850被放置在第二元素的上方时，本发明实质上切掉第二元素， 如由作者先前位置地定义的，来显露作为下层存在的用于滚置状态的全屏图形。由于只有 第二元素的位置区域被移除，所以对用户可视的用于滚置状态的全屏图形的唯一部分是第 二元素部分。总之，雕刻站极大地减少了作者必须供给并管理的单个数据点和图形文件的数 量，消除了对作者手动定义并重组每一个元素层来达到最终交互式界面的需求。使用雕刻 站来变更以及添加元素不需要作者重复“切割和放置”步骤，或者重复定义并重组界面中的
每一个元素层。本发明的这些和其它优势从前述说明对本领域技术人员将是显而易见的。因此， 本领域技术人员将认识到，在不背离本发明的宽泛发明构思的情况下可以对上述实施例进 行改变或修改。因此，应当理解，本发明不限于在此描述的特定实施例，而意在包括在本发 明的范围和精神内的所有改变和修改。
权利要求
一种用于定义交互式用户界面的系统，包括图形用户界面，用于输入具有一种或多种状态的交互式用户界面的至少一个全屏图形，其中所述至少一个全屏图形中的每一个与所述交互式用户界面的一种状态相关联；交互式图形工具，用于定义在所述交互式用户界面内的与在所述至少一个全屏图形中的每一个内显示的一个或多个交互式元素中的每一个相对应的区域；数据存储设备，用于存储所述交互式用户界面的与所述一个或多个交互式元素中的每一个相对应的已定义的区域的几何特性和位置信息；以及输出生成器，用于自动生成使所述一个或多个已定义的交互式元素中的每一个的每一种状态能够被显示的计算机可读代码或图形。
2.如权利要求1所述的系统，其中用于所述一个或多个已定义的交互式元素中的每一 个的每一种状态的所述代码或所述图形从为相应状态输入的相应全屏图形以及从为相应 交互式元素定义并存储的几何特性和位置信息生成。
3.如权利要求1所述的系统，其中用于所述一个或多个已定义的交互式元素中的每一 个的每一种状态的所述图形与由为相应交互式元素定义并存储的几何特性和位置信息定 界的为相应状态输入的全屏图形的部分相对应。
4.如权利要求1所述的系统，其中由所述输出生成器生成的所述计算机可读代码使计 算机能够响应于关于相应状态和关于相应交互式元素的用户输入，在所述交互式用户界面 内的为相应交互式元素定义的区域中显示所述一个或多个交互式元素中的每一个的每一 种状态。
5.如权利要求1所述的系统，其中所述交互式用户界面在web浏览器中显示。
6.如权利要求1所述的系统，进一步包括第二图形工具，所述第二图形工具用于定义 所述至少一个全屏图形中的每一个与所述交互式用户界面的一种状态的关联。
7.如权利要求1所述的系统，进一步包括第三图形工具，所述第三图形工具用于将功 能分配给所述交互式元素中的每一个的每一种状态。
8.—种至少部分由机器实现的用于定义交互式用户界面的方法，所述方法包括以下步骤为交互式用户界面的每一种状态输入所述交互式用户界面的一个全屏图形，其中所述 交互式用户界面具有一种或多种状态和一个或多个交互式元素；为所述一个或多个交互式元素中的每一个定义在所述交互式用户界面内的区域；以及 自动生成使每一个交互式元素的每一种状态能够被图形显示的计算机可读代码或图形。
9.如权利要求8所述的方法，进一步包括以下步骤存储所述交互式用户界面的与所述一个或多个交互式元素中的每一个相对应的已定 义的区域的几何特性和位置信息。
10.如权利要求9所述的方法，其中进一步编辑所述交互式用户界面包括以下步骤 为所述交互式用户界面的待被添加或修订的每一种状态输入所述交互式用户界面的一个全屏图形；从所存储的与所述一个或多个交互式元素中的每一个相对应的几何特性、位置信息检 索；以及自动生成使每一个交互式元素的每一种状态能够基于所添加或修订的全屏图形被图 形显示的计算机可读代码。
11.如权利要求8所述的方法，其中用于所述一个或多个已定义的交互式元素中的每 一个的每一种状态的所述代码或所述图形从为相应状态输入的相应全屏图形以及从为相 应交互式元素定义并存储的几何特性和位置信息生成。
12.如权利要求8所述的方法，其中用于所述一个或多个已定义的交互式元素中的每 一个的每一种状态的所述图形与由为相应交互式元素定义并存储的几何特性和位置信息 定界的为相应状态输入的全屏图形的部分相对应。
13.如权利要求8所述的方法，其中所生成的所述计算机可读代码使计算机能够响应 于关于相应状态和关于相应交互式元素的用户输入，在所述交互式用户界面内的为相应交 互式元素定义的区域中显示所述一个或多个交互式元素中的每一个的每一种状态。
14.如权利要求8所述的方法，其中所述交互式用户界面在web浏览器中显示。
15.如权利要求8所述的方法，其中进一步编辑所述交互式用户界面包括以下步骤为待被添加或修订的每一个交互式元素定义在所述交互式用户界面内的区域；以及自动生成使包括所添加和修订的交互式元素的每一个交互式元素的每一种状态能够被图形显示的计算机可读代码。
16.一种至少部分由机器实现的用于定义交互式用户界面的方法，所述方法包括以下 步骤为交互式用户界面的每一种状态输入所述交互式用户界面的一个全屏图形，其中所述 交互式用户界面具有一种或多种状态和一个或多个交互式元素；为所述一个或多个交互式元素中的每一个定义在所述交互式用户界面内的区域；以及为每一个交互式元素的每一种状态自动生成单个图形。
17.如权利要求16所述的方法，其中用于每一个交互式元素的每一种状态的所述单个 图形从用于所述相应状态的所述全屏图形以及从为所述相应交互式元素定义的所述区域 生成。
18.如权利要求16所述的方法，其中用于每一个交互式元素的每一种状态的所述单个 图形为由为所述相应交互式元素定义的所述区域定界的用于所述相应状态的所述全屏图 形的部分。
19.如权利要求16所述的方法，进一步包括以下步骤存储所述交互式用户界面的与所述一个或多个交互式元素中的每一个相对应的已定 义的区域的几何特性和位置信息。
20.如权利要求16所述的方法，进一步包括以下步骤创建所述交互式用户界面的计算机可读代码，所述计算机可读代码使计算机在所述交 互式用户界面内的为所述相应交互式元素定义的所述区域中并且响应于关于所述相应状 态的用户输入，显示每一个单个图形。
全文摘要
用于定义具有一种或多种状态和一个或多个交互式元素的交互式用户界面的系统和方法。该方法的示例实施方式包括以下步骤为交互式用户界面的每一种状态输入交互式用户界面的一个全屏图形；为一个或多个交互式元素中的每一个定义在交互式用户界面内的区域，以及自动生成使每一个交互式元素的每一种状态能够被图形显示的计算机可读代码或图形。该方法可以进一步包括以下步骤存储交互式用户界面的与一个或多个交互式元素中的每一个相对应的已定义的区域的几何特性和位置信息。所存储的几何特性和位置信息可以被用来帮助编辑和修改交互式用户界面。
文档编号G06F17/00GK101821730SQ200880111577
公开日2010年9月1日 申请日期2008年8月22日 优先权日2007年8月22日
发明者埃里克·M·罗尔 申请人:普罗斯凯普科技公司