设计"3"的可编辑的可视化表示的缩 放和滚动控件（即，在单个元素级别相对于页面级别）操作W将模板元素（例如，设计"3" 的可视化表示）初始化为可缩放/可滚动的元素。缩放/滚动控件监听启动手势事件（例 如，凭借屏幕触摸被检测到并且还没有被释放的触击启动）并由其触发。在检测到"启动" 手势事件时，缩放/滚动控件确定它是单触摸还是双触摸事件、监听"移动"事件并且基于 来自检测到的"移动"事件的输入来确定移动的量和方向。如果双触摸被检测到，则运被划 分为"捏合（pinch)"事件，并且捏合的焦点被计算为运两个屏幕触摸位置之间的中途，并且 模板元素的缩放级别根据捏合事件的方向和值来改变。如果触摸事件是单触摸事件，则该 事件被划分为滚动事件，并且模板元素的位置根据移动事件的方向和值来改变。
[0051] 缩放和滚动动作通过嵌套在模板元素（即，设计"3"的可视化表示）内的每个元素 来级联。在一个实施例中，缩放和滚动功能使用可从CUbiq. org获得的称为iScroll4的 化vaScript滚动和缩放功能的库被实施为iScroll。具体地，iScroll元素的实例W作为 目标元素被传送的模板元素来进行实例化。当产品设计页面加载时，化vaScript监听DOM 加载事件，并然后对传送作为目标元素的画布（canvas)的iscroll的实例进行实例化。
[0052] 图4A示出了呈现在电子显示器（诸如移动设备）的屏幕上的所呈现的产品设计 页面"1"的示意性表示。产品设计页面"1"含有用户设计功能，W允许用户查看并编辑产 品设计。在该说明性的实施例中，产品设计页面"1"是已由在移动设备上执行的浏览器呈 现的浏览器可呈现的文档（诸如为HTML文档）。产品设计页面"1"可W是零售产品网站 (例如，用户可W从其设计并订购诸如商务名片、明信片、宣传册、邀请函、通告、横幅、促销 产品等之类的打印的产品的网站）的网页。在该说明性的实施例中，产品设计是待被打印W形成打印的产品的内容。可替代地，产品设计页面"1"可W致力于允许用户设计电子产 品，诸如网站和网页、社交媒体页面、营销活动电子邮件和广告等。在运种情况下，产品设计 是待被呈现在电子显示器上的内容和样式。网站还可W是允许用户将文本、像、图形、颜色 打印、压花、雕刻、压印、施加、附接或W其它方式配置到实体产品上的服装或消费产品零售 商，从而使得产品设计页面"1"可替代地可W致力于允许用户设计待被施加到所选择的服 装或消费产品的文本、像、图形等的特定的二维设计。在该情况下，产品设计是待被施加到 所选择的服装或消费产品的文本、像、图形等的二维设计。
[0053] 产品设计页面"1"被配置有含有当前产品设计的可编辑的可视化表示"3"的产品 预览区或容器"2"。可编辑的可视化表示"3"是如当前由用户定制的产品设计的所见即所 得（WYSIWYG)表示。旨P，可编辑的可视化表示"3"描绘了产品设计在被制造/呈现时将实 体看起来如何，包括由用户做出的所有定制。
[0054] 图4B示出了图4A的浏览器可呈现的文档"1"的示意性表示。如所示的，产品设 计页面"1"的每个元素的边界由虚线轮廓指示。（注意，虚线轮廓只是为了指示的目的而 在本文的图4B中被展示，并且在页面的呈现的图像中一般是不可见的）。如图所示，浏览 器可呈现的文档"1"包含若干元素，包括用于当前产品设计的可编辑的可视化表示"3"的 显示的容器"2"、页面工具栏"8"、页面信头"5"、表单控件"9"、定制控件"6"、范例文本控 件"7"。页面"1"中的每个元素可W包含相关的嵌套元素。例如，定制控件"6"包含图标容 器"6a"、图标图像"6b"和图标文本"6c"。类似地，示出的范例文本控件"7"包含图标容器 "7曰"、图标图像"7b"和图标文本"7c"。页面工具栏"8"将类似地包含多个嵌套元素，运些 嵌套元素为了简单起见并没有被示出。 阳化5] 容器元素"2 "被配置为在其内含有可编辑的可视化表示元素"3 "。被包含于其中 的设计"3"的可编辑的可视化表示还包含与所表示的设计中的文本和图像元素对应的单个 元素"4a"、"4b"....."4n"。例如，可编辑的可视化表示元素"3"含有嵌套的单个元素，包 含文本字段"4曰"、"4b"....."4k"化及背景图像"41"。
[0056] 返回至图4A，表单控件"9"可W处于收缩状态（如图4A所示）、展开状态（如图 4C所示）中的一种状态中，或者如在下文讨论的（相对于图4G)，处于部分收缩状态中。从 收缩状态转变为展开状态W及反过来可通过诸如触击、滑动、触击并滑动或其他运种手指 手势之类的一个或多个预定义的用户输入手势来实现。在一个实施例中，表单控件9包含 可视化的展开/收缩控件13。例如，在收缩状态（如图4A所示）中，表单控件9包含作为 沿着用户界面屏幕的一边缘显示的可选择标签显现的展开/收缩控件13。展开/收缩控件 13的状态可W通过与控件13及相关的切换功能关联的识别的用户输入手势（诸如触击、滑 动、触击并扫动等）从收缩状态切换到展开状态。图4C示出了处于展开状态时的表单控件 9和展开/收缩控件13。如图4C所示，展开/收缩控件13在屏幕上保持为可见的（尽管 已经由于展开的表单控件而移动），W允许用户在任何时候将表单控件9切换回到收缩状 态。
[0057] 如4C所进一步示出的，当表单控件"9"处于展开状态时，一组用户输入容器（被 称为"表单字段"）"9a"、"9b"....."9k"(各自对应于可视化表示"3"中的单个文本字 段"4a"、"4b"....."4k"中的不同一个）被显示在移动设备的屏幕上。如果表单字段 "9a"、"9b"....."9k"的数量超过合理呈现所有表单字段的屏幕空间的量，则表单控件 可W包含滚动功能，W允许用户滚动所显示的展开的表单控件W展现当前屏幕上不可见 的表单字段。表单字段"9a"、"9b"....."9k"中的每一个对应于产品设计中的单个字段 "4a"、"4b"....."4k"中的不同一个。因此，表单控件"9"中的许多（若非全部）表单字段 "9a"、"9b"....."9k"对应于呈现在当前产品设计的可视化表示"3"中的单个元素"4曰"、 "4b"....."4k"中的不同一个。对于文本元素，输入到相应的表单字段中的文本内容将导 致相同的文本内容作为可视化表示中的相应的文本元素被呈现并显示。对于图像元素，图 像文件的名称可W被输入到相应的图像表单字段"41"中，并且该图像作为设计的可视化表 示中的图像元素被呈现。
[0058] 一般而言，容器"2"含有在构造中的设计的、按照其当前的表单的可视化表示。一 般地，单个元素被呈现并显示W按照所见即所得（WYSIWYG)的描绘、按照该设计的当前的 表单来描绘该设计。尽管每个元素都被呈现W如同它将在最终产品中显现的那样来显现， 但是设计的众多（若非全部）单个元素是可定制的。目P，给定元素的尺寸、字体、颜色、位置 等可W是用户可配置的。因此，设计的可视化表示中的众多（若非全部）单个元素被配置为 可由用户经由在电子显示器的相应区域上的直接触摸来单独选择。因此，如果用户期望选 择与"电话号码"字段对应的元素4曰，则用户可W在元素4a被呈现的区域中的屏幕上简单 触击。为了帮助用户理解每个元素在当前设计中位于哪里，系统可W自动地填充每个字段 的范例文本。目P，在开始时，当模板被选择并被加载到容器"2"中作为设计页面"1"上的设 计"3"的可视化表示W用于后续的用户定制时，用户还没有将内容输入到表单字段"9a"、 "9b"....."9k"中。在一个实施例中，系统将范例文本插入到表单字段"9a"、"9b"..... "9k"中，W使得范例文本将显现在当前产品设计的可视化表示"3"中。运可W被执行，W便展示什么类型的文本应当被输入每个字段中的示例，并且给予用户在所有字段都被填充 时整体布局的看起来如何的概念。在一个实施例中，如图4A所示，网页1包含示出范例文 本控件7,该范例文本控件7可W经由识别的关联的用户输入手势（诸如但并不限于，手指 触击）来切换，W包含或去除由系统插入的范例文本。在图4A中，范例文本控件7 (该范例 文本控件7可W在每个字段中显示和不显示范例文本之间切换）已经被设置W显示范例文 本，并且因此范例文本被示于可视化表示3中。如图4A和IC所进一步示出的，范例文本可 W按照视觉上与在用户输入将要被插入W代替范例文本的文本时使用的标准文本颜色或 字体不同的颜色或字体来显示。例如，范例文本的颜色可W显示为浅灰色，而用户插入的文 本被显示为黑色。视觉上不同的文本颜色或文本字体的使用可W被实施W帮助用户理解： 范例文本仅仅为范例，并且该字段可由用户编辑W在其位置中插入任何期望的文本。
[0059] 用户可W通过将文本输入到一个或多个表单文本字段"9a"、"9b"....."9k"中来 修改被含在当前产品设计中的文本。取决于用户界面被实施在其上的电子设备的类型，文 本输入可W借助于键盘（实体的键盘或小键盘，或者虚拟的小键盘）来输入。虚拟小键盘 可W通过例如用户对表单字段"9a"、"9b"....."9k"之一进行触击来调用。一般地，电子 设备的操作系统负责用户输入（诸如手指触击/手势）的检测W及用户输入的处理，W允 许由用户界面处理成其适当的意思的用户输入。例如，如果用户触击表单字段"9a"，则操作 系统检测该触击事件和触击的位置、确定哪个元素与该位置对应并且调用与该触击事件关 联的、对应于与该位置关联的对象的方法。例如，触击事件可W调用表单控件9在部分收缩 状态中显示，如下文将讨论的。触击事件可W进一步调用经由操作系统来接受并处理接收 自电子设备的输入设备的文本输入的监听方法。在一个实施例中，当用户例如经由浏览器 调用的小键盘在表单文本字段"9a"、"9b"....."9k"中的一个或多个字段中输入文本时， 文本被发送到服务器W按照与该字段关联的字体来呈现。可替代地，文本字体被下载并被 本地存储W允许文本本地呈现。 W60] 转至图4D，例如，表单控件9处于展开状态，并且用户已经在"电话"字段"9a"中 输入电话号码，并且当前正使用浏览器调用的小键盘"10"将名称输入到"全名"字段"9c" 中。在一个实施例中，当用户（使用手指或其他设备）触击或W其它方式选择字段来编辑 时，小键盘"10"被显示为弹出窗口。图4E示出了用户继续使用小键盘"10"将文本输入到 "职称"字段"9d"中。小键盘"10"包含"完成"按键"11"。当用户完成将文本输入到所选 择的字段中时，用户可W触击小键盘"10"上的"完成"按键W关闭虚拟小键盘"10"。用户 可W继续将文本输入到表单控件9上的表单字段中，或者可W通过触击或执行与收缩表单 控件"9"关联的用户输入手势来收缩表单控件9,W显示当前产品设计的可视化表示"3"。 [006U图4F示出了在用户已经收缩了图4E中的表单控件"9"之后的产品设计页面"1"。 如所示的，可编辑的可视化表示"3"现在是可见的，并且可视化表示"3"中的与表单控件 "9"中的用户编辑的表单字段"9a"、"9c"和"9d"对应的文本元素"4a"、"4c"和"4d"中的 每一个已被更新W并入更新的文本。
[0062] 如之前所提到的，当前产品设计的可视化表示"3"自身至少是部分可编辑的。良P， 某些元素（诸如文本元素"4a"、"4b"....."4k")可W直接从可视化表示"3"中进行选择 并进行定制。例如，定制选项可W包含文本样式选项，诸如字体、样式、颜色、尺寸等。至少 在用户界面的基于web浏览器的实现中，可从可编辑的可视化表示"3"编辑的元素像运样 被定义在用来呈现表示"3"的HTML代码中。用户可W通过由移动设备的操作系统识别的 并被传送到设计页面"1"的适当的页面脚本的许多手势或用户输入