用于從移動設備設計可定制產品的系統(tǒng)、方法和用戶界面的制作方法
【專利說明】用于從移動設備設計可定制產品的系統(tǒng)、方法和用戶界面
[0001] 相關申請的交叉引用
[0002] 本申請根據35U.S.C. § 119(e)要求2013年6月24日提交的美國專利申請 No. 61/838865的優(yōu)先權，該專利申請通過引用全文并入本文。
【背景技術】
[0003] 當前被實現在移動設備（諸如智能手機和平板計算機）中的移動手機和無線網絡 的結合已徹底改變了人們訪問和使用因特網的方式和頻率。單個移動設備中的數據連接 性和瀏覽器的便利性和可獲得性允許人們在幾乎任何時間W及從幾乎任何地方訪問因特 網上可獲得的信息，從而提供信息接收的幾乎即時滿足并完成可經由web瀏覽器實現的任 務。
[0004] 經由移動設備訪問因特網的人數正在超過從傳統(tǒng)的桌面式W及甚至膝上型設備 訪問因特網的人數。隨著智能手機和平板計算機使用頻率的激增，相對于經由傳統(tǒng)的桌面 式和膝上型計算設備進行的電子商務交易，經由運種移動設備進行的電子商務交易已經同 時增加。因此，對于零售業(yè)，關鍵的是擁有具有簡單易用且美觀的圖形用戶界面的移動網 站，W便防止客戶減少并促進銷售。

【發(fā)明內容】
陽〇化]本發(fā)明的實施例包括用于從電子設備定制產品設計的用戶界面、系統(tǒng)和方法。
[0006] 一個實施例包含用于定制產品設計的用戶界面。該用戶界面包含含有在電 子顯示器上顯示的設計的可視化表示的容器。該設計的可視化表示按照所見即所得 (What-You-See-Is-What-You-Get) (WYSIWYG)的描繪、按照該設計的當前的表單來描繪該 設計，并且包含可由用戶經由電子顯示器的相應區(qū)域上的直接觸摸來單獨選擇的多個可定 制元素。該用戶界面還包含多個用戶界面控件。用戶界面控件包含表單控件，該表單控件 響應于用戶輸入而將該表單控件設置為至少包括展開狀態(tài)、收縮狀態(tài)和部分收縮狀態(tài)在內 的多個表單控件狀態(tài)之一。展開狀態(tài)被配置為暴露與設計的可視化表示的多個可定制元素 對應的多個用戶可編輯的表單字段W在電子顯示器上顯示，并且其中每個用戶可編輯字段 被配置為接收來自用戶的內容，由此所接收的內容對應于設計的可視化表示中的相應元素 的相應可視化內容。收縮狀態(tài)被配置為使用戶可編輯的表單字段被隱藏為在電子顯示器上 不被看見。部分收縮狀態(tài)被配置為在電子顯示器上僅顯示與在設計的可視化表示中的當前 所選擇的元素對應的用戶可編輯的表單字段。
[0007] 用戶界面還包含定制控件，該定制控件響應于用戶輸入而將該定制控件設置為多 個定制控件狀態(tài)之一，所述多個定制控件狀態(tài)至少包括收縮的定制控件狀態(tài)和展開的定制 控件狀態(tài)，在收縮的定制控件狀態(tài)中，展開的定制選項控件組被隱藏為在所述電子顯示器 上不被看見，在展開的定制控件狀態(tài)中，所述展開的定制選項控件組被暴露W在所述電子 顯示器上被看見并用于用戶交互，所述定制控件組被配置為允許用戶配置所述設計的可視 化表示中的各個元素的可視化內容的不同可視化特征。所述容器被配置為允許用戶滾動和 縮放所述容器內的所述設計的可視化表示、而不同時地滾動或縮放所述電子顯示器上的用 戶界面控件。此外，對所述設計的可視化表示上的單個可定制元素的直接觸摸選擇觸發(fā)在 所述部分收縮狀態(tài)中被配置的所述表單控件的顯示。
[0008] 一個實施例包含用于使得電子設備的用戶能夠經由顯示在電子設備上的用戶界 面來定制產品設計的方法。該方法包含在用戶界面中顯示容器內的設計，該設計包含多個 可單獨選擇的元素，容器被配置為允許縮放和滾動容器內的設計。該方法還包括在用戶界 面內且在容器之外顯示多個設計編輯控件。該方法還包括接收與容器關聯的縮放事件和 滾動事件中的至少一項，并且執(zhí)行相應的縮放或滾動動作W對容器內的設計進行縮放或滾 動，其中設計編輯控件不受縮放或滾動動作影響。該方法還包括接收容器內的至少一個選 擇事件，該至少一個選擇事件對應于設計的單個元素的使用選擇。該方法還包括接收至少 一個設計編輯控件事件并且執(zhí)行與所接收的設計編輯控件事件關聯的相應的設計編輯動 作，該動作對設計的所選擇的單個元素進行執(zhí)行?？蛇x地，該至少一個選擇事件觸發(fā)部分收 縮的表單字段控件的顯示，該部分收縮的表單字段控件顯示用于編輯所述設計的所選擇的 單個元素的內容的用戶可編輯的輸入字段。
【附圖說明】
[0009] 本發(fā)明及其附隨的眾多優(yōu)點的更全面理解將是清楚的，因為其通過參考下面結合 附圖來考慮的詳細描述變得更好理解，在附圖中相同的附圖標識指示相同或相似的構件， 其中：
[0010] 圖1是網站的體系結構的示意性框圖； W11] 圖2是其中本發(fā)明的實施例可W操作的示例性系統(tǒng)的高級別示意性框圖；
[0012] 圖3是模板構件資產（assets)數據庫的示意性框圖；
[0013] 圖4A-4T是在電子設備的電子顯示屏幕上顯示的示例性屏幕截圖并且示出了發(fā) 明的用戶界面的各種特征；
[0014] 圖5是示出根據本發(fā)明的原理的示例性的用戶界面流程操作的流程圖。
[0015] 圖6是其中本發(fā)明的實施例可W操作的示例性系統(tǒng)的更詳細的示意性框圖；
[0016] 圖7是諸如服務器設備或客戶端電子設備之類的計算設備的示意性框圖。
【具體實施方式】
[0017] 設計針對移動設備而優(yōu)化的網站的挑戰(zhàn)在于：相對于通常從桌面式或膝上型計算 機監(jiān)視器可獲得的屏幕尺寸、移動設備的較小的屏幕尺寸。可W顯示在電子顯示器或"屏 幕"上的信息量的關鍵是電子顯示屏幕分辨率一即，可用于將內容呈現在電子顯示器的屏 幕上的像素的數量。傳統(tǒng)的桌面式監(jiān)視器可W包含1280個像素（橫向）X1024個像素（縱 向）（按照典型的命名法為1280X1024個像素）。即使最低分辨率的桌面式監(jiān)視器通常將 具有至少640X480個像素的分辨率。相比之下，典型的智能手機具有300X480個像素的 屏幕分辨率。因此，不僅取向不同（縱向取向相對于橫向取向），更重要的是，智能手機上可 獲得的、用于傳遞信息的像素較少。因此，與桌面式或膝上型監(jiān)視器上相比，在任何給定時 間處在智能手機屏幕上可W顯示的內容較少。
[0018] 在設計移動網站時必須考慮較低分辨率的屏幕。為了解決有限分辨率的運個問 題，許多移動網站被設計為包含較少的文本和圖像元素、有限的用戶功能，和/或更多地利 用窗口滾動。某些移動網站設計者將傳統(tǒng)網站頁面的功能拆分成兩個或更多個移動網站頁 面，并且某些移動網站提供縮放功能W允許移動設備的用戶對網頁上的較小部分的內容進 行放大W便W較高的分辨率察看網頁的較小部分。所有W上的技術都被用來改善在從移動 設備訪問網站時網站的用戶體驗。
[0019] 某些零售商（諸如，運作例如與域名WWW. ViStaprint. com關聯的網站的 Vistaprint)銷售可W由訪問網站的客戶/用戶定制或設計的產品。當客戶/用戶（在下 文被稱為"用戶"）被允許進行設計選擇和/或向產品添加定制時，在用戶購買產品之前提 供產品的預覽、W便確保用戶理解該產品看起來將是什么樣的W及用戶的選擇和/或定制 如何影響基礎產品的外觀會是重要的。
[0020] 當網站提供設計功能時，用戶輸入經常借助于在網頁中存在的表單來捕獲。在將 包含文本和/或圖像定制的產品的情形中，產品設計的單個文本和/或圖像元素可W對應 于表單的單個字段。用戶可W通過將相應的文本和/或圖像內容輸入到與產品的文本和/ 或圖像元素關聯的各個表單字段中（或者將待并入到產品上的相應的圖像元素中的圖像 的位置引用到與產品的文本和/或圖像元素關聯的各個表單字段中）來設置產品上的文本 和/或圖像內容。為了改善用戶體驗，當前產品設計的可視化表示與表單同時地顯示，從而 使得在用戶將文本或圖像信息輸入到表單字段輸入框中時，當前產品設計的可視化表示中 的相應元素被更新W匹配字段內容或樣式修改。
[0021] 在移動設備上，由于屏幕的有限分辨率，表單與（由用戶定制的）當前產品設計的 可視化表示的同步顯示是困難的，然而對當前產品設計的可視化表示的需求并沒有降低。
[0022] 因此，本發(fā)明提供可在移動設備上的瀏覽器內獲得的獨特的設計體驗，該設計體 驗包含表單功能和可視化表示功能兩者，還具有用于用戶查看并直接在當前產品設計的可 視化表示上執(zhí)行設計編輯W修改底層的產品設計自身的能力。為了幫助用戶對整個產品進 行可視化，除了諸如表單控件、產品設計審批控件、一個或多個產品編輯控件、導航元素W 及附加的文本和/或圖像元素（如果合適）之類的其他頁面元素外，當前產品設計的可編 輯的可視化表示被顯示在移動網站產品設計頁面上。當前產品設計的可編輯的可視化表示 被包含在容器內，該容器包括被配置為允許用戶縮放和滾動容器內的可編輯的可視化表示 的單獨的縮放控件和/或滾動控件。當前產品設計的可編輯的可視化表示中的單個元素 (與表單元素中的表單字段對應）是用戶可編輯的。運允許用戶從表單字段和/或當前產 品設計的可編輯的可視化表示之一或二者來編輯產品設計，W便對產品設計文檔進行實際 的改變。
[0023] MM
[0024] 一般地，W下所描述的實施例的特征在于：允許用戶從移動設備（諸如智能手機 或平板計算機/平板設備）選擇模板并使用個性化內容和樣式選擇來定制模板的設計應 用。產品設計頁面或應用被服務器下載到設備。該產品設計頁面/應用（AP巧包括允許在 對用戶選擇的模板進行用戶做出的選擇和編輯時進行動態(tài)的WYSIWYG顯示呈現的腳本實 現功能。諸如容器內的滾動和縮放、直接從設計預覽的基于觸摸的元素選擇、控件展開/收 縮W及基于元素選擇上下文的部分表單顯示之類的特征使得能夠對小型化屏幕上的文檔 產品進行詳細設計。
[00巧]對因特網相關的技術的介紹有助于理解本發(fā)明。因特網是通過各種電信媒介鏈接 在一起的計算機和其他設備的龐大的且擴展的網絡，從而使得各種構件能夠交換和共享數 據?？赏ㄟ^因特網訪問的網頁和網站（在特定域下組織的相關網頁的集合）提供關于眾多 商家、產品和服務W及教育、研究和娛樂的信息。
[00%] 系統(tǒng)的一個整體構件是計算機服務器。服務器是向被稱為客戶端的其他程序提供 某種服務的計算機程序?？蛻舳撕头掌鹘柚诮洺Ｔ诰W絡上傳送的消息來通信，并且使 用某種協議（描述如何傳輸數據的一組形式規(guī)則）來對客戶端的請求和/或響應W及服務 器的響應和/或請求進行編碼。服務器可W連續(xù)運行、等待客戶端的請求和/或響應到來， 或者它可W由控制許多具體服務器的某個更高級別的連續(xù)運行的服務器調用。
[0027] 附接到因特網的資源經常被稱為"主機"。運種資源的示例包括由一個或多個處理 器、關聯的存儲器W及其他存儲設備和外設（諸如允許連接至因特網或其他網絡的調制解 調器、網絡接口等）構成的常規(guī)的計算機系統(tǒng)。在大多數情況下，托管資源可W被實現為包 含允許與用戶進行某種對話的且可W處理由用戶輸入的信息的接口模塊的服務器或其他 計算機系統(tǒng)的硬件和/或軟件構件。一般地，將按照常規(guī)的方式通過因特網的圖形用戶界 面一一萬維網（例如，經由web瀏覽器）來訪問運種服務器。
[0028] 為了促進主機間的通信，每個主機具有數字的因特網協議（I巧地址。假設的主機 計算機的IP地址可W是69. 17.223. 11。每個主機還具有唯一的"完全限定域名"。在假設 主機69. 17. 223. 11的情況下，"完全限定域名"可W是"computer,domain,com",其中S個 元素是主機名（"computer")、域名（"domain")和頂級域名（"com")。給定的主機通過 被稱為域名服務的系統(tǒng)查找因特網上的其他主機的I