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

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