用于从移动设备设计可定制产品的系统、方法和用户界面的制作方法
【专利说明】用于从移动设备设计可定制产品的系统、方法和用户界面
[0001] 相关申请的交叉引用
[0002] 本申请根据35U.S.C. § 119(e)要求2013年6月24日提交的美国专利申请 No. 61/838865的优先权，该专利申请通过引用全文并入本文。
【背景技术】
[0003] 当前被实现在移动设备（诸如智能手机和平板计算机）中的移动手机和无线网络 的结合已彻底改变了人们访问和使用因特网的方式和频率。单个移动设备中的数据连接 性和浏览器的便利性和可获得性允许人们在几乎任何时间W及从几乎任何地方访问因特 网上可获得的信息，从而提供信息接收的几乎即时满足并完成可经由web浏览器实现的任 务。
[0004] 经由移动设备访问因特网的人数正在超过从传统的桌面式W及甚至膝上型设备 访问因特网的人数。随着智能手机和平板计算机使用频率的激增，相对于经由传统的桌面 式和膝上型计算设备进行的电子商务交易，经由运种移动设备进行的电子商务交易已经同 时增加。因此，对于零售业，关键的是拥有具有简单易用且美观的图形用户界面的移动网 站，W便防止客户减少并促进销售。
【发明内容】
阳〇化]本发明的实施例包括用于从电子设备定制产品设计的用户界面、系统和方法。
[0006] 一个实施例包含用于定制产品设计的用户界面。该用户界面包含含有在电 子显示器上显示的设计的可视化表示的容器。该设计的可视化表示按照所见即所得 (What-You-See-Is-What-You-Get) (WYSIWYG)的描绘、按照该设计的当前的表单来描绘该 设计，并且包含可由用户经由电子显示器的相应区域上的直接触摸来单独选择的多个可定 制元素。该用户界面还包含多个用户界面控件。用户界面控件包含表单控件，该表单控件 响应于用户输入而将该表单控件设置为至少包括展开状态、收缩状态和部分收缩状态在内 的多个表单控件状态之一。展开状态被配置为暴露与设计的可视化表示的多个可定制元素 对应的多个用户可编辑的表单字段W在电子显示器上显示，并且其中每个用户可编辑字段 被配置为接收来自用户的内容，由此所接收的内容对应于设计的可视化表示中的相应元素 的相应可视化内容。收缩状态被配置为使用户可编辑的表单字段被隐藏为在电子显示器上 不被看见。部分收缩状态被配置为在电子显示器上仅显示与在设计的可视化表示中的当前 所选择的元素对应的用户可编辑的表单字段。
[0007] 用户界面还包含定制控件，该定制控件响应于用户输入而将该定制控件设置为多 个定制控件状态之一，所述多个定制控件状态至少包括收缩的定制控件状态和展开的定制 控件状态，在收缩的定制控件状态中，展开的定制选项控件组被隐藏为在所述电子显示器 上不被看见，在展开的定制控件状态中，所述展开的定制选项控件组被暴露W在所述电子 显示器上被看见并用于用户交互，所述定制控件组被配置为允许用户配置所述设计的可视 化表示中的各个元素的可视化内容的不同可视化特征。所述容器被配置为允许用户滚动和 缩放所述容器内的所述设计的可视化表示、而不同时地滚动或缩放所述电子显示器上的用 户界面控件。此外，对所述设计的可视化表示上的单个可定制元素的直接触摸选择触发在 所述部分收缩状态中被配置的所述表单控件的显示。
[0008] 一个实施例包含用于使得电子设备的用户能够经由显示在电子设备上的用户界 面来定制产品设计的方法。该方法包含在用户界面中显示容器内的设计，该设计包含多个 可单独选择的元素，容器被配置为允许缩放和滚动容器内的设计。该方法还包括在用户界 面内且在容器之外显示多个设计编辑控件。该方法还包括接收与容器关联的缩放事件和 滚动事件中的至少一项，并且执行相应的缩放或滚动动作W对容器内的设计进行缩放或滚 动，其中设计编辑控件不受缩放或滚动动作影响。该方法还包括接收容器内的至少一个选 择事件，该至少一个选择事件对应于设计的单个元素的使用选择。该方法还包括接收至少 一个设计编辑控件事件并且执行与所接收的设计编辑控件事件关联的相应的设计编辑动 作，该动作对设计的所选择的单个元素进行执行。可选地，该至少一个选择事件触发部分收 缩的表单字段控件的显示，该部分收缩的表单字段控件显示用于编辑所述设计的所选择的 单个元素的内容的用户可编辑的输入字段。
【附图说明】
[0009] 本发明及其附随的众多优点的更全面理解将是清楚的，因为其通过参考下面结合 附图来考虑的详细描述变得更好理解，在附图中相同的附图标识指示相同或相似的构件， 其中：
[0010] 图1是网站的体系结构的示意性框图； W11] 图2是其中本发明的实施例可W操作的示例性系统的高级别示意性框图；
[0012] 图3是模板构件资产（assets)数据库的示意性框图；
[0013] 图4A-4T是在电子设备的电子显示屏幕上显示的示例性屏幕截图并且示出了发 明的用户界面的各种特征；
[0014] 图5是示出根据本发明的原理的示例性的用户界面流程操作的流程图。
[0015] 图6是其中本发明的实施例可W操作的示例性系统的更详细的示意性框图；
[0016] 图7是诸如服务器设备或客户端电子设备之类的计算设备的示意性框图。
【具体实施方式】
[0017] 设计针对移动设备而优化的网站的挑战在于：相对于通常从桌面式或膝上型计算 机监视器可获得的屏幕尺寸、移动设备的较小的屏幕尺寸。可W显示在电子显示器或"屏 幕"上的信息量的关键是电子显示屏幕分辨率一即，可用于将内容呈现在电子显示器的屏 幕上的像素的数量。传统的桌面式监视器可W包含1280个像素（横向）X1024个像素（纵 向）（按照典型的命名法为1280X1024个像素）。即使最低分辨率的桌面式监视器通常将 具有至少640X480个像素的分辨率。相比之下，典型的智能手机具有300X480个像素的 屏幕分辨率。因此，不仅取向不同（纵向取向相对于横向取向），更重要的是，智能手机上可 获得的、用于传递信息的像素较少。因此，与桌面式或膝上型监视器上相比，在任何给定时 间处在智能手机屏幕上可W显示的内容较少。
[0018] 在设计移动网站时必须考虑较低分辨率的屏幕。为了解决有限分辨率的运个问 题，许多移动网站被设计为包含较少的文本和图像元素、有限的用户功能，和/或更多地利 用窗口滚动。某些移动网站设计者将传统网站页面的功能拆分成两个或更多个移动网站页 面，并且某些移动网站提供缩放功能W允许移动设备的用户对网页上的较小部分的内容进 行放大W便W较高的分辨率察看网页的较小部分。所有W上的技术都被用来改善在从移动 设备访问网站时网站的用户体验。
[0019] 某些零售商（诸如，运作例如与域名WWW. ViStaprint. com关联的网站的 Vistaprint)销售可W由访问网站的客户/用户定制或设计的产品。当客户/用户（在下 文被称为"用户"）被允许进行设计选择和/或向产品添加定制时，在用户购买产品之前提 供产品的预览、W便确保用户理解该产品看起来将是什么样的W及用户的选择和/或定制 如何影响基础产品的外观会是重要的。
[0020] 当网站提供设计功能时，用户输入经常借助于在网页中存在的表单来捕获。在将 包含文本和/或图像定制的产品的情形中，产品设计的单个文本和/或图像元素可W对应 于表单的单个字段。用户可W通过将相应的文本和/或图像内容输入到与产品的文本和/ 或图像元素关联的各个表单字段中（或者将待并入到产品上的相应的图像元素中的图像 的位置引用到与产品的文本和/或图像元素关联的各个表单字段中）来设置产品上的文本 和/或图像内容。为了改善用户体验，当前产品设计的可视化表示与表单同时地显示，从而 使得在用户将文本或图像信息输入到表单字段输入框中时，当前产品设计的可视化表示中 的相应元素被更新W匹配字段内容或样式修改。
[0021] 在移动设备上，由于屏幕的有限分辨率，表单与（由用户定制的）当前产品设计的 可视化表示的同步显示是困难的，然而对当前产品设计的可视化表示的需求并没有降低。
[0022] 因此，本发明提供可在移动设备上的浏览器内获得的独特的设计体验，该设计体 验包含表单功能和可视化表示功能两者，还具有用于用户查看并直接在当前产品设计的可 视化表示上执行设计编辑W修改底层的产品设计自身的能力。为了帮助用户对整个产品进 行可视化，除了诸如表单控件、产品设计审批控件、一个或多个产品编辑控件、导航元素W 及附加的文本和/或图像元素（如果合适）之类的其他页面元素外，当前产品设计的可编 辑的可视化表示被显示在移动网站产品设计页面上。当前产品设计的可编辑的可视化表示 被包含在容器内，该容器包括被配置为允许用户缩放和滚动容器内的可编辑的可视化表示 的单独的缩放控件和/或滚动控件。当前产品设计的可编辑的可视化表示中的单个元素 (与表单元素中的表单字段对应）是用户可编辑的。运允许用户从表单字段和/或当前产 品设计的可编辑的可视化表示之一或二者来编辑产品设计，W便对产品设计文档进行实际 的改变。
[0023] MM
[0024] 一般地，W下所描述的实施例的特征在于：允许用户从移动设备（诸如智能手机 或平板计算机/平板设备）选择模板并使用个性化内容和样式选择来定制模板的设计应 用。产品设计页面或应用被服务器下载到设备。该产品设计页面/应用（AP巧包括允许在 对用户选择的模板进行用户做出的选择和编辑时进行动态的WYSIWYG显示呈现的脚本实 现功能。诸如容器内的滚动和缩放、直接从设计预览的基于触摸的元素选择、控件展开/收 缩W及基于元素选择上下文的部分表单显示之类的特征使得能够对小型化屏幕上的文档 产品进行详细设计。
[00巧]对因特网相关的技术的介绍有助于理解本发明。因特网是通过各种电信媒介链接 在一起的计算机和其他设备的庞大的且扩展的网络，从而使得各种构件能够交换和共享数 据。可通过因特网访问的网页和网站（在特定域下组织的相关网页的集合）提供关于众多 商家、产品和服务W及教育、研究和娱乐的信息。
[00%] 系统的一个整体构件是计算机服务器。服务器是向被称为客户端的其他程序提供 某种服务的计算机程序。客户端和服务器借助于经常在网络上传送的消息来通信，并且使 用某种协议（描述如何传输数据的一组形式规则）来对客户端的请求和/或响应W及服务 器的响应和/或请求进行编码。服务器可W连续运行、等待客户端的请求和/或响应到来， 或者它可W由控制许多具体服务器的某个更高级别的连续运行的服务器调用。
[0027] 附接到因特网的资源经常被称为"主机"。运种资源的示例包括由一个或多个处理 器、关联的存储器W及其他存储设备和外设（诸如允许连接至因特网或其他网络的调制解 调器、网络接口等）构成的常规的计算机系统。在大多数情况下，托管资源可W被实现为包 含允许与用户进行某种对话的且可W处理由用户输入的信息的接口模块的服务器或其他 计算机系统的硬件和/或软件构件。一般地，将按照常规的方式通过因特网的图形用户界 面一一万维网（例如，经由web浏览器）来访问运种服务器。
[0028] 为了促进主机间的通信，每个主机具有数字的因特网协议（I巧地址。假设的主机 计算机的IP地址可W是69. 17.223. 11。每个主机还具有唯一的"完全限定域名"。在假设 主机69. 17. 223. 11的情况下，"完全限定域名"可W是"computer,domain,com",其中S个 元素是主机名（"computer")、域名（"domain")和顶级域名（"com")。给定的主机通过 被称为域名服务的系统查找因特网上的其他主机的I