之一來選擇運(yùn)種可編輯 的元素。例如，在一個實(shí)施例中，用戶的手指在移動設(shè)備的屏幕上的可編輯的可視化表示的 顯示部分中的可編輯元素的邊界內(nèi)的任何位置的觸擊導(dǎo)致對該特定元素的選擇。如圖4G 所示，可W通過將所選擇的元素顯示在帶陰影的框"14a"內(nèi)或由另一個可替代的可視化指 示器來在設(shè)計(jì)"3"的可視化表示上指示字段的"被選擇"狀態(tài)。
[006引為了幫助用戶直接從可視化表示"3"執(zhí)行定制選項(xiàng)，設(shè)計(jì)頁面"1"包含定制控件 "6"。在一個實(shí)施例中，定制控件"6可W處于收縮狀態(tài)（如圖4A所示）或展開狀態(tài)（如圖 4G所示）。在展開狀態(tài)中，定制控件"6"可W提供作為幫助用戶編輯或修改所選擇的元素 的工具的多個不同的控件"15a"、"15b"....."15e"。在該說明性的實(shí)施例中，展開的定制 控件"6"被實(shí)現(xiàn)為工具欄，其中不同的圖標(biāo)與不同的樣式修改關(guān)聯(lián)。例如，當(dāng)所選擇的元素 為文本元素時，工具欄可化含有用于編輯字體的圖標(biāo)（"15a")、用于編輯效果（case)的圖 標(biāo)（"1化"）、用于編輯粗體樣式的圖標(biāo)（"15c")、用于編輯斜體樣式的圖標(biāo)（"15d")和 用于編輯文本顏色的圖標(biāo)（"15e")。 W64] 每個圖標(biāo)"15a"、"巧b"....."15e"與不同的頁面腳本關(guān)聯(lián)，W提供不同的功能。 例如，如果用戶觸擊字體選擇圖標(biāo)"15e"，則可獲得的字體的列表"18"被顯示，如圖4H所 示。優(yōu)選地，當(dāng)前的字體被高亮顯示，或者可替代地一些指示被顯示W(wǎng)指示哪種字體當(dāng)前被 用于所選擇的元素。用戶可W通過定位列表18中的期望字體（在需要時滾動）并執(zhí)行與 選擇關(guān)聯(lián)的用戶輸入手勢（例如，單觸擊或雙觸擊）、來修改所選擇的元素的當(dāng)前字體?？?視化表示然后被更新，并且底層的產(chǎn)品設(shè)計(jì)根據(jù)用戶選擇被修改。圖II和IJ示出了在用 戶點(diǎn)擊"粗體"樣式圖標(biāo)"15c"(圖《)并然后點(diǎn)擊"斜體"樣式圖標(biāo)"15d"(圖4乃之后 被更新的可編輯的可視化表示"3 "。 W65] 圖4K示出了在用戶選擇"顏色"樣式圖標(biāo)"15e"時顯示的拾色器（colorpicker) 控件"19"。如所示的，拾色器控件"19"顯示用于所選擇的元素的可獲得的多個不同顏色。 在一個實(shí)施例中，顏色被顯示為單個顏色圖標(biāo)的mXn陣列。在該說明性的實(shí)施例中，顏色 圖標(biāo)是W相應(yīng)的顏色填充的圓圈，并且各自具有與其關(guān)聯(lián)的腳本，該腳本導(dǎo)致將與所選擇 的元素關(guān)聯(lián)的當(dāng)前顏色修改為與該特定的顏色圖標(biāo)關(guān)聯(lián)的顏色。因此，用戶可W通過執(zhí)行 與W期望的顏色填充的顏色圖標(biāo)關(guān)聯(lián)的選擇手勢來選擇用于所選擇的元素的新顏色。例 如，選擇手勢可W是觸擊。在特定圖標(biāo)上的觸擊將使用與該圖標(biāo)關(guān)聯(lián)的顏色來更新所選擇 的元素的顏色。
[0066] 作為附加的特征，"顏色"樣式圖標(biāo)"15e"的圖標(biāo)15e的顏色23(見圖4J)可W呈 現(xiàn)（takeon)所選擇的元素的當(dāng)前選擇的顏色。因此，如果用戶使用拾色器控件19將所選 擇的元素的顏色從當(dāng)前顏色"24"更新為新的顏色"25"，則當(dāng)拾色器控件"19"關(guān)閉時，如 圖4L所示，當(dāng)前產(chǎn)品設(shè)計(jì)的可編輯的可視化表示"3"中的所選擇的元素（例如，所選擇的 元素4a)的顏色W及定制控件"6"中的"顏色"樣式圖標(biāo)"15e"的顏色兩者被更新為新的 顏色"25"。
[0067] 在一個實(shí)施例中，拾色器控件"19 "還包含顯示當(dāng)前顏色W及來自可獲得顏色的一 組最近使用的顏色的調(diào)色板區(qū)"20"。運(yùn)允許用戶通過從拾色器控件"19"選擇新顏色、查看 具有施加的"新"顏色的所選擇的元素、返回拾色器"19"如果用戶期望嘗試另外一種新顏 色或返回舊顏色來"測試"顏色。雖然沒有示出，但是優(yōu)選地，拾色器控件"19"提供滾動功 能W允許經(jīng)由滾動來顯示更多的顏色。在一個實(shí)施例中，為了節(jié)約屏幕上的空間W用于內(nèi) 容呈現(xiàn)而非控制呈現(xiàn)，滾動被隱含，意指滾動功能在沒有可見的滾動條的情況下存在，使得 當(dāng)用戶執(zhí)行滾動手勢（諸如觸擊并在向下（或向上）的方向上滑動）時，拾色器控件"19" 的內(nèi)容向下（或向上）滾動W展現(xiàn)更多可獲得的顏色。圖4M示出了在針對所選擇的元素 使用顏色"25"代替顏色"24"之后的拾色器控件"19"。值得注意的是，當(dāng)前選擇的顏色通 過可視化差異來與所有其他顏色區(qū)分。在該說明性的實(shí)施例中，可視化差異是圓圈的尺寸 (特別地，在該情況下，所選擇的顏色25通過具有較小尺寸的圓圈來指示，而所有未選擇的 顏色都具有相等的但較大尺寸的圓圈）。但是，本領(lǐng)域技術(shù)人員將意識到，存在眾多不同的 可視化差異實(shí)現(xiàn)，并且本文僅通過說明的方式而非通過限制的方式來展示可視化差異的說 明性實(shí)施例。
[0068] 可W按照與經(jīng)由圖1A-1M示出的方式類似的方式來選擇和定制任何可編輯的元 素。圖4N示出在用戶選擇元素"4h"之后的設(shè)計(jì)頁面"1"。在該視圖中將注意到，由于移 動設(shè)備的較小屏幕尺寸的分辨率限制，元素地的尺寸對于查看目的而言是相當(dāng)小的。由于 該原因，本發(fā)明的一個特征在于提供當(dāng)前產(chǎn)品設(shè)計(jì)的可編輯的可視化表示"3"的縮放功能。 為此，設(shè)計(jì)頁面將縮放（W及優(yōu)選地，滾動）功能附接到其中含有可編輯的可視化表示"3" 的容器"2"。容器"2"被配置為隱藏其內(nèi)容位于容器"2"的定義的邊界之外的任何部分。 所有的元素"4a"- "41"W相對于可編輯的可視化表示元素"3"的絕對定位被定義，并且縮 放控件通過可編輯的可視化表示元素"3"的任何嵌套元素向下級聯(lián)，使得如果可編輯的可 視化表示元素"3"的縮放級別被改變，則所有的元素"4a" - "41"都同樣按比例縮放。 W例圖40示出了用戶執(zhí)行向外的"捏合"手勢，憑借該"捏合"手勢用戶W位于焦點(diǎn)28 附近的拇指26和食指27同時地觸摸移動設(shè)備的屏幕、并然后使拇指26和食指27兩者在相 反的方向上同時地移動。屏幕上的位于拇指26和食指27之間的中途的點(diǎn)被認(rèn)為是焦點(diǎn)， 并且拇指26和食指27的向外移動的距離及速度的組合確定縮放的量。在本情況下，向外 的捏合手勢對應(yīng)于放大請求（而向內(nèi)的捏合手勢對應(yīng)于縮小請求）。其他手勢或用戶輸入 手段可W按照期望被實(shí)現(xiàn)W捕獲焦點(diǎn)和縮放級別。
[0070] 圖4P示出了在當(dāng)前產(chǎn)品設(shè)計(jì)的可編輯的可視化表示"3"內(nèi)的縮放級別已被調(diào)整 (如圖40中的捏合手勢所示）之后的設(shè)計(jì)頁面"1"。如所示的，所選擇的元素"14h"不完 全可見。由于該原因，本發(fā)明的另一特征是提供當(dāng)前產(chǎn)品設(shè)計(jì)的可編輯的可視化表示"3" 的滾動功能。為此，設(shè)計(jì)頁面將滾動功能附接到其中含有可編輯的可視化表示"3"的容器 "2 "。如W上關(guān)于提供縮放控件所解釋的，容器被配置為隱藏其內(nèi)容位于容器"2 "的定義的 邊界之外的任何部分，并且所有的元素"4a"- "41"W相對于可編輯的可視化表示元素"3" 的絕對定位被定義。因此，整個可編輯的可視化表示"3"及其構(gòu)件元素被滾動和縮放控件 視為一個單元。
[0071] 滾動控件允許用戶移動當(dāng)前產(chǎn)品設(shè)計(jì)的底層的可編輯的可視化表示"3"，W便定 位可編輯的可視化表示"3"的感興趣區(qū)域，從而被顯示在容器"2"的定義的規(guī)模內(nèi)。因此， 參照圖4P，為了移動當(dāng)前產(chǎn)品設(shè)計(jì)的底層的可編輯的可視化表示"3"、W便在容器"3"內(nèi)將 所選擇的字段14h全貌地定位，用戶可W執(zhí)行滾動手勢。在該說明性實(shí)施例中，滾動手勢是 在底層的可編輯的可視化表示"3"應(yīng)當(dāng)移動的方向上的觸擊并滑動的運(yùn)動。圖4P示出用 戶W該用戶食指27來執(zhí)行觸擊并滑動的運(yùn)動。圖4Q示出了所得到的顯示。如將從圖4Q 意識到的，所選擇的字段"1地"足夠大，從而容易地查看其內(nèi)容和展示樣式。 陽0巧圖4R示出了在進(jìn)一步縮放和滾動之后的所選擇的元素"1地"。另外注意，其他設(shè) 計(jì)頁面元素（例如，報頭"5"、定制控件"6"、部分收縮的字段控件"16"等）沒有被縮放。 良P，與可編輯的可視化表示"3"關(guān)聯(lián)的縮放控件獨(dú)立于設(shè)計(jì)頁面自身的縮放和滾動控件。 [0073] 現(xiàn)在返回到圖4G，為了在編輯產(chǎn)品設(shè)計(jì)方面進(jìn)一步添加用戶幫助，一旦用戶已選 擇元素（例如，元素"4a")，設(shè)計(jì)頁面1就通過顯示直接鏈接到所選擇的元素4a(W及直接 鏈接到全表單控件9中的相應(yīng)表單字段9a)的關(guān)聯(lián)的表單字段16a來顯示表單控件9的部 分收縮版本。所選擇的元素4a的當(dāng)前內(nèi)容被顯示為表單字段16a的內(nèi)容。在表單控件9 的部分收縮版本中，與可視化表示"3"中的當(dāng)前未選擇的元素"4b"....."4k"對應(yīng)的表單 字段"9a"、"9b"....."9k"被隱藏；但是，用戶可W使用導(dǎo)航按鈕"17a"和"17b"來切換到 后一個或前一個字段。切換到表單控件9中的后一個或前一個字段導(dǎo)致對可視化表示"3" 中的后一個或前一個對應(yīng)的有序元素的選擇。因此，如果用戶（在做出了各種附加的樣式 編輯之后）觸擊圖4G所示的屏幕上的導(dǎo)航按鈕"17a"，則與表單控件9中的下一個有序字 段"9b"對應(yīng)的元素"14b"將被選擇，如圖4S的當(dāng)前產(chǎn)品設(shè)計(jì)的可編輯的可視化表示"3" 中所示。表單控件9的部分收縮版本16被更新W顯示直接鏈接到所選擇的元素4b(W及 直接鏈接到全表單控件9中的相應(yīng)表單字段9b)的關(guān)聯(lián)的表單字段16b。所選擇的元素4b 的當(dāng)前內(nèi)容被顯示為表單字段16b的內(nèi)容。用戶由此可W逐個字段導(dǎo)航，從而使用定制工 具6對字段/元素進(jìn)行編輯，同時同時地查看當(dāng)前產(chǎn)品設(shè)計(jì)的可編輯的可視化表示"3"。在 一個實(shí)施例中，表單字段1化僅僅顯示字段的內(nèi)容；在一個可替代的實(shí)施例中，用戶可W編 輯表單字段1化的內(nèi)容，該表單字段1化的內(nèi)容然后被傳播到相應(yīng)的表單字段"9b"，并且該 內(nèi)容在當(dāng)前產(chǎn)品設(shè)計(jì)的可編輯的可視化表示"3"內(nèi)被呈現(xiàn)并被更新。圖4T示出了在用戶 已選擇"下一個"導(dǎo)航按鈕"17a"之后的設(shè)計(jì)頁面"1"的快照。再一次，表單控件9的部分 收縮版本16被更新W顯示直接鏈接到下一個自動選擇的元素4c(W及直接鏈接到全表單 控件9中的相應(yīng)表單字段9c)的關(guān)聯(lián)的表單字段16c。所選擇的元素4c的當(dāng)前內(nèi)容被顯示 為表單字段16c的內(nèi)容。
[0074] 總而言之，設(shè)計(jì)頁面"1"包含針對從移動設(shè)備設(shè)計(jì)定制的產(chǎn)品特別優(yōu)化的特征。通 過將表單控件與WYWIWYG表示集成并直接在可視化表示元素自身上包含縮放和編輯控件， 移動設(shè)備的用戶體驗(yàn)到更整潔的簡化的設(shè)計(jì)過程，從而使客戶更滿意。
[00巧]圖5是示出用于使得電子設(shè)備的用戶能夠經(jīng)由顯示在電子設(shè)備上的用戶界面來 定制產(chǎn)品設(shè)計(jì)的示例性用戶界面方法的流程圖。如圖中所示，該方法包括在用戶界面中顯 示容器內(nèi)的設(shè)計(jì)的步驟，該設(shè)計(jì)包括多個可單獨(dú)選擇的元素，該容器被配置為允許對容器 內(nèi)的設(shè)計(jì)進(jìn)行縮放和滾動（步驟501)。在用戶界面內(nèi)且在容器外，多個設(shè)計(jì)編輯控件被顯 示（步驟502)。與容器關(guān)聯(lián)的縮放事件和滾動事件中的至少一個被接收（步驟503)，并且 用于縮放或滾動容器內(nèi)的設(shè)計(jì)的相應(yīng)縮放或滾動動作被執(zhí)行（步驟504)，其中設(shè)計(jì)編輯控 件不受縮放或滾動動作影響。容器內(nèi)的至少一個選擇事件被接收（步驟505)，所述至少一 個選擇事件與設(shè)計(jì)的單個元素的用戶選擇對應(yīng)。至少一個設(shè)計(jì)編輯控件事件被接收（步驟 506)，并且對設(shè)計(jì)的所選擇的單個元素執(zhí)行與所接收的設(shè)計(jì)編輯控件事件關(guān)聯(lián)的相應(yīng)的設(shè) 計(jì)編輯動作（步驟507)。可選地，（在步驟505接收的）該至少一個選擇事件觸發(fā)部分收 縮的表單字段控件的顯示，該顯示顯示用于編輯設(shè)計(jì)的所選擇的單個元素的內(nèi)容的用戶可 編輯的輸入字段（步驟506)。
[0076] 圖6示出了本發(fā)明可W應(yīng)用于其中的系統(tǒng)600的示例性實(shí)施例的高級別框圖。如 圖6所示，提供打印的產(chǎn)品的在線零售商利用網(wǎng)站來提供需求產(chǎn)生/訂單管道（Generate DemandA)rderPipeline)服務(wù)器630。對于各種產(chǎn)品可獲得的產(chǎn)品內(nèi)容（諸如模板、布局、 設(shè)計(jì)、字體方案、顏色方案、圖像、圖形）由人或計(jì)算機(jī)設(shè)計(jì)者提供到內(nèi)容數(shù)據(jù)庫602或其他 計(jì)算機(jī)存儲中。
[0077] 操作客戶端設(shè)備610的任何數(shù)量的客戶