TW201312381A

TW201312381A - 合成版面配置的視覺化及編輯

Info

Publication number: TW201312381A
Application number: TW101127483A
Authority: TW
Inventors: Erik A Saltwell; Christian Schormann
Original assignee: Microsoft Corp
Priority date: 2011-09-08
Filing date: 2012-07-30
Publication date: 2013-03-16
Also published as: EP2754040B1; US20130067323A1; EP2754040A1; US8601366B2; EP2754040A4; CN102929910A; HK1179721A1; TWI562004B; CN102929910B; WO2013036461A1

Abstract

在文件元件之版面配置之電腦輔助視覺化與潛在調整中連續應用多個版面配置處理。將一或更多個版面配置處理之一個設定應用至元件，以決定相關於元件起始位置之元件中介位置。隨後，將一或更多個版面配置處理之另一個設定應用至元件，以決定元件最終位置。並非僅在顯示器上顯示最終位置，而是顯示元件之起始位置、中介位置與最終位置全部。中介控制可用以藉由移動元件顯示中介位置來改變一或更多個版面配置處理之第一設定。最終控制可用以藉由移動元件顯示最終位置來改變一或更多個版面配置處理之第二設定。

Description

合成版面配置的視覺化及編輯

本發明係關於合成版面配置的視覺化及編輯。

下載至客戶端瀏覽器之網頁包括標記語言，可能有一些多媒體檔案及可能有一些腳本代碼。最常用之標記語言係為超文件標記語言(HTML)，並且該標記語言可與一些或可能全部之內容一起由瀏覽器解釋以定義網頁之結構。多媒體檔案可包括在網頁版面配置中自動展示之視訊或影像，或可在回應一或更多個控制之執行中展示之視訊或影像。腳本代碼允許頁面具有更多動態功能並且腳本代碼可自動執行及/或回應頁面上使用者互動之控制而執行。Javascript係為腳本代碼語言之實例。

通常網頁包括一或更多個元件。隨著網頁的展示，每一元件係位於網頁內。一些使用者介面平台允許元件連續實行多個版面配置處理。舉例而言，首先元件可具有可朝任意方向之預設位置。網頁本身可藉由容納元件位置的表現來覆蓋此預設位置。舉例而言，HTML網頁之內文中，此舉稱為「流入(in-flow)」位置。式樣表單亦可應用進一步改變此位置之其他版面配置位置。當應用多個版面配置處理時，通常連續應用該多個版面配置。一旦決定最終版面配置，元件可在適合的位置展示。

本文所述之至少一個實施例係關於文件之元件之版面配置之電腦輔助視覺化，其中多個版面配置處理係用於決定文件之元件之最終位置。首先決定元件之起始位置。隨後，將一或更多個版面配置處理之第一設定應用至元件，以決定元件相關於起始位置之中介位置。再接著，將一或更多個版面配置處理之第二設定應用至元件，以決定相關於元件之中介位置的元件之最終位置。實施例並非僅在顯示器上呈現最終位置，而是在顯示器上呈現元件之起始位置、一或更多個中介位置及最終位置全部。在更多特定實施例中，當應用版面配置處理時，可視覺化實行一或更多個轉換之呈現，以允許設計者看見元件通過至元件的最終位置的全部版面配置處理。

在一或更多個實施例中，藉由使用者介面之中介控制來改變一或更多個版面配置處理之第一設定，以移動元件呈現在顯示器上之中介位置之呈現。可替換或額外地，藉由使用者介面之最終控制來改變一或更多個版面配置處理之第二設定，以移動元件呈現在顯示器上之最終位置之呈現。

此【發明內容】係提供以簡明方式介紹以下所進一步敘述之【實施方式】之概念選擇。此【發明內容】並非意欲識別所主張之標的之關鍵特徵或主要特徵，亦非意欲用於決定所主張之標的之範疇之輔助。

根據本文所述之實施例，電腦輔助視覺化與文件之元件之版面配置的潛在調整係敘述於使用多個版面配置處理以決定文件之元件之最終位置之狀況中。一或更多個版面配置處理之一個設定應用至元件，以決定相關於元件之起始位置之元件之中介位置。隨後，一或更多個版面配置處理之另一個設定應用至元件，以決定相關於元件之中介位置之元件之最終位置。並非僅在顯示器上顯示最終位置，而是顯示元件之起始位置、中介位置及最終位置全部。中介控制可藉由移動元件顯示之中介位置而用於改變一或更多個版面配置處理之第一設定。最終控制可藉由移動元件顯示之最終位置而用於改變一或更多個版面配置處理之第二設定。

首先，第1圖將與一些關於計算系統之引導性討論一起敘述。隨後，第2至6圖將與版面配置設計處理之實施例一起敘述。

首先，第1圖與關於計算系統之引導性討論一起敘述。計算系統現在具有逐漸增加的多樣形式。計算裝置可為例如手持裝置、電器、膝上型電腦、桌上型電腦、大型電腦、分散式計算系統或甚至傳統上不認為是計算系統之裝置。在此【實施方式】及【申請專利範圍】中，用語「計算系統」係廣泛地定義為包括任何裝置或系統(或裝置及系統之組合)，該等裝置或系統包括至少一個物理性之實體處理器與物理性之實體記憶體，該記憶體具有可藉由處理器執行之電腦可執行指令。記憶體可採任何形式並可取決於計算系統之性質與形式。計算系統可透過網路環境分散，並且計算系統可包括多種組成之計算系統。

如第1圖所圖示，在最基本的配置中，計算系統100一般包括至少一個處理單元102與記憶體104。記憶體104可為物理性系統記憶體(可為揮發性、非揮發性或二者之一些組合)。用語「記憶體」在本文中亦可用於代表非揮發性大量儲存，例如物理性儲存媒體。若計算系統為分散式，則處理、記憶及/或儲存能力亦可同樣為分散式。如本文所使用，用語「模組」或「部件」可代表執行於計算系統上之軟體物件或常式。本文所述之不同部件、模組、引擎與服務可實施為執行於計算系統上之物件或處理(例如單獨執行緒)。

在下列敘述中，實施例係參照藉由一或更多個計算系統實行之動作一併敘述。若此等動作實施於軟體中，則實行動作之相關計算系統之一或更多個處理器導引計算系統之操作，以回應已執行之電腦可執行指令。此操作之實例涉及資料控制。電腦可執行指令(與控制資料)可儲存於計算系統100之記憶體104中。計算系統100亦可容納通訊頻道108，通訊頻道108允許計算系統100 與其他訊息處理器透過如網路110通訊。計算系統亦可包括顯示器112，顯示器112可顯示使用者可與計算系統溝通之一或更多個使用者介面。

本文所述之實施例可包含或使用包括電腦硬體之特定目的或一般目的之電腦，例如一或更多個處理器與系統記憶體，以上所述將於下列作更詳細之討論。本文所述之實施例亦可包括用於承載或儲存電腦可執行指令及/或資料結構之物理性及其他電腦可讀取媒體。此電腦可讀取媒體可為任何可藉由一般目的或特定目的之電腦系統存取之可取得媒體。儲存電腦可執行指令之電腦可讀取媒體係為物理性儲存媒體。承載電腦可執行指令之電腦可讀取媒體係為傳送媒體。因此，為實例之目的而不欲限制，本發明之實施例可包含至少二個明顯不同種類之電腦可讀取媒體：電腦儲存媒體與傳送媒體。

電腦儲存媒體包括RAM、ROM、EEPROM、CD-ROM或其他光碟儲存、磁碟儲存或其他磁儲存裝置或任何其他媒體，該任何其他媒體可以電腦可執行指令或資料結構之形式儲存期望之程式代碼構件並可藉由一般目的或特定目的之電腦存取。在此【實施方式】及【申請專利範圍】中，「電腦程式產品」包括具有電腦可執行指令之一或更多個電腦儲存媒體，該等電腦可執行指令在藉由計算系統之一或更多個處理器執行時，實行電腦程式產品之功能。

「網路」係定義為一或更多個資料鏈結，該一或更多個資料鏈結可在電腦系統及/或模組及/或其他電子裝置之間傳輸電子資料。當資訊透過網路或另一通訊連接(固線、無線或固線或無線之組合)傳輸或提供至電腦時，電腦適合將連接視為傳送媒體。傳送媒體可包括網路及/或資料鏈結，該網路及/或資料鏈結可以電腦可執行指令或資料結構之形式承載期望之程式代碼構件並可藉由一般目的或特定目的之電腦存取。上述之組合應亦可包括在電腦可讀取媒體之範圍中。

進一步言之，根據多種電腦系統部件，電腦可執行指令或資料結構形式之程式代碼構件可從傳送媒體自動傳輸至電腦儲存媒體(反之亦然)。舉例而言，透過網路或資料鏈結接收之電腦可執行指令或資料結構可在網路介面模組(NIC)內之RAM中緩衝，最後被傳輸至電腦系統RAM及/或電腦系統之非揮發性電腦儲存媒體。因此，應理解電腦儲存媒體可包括在亦(甚至是主要)可使用傳送媒體之電腦系統部件中。

舉例而言，電腦可執行指令包含在處理器執行時造成一般目的之電腦、特定目的之電腦或特定目的之處理裝置實行某功能或功能之群組之指令與資料。舉例而言，電腦可執行指令可為二進位、中介格式指令(例如組合語言)或源代碼。儘管標的已由特定於結構特徵與方法邏輯之動作之語言方式敘述，仍應瞭解定義於專利申請範圍之標的不需限制於上述指定之特徵或動作。再者，上述指定之特徵與動作係為實施專利申請範圍之示例性形式。

該領域具有通常知識者應理解本發明可實施於利用許多類型之電腦系統配置之網路計算環境中，電腦系統配置包括個人電腦、桌上型電腦、膝上型電腦、訊息處理器、手持裝置、多處理器系統、微處理器式或可程式化消費性電子、網路PC、微電腦、大型電腦、行動電話、PDA、呼叫器、路由器、交換器及類似物。本發明亦可實施於分散式系統環境中，其中本地端與遠端電腦系統透過網路鏈結(藉由固線式資料鏈結、無線式資料鏈結或固線式及無線式資料鏈結之組合)以實行任務。在分散式系統環境中，程式模組可位於本地端與遠端記憶儲存裝置兩者中。

根據本文所述之原理，多個版面配置處理連續應用至展示在顯示器上之文件中之元件。舉例而言，文件可為頁面，例如網頁或是桌面應用程式之畫面。第2圖圖示應用至對應文件之文件空間201之元件的四個連續應用之版面配置處理211至214之示例性順序。然而，本文所述之原理可應用至任意數量之連續應用之版面配置處理。

此外，本文所述之原理之應用與版面配置處理之類型無關。HTML網頁之上下文與使用CSS，皆可連續地應用數個版面配置處理。CSS之實例包括絕對定位、相對位置與轉換。然而，本文所述之原理並非限制版面配置處理之平台為CSS，亦非限制於版面配置處理之此等特定類型。

連續應用之版面配置處理之每一者依據元件之先前位置來決定元件之接續位置。舉例而言，順序200圖示文件空間201中之元件202係在不同位置的五個不同狀態。元件202的五個不同位置係從起始位置202(1)開始，一直到第五位置202(5)，括號中之數字代表位置之順序。此時，文件不需要實際展示，但此順序呈現元件之計算位置如何隨著每一應用之版面配置處理改變。

透過順序200，元件在文件空間201中之起始狀態202(1)。舉例而言，位置可為元件202沒有任何應用之版面配置處理時之預設位置。隨著文件之展示，文件敘述(例如HTML)可指定元件202放在何處。可替換地，可能在文件敘述(例如HTML)中沒有指派給元件202之位置，在此狀況中起始位置202(1)為預設位置。

在此示例性順序200中，第一版面配置處理211首先應用以造成元件202移動至第二位置202(2)。隨後，應用第二版面配置處理212以造成元件202移動至第三位置202(3)。接著，應用第三版面配置處理213以造成元件202移動至第四位置202(4)。最後，應用第四版面配置處理214以造成元件202移動至第五位置202(5)。橢圓215代表若需要可應用進一步之版面配置處理。在此特定實例中，版面配置處理移動元件至文件空間中之某些位置。然而，本文所述之原理並非限制由每一版面配置處理造成之元件之特定移動，此移動將為版面配置處理本身之功能。儘管版面配置處理之每一者可為單一版面配置處理，版面配置處理本身亦可包括一系列構成之版面配置操作。

一旦計算出元件位置之每一者，則可視覺化位置(例如呈現在顯示器上)。應記得本文所述之原理可應用至任意多數之連續應用之版面配置處理。因此，此計算將導致元件之起始位置、元件之最終位置及至少一個元件之中介位置之識別。

第3圖圖示造成文件元件顯示之起始位置與接續位置之方法300之流程圖。僅作為實例，方法300將參照第2圖之示例性順序200一併敘述。方法300可藉由第1圖之計算裝置100實行，以回應電腦程式產品之部分的電腦可執行指令之執行。

方法300包括決定文件之元件之起始位置的計算系統(動作301)。舉例而言，參照第2圖，元件202之起始位置202(1)係在文件空間201之上下文中決定。再次說明，此舉可藉由解釋文件敘述(例如HTML)、應用預設位置或藉由決定元件在沒有任何連續版面配置處理之應用程式時放置在何處而發生。

計算系統接著將一或更多個版面配置處理之設定應用至元件上，以決定相關於元件之先前位置的元件之次一位置(動作302)。回到第2圖，應用版面配置處理211以決定在文件空間201中之元件202之次一位置202(2)。接著處理是否有更多的版面配置處理設定要應用之分支(決定方塊203)。此處推測為是(決定方塊303中之是)。處理接著返回以將更多的版面配置處理應用至元件。

計算系統接著將一或更多個版面配置處理之另一設定應用至元件上，以決定相關於元件之先前位置的元件之次一位置(動作302)。回到第2圖，應用版面配置處理212以決定在文件空間201中之元件202之第三位置202(3)。接著再一次處理是否有更多的版面配置處理設定要應用之分支(決定方塊303)。在第4A至4C圖提供之實例中，僅有三個元件之計算位置(起始位置、單一中介位置及最終位置)。相應地，在第4A至4C圖之實例中，沒有進一步之版面配置處理被應用(決定方塊303中之否)，且因此計算系統在顯示器上展示元件位置(動作304)。然而，在相關於第5A至5C圖所提供之實例中，有五個元件之計算位置(起始位置、三個中介位置及最終位置)。相應地，在第5A至5C圖之狀況中，有進一步之版面配置處理設定被應用(決定方塊303中之是)，因此計算系統將返回以應用進一步之版面配置處理設定。

在第5A至5C圖之狀況中，計算系統接著將一或更多個版面配置處理之設定應用至元件上，以決定相關於元件之第三位置的元件之第四位置(動作302)。回到第2圖，應用版面配置處理213以決定在文件空間201中之元件202之第四位置202(4)。在第5A至5C圖之狀況中，還有一個進一步之版面配置處理設定被應用(決定方塊303中之是)。處理接著返回以將最終版面配置處理設定應用至元件上。

在第5A至5C圖之狀況中，計算系統接著將一或更多個版面配置處理之最終設定應用至元件上，以決定相關於元件之第四位置的元件之最終位置(動作302)。回到第2圖，應用版面配置處理214以決定在文件空間201中之元件202之第五位置202(5)。在第5A至5C圖之狀況中，已應用所有的版面配置處理(決定方塊303中之否)，且因此計算系統在顯示器上展示元件之五個位置。

在一些實施例中，與第4A至4C圖及第5A至5C圖之實例中，不僅是元件之多個呈現在顯示器中之計算位置，元件從一個位置轉換(例如移動)至次一位置(對應所應用之版面配置處理設定)亦被視覺化。隨著有關第4A至4C圖及第5A至5C圖之實例之理解，展示位置與進一步提供由使用者手動控制時對應於元件顯示位置之每一者之控制係允許使用者移動相關於元件呈現在顯示器上之先前位置之元件之呈現在顯示器上之對應位置。此舉造成一或更多個處理之對應設定之改變，而使得下一次應用一或更多個處理之設定時，移動之位置係在先前位置之相關處。因此，使用者不僅可視覺化在到達最終位置前在版面配置元件時發生之多個位置之改變，使用者亦可藉由選擇應替換版面配置處理之多個設定中之何者來改變元件之最終位置。

第4A圖圖示使用者介面400A，其中有三個元件之計算位置，並且第4A圖在僅實行第2圖之前二個處理211及212之狀況下呈現元件位置可如何展示之實例。

視覺化之起始元件位置402(1)係為第2圖之元件202之起始位置202(1)之視覺化呈現。箭頭411係為應用版面配置處理211所造成之元件移動之視覺化呈現。視覺化之元件位置402(2)係為第2圖之元件202之第二(例如中介)位置202(2)之視覺化呈現。箭頭412係為應用版面配置處理212所造成之元件移動之視覺化呈現。視覺化之元件位置402(3)係為第2圖之元件202之第三(例如最終)位置202(3)之視覺化呈現。在一個實施例中，既然元件之最終位置已確定展示文件，元件之最終位置可不同於先前位置之視覺化。因為使用者介面400A為設計工具，則先前位置可以僅為看得到即可。

第4B與4C圖圖示設計者透過是否改變版面配置處理211或版面配置處理212或二者之仔細控制之原理。舉例而言，第4B圖圖示相較於使用者介面之先前狀態400A之使用者介面之狀態400B。在狀態400B中，設計者已移動對應於元件202之中介位置202(2)之控制。更特定言之，在此狀況中，控制實際上與中介位置202(2)之視覺化呈現402(2)相同。在實例中，設計者(如箭頭401A所呈現)向上移動視覺化呈現402(2)。應注意，第4A圖中之箭頭401A，以及接續圖式中之箭頭401B至401D呈現控制之移動，並且該等箭頭可能不會實際地顯示。

隨著此移動401A並未造成元件202之起始位置202(1)之改變，此移動401A並未改變起始位置202(1)之視覺化呈現402(1)。然而，移動401A已改變中介位置202(2)之視覺化402(2)至不同位置402(2)A。此舉係因為設計者之視覺化402(2)之移動401A已造成版面配置處理211中之對應改變，而使得版面配置處理211之應用造成元件之中介位置202(2)(如視覺化402(2)A所呈現)向上移動。移動401A並未改變版面配置處理212，因此相關於中介位置202(2)之最終位置202(3)之相對位置維持未改變。然而，既然中介位置202(2)之視覺化402(2)經歷轉換式移動，元件之最終位置202(3)之視覺化402(3)同樣地(如視覺化402(3)A所呈現)經歷轉換式移動，且箭頭412亦如箭頭412A所呈現而移動。

舉例而言，第4C圖圖示相較於使用者介面之先前狀態400A之使用者介面之另一狀態400C。在狀態400C中，設計者已移動對應於元件202之最終位置202(3)之控制。在此狀況中，控制再一次與最終位置202(3)之視覺化呈現402(3)相同。在實例中，設計者(如箭頭401B所呈現)向上移動視覺化呈現402(3)。

隨著此移動401B並未造成元件202之起始位置202 (1)之改變，此移動401B並未改變起始位置202(1)之視覺化呈現402(1)。同樣地，隨著此移動401B並未改變版面配置處理211，版面配置處理211之視覺化411並未改變。此外，隨著此移動401B亦未造成元件202之中介位置202(2)之改變，此移動401B並未改變中介位置202(2)之視覺化呈現402(2)。然而，移動401B已改變最終位置202(3)之視覺化402(3)得以移動至不同位置402(3)B。此舉係因為設計者之視覺化402(3)之移動401B已造成版面配置處理212中之對應改變，而使得版面配置處理212之應用造成元件之最終位置202(3)(如視覺化402(3)B所呈現)向上移動。

因此，設計者可藉由移動一個控制(例如視覺化402(3))來選擇改變版面配置處理212，或者設計者可藉由移動一個控制(例如視覺化402(2))來選擇改變版面配置處理211。相應地，當將元件從一個最終位置移動至已在最終位置處應用多個版面配置處理之另一位置時，設計者可選擇改變為何種版面配置處理以造成最終位置之改變。

第5A圖圖示使用者介面500A，其中有五個元件之計算位置，並且第5A圖在實行第2圖所有的四個處理211至214之狀況下呈現元件位置可如何展示之實例。此處，視覺化402(1)至402(5)之每一者係對應於第2圖之元件202之計算位置202(1)至202(5)。箭頭411至414之每一者係為應用對應之版面配置處理211至 214所造成之元件移動之視覺化呈現。

第5B與5C圖再一次圖示設計者透過版面配置處理211至214來改變元件之最終位置之仔細控制之原理。第5B圖圖示藉由移動視覺化402(3)改變版面配置處理212之處理，而第5C圖圖示藉由移動視覺化402(5)改變版面配置處理214之處理。然而，使用者介面亦准許藉由移動視覺化402(2)改變版面配置處理211，以及藉由移動視覺化402(4)改變版面配置處理213。

舉例而言，第5B圖圖示相較於使用者介面之先前狀態500A之使用者介面之狀態500B。在狀態500B中，設計者已移動對應於元件202之中介位置202(3)(例如第二中介位置)之控制(例如視覺化402(3))。在實例中，設計者(如箭頭401C所呈現)向上移動視覺化呈現402(3)。

隨著此移動401C並未造成起始位置202(1)、第一中介位置202(2)及版面配置處理211之改變，此移動401C並未改變起始位置202(1)之視覺化呈現402(1)、第一中介位置202(2)之視覺化呈現402(2)及版面配置處理211之視覺化呈現411。然而，移動401C已改變第二中介位置202(3)之視覺化402(3)至不同位置402(3)C。此舉係因為設計者之視覺化402(3)之移動401C已造成版面配置處理212中之對應改變，而使得版面配置處理212之應用造成元件之第二中介位置202(3)(如視覺化402(3)C所呈現)向上移動。移動401C 並未改變版面配置處理213與214，因此相關於第二中介位置202(2)及彼此相關之第三中介位置202(4)與最終位置202(5)之相對位置維持未改變。然而，既然第二中介位置202(3)之視覺化402(3)經歷轉換式移動，元件之第三中介位置202(4)之視覺化402(4)同樣地(如視覺化402(4)C所呈現)經歷轉換式移動，而元件之最終位置202(5)之視覺化402(5)同樣地(如視覺化402(5)C所呈現)經歷轉換式移動。此外，箭頭413及414亦如箭頭413C及414C所呈現而轉換式移動。

舉例而言，第5C圖圖示相較於使用者介面之先前狀態500A之使用者介面之另一狀態500C。在狀態500C中，設計者已移動對應於元件202之最終位置202(3)之控制。在實例中，設計者(如箭頭401D所呈現)向上移動視覺化呈現402(5)。移動401D改變版面配置處理214，但移動401D並未改變版面配置處理211至213，且移動401D並未改變元件202之起始位置202(1)或中介位置202(2)至202(4)之任何一者。然而，移動401D已改變最終位置202(5)之視覺化402(5)至不同位置402(5)D。此外，箭頭414已替換為414D以呈現由移動401D造成之版面配置處理214之改變。

因此，設計者可選擇藉由移動第一控制(例如視覺化402(2))改變版面配置處理211，藉由移動第二控制(例如視覺化402(3))改變版面配置處理212，藉由移動第三控制(例如視覺化402(4))改變版面配置處理213或藉由移動第四控制(例如視覺化402(5))改變版面配置處理214。因此，亦在此實例中，當將元件從一個最終位置移動至已在最終位置處應用多個版面配置處理之另一位置時，設計者可選擇改變為何種版面配置處理以造成最終位置之改變。

第6圖圖示用於在運行於計算系統上之設計工具中調整一或更多個版面配置處理之電腦實施方法600之流程圖。方法600已應用在第4A至4C圖與第5A至5C圖之實例中。方法600在顯示元件的多個位置之上下文中操作(動作601)。舉例而言，並參照第4A至4C圖，位置202(1)至202(3)係藉由視覺化402(1)至402(3)呈現。而參照第5A至5C圖，位置202(1)至202(5)係藉由視覺化402(1)至402(5)呈現。

計算系統接著偵測對應於元件之非起始位置控制之使用者操作(動作602)。舉例而言，在第4A至4C圖之實例中，使用者可具有操作之視覺化402(2)(如第4B圖之狀況)或視覺化402(3)(如第4C圖之狀況)。在第5A至5C圖之實例中，使用者可具有操作之視覺化402(2)(未由圖式所圖示之操作)、視覺化402(3)(如第4B圖之狀況)、視覺化402(4)(未由圖式所圖示之操作)或視覺化402(5)(如第5C圖之狀況)。

回應於控制之操作，移動相關於元件之先前位置之元件之對應位置(動作603)。此外，替換用於至對應位置處之對應版面配置處理(動作604)，以使得下一次應用版面配置處理時，係在移動之位置處。

舉例而言，在第4B圖中，視覺化402(2)從地點402(2)移動至地點402(2)A。此舉造成對應位置202(2)同樣地移動，並藉此造成版面配置處理211之改變(如由箭頭411改變至箭頭411A所呈現)。

在第4C圖中，視覺化402(3)從地點402(3)移動至地點402(3)B。此舉造成對應位置202(3)同樣地移動，並藉此造成版面配置處理212之改變(如由箭頭412改變至箭頭412B所呈現)。

相應地，本發明之原理允許當改變元件之最終版面配置以展示在文件中時透過改變一系列版面配置處理之版面配置處理來微細控制。本發明可實施於不悖離本發明之精神或本質特徵之其他特定形式中。所述之實施例在任何狀態下僅作為說明而非限制。因此，本發明之範疇係由隨附申請專利範圍而非前述之敘述所指示。申請專利範圍之等效意思及範圍的所有改變係包含在申請專利範圍之範疇中。

100‧‧‧計算系統

102‧‧‧處理單元

104‧‧‧記憶體

108‧‧‧通訊頻道

110‧‧‧網路

112‧‧‧顯示器

200‧‧‧順序

201‧‧‧文件空間

202(1)‧‧‧位置

202(2)‧‧‧位置

202(3)‧‧‧位置

202(4)‧‧‧位置

202(5)‧‧‧位置

211‧‧‧版面配置處理

212‧‧‧版面配置處理

213‧‧‧版面配置處理

214‧‧‧版面配置處理

215‧‧‧版面配置處理

300‧‧‧方法

301‧‧‧動作

302‧‧‧動作

303‧‧‧決定方塊

304‧‧‧動作

400A‧‧‧使用者介面

400B‧‧‧使用者介面

400C‧‧‧使用者介面

401A‧‧‧移動

401B‧‧‧移動

401C‧‧‧移動

401D‧‧‧移動

402(1)‧‧‧視覺化呈現

402(2)‧‧‧視覺化呈現

402(2)‧‧‧視覺化呈現A

402(3)‧‧‧視覺化呈現

402(3)‧‧‧視覺化呈現A

402(3)‧‧‧視覺化呈現B

402(3)‧‧‧視覺化呈現C

402(4)‧‧‧視覺化呈現

402(4)‧‧‧視覺化呈現C

402(5)‧‧‧視覺化呈現

402(5)‧‧‧視覺化呈現C

402(5)‧‧‧視覺化呈現D

411‧‧‧箭頭

412‧‧‧箭頭

412A‧‧‧箭頭

412B‧‧‧箭頭

412C‧‧‧箭頭

413‧‧‧箭頭

413C‧‧‧箭頭

414‧‧‧箭頭

414C‧‧‧箭頭

414D‧‧‧箭頭

500A‧‧‧使用者介面

500B‧‧‧使用者介面

500C‧‧‧使用者介面

600‧‧‧方法

601‧‧‧動作

602‧‧‧動作

603‧‧‧動作

604‧‧‧動作

為了敘述上述之方式並可取得其他優點及特徵，將藉由參考隨附圖式展示各種實施例之更多特定敘述。應理解此等圖式僅為描述通常之實施例，且非因此而認為限制範圍，而實施例將透過隨附圖式而更加明確與詳細地敘述並解釋，其中：第1圖圖示用於使用本文所述之實施例之示例性計算系統；第2圖圖示應用至對應文件之文件空間之上下文中的元件之四個連續版面配置處理之示例性順序；第3圖圖示造成文件元件顯示之起始位置與接續位置之方法之流程圖；第4A圖圖示展示元件之最終位置與元件之先前位置之使用者介面，其中應用二個連續版面配置處理；第4B圖圖示第4A圖之使用者介面，其中向上調整以呈現中介位置之視覺化；第4C圖圖示第4A圖之使用者介面，其中向上調整以呈現最終位置之視覺化；第5A圖圖示展示元件之最終位置與元件之四個先前位置之使用者介面，其中應用四個連續版面配置處理；第5B圖圖示第5A圖之使用者介面，其中向上調整以呈現第三位置之視覺化；第5C圖圖示第5A圖之使用者介面，其中向上調整以呈現最終位置之視覺化；以及第6圖圖示用於在運行於計算系統上之設計工具中調整一或更多個版面配置處理之電腦實施方法之流程圖。