CN105324763A - 用于从移动设备设计可定制产品的系统、方法和用户界面 - Google Patents

Abstract

一种使得用户能够从电子设备创建并编辑产品设计的方法和用户界面，包含对于从移动设备设计定制的产品特别优化的特征。通过将表单控件与WYWIWYG表示一体化并包含单独且直接与可视化表示元素自身关联的缩放和编辑控件，移动设备的用户体验更整洁的简化的设计过程，从而使客户更满意。

Description

用于从移动设备设计可定制产品的系统、方法和用户界面

相关申请的交叉引用

本申请根据35U.S.C.§119(e)要求2013年6月24日提交的美国专利申请No.61/838865的优先权，该专利申请通过引用全文并入本文。

背景技术

当前被实现在移动设备(诸如智能手机和平板计算机)中的移动手机和无线网络的结合已彻底改变了人们访问和使用因特网的方式和频率。单个移动设备中的数据连接性和浏览器的便利性和可获得性允许人们在几乎任何时间以及从几乎任何地方访问因特网上可获得的信息，从而提供信息接收的几乎即时满足并完成可经由web浏览器实现的任务。

经由移动设备访问因特网的人数正在超过从传统的桌面式以及甚至膝上型设备访问因特网的人数。随着智能手机和平板计算机使用频率的激增，相对于经由传统的桌面式和膝上型计算设备进行的电子商务交易，经由这种移动设备进行的电子商务交易已经同时增加。因此，对于零售业，关键的是拥有具有简单易用且美观的图形用户界面的移动网站，以便防止客户减少并促进销售。

发明内容

本发明的实施例包括用于从电子设备定制产品设计的用户界面、系统和方法。

一个实施例包含用于定制产品设计的用户界面。该用户界面包含含有在电子显示器上显示的设计的可视化表示的容器。该设计的可视化表示按照所见即所得(What-You-See-Is-What-You-Get)(WYSIWYG)的描绘、按照该设计的当前的表单来描绘该设计，并且包含可由用户经由电子显示器的相应区域上的直接触摸来单独选择的多个可定制元素。该用户界面还包含多个用户界面控件。用户界面控件包含表单控件，该表单控件响应于用户输入而将该表单控件设置为至少包括展开状态、收缩状态和部分收缩状态在内的多个表单控件状态之一。展开状态被配置为暴露与设计的可视化表示的多个可定制元素对应的多个用户可编辑的表单字段以在电子显示器上显示，并且其中每个用户可编辑字段被配置为接收来自用户的内容，由此所接收的内容对应于设计的可视化表示中的相应元素的相应可视化内容。收缩状态被配置为使用户可编辑的表单字段被隐藏为在电子显示器上不被看见。部分收缩状态被配置为在电子显示器上仅显示与在设计的可视化表示中的当前所选择的元素对应的用户可编辑的表单字段。

用户界面还包含定制控件，该定制控件响应于用户输入而将该定制控件设置为多个定制控件状态之一，所述多个定制控件状态至少包括收缩的定制控件状态和展开的定制控件状态，在收缩的定制控件状态中，展开的定制选项控件组被隐藏为在所述电子显示器上不被看见，在展开的定制控件状态中，所述展开的定制选项控件组被暴露以在所述电子显示器上被看见并用于用户交互，所述定制控件组被配置为允许用户配置所述设计的可视化表示中的各个元素的可视化内容的不同可视化特征。所述容器被配置为允许用户滚动和缩放所述容器内的所述设计的可视化表示、而不同时地滚动或缩放所述电子显示器上的用户界面控件。此外，对所述设计的可视化表示上的单个可定制元素的直接触摸选择触发在所述部分收缩状态中被配置的所述表单控件的显示。

一个实施例包含用于使得电子设备的用户能够经由显示在电子设备上的用户界面来定制产品设计的方法。该方法包含在用户界面中显示容器内的设计，该设计包含多个可单独选择的元素，容器被配置为允许缩放和滚动容器内的设计。该方法还包括在用户界面内且在容器之外显示多个设计编辑控件。该方法还包括接收与容器关联的缩放事件和滚动事件中的至少一项，并且执行相应的缩放或滚动动作以对容器内的设计进行缩放或滚动，其中设计编辑控件不受缩放或滚动动作影响。该方法还包括接收容器内的至少一个选择事件，该至少一个选择事件对应于设计的单个元素的使用选择。该方法还包括接收至少一个设计编辑控件事件并且执行与所接收的设计编辑控件事件关联的相应的设计编辑动作，该动作对设计的所选择的单个元素进行执行。可选地，该至少一个选择事件触发部分收缩的表单字段控件的显示，该部分收缩的表单字段控件显示用于编辑所述设计的所选择的单个元素的内容的用户可编辑的输入字段。

附图说明

本发明及其附随的众多优点的更全面理解将是清楚的，因为其通过参考下面结合附图来考虑的详细描述变得更好理解，在附图中相同的附图标识指示相同或相似的构件，其中：

图1是网站的体系结构的示意性框图；

图2是其中本发明的实施例可以操作的示例性系统的高级别示意性框图；

图3是模板构件资产(assets)数据库的示意性框图；

图4A-4T是在电子设备的电子显示屏幕上显示的示例性屏幕截图并且示出了发明的用户界面的各种特征；

图5是示出根据本发明的原理的示例性的用户界面流程操作的流程图。

图6是其中本发明的实施例可以操作的示例性系统的更详细的示意性框图；

图7是诸如服务器设备或客户端电子设备之类的计算设备的示意性框图。

具体实施方式

设计针对移动设备而优化的网站的挑战在于：相对于通常从桌面式或膝上型计算机监视器可获得的屏幕尺寸、移动设备的较小的屏幕尺寸。可以显示在电子显示器或“屏幕”上的信息量的关键是电子显示屏幕分辨率—即，可用于将内容呈现在电子显示器的屏幕上的像素的数量。传统的桌面式监视器可以包含1280个像素(横向)×1024个像素(纵向)(按照典型的命名法为1280×1024个像素)。即使最低分辨率的桌面式监视器通常将具有至少640×480个像素的分辨率。相比之下，典型的智能手机具有300×480个像素的屏幕分辨率。因此，不仅取向不同(纵向取向相对于横向取向)，更重要的是，智能手机上可获得的、用于传递信息的像素较少。因此，与桌面式或膝上型监视器上相比，在任何给定时间处在智能手机屏幕上可以显示的内容较少。

在设计移动网站时必须考虑较低分辨率的屏幕。为了解决有限分辨率的这个问题，许多移动网站被设计为包含较少的文本和图像元素、有限的用户功能，和/或更多地利用窗口滚动。某些移动网站设计者将传统网站页面的功能拆分成两个或更多个移动网站页面，并且某些移动网站提供缩放功能以允许移动设备的用户对网页上的较小部分的内容进行放大以便以较高的分辨率察看网页的较小部分。所有以上的技术都被用来改善在从移动设备访问网站时网站的用户体验。

某些零售商(诸如，运作例如与域名www.vistaprint.com关联的网站的Vistaprint)销售可以由访问网站的客户/用户定制或设计的产品。当客户/用户(在下文被称为“用户”)被允许进行设计选择和/或向产品添加定制时，在用户购买产品之前提供产品的预览、以便确保用户理解该产品看起来将是什么样的以及用户的选择和/或定制如何影响基础产品的外观会是重要的。

当网站提供设计功能时，用户输入经常借助于在网页中存在的表单来捕获。在将包含文本和/或图像定制的产品的情形中，产品设计的单个文本和/或图像元素可以对应于表单的单个字段。用户可以通过将相应的文本和/或图像内容输入到与产品的文本和/或图像元素关联的各个表单字段中(或者将待并入到产品上的相应的图像元素中的图像的位置引用到与产品的文本和/或图像元素关联的各个表单字段中)来设置产品上的文本和/或图像内容。为了改善用户体验，当前产品设计的可视化表示与表单同时地显示，从而使得在用户将文本或图像信息输入到表单字段输入框中时，当前产品设计的可视化表示中的相应元素被更新以匹配字段内容或样式修改。

在移动设备上，由于屏幕的有限分辨率，表单与(由用户定制的)当前产品设计的可视化表示的同步显示是困难的，然而对当前产品设计的可视化表示的需求并没有降低。

因此，本发明提供可在移动设备上的浏览器内获得的独特的设计体验，该设计体验包含表单功能和可视化表示功能两者，还具有用于用户查看并直接在当前产品设计的可视化表示上执行设计编辑以修改底层的产品设计自身的能力。为了帮助用户对整个产品进行可视化，除了诸如表单控件、产品设计审批控件、一个或多个产品编辑控件、导航元素以及附加的文本和/或图像元素(如果合适)之类的其他页面元素外，当前产品设计的可编辑的可视化表示被显示在移动网站产品设计页面上。当前产品设计的可编辑的可视化表示被包含在容器内，该容器包括被配置为允许用户缩放和滚动容器内的可编辑的可视化表示的单独的缩放控件和/或滚动控件。当前产品设计的可编辑的可视化表示中的单个元素(与表单元素中的表单字段对应)是用户可编辑的。这允许用户从表单字段和/或当前产品设计的可编辑的可视化表示之一或二者来编辑产品设计，以便对产品设计文档进行实际的改变。

系统

一般地，以下所描述的实施例的特征在于：允许用户从移动设备(诸如智能手机或平板计算机/平板设备)选择模板并使用个性化内容和样式选择来定制模板的设计应用。产品设计页面或应用被服务器下载到设备。该产品设计页面/应用(APP)包括允许在对用户选择的模板进行用户做出的选择和编辑时进行动态的WYSIWYG显示呈现的脚本实现功能。诸如容器内的滚动和缩放、直接从设计预览的基于触摸的元素选择、控件展开/收缩以及基于元素选择上下文的部分表单显示之类的特征使得能够对小型化屏幕上的文档产品进行详细设计。

对因特网相关的技术的介绍有助于理解本发明。因特网是通过各种电信媒介链接在一起的计算机和其他设备的庞大的且扩展的网络，从而使得各种构件能够交换和共享数据。可通过因特网访问的网页和网站(在特定域下组织的相关网页的集合)提供关于众多商家、产品和服务以及教育、研究和娱乐的信息。

系统的一个整体构件是计算机服务器。服务器是向被称为客户端的其他程序提供某种服务的计算机程序。客户端和服务器借助于经常在网络上传送的消息来通信，并且使用某种协议(描述如何传输数据的一组形式规则)来对客户端的请求和/或响应以及服务器的响应和/或请求进行编码。服务器可以连续运行、等待客户端的请求和/或响应到来，或者它可以由控制许多具体服务器的某个更高级别的连续运行的服务器调用。

附接到因特网的资源经常被称为“主机”。这种资源的示例包括由一个或多个处理器、关联的存储器以及其他存储设备和外设(诸如允许连接至因特网或其他网络的调制解调器、网络接口等)构成的常规的计算机系统。在大多数情况下，托管资源可以被实现为包含允许与用户进行某种对话的且可以处理由用户输入的信息的接口模块的服务器或其他计算机系统的硬件和/或软件构件。一般地，将按照常规的方式通过因特网的图形用户界面——万维网(例如，经由web浏览器)来访问这种服务器。

为了促进主机间的通信，每个主机具有数字的因特网协议(IP)地址。假设的主机计算机的IP地址可以是69.17.223.11。每个主机还具有唯一的“完全限定域名”。在假设主机69.17.223.11的情况下，“完全限定域名”可以是“computer.domain.com”，其中三个元素是主机名(“computer”)、域名(“domain”)和顶级域名("com”)。给定的主机通过被称为域名服务的系统查找因特网上的其他主机的IP地址。

网站的页面可通过统一资源定位符或“URL”来寻址。URL指定三个元素：(1)传输协议；(2)web服务器名称或域名；和(3)路径。URL的第一元素是传输协议，最常见的是代表超文本传输协议的“http”，但是其他传输协议包括用于电子邮件的“mailto”、用于文件传输协议的“ftp”、以及用于网络新闻传输协议的“nntp”。域名指示存储网页的web服务器的名称。路径指示网页在所指名的web服务器上的位置。

为了访问因特网，大多数用户依靠被称为“网络浏览器”的计算机程序。市场上可获得的web浏览器包括如以下众所周知的程序：微软公司的Internet苹果公司的谷歌公司的以及Mozilla基金会的(仅举几例)。如果因特网用户期望查看托管在www.domain.com处的网页，则该因特网用户可以将统一资源定位符(URL)“http://www.domain.com”输入到网络浏览器程序中。

一旦URL被输入到浏览器中，请求就被路由到能够将URL中指定的域名匹配到托管所请求的网页的web服务器的相应IP地址的域名系统(DNS)服务器。因此，DNS服务器最终使诸如www.domain.com之类的字母数字名称与其数字IP地址69.17.223.11匹配。

当主机接收到来自因特网的请求时，它将由请求所指向的文件中的数据返回给做出请求的客户端。这种数据可以构成网页，该网页可以包含文本消息、声音、图像、视频，或这种元素的组合。用户可以通过使用超链接在网页之间移动，这些超链接是到因特网上的其他网页或网页上的位置的链接。

传统的网站是由特定域名处的网络服务器服务(serve)的一个或多个网页的组。网页通常为含有文本和浏览器可解释的指令的文本文档，诸如众所周知的超文本标记语言(HTML)、可扩展超文本标记语言(XHTML)、动态的HTML(DHTML)、文本对象模型(DOM)等。运行在客户端机器上的web浏览器通过指定特定页面的统一资源定位符(URL)来请求网页，并且在接收到来自服务器的所请求页面时、通过处理并执行浏览器可解释的指令来在用户的显示屏幕上呈现该页面。网页可以借助于被置于页面内的超链接来链接至其他网页。通常超链接指定网页的URL、网页中的位置，或可由为该网页服务的服务器访问的资源。

典型的网站包含在URL指定域名但没有指定特定的路径(例如，www.mycompany.com)时服务的主页。属于网站的附加页面可以借助于URL中在域名之后的路径来指定。例如，www.mycompany.com网站的“Contact”网页可以被指定为“www.mycompany.com/Contact”，其中URL中的路径“/Contact”指示“Contact”网页的网络服务器处的位置。

现在参照图1，网站可以包含多个相关的网页100、110、120、130、140，每个网页包括浏览器可呈现的文档(例如，HTML文档)。在图1所示的示例中，网站包含主页100、产品选择页110、图库(gallery)页120、产品设计页130以及一个或多个附加网页140。

图2是其中本发明可以操作的系统的实施例的高级别示意性框图。托管一个或多个网站202的一个或多个服务器201被配置为允许与支持因特网的(Internet-enabled)客户端设备(所述客户端设备包括移动设备210b(诸如智能手机))以及支持因特网的手持式设备(诸如苹果iPhone/iPad/iPod、谷歌Android、三星Galaxy及其他这种设备)进行可操作的通信。尽管本发明目标在于具有较小电子显示屏幕的设备，但是服务器201可以进一步被配置为也允许与传统计算机设备210a(诸如桌面式和膝上型计算机)进行可操作的通信。服务器201托管允许客户端设备210a、210b的用户快速创建和编辑打印文档、电子产品或其他实体产品的设计的一个或多个网站202。服务器201在计算设备的一个或多个处理器215的控制下操作。

网站202可以包含设计工作室功能，该设计工作室功能一般在用户导航到由服务器201托管的网站202并(例如，通过点击显示在网页中的按钮或链接)激活网站202上的控件来请求将设计工作室应用212a、212b(在下文一般被称为212)下载到做出请求的客户端设备210a、210b以在客户端设备上的至少一个处理器215a、215b的控制下运行的浏览器211a、211b中执行时、对于客户端设备210a、210b可获得。

设计工作室应用212检测客户端设备的类型。优选地，在最低限度上，设计工作室应用212确定设备的类型是移动设备还是传统的计算设备。优选地，设计工作室应用212不仅确定做出请求的设备是移动设备还是传统设备，还确定包括设备的制造和型号、操作系统以及硬件配置。在一个实施例中，设计工作室应用212读取操作系统配置以确定设备的类型以及操作系统的类型和版本。其他的设备类型、系统及硬件配置可以通过读取在静态设备存储器(例如，设备的只读存储器(ROM)或静态随机存取存储器(RAM))中的一个或多个配置位置中存储的配置信息而可获得。

在一个实施例中，设计工作室应用212是由服务器201下载到做出请求的客户端设备210a、210b的一组或多组JavaScript代码。在一个实施例中，当设计工作室应用212被下载到客户端设备210a、210b时，设计工作室应用212在客户端设备210a、210b的显示器设备上展示用户可以使用图形用户界面控件从其中进行选择的不同的模板设计的图库。在接收到用户的模板选择时，设计工作室应用212将所选择的模板的标识符发送给服务器201，该服务器201从模板资产数据库205中检索模板预览310(包括与所选择的模板关联的多个不同的模板资产)并且将该模板下载到客户端设备210a、210b。

图3示出了模板资产数据库205的一部分的结构图。模板资产数据库205含有构件和描述，诸如布局、文本元素、图像元素、报头(header)、导航构件、页脚(footer)、颜色方案、强调图像(accentimage)、字体方案、模板描述以及可以用作打印的文档、网页或其上展示或包含设计的其他产品中的构件的任何类型的构件或方案。待打印在衬底上的设计(例如，以生产打印的产品)可以包含根据页面描述(通常为.html)来排列的多个不同构件(诸如布局、报头、页脚、背景、文本构件和图像)和/或应用的多个不同构件(诸如颜色方案、字体方案、背景、布局等)。

如所提到的，设计工作室应用212、212a、212b被下载到做出请求的设备210a、210b。在一个实施例中，用于产品设计页面的活动功能被实施于一组或多组JavaScript中，该一组或多组JavaScript可以被下载以在客户端浏览器内本地执行。页面功能作为逐页自然排序的一组网页显现给用户。但是，与网站的传统导航不同，设计工作室应用212、212a、212b的图形用户界面屏幕实际上不需要是单独的网页，并且因此当从看起来为“页面”的地方导航到“页面”时，不一定要由服务器201供应。这显著地减少在客户端用户的产品设计的创建和编辑期间在服务器201与客户端设备210a、210b之间的来回通信。

在接收到用户的模板选择时，设计工作室应用212、212a、212b将所选择的模板的标识符发送给服务器201，该服务器201从模板资产数据库205中检索模板预览310(包括与所选择的模板关联的多个不同的模板资产)，并且将该模板下载到客户端设备210a、210b。

用户界面

在一个实施例中，设计工作室应用212、212a、212b显示包含产品设计页面“1”的图形用户界面。图4A示出了示例产品设计页面“1”。在实施例中，产品设计页面“1”被实施为浏览器可呈现的文档。在一个优选的实施例中，设计页面“1”包含一个或多个源代码文档(该一个或多个源代码文档可以包含引用附加的源代码文档的主要页面源代码文档)。设计页面“1”的元素优选地被实施为超文本标记(HTML)元素或其变型的元素(包括但不限于XHTML、DHTML、HTML5等)。展示可以使用单独的样式定义(例如，借助于使用级联样式表(CSS))而与页面的内容分离。许多的功能优选地使用脚本来执行，该脚本可以直接在网页源代码自身中进行编码，或者可以被下载以在移动设备内本地执行，或者可以经由服务器调用远程地执行脚本。

设计页面“1”的源代码定义了待在电子设备的电子显示屏幕上呈现并显示的每个元素的位置和样式。设计页面可以包含许多不同的元素，诸如文本元素、图像元素、标题元素、报头元素、段落元素、容器元素(例如，<DIV>元素)等。虽然大多数的页面元素可以相对地被定位，但是所选择的模板的元素(即，可编辑的可视化表示“3”的HMTL表示)被定义为绝对位于模板元素内。模板元素内的嵌套元素的绝对定位是需要的，因为模板元素被呈现为产品设计的可视化表示且必须被精确地表示—即，当前产品设计的可编辑的可视化表示“3”必须看起来与被打印、附接、显示、雕刻、刺绣、附着、附接等到实体产品的最终的实际产品设计完全一样。因此，可编辑的可视化表示“3”是WYSIWYG表示。

所选择的模板通常由用户选择，因为用户期望利用之前由专业设计者完成的设计工作。因此，众多模板元素可以对于用户编辑进行锁定以防止由用户进行的设计的定制太过于偏离原设计者的意图。例如，模板可以包括布局、背景图像、许多文本构件，许多前景图像构件、颜色方案和字体方案。模板的提供者可能期望仅允许对总数量的模板构件中的某些进行编辑，或者可能期望仅允许构件的某些属性(例如，颜色、字体)可编辑而同时锁定其他属性(例如，位置)。模板设计者可以使元素属性和样式性质中的每一个可编辑(对于用户修改为未锁定的)或者不可编辑(对于用户修改为锁定的)。

模板元素可以是被转换成HTML表示的且在本文中作为设计“3”的可编辑的可视化表示被讨论的所选择的模板。

在一个实施例中，产品设计页面“1”中的含有设计“3”的可视化表示的容器“2”被实施为HTML<DIV>元素(或“容器”元素)，该HTML<DIV>元素(或“容器”元素)的样式继承自选择特定的<DIV>元素来声明其待隐藏的溢出性质(即，<DIV>元素的溢出性质被配置为“溢出-隐藏(overflow-hidden)”)的样式表(通常为CSS)。在该实施例中，容器元素被配置为含有该模板元素(即，可编辑的可视化表示“3”)。

当用户导航到提供模板给用户选择和定制的网站202时，网站202通常将包含显示针对用户使用可获得的模板的图像的一个或多个图库页面。当用户选择模板图像时，模板设计的HTML表示(包括单个可编辑构件元素(例如，文本和图像元素))作为输入被传送至设计页面源代码。在一个实施例中，指示所选择的模板的标识符作为参数被传送到所请求的网页的URL内的服务器。这触发该服务器查找所请求的模板、在必要时将其转换成HTML表示并且将其作为容器“2”元素的内容放置在设计页面“1”内。

在一个实施例中，设计页面“1”的活动功能经由脚本来实施。在一个实施例中，脚本使用JavaScript来实施。在一个实施例中，应用于设计“3”的可编辑的可视化表示的缩放和滚动控件(即，在单个元素级别相对于页面级别)操作以将模板元素(例如，设计“3”的可视化表示)初始化为可缩放/可滚动的元素。缩放/滚动控件监听启动手势事件(例如，凭借屏幕触摸被检测到并且还没有被释放的触击启动)并由其触发。在检测到“启动”手势事件时，缩放/滚动控件确定它是单触摸还是双触摸事件、监听“移动”事件并且基于来自检测到的“移动”事件的输入来确定移动的量和方向。如果双触摸被检测到，则这被划分为“捏合(pinch)”事件，并且捏合的焦点被计算为这两个屏幕触摸位置之间的中途，并且模板元素的缩放级别根据捏合事件的方向和值来改变。如果触摸事件是单触摸事件，则该事件被划分为滚动事件，并且模板元素的位置根据移动事件的方向和值来改变。

缩放和滚动动作通过嵌套在模板元素(即，设计“3”的可视化表示)内的每个元素来级联。在一个实施例中，缩放和滚动功能使用可从cubiq.org获得的称为iScroll4的JavaScript滚动和缩放功能的库被实施为iScroll。具体地，iScroll元素的实例以作为目标元素被传送的模板元素来进行实例化。当产品设计页面加载时，JavaScript监听DOM加载事件，并然后对传送作为目标元素的画布(canvas)的iscroll的实例进行实例化。

图4A示出了呈现在电子显示器(诸如移动设备)的屏幕上的所呈现的产品设计页面“1”的示意性表示。产品设计页面“1”含有用户设计功能，以允许用户查看并编辑产品设计。在该说明性的实施例中，产品设计页面“1”是已由在移动设备上执行的浏览器呈现的浏览器可呈现的文档(诸如为HTML文档)。产品设计页面“1”可以是零售产品网站(例如，用户可以从其设计并订购诸如商务名片、明信片、宣传册、邀请函、通告、横幅、促销产品等之类的打印的产品的网站)的网页。在该说明性的实施例中，产品设计是待被打印以形成打印的产品的内容。可替代地，产品设计页面“1”可以致力于允许用户设计电子产品，诸如网站和网页、社交媒体页面、营销活动电子邮件和广告等。在这种情况下，产品设计是待被呈现在电子显示器上的内容和样式。网站还可以是允许用户将文本、像、图形、颜色打印、压花、雕刻、压印、施加、附接或以其它方式配置到实体产品上的服装或消费产品零售商，从而使得产品设计页面“1”可替代地可以致力于允许用户设计待被施加到所选择的服装或消费产品的文本、像、图形等的特定的二维设计。在该情况下，产品设计是待被施加到所选择的服装或消费产品的文本、像、图形等的二维设计。

产品设计页面“1”被配置有含有当前产品设计的可编辑的可视化表示“3”的产品预览区或容器“2”。可编辑的可视化表示“3”是如当前由用户定制的产品设计的所见即所得(WYSIWYG)表示。即，可编辑的可视化表示“3”描绘了产品设计在被制造/呈现时将实体看起来如何，包括由用户做出的所有定制。

图4B示出了图4A的浏览器可呈现的文档“1”的示意性表示。如所示的，产品设计页面“1”的每个元素的边界由虚线轮廓指示。(注意，虚线轮廓只是为了指示的目的而在本文的图4B中被展示，并且在页面的呈现的图像中一般是不可见的)。如图所示，浏览器可呈现的文档“1”包含若干元素，包括用于当前产品设计的可编辑的可视化表示“3”的显示的容器“2”、页面工具栏“8”、页面信头“5”、表单控件“9”、定制控件“6”、范例文本控件“7”。页面“1”中的每个元素可以包含相关的嵌套元素。例如，定制控件“6”包含图标容器“6a”、图标图像“6b”和图标文本“6c”。类似地，示出的范例文本控件“7”包含图标容器“7a”、图标图像“7b”和图标文本“7c”。页面工具栏“8”将类似地包含多个嵌套元素，这些嵌套元素为了简单起见并没有被示出。

容器元素“2”被配置为在其内含有可编辑的可视化表示元素“3”。被包含于其中的设计“3”的可编辑的可视化表示还包含与所表示的设计中的文本和图像元素对应的单个元素“4a”、“4b”、...、“4n”。例如，可编辑的可视化表示元素“3”含有嵌套的单个元素，包含文本字段“4a”、“4b”、...、“4k”以及背景图像“4l”。

返回至图4A，表单控件“9”可以处于收缩状态(如图4A所示)、展开状态(如图4C所示)中的一种状态中，或者如在下文讨论的(相对于图4G)，处于部分收缩状态中。从收缩状态转变为展开状态以及反过来可通过诸如触击、滑动、触击并滑动或其他这种手指手势之类的一个或多个预定义的用户输入手势来实现。在一个实施例中，表单控件9包含可视化的展开/收缩控件13。例如，在收缩状态(如图4A所示)中，表单控件9包含作为沿着用户界面屏幕的一边缘显示的可选择标签显现的展开/收缩控件13。展开/收缩控件13的状态可以通过与控件13及相关的切换功能关联的识别的用户输入手势(诸如触击、滑动、触击并扫动等)从收缩状态切换到展开状态。图4C示出了处于展开状态时的表单控件9和展开/收缩控件13。如图4C所示，展开/收缩控件13在屏幕上保持为可见的(尽管已经由于展开的表单控件而移动)，以允许用户在任何时候将表单控件9切换回到收缩状态。

如4C所进一步示出的，当表单控件“9”处于展开状态时，一组用户输入容器(被称为“表单字段”)“9a”、“9b”、...、“9k”(各自对应于可视化表示“3”中的单个文本字段“4a”、“4b”、...、“4k”中的不同一个)被显示在移动设备的屏幕上。如果表单字段“9a”、“9b”、...、“9k”的数量超过合理呈现所有表单字段的屏幕空间的量，则表单控件可以包含滚动功能，以允许用户滚动所显示的展开的表单控件以展现当前屏幕上不可见的表单字段。表单字段“9a”、“9b”、...、“9k”中的每一个对应于产品设计中的单个字段“4a”、“4b”、...、“4k”中的不同一个。因此，表单控件“9”中的许多(若非全部)表单字段“9a”、“9b”、...、“9k”对应于呈现在当前产品设计的可视化表示“3”中的单个元素“4a”、“4b”、...、“4k”中的不同一个。对于文本元素，输入到相应的表单字段中的文本内容将导致相同的文本内容作为可视化表示中的相应的文本元素被呈现并显示。对于图像元素，图像文件的名称可以被输入到相应的图像表单字段“4l”中，并且该图像作为设计的可视化表示中的图像元素被呈现。

一般而言，容器“2”含有在构造中的设计的、按照其当前的表单的可视化表示。一般地，单个元素被呈现并显示以按照所见即所得(WYSIWYG)的描绘、按照该设计的当前的表单来描绘该设计。尽管每个元素都被呈现以如同它将在最终产品中显现的那样来显现，但是设计的众多(若非全部)单个元素是可定制的。即，给定元素的尺寸、字体、颜色、位置等可以是用户可配置的。因此，设计的可视化表示中的众多(若非全部)单个元素被配置为可由用户经由在电子显示器的相应区域上的直接触摸来单独选择。因此，如果用户期望选择与“电话号码”字段对应的元素4a，则用户可以在元素4a被呈现的区域中的屏幕上简单触击。为了帮助用户理解每个元素在当前设计中位于哪里，系统可以自动地填充每个字段的范例文本。即，在开始时，当模板被选择并被加载到容器“2”中作为设计页面“1”上的设计“3”的可视化表示以用于后续的用户定制时，用户还没有将内容输入到表单字段“9a”、“9b”、...、“9k”中。在一个实施例中，系统将范例文本插入到表单字段“9a”、“9b”、...、“9k”中，以使得范例文本将显现在当前产品设计的可视化表示“3”中。这可以被执行，以便展示什么类型的文本应当被输入每个字段中的示例，并且给予用户在所有字段都被填充时整体布局的看起来如何的概念。在一个实施例中，如图4A所示，网页1包含示出范例文本控件7，该范例文本控件7可以经由识别的关联的用户输入手势(诸如但并不限于，手指触击)来切换，以包含或去除由系统插入的范例文本。在图4A中，范例文本控件7(该范例文本控件7可以在每个字段中显示和不显示范例文本之间切换)已经被设置以显示范例文本，并且因此范例文本被示于可视化表示3中。如图4A和1C所进一步示出的，范例文本可以按照视觉上与在用户输入将要被插入以代替范例文本的文本时使用的标准文本颜色或字体不同的颜色或字体来显示。例如，范例文本的颜色可以显示为浅灰色，而用户插入的文本被显示为黑色。视觉上不同的文本颜色或文本字体的使用可以被实施以帮助用户理解：范例文本仅仅为范例，并且该字段可由用户编辑以在其位置中插入任何期望的文本。

用户可以通过将文本输入到一个或多个表单文本字段“9a”、“9b”、...、“9k”中来修改被含在当前产品设计中的文本。取决于用户界面被实施在其上的电子设备的类型，文本输入可以借助于键盘(实体的键盘或小键盘，或者虚拟的小键盘)来输入。虚拟小键盘可以通过例如用户对表单字段“9a”、“9b”、...、“9k”之一进行触击来调用。一般地，电子设备的操作系统负责用户输入(诸如手指触击/手势)的检测以及用户输入的处理，以允许由用户界面处理成其适当的意思的用户输入。例如，如果用户触击表单字段“9a”，则操作系统检测该触击事件和触击的位置、确定哪个元素与该位置对应并且调用与该触击事件关联的、对应于与该位置关联的对象的方法。例如，触击事件可以调用表单控件9在部分收缩状态中显示，如下文将讨论的。触击事件可以进一步调用经由操作系统来接受并处理接收自电子设备的输入设备的文本输入的监听方法。在一个实施例中，当用户例如经由浏览器调用的小键盘在表单文本字段“9a”、“9b”、...、“9k”中的一个或多个字段中输入文本时，文本被发送到服务器以按照与该字段关联的字体来呈现。可替代地，文本字体被下载并被本地存储以允许文本本地呈现。

转至图4D，例如，表单控件9处于展开状态，并且用户已经在“电话”字段“9a”中输入电话号码，并且当前正使用浏览器调用的小键盘“10”将名称输入到“全名”字段“9c”中。在一个实施例中，当用户(使用手指或其他设备)触击或以其它方式选择字段来编辑时，小键盘“10”被显示为弹出窗口。图4E示出了用户继续使用小键盘“10”将文本输入到“职称”字段“9d”中。小键盘“10”包含“完成”按键“11”。当用户完成将文本输入到所选择的字段中时，用户可以触击小键盘“10”上的“完成”按键以关闭虚拟小键盘“10”。用户可以继续将文本输入到表单控件9上的表单字段中，或者可以通过触击或执行与收缩表单控件“9”关联的用户输入手势来收缩表单控件9，以显示当前产品设计的可视化表示“3”。

图4F示出了在用户已经收缩了图4E中的表单控件“9”之后的产品设计页面“1”。如所示的，可编辑的可视化表示“3”现在是可见的，并且可视化表示“3”中的与表单控件“9”中的用户编辑的表单字段“9a”、“9c”和“9d”对应的文本元素“4a”、“4c”和“4d”中的每一个已被更新以并入更新的文本。

如之前所提到的，当前产品设计的可视化表示“3”自身至少是部分可编辑的。即，某些元素(诸如文本元素“4a”、“4b”、...、“4k”)可以直接从可视化表示“3”中进行选择并进行定制。例如，定制选项可以包含文本样式选项，诸如字体、样式、颜色、尺寸等。至少在用户界面的基于web浏览器的实现中，可从可编辑的可视化表示“3”编辑的元素像这样被定义在用来呈现表示“3”的HTML代码中。用户可以通过由移动设备的操作系统识别的并被传送到设计页面“1”的适当的页面脚本的许多手势或用户输入之一来选择这种可编辑的元素。例如，在一个实施例中，用户的手指在移动设备的屏幕上的可编辑的可视化表示的显示部分中的可编辑元素的边界内的任何位置的触击导致对该特定元素的选择。如图4G所示，可以通过将所选择的元素显示在带阴影的框“14a”内或由另一个可替代的可视化指示器来在设计“3”的可视化表示上指示字段的“被选择”状态。

为了帮助用户直接从可视化表示“3”执行定制选项，设计页面“1”包含定制控件“6”。在一个实施例中，定制控件“6可以处于收缩状态(如图4A所示)或展开状态(如图4G所示)。在展开状态中，定制控件“6”可以提供作为帮助用户编辑或修改所选择的元素的工具的多个不同的控件“15a”、“15b”、...、“15e”。在该说明性的实施例中，展开的定制控件“6”被实现为工具栏，其中不同的图标与不同的样式修改关联。例如，当所选择的元素为文本元素时，工具栏可以含有用于编辑字体的图标(“15a”)、用于编辑效果(case)的图标(“15b”)、用于编辑粗体样式的图标(“15c”)、用于编辑斜体样式的图标(“15d”)和用于编辑文本颜色的图标(“15e”)。

每个图标“15a”、“15b”、...、“15e”与不同的页面脚本关联，以提供不同的功能。例如，如果用户触击字体选择图标“15e”，则可获得的字体的列表“18”被显示，如图4H所示。优选地，当前的字体被高亮显示，或者可替代地一些指示被显示以指示哪种字体当前被用于所选择的元素。用户可以通过定位列表18中的期望字体(在需要时滚动)并执行与选择关联的用户输入手势(例如，单触击或双触击)、来修改所选择的元素的当前字体。可视化表示然后被更新，并且底层的产品设计根据用户选择被修改。图1I和1J示出了在用户点击“粗体”样式图标“15c”(图4I)并然后点击“斜体”样式图标“15d”(图4J)之后被更新的可编辑的可视化表示“3”。

图4K示出了在用户选择“颜色”样式图标“15e”时显示的拾色器(colorpicker)控件“19”。如所示的，拾色器控件“19”显示用于所选择的元素的可获得的多个不同颜色。在一个实施例中，颜色被显示为单个颜色图标的m×n阵列。在该说明性的实施例中，颜色图标是以相应的颜色填充的圆圈，并且各自具有与其关联的脚本，该脚本导致将与所选择的元素关联的当前颜色修改为与该特定的颜色图标关联的颜色。因此，用户可以通过执行与以期望的颜色填充的颜色图标关联的选择手势来选择用于所选择的元素的新颜色。例如，选择手势可以是触击。在特定图标上的触击将使用与该图标关联的颜色来更新所选择的元素的颜色。

作为附加的特征，“颜色”样式图标“15e”的图标15e的颜色23(见图4J)可以呈现(takeon)所选择的元素的当前选择的颜色。因此，如果用户使用拾色器控件19将所选择的元素的颜色从当前颜色“24”更新为新的颜色“25”，则当拾色器控件“19”关闭时，如图4L所示，当前产品设计的可编辑的可视化表示“3”中的所选择的元素(例如，所选择的元素4a)的颜色以及定制控件“6”中的“颜色”样式图标“15e”的颜色两者被更新为新的颜色“25”。

在一个实施例中，拾色器控件“19”还包含显示当前颜色以及来自可获得颜色的一组最近使用的颜色的调色板区“20”。这允许用户通过从拾色器控件“19”选择新颜色、查看具有施加的“新”颜色的所选择的元素、返回拾色器“19”如果用户期望尝试另外一种新颜色或返回旧颜色来“测试”颜色。虽然没有示出，但是优选地，拾色器控件“19”提供滚动功能以允许经由滚动来显示更多的颜色。在一个实施例中，为了节约屏幕上的空间以用于内容呈现而非控制呈现，滚动被隐含，意指滚动功能在没有可见的滚动条的情况下存在，使得当用户执行滚动手势(诸如触击并在向下(或向上)的方向上滑动)时，拾色器控件“19”的内容向下(或向上)滚动以展现更多可获得的颜色。图4M示出了在针对所选择的元素使用颜色“25”代替颜色“24”之后的拾色器控件“19”。值得注意的是，当前选择的颜色通过可视化差异来与所有其他颜色区分。在该说明性的实施例中，可视化差异是圆圈的尺寸(特别地，在该情况下，所选择的颜色25通过具有较小尺寸的圆圈来指示，而所有未选择的颜色都具有相等的但较大尺寸的圆圈)。但是，本领域技术人员将意识到，存在众多不同的可视化差异实现，并且本文仅通过说明的方式而非通过限制的方式来展示可视化差异的说明性实施例。

可以按照与经由图1A-1M示出的方式类似的方式来选择和定制任何可编辑的元素。图4N示出在用户选择元素“4h”之后的设计页面“1”。在该视图中将注意到，由于移动设备的较小屏幕尺寸的分辨率限制，元素4h的尺寸对于查看目的而言是相当小的。由于该原因，本发明的一个特征在于提供当前产品设计的可编辑的可视化表示“3”的缩放功能。为此，设计页面将缩放(以及优选地，滚动)功能附接到其中含有可编辑的可视化表示“3”的容器“2”。容器“2”被配置为隐藏其内容位于容器“2”的定义的边界之外的任何部分。所有的元素“4a”-“4l”以相对于可编辑的可视化表示元素“3”的绝对定位被定义，并且缩放控件通过可编辑的可视化表示元素“3”的任何嵌套元素向下级联，使得如果可编辑的可视化表示元素“3”的缩放级别被改变，则所有的元素“4a”-“4l”都同样按比例缩放。

图4O示出了用户执行向外的“捏合”手势，凭借该“捏合”手势用户以位于焦点28附近的拇指26和食指27同时地触摸移动设备的屏幕、并然后使拇指26和食指27两者在相反的方向上同时地移动。屏幕上的位于拇指26和食指27之间的中途的点被认为是焦点，并且拇指26和食指27的向外移动的距离及速度的组合确定缩放的量。在本情况下，向外的捏合手势对应于放大请求(而向内的捏合手势对应于缩小请求)。其他手势或用户输入手段可以按照期望被实现以捕获焦点和缩放级别。

图4P示出了在当前产品设计的可编辑的可视化表示“3”内的缩放级别已被调整(如图4O中的捏合手势所示)之后的设计页面“1”。如所示的，所选择的元素“14h”不完全可见。由于该原因，本发明的另一特征是提供当前产品设计的可编辑的可视化表示“3”的滚动功能。为此，设计页面将滚动功能附接到其中含有可编辑的可视化表示“3”的容器“2”。如以上关于提供缩放控件所解释的，容器被配置为隐藏其内容位于容器“2”的定义的边界之外的任何部分，并且所有的元素“4a”-“4l”以相对于可编辑的可视化表示元素“3”的绝对定位被定义。因此，整个可编辑的可视化表示“3”及其构件元素被滚动和缩放控件视为一个单元。

滚动控件允许用户移动当前产品设计的底层的可编辑的可视化表示“3”，以便定位可编辑的可视化表示“3”的感兴趣区域，从而被显示在容器“2”的定义的规模内。因此，参照图4P，为了移动当前产品设计的底层的可编辑的可视化表示“3”、以便在容器“3”内将所选择的字段14h全貌地定位，用户可以执行滚动手势。在该说明性实施例中，滚动手势是在底层的可编辑的可视化表示“3”应当移动的方向上的触击并滑动的运动。图4P示出用户以该用户食指27来执行触击并滑动的运动。图4Q示出了所得到的显示。如将从图4Q意识到的，所选择的字段“14h”足够大，从而容易地查看其内容和展示样式。

图4R示出了在进一步缩放和滚动之后的所选择的元素“14h”。另外注意，其他设计页面元素(例如，报头“5”、定制控件“6”、部分收缩的字段控件“16”等)没有被缩放。即，与可编辑的可视化表示“3”关联的缩放控件独立于设计页面自身的缩放和滚动控件。

现在返回到图4G，为了在编辑产品设计方面进一步添加用户帮助，一旦用户已选择元素(例如，元素“4a”)，设计页面1就通过显示直接链接到所选择的元素4a(以及直接链接到全表单控件9中的相应表单字段9a)的关联的表单字段16a来显示表单控件9的部分收缩版本。所选择的元素4a的当前内容被显示为表单字段16a的内容。在表单控件9的部分收缩版本中，与可视化表示“3”中的当前未选择的元素“4b”、...、“4k”对应的表单字段“9a”、“9b”、...、“9k”被隐藏；但是，用户可以使用导航按钮“17a”和“17b”来切换到后一个或前一个字段。切换到表单控件9中的后一个或前一个字段导致对可视化表示“3”中的后一个或前一个对应的有序元素的选择。因此，如果用户(在做出了各种附加的样式编辑之后)触击图4G所示的屏幕上的导航按钮“17a”，则与表单控件9中的下一个有序字段“9b”对应的元素“14b”将被选择，如图4S的当前产品设计的可编辑的可视化表示“3”中所示。表单控件9的部分收缩版本16被更新以显示直接链接到所选择的元素4b(以及直接链接到全表单控件9中的相应表单字段9b)的关联的表单字段16b。所选择的元素4b的当前内容被显示为表单字段16b的内容。用户由此可以逐个字段导航，从而使用定制工具6对字段/元素进行编辑，同时同时地查看当前产品设计的可编辑的可视化表示“3”。在一个实施例中，表单字段16b仅仅显示字段的内容；在一个可替代的实施例中，用户可以编辑表单字段16b的内容，该表单字段16b的内容然后被传播到相应的表单字段“9b”，并且该内容在当前产品设计的可编辑的可视化表示“3”内被呈现并被更新。图4T示出了在用户已选择“下一个”导航按钮“17a”之后的设计页面“1”的快照。再一次，表单控件9的部分收缩版本16被更新以显示直接链接到下一个自动选择的元素4c(以及直接链接到全表单控件9中的相应表单字段9c)的关联的表单字段16c。所选择的元素4c的当前内容被显示为表单字段16c的内容。

总而言之，设计页面“1”包含针对从移动设备设计定制的产品特别优化的特征。通过将表单控件与WYWIWYG表示集成并直接在可视化表示元素自身上包含缩放和编辑控件，移动设备的用户体验到更整洁的简化的设计过程，从而使客户更满意。

图5是示出用于使得电子设备的用户能够经由显示在电子设备上的用户界面来定制产品设计的示例性用户界面方法的流程图。如图中所示，该方法包括在用户界面中显示容器内的设计的步骤，该设计包括多个可单独选择的元素，该容器被配置为允许对容器内的设计进行缩放和滚动(步骤501)。在用户界面内且在容器外，多个设计编辑控件被显示(步骤502)。与容器关联的缩放事件和滚动事件中的至少一个被接收(步骤503)，并且用于缩放或滚动容器内的设计的相应缩放或滚动动作被执行(步骤504)，其中设计编辑控件不受缩放或滚动动作影响。容器内的至少一个选择事件被接收(步骤505)，所述至少一个选择事件与设计的单个元素的用户选择对应。至少一个设计编辑控件事件被接收(步骤506)，并且对设计的所选择的单个元素执行与所接收的设计编辑控件事件关联的相应的设计编辑动作(步骤507)。可选地，(在步骤505接收的)该至少一个选择事件触发部分收缩的表单字段控件的显示，该显示显示用于编辑设计的所选择的单个元素的内容的用户可编辑的输入字段(步骤506)。

图6示出了本发明可以应用于其中的系统600的示例性实施例的高级别框图。如图6所示，提供打印的产品的在线零售商利用网站来提供需求产生/订单管道(GenerateDemand/OrderPipeline)服务器630。对于各种产品可获得的产品内容(诸如模板、布局、设计、字体方案、颜色方案、图像、图形)由人或计算机设计者提供到内容数据库602或其他计算机存储中。

操作客户端设备610的任何数量的客户可以访问由需求产生服务器630托管的网站，以查看产品和产品模板并且在订购之前选择、设计和/或定制所选择的产品的各种设计构件。例如，产品(诸如，商务名片)的多个模板可以由客户选择以进一步定制，诸如，添加客户的个性化信息，诸如姓名、企业名称、地址、电话号码、网站URL、标语等。此外，模板可以包含允许用户将图像上传到产品设计中的图像容器。一旦客户对他们的选择/定制满意，他们就可以通过服务器630下订单603。订单603被存储在订单数据库604中，和/或被直接发送到运营中心(fulfillmentcenter)。运营中心处的服务器640可以从订单数据库604检索订单603、从检索到的订单603中提取单个物品文档601、将单个物品文档601转换成一组相关的单个postscript文件，这组相关的单个postscript文件然后被聚合成含有待制造的单个物品的一组相关的群组文件(gangfile)。所述群组文件被发送给打印系统，并且物品被一次一个“群组”地同时地制造。所制造的物品由分拣系统分拣回到它们的单个订单中、被包装并运输或以其它方式配送给相应的单个客户。

一般地，由客户提交的订单603是短期制造作业，即，小于40000单位(通常为1-5000单位)的特定设计和形状的产品的制造作业。通过网络650，每个客户可以访问包含多个相关网页633的网站，这些网页633被配置为允许客户选择并定制待打印、蚀刻、雕刻、压印、粘贴或以其它方式被包含在产品(例如，商务名片、宣传册、邀请函、通告、促销产品(诸如钥匙链、鼠标垫、磁性贴(magnets)、贴花纸等))上的图形设计或模板。包含用户界面软件的设计工具633可以直接在需求产生/订单管道服务器630上执行，或者可以作为显示给用户的网页633的一部分从服务器630被下载614，以运行于客户的电子设备610上的用户的浏览器613中。在实施例中，设计工具614、635使得用户能够通过使用本发明的用户界面来完成所选择的模块以执行简单的设计功能。在一个实施例中，使用XML格式或其它适当的格式来实现模板。

图7示出了可以用来实施本文所讨论的任何服务器和计算机系统的计算机系统710。计算机710的构件可以包含(但不限于)处理单元720、系统存储器730以及将包含系统存储器在内的各种系统构件耦接至处理单元720的系统总线721。系统总线721可以是若干类型的总线结构中的任一种，包括存储器总线或存储器控制器、外设总线以及使用各种各样的总线架构的局部总线。

计算机710通常包含多种计算机可读介质。计算机可读介质可以是可以由计算机710访问的任何可获得的介质，并且包括易失性介质和非易失性介质、可移动介质和不可移动介质。举例来说且不作限制，计算机可读介质可以包括计算机存储介质和通信介质。计算机存储介质包括以任何方法或技术实施的、用于诸如计算机可读指令、数据结构、程序模块或其他数据之类的信息的存储的、易失性的和非易失性的、可移动的和不可移动的介质。计算机存储介质包括(但不限于)RAM、ROM、EEPROM、闪存或其他存储器技术、CDROM、数字通用盘(DVD)或其他光盘存储、磁带盒、磁带、磁盘存储或其它磁存储设备，或者可以被用来存储期望的信息的且可以由计算机710访问的任何其他介质。计算机存储介质通常包含计算机可读指令、数据结构、程序模块或其他数据。

系统存储器730包含形式为易失性的和/或非易失性的存储器(诸如只读存储器(ROM)731和随机存取存储器(RAM)732)的计算机存储介质。含有在诸如启动期间帮助在计算机710内的元件之间传输信息的基本例程的基本输入/输出系统733(BIOS)通常存储在ROM731中。RAM732通常含有可由处理单元720直接访问的和/或目前正由处理单元720对其进行操作的数据和/或程序模块。举例来说且不作限制，图F示出了操作系统734、应用程序735、其它程序模块736和程序数据737。

计算机710还可以包含其他可移动的/不可移动的、易失性的/非易失性的计算机存储介质。举例来说(仅作示例)，图F示出了读写不可移动的、非易失性的磁介质的硬盘驱动740，读写可移动的、非易失性的磁盘752的磁盘驱动751，以及读写可移动的、非易失性的光盘756(诸如CDROM或其他光学介质)的光盘驱动755。可以在示例性的操作环境中使用的其他可移动的/不可移动的、易失性的/非易失性的计算机存储介质包括(但不限于)磁带盒、闪存卡、数字通用盘、数字录像带、固态RAM、固态ROM等。硬盘驱动741通常通过不可移动的存储器接口(诸如接口740)连接至系统总线721，并且磁盘驱动751和光盘驱动755通常通过可移动的存储器接口(诸如接口750)连接至系统总线721。

以上所讨论的且示于图F中的驱动以及它们关联的计算机存储介质提供用于计算机710的计算机可读指令、数据结构、程序模块及其他数据的存储。在图F中，例如，硬盘驱动741被示出为存储着操作系统744、应用程序745、其他程序模块746和程序数据747。注意，这些构件可以与操作系统734、应用程序735、其他程序模块736及程序数据737相同或者不同。在此，操作系统744、应用程序745、其他程序模块746和程序数据747被给予了不同的编号，以示出它们最低限度上是不同的副本。用户可以通过诸如键盘762和指点设备761之类的输入设备(一般被称为鼠标、轨迹球或触摸板)来将命令和信息输入到计算机710中。其他输入设备(未示出)可以包括麦克风、操纵杆、游戏板、卫星天线、扫描仪等。这些及其他输入设备经常通过与系统总线耦接的用户输入接口760连接至处理单元720，但是还可以通过其他接口和总线结构(诸如并行端口、游戏端口或通用串行总线(USB))连接。监视器791或其他类型的显示设备同样经由接口(诸如视频接口790)连接至系统总线721。除了监视器外，计算机还可以包含可以通过输出外围接口790来连接的其他外围输出设备，诸如扬声器797和打印机796。

计算机710可以使用到一个或多个远程计算机(诸如远程计算机780)的逻辑连接来在网络环境中操作。远程计算机780可以是个人计算机、服务器、路由器、网络PC、对等设备或其他共同的网络节点，并且通常包括以上相对于计算机710所描述的许多或所有元件，尽管仅存储设备(memorystoragedevice)781已被示于图F中。图F所示的逻辑连接包括局域网(LAN)771和广域网(WAN)773，但是还可以包括其它网络。这种网络环境在办公室、企业范围的计算机网络、企业内部网和因特网中是常见的。

当在LAN网络环境中使用时，计算机710通过网络接口或适配器770连接至LAN771。当在WAN网络环境中使用时，计算机710通常包含调制解调器772或用于在WAN773(诸如因特网)上建立通信的其他装置。可以位于内部或外部的调制解调器772可以经由用户输入接口760或其他适当的机制连接至系统总线721。在网络环境中，相对于计算机710描绘的程序模块或所述程序模块的部分可以存储在远程存储设备中。举例来说且不作限制，图F示出了驻留在存储设备781上的远程应用程序785。应当意识到，所示的网络连接是示例性的，并且可以使用在计算机之间建立通信链路的其他装置。

尽管以上借助于包含具体结构和方法的各种实施例来描述本发明，但是在不脱离本文所描述的本发明的原理的情况下，可以采用包含可替代的结构和方法的实施例。

Claims (3)

1.一种用于定制产品设计的用户界面，包含：

预览容器，含有显示在电子显示器上的设计的可视化表示，所述设计的可视化表示按照所见即所得(WYSIWYG)的描绘、按照所述设计当前的表单来描绘所述设计，所述设计的可视化表示具有能够由用户经由所述电子显示器的相应区域上的直接触摸来单独选择的多个能定制的元素；

多个用户界面控件，所述多个用户界面控件包含：

表单控件，响应于用户输入来将所述表单控件设置为至少包括展开状态、收缩状态和部分收缩状态在内的多个表单控件状态之一，其中

所述展开状态被配置为暴露与所述设计的可视化表示的所述多个能定制的元素对应的多个用户能编辑的表单字段以在所述电子显示器上显示，并且其中每个用户能编辑的字段被配置为接收来自用户的内容，由此接收的内容与所述设计的可视化表示中的相应元素的相应的可视化内容对应，

所述收缩状态被配置为使所述用户能编辑的表单字段被隐藏为在所述电子显示器上不被看见，并且

所述部分收缩状态被配置为在所述电子显示器上仅显示与所述设计的可视化表示中的当前所选择的元素对应的用户能编辑的表单字段；

定制控件，响应于用户输入来将所述定制控件设置为多个定制控件状态之一，所述多个定制控件状态至少包括收缩的定制控件状态和展开的定制控件状态，在收缩的定制控件状态中，展开的定制选项控件组被隐藏为在所述电子显示器上不被看见，在展开的定制控件状态中，所述展开的定制选项控件组被暴露以在所述电子显示器上被看见并用于用户交互，所述定制控件组被配置为允许用户配置所述设计的可视化表示中的各个元素的可视化内容的不同可视化特征；

其中所述预览容器被配置允许用户滚动和缩放所述预览容器内的所述设计的可视化表示、而不同时地滚动或缩放所述电子显示器上的用户界面控件，并且

其中对所述设计的可视化表示上的单个能定制的元素的直接触摸选择触发在所述部分收缩状态中被配置的所述表单控件的显示。

2.一种用于使得电子设备的用户能够经由显示在电子设备上的用户界面来定制产品设计的方法，所述方法包括：

在所述用户界面中显示容器内的设计，所述设计包括多个能单独选择的元素，所述容器被配置为允许对所述容器内的所述设计进行缩放和滚动；

在所述用户界面内且在所述容器外显示多个设计编辑控件；

接收与所述容器关联的缩放事件和滚动事件中的至少一个，并且执行相应的缩放或滚动动作以对所述容器内的所述设计进行缩放或滚动，其中所述设计编辑控件不受缩放或滚动动作影响；

接收所述容器内的至少一个选择事件，所述至少一个选择事件对应于所述设计的单个元素的使用选择；

接收至少一个设计编辑控件事件并执行与所接收的设计编辑控件事件关联的相应的设计编辑动作，所述动作对所述设计的所选择的单个元素执行。

3.根据权利要求2所述的方法，其中所述至少一个选择事件触发部分收缩的表单字段控件的显示，所述部分收缩的表单字段控件显示用于编辑所述设计的所选择的单个元素的内容的用户能编辑的输入字段。