TWI776215B - 產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體 - Google Patents

產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體 Download PDF

Info

Publication number
TWI776215B
TWI776215B TW109128815A TW109128815A TWI776215B TW I776215 B TWI776215 B TW I776215B TW 109128815 A TW109128815 A TW 109128815A TW 109128815 A TW109128815 A TW 109128815A TW I776215 B TWI776215 B TW I776215B
Authority
TW
Taiwan
Prior art keywords
block
display
sub
attribute
color
Prior art date
Application number
TW109128815A
Other languages
English (en)
Other versions
TW202209087A (zh
Inventor
張鑑泉
謝碩峯
Original Assignee
奇蹟行動科技有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 奇蹟行動科技有限公司 filed Critical 奇蹟行動科技有限公司
Priority to TW109128815A priority Critical patent/TWI776215B/zh
Priority to US17/320,411 priority patent/US11704097B2/en
Publication of TW202209087A publication Critical patent/TW202209087A/zh
Application granted granted Critical
Publication of TWI776215B publication Critical patent/TWI776215B/zh
Priority to US18/199,994 priority patent/US20230289152A1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Telephonic Communication Services (AREA)

Abstract

本揭露揭示一種產生使用者介面的描述碼之方法，其包括：顯示具有一第一物件及一第二物件的一可編程的使用者介面；將該第一物件與該第二物件組成一群組，並對該群組形成一群組區塊；將該群組區塊切割成一第一子區塊與一第二子區塊；將該第一子區塊設定為具有一第一顯示屬性；顯示一第一屬性元件於該可編程的使用者介面上；偵測該第一屬性元件是否被選擇；當偵測到該第一屬性元件被選擇時，將該第一顯示屬性改變成一第二顯示屬性；以及根據該第二顯示屬性，產生對應於該第一子區塊的一第一描述碼。本揭露揭示另一種產生使用者介面的描述碼之系統及其相關非暫態電腦可讀取儲存媒體。

Description

產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體
本揭露係關於一種產生程式碼的方法，特別關於一種產生使用者介面的描述碼之方法及其相關的非暫態電腦可讀取儲存媒體。
隨著網際網路的盛行與行動通訊技術的快速發展，可上網的計算機裝置已經成為現代人在工作上或生活上不可或缺的輔助裝置。目前市面上可上網的各種計算機裝置包括桌上型電腦、筆記型電腦、平板電腦及智慧型手機等。然而，由於該些計算機裝置具有不同尺寸與不同解析度的顯示器，因此造成網頁或應用程式APP的開發者必須針對同一個網頁或同一個應用程式APP設計出各種不同的使用者介面之版本，以使得同一個網頁或同一個應用程式APP的使用者介面可以在不同的尺寸或解析度的顯示器進行最佳化的顯示，因此有必要提出一種可輔助網頁或應用程式APP的設計者能夠方便編輯與設定使用者介面上的物件之參數，並可快速獲得其所編輯與設定的使用者介面的程式碼之方法。
有鑒於此，本揭露提供一種產生使用者介面的描述碼之方法，該方法包括：顯示一可編程的使用者介面，該可編程的使用者介面具有一第一物件及一第二物件；將該第一物件與該第二物件組成一群組，並對該群組形成一群組區塊，其中該第一物件與該第二物件位於該群組區塊內；將該群組區塊切割成一第一子區塊與一第二子區塊，其中該第一物件位於該第一子區塊內，且該第二物件位於該第二子區塊內；將該第一子區塊設定為具有一第一顯示屬性；顯示一第一屬性元件於該可編程的使用者介面上，其中該第一屬性元件呈現一第一顯示狀態，用以表示該第一顯示屬性；偵測該第一屬性元件是否被選擇；當偵測到該第一屬性元件被選擇時，將該第一子區塊的第一顯示屬性改變成一第二顯示屬性，並將該第一屬性元件所呈現的該第一顯示狀態改變成一第二顯示狀態，其中該第二顯示狀態係用以表示該第二顯示屬性；以及根據該第二顯示屬性，產生對應於該第一子區塊的一第一描述碼。
本揭露另提供一種產生使用者介面的描述碼之系統，該系統包括：一顯示模組，用以顯示一可編程的使用者介面，該可編程的使用者介面具有一第一物件及一第二物件；一群組模組，用以將該第一物件與該第二物件組成一群組，並對該群組形成一群組區塊，其中該第一物件與該第二物件位於該群組區塊內；一切割模組，用以將該群組區塊切割成一第一子區塊與一第二子區塊，其中該第一物件位於該第一子區塊內，且該第二物件位於該第二子區塊內；一設定模組，用以將該第一子區塊設定為具有一第一顯示屬性，其中該顯示模組更用以顯示一第一屬性元件於該可編程的使用者介面上，並將該第一屬性元件呈現一第一顯示狀態，用以表示該 第一顯示屬性；一第一偵測模組，用以偵測該第一屬性元件是否被選擇，其中當該第一偵測模組偵測到該第一屬性元件被選擇時，該設定模組將該第一子區塊的第一顯示屬性改變成一第二顯示屬性，且該顯示模組將該第一屬性元件所呈現的該第一顯示狀態改變成一第二顯示狀態，其中該第二顯示狀態係用以表示該第二顯示屬性；以及一描述碼產生模組，用以根據該第二顯示屬性，產生對應於該第一子區塊的一第一描述碼。
本揭露更提供一種非暫態電腦可讀取儲存媒體，用以儲存至少一個程式，該程式包含複數個指令，當該複數個指令由至少一個電腦執行時產生複數個操作，該複數個操作包含：顯示一可編程的使用者介面，該可編程的使用者介面具有一第一物件及一第二物件；將該第一物件與該第二物件組成一群組，並對該群組形成一群組區塊，其中該第一物件與該第二物件位於該群組區塊內；將該群組區塊切割成一第一子區塊與一第二子區塊，其中該第一物件位於該第一子區塊內，且該第二物件位於該第二子區塊內；將該第一子區塊設定為具有一第一顯示屬性；顯示一第一屬性元件於該可編程的使用者介面上，其中該第一屬性元件呈現一第一顯示狀態，用以表示該第一顯示屬性；偵測該第一屬性元件是否被選擇；當偵測到該第一屬性元件被選擇時，將該第一子區塊的第一顯示屬性改變成一第二顯示屬性，並將該第一屬性元件所呈現的該第一顯示狀態改變成一第二顯示狀態，其中該第二顯示狀態係用以表示該第二顯示屬性；以及根據該第二顯示屬性，產生對應於該第一子區塊的一第一描述碼。
藉由利用本揭露之產生使用者介面的描述碼之方法與系統，網頁或應用程式APP的設計者能夠快速編輯與設定一使用者介面上的物件之顯示屬性，且可在完成編輯與設定工作後，可立即獲得其所設計的使用者介面之程式碼，有效省去了撰寫程式碼的時間。
XX:軸
YY:軸
L1:長度
L2:長度
2:群組區塊
2F:外框
4:群組區塊
4F:外框
6:群組區塊
6F:外框
8:群組區塊
8F:外框
2a~2c:物件
4a~4d:物件
6a、6b:物件
8a~8f:物件
3a:第一間隔
3b:第二間隔
5a~5c:間隔
7a:間隔
9a:間隔
10:系統
11a~11c:子區塊
12:顯示模組
13a~13c:屬性線段
14:群組模組
15:滑鼠游標
16:切割模組
17a~17c:屬性開關
18:設定模組
20:偵測模組
20a~20i:偵測模組
22:描述碼產生模組
24:調整模組
26:比較模組
30:操作介面
32:圖層顯示區域
34:編輯顯示區域
36:物件屬性顯示區域
38:工具列
38a:描述碼產生鍵
39:測試功能
39a:下拉式選單
40:顯示器
41:比較按鍵
42:顯示器
50:訊息框
52:確認鍵
60:群組區塊
70A:物件屬性線段
70B:物件屬性線段
71~74:間距屬性線段
80:群組區塊
81~83:間距屬性符號
84:間距屬性線段
90A:物件高度圖標
90B:物件寬度圖標
91~94:間距圖標
100:使用者介面
100a:第一影像
100b:第二影像
200F:外框圖標
300:方法
302~349:步驟
400:方法
402~410:步驟
第1圖為根據本揭露之一實施例之產生使用者介面的描述碼之系統之一示意圖。
第2圖為根據本揭露之一實施例之產生使用者介面的描述碼之系統的操作介面之一示意圖。
第3A圖為根據本揭露之一實施例將第2圖中之複數個物件群組後的一示意圖。
第3B圖為根據本揭露之另一實施例將第2圖中之複數個物件群組後的一示意圖。
第4A圖為根據本揭露之一實施例將第3A圖中之複數個群組區塊切割後的一示意圖。
第4B圖為根據本揭露之另一實施例將第3B圖中之複數個群組區塊切割後的一示意圖。
第4C圖為根據本揭露之其他實施例將第3A圖中之複數個群組區塊切割後的一示意圖。
第5圖為根據本揭露之其他實施例將第3A圖中之複數個群組區塊切割前的操作介面之一示意圖。
第6圖為根據本揭露之一實施例對第4A圖中之一個群組區塊之子區塊設定顯示屬性的一示意圖。
第7圖為第6圖中的群組區塊經設定後分別顯示在兩個不同尺寸的顯示器之局部示意圖。
第8A-8D圖為根據本揭露之一實施例對第6圖中的群組區塊之子區塊的顯示屬性進行改變之示意圖。
第9A圖與第9B圖為根據本揭露之其他實施例對第2圖中之一個群組區塊之子區塊設定顯示屬性的一示意圖。
第10圖為根據本揭露之一實施例的群組區塊之示意圖。
第11圖為根據本揭露之另一實施例的群組區塊之示意圖。
第12圖為根據本揭露之一實施例的多個物件之排列示意圖。
第13A圖與第13B圖為根據本揭露之一實施例對一個物件與其父圖層之外框間的距離設定顯示屬性的示意圖。
第14A圖與第14B圖為根據本揭露之另一實施例對一個物件與其父圖層之外框間的距離設定顯示屬性的示意圖。
第15A圖與第15B圖為根據本揭露之一實施例對一個物件的兩個對應側邊間的距離設定顯示屬性的示意圖。
第16圖為根據本揭露之其他實施例對一個物件與其父圖層之外框間的距離設定顯示屬性的一示意圖。
第17A圖與第17B圖為根據本揭露之產生使用者介面的描述碼之系統中的文字壓力測試功能的示意圖。
第18圖為根據本揭露之產生使用者介面的描述碼之系統中的影像比較功能的示意圖。
第19圖至第22圖為根據本揭露之一些實施例之產生使用者介面的描述碼之一方法的流程圖。
第23圖為根據本揭露之另一實施例之產生使用者介面的描述碼之一方法的流程圖。
以下說明本揭露實施例之產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體。然而，本揭露所提供的實施例僅用於說明本揭露的產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體的範例，並非用以侷限本揭露的範圍。
第1圖為根據本揭露之一實施例之產生使用者介面的描述碼之系統10之一示意圖。該系統10可以實施於一電腦中，且包括一顯示模組12、一群組模組14、一切割模組16、一設定模組18、複數個偵測模組20、一描述碼產生模組22、一調整模組24及一比較模組26。於此實施例中，該顯示模組12、該群組模組14、該切割模組16、該設定模組18、該複數個偵測模組20、該描述碼產生模組22、該調整模組24及該比較模組26可分別由不同的軟體模組或不同的程式碼實現，並由所述電腦所執行。於其他實施例中，該顯示模組12、該群組模組14、該切割模組16、該設定模組18、該複數個偵測模組20、該描述碼產生模組22、該調整模組24及該比較模組26亦可分別由軟體搭配硬體或韌體而實現於所述電腦中。
第2圖為根據本揭露之一實施例之產生使用者介面的描述碼之系統的操作介面30之一示意圖。現請參考第1圖與第2圖，該系統10的顯示模組12可用以顯示一操作介面30於一電腦的顯示器上，以作為使用者對該系統10進行操作的介面。該操作介面30包括一圖層顯示區域32、一編輯顯示區域34、一物件屬性顯示區域36及一工具列38。藉由該操作介面30，使用者可開啟一可編程的使用者介面100 顯示在該編輯顯示區域34中。於此實施例中，該可編程的使用者介面100可以是由市面上任何商用影像編輯軟體，如：Adobe PhotoShop、Adobe XD、Illustrator、Sketch、Figma及Invision等所設計完成的一網頁介面或一應用程式操作介面，且包含了各種不同物件，其包括但不限於圖片、圖標、相片、文字、符號、連結、選單、按鍵、連結等。該可編程的使用者介面100的所有物件間可具有至少一樹狀結構的圖層關係。該圖層顯示區域32係用以顯示該至少一樹狀結構的圖層關係。另外，該物件屬性顯示區域36係用以顯示該可編程的使用者介面100上被選擇的物件所對應的屬性，其包括但不限於物件名稱、物件尺寸、物件顏色、物件位置、物件尺寸的變化特性等，並可用以輸入或修改所選擇之物件的屬性。該工具列38提供多項功能，以便使用者在編輯該可編程的使用者介面100時使用。於下列實施例中，將列舉工具列38中的數個功能進一步說明。
於此實施例中，該可編程的使用者介面100包括複數個物件2a-2c、4a-4d、6a、6b、8a、8b，其可以是圖片、圖標、相片、文字、符號、連結、選單、按鍵、連結或上述任何兩個物件以上所組成的群組等。該群組模組14係用以將該可編程的使用者介面100上的複數個物件2a-2c、4a-4d、6a、6b、8a、8b分別組成多個不同的群組，並對該等群組形成群組區塊2、4、6、8，如第3A圖所示。於此實施例中，該三個物件2a、2b、2c位於該群組區塊2內，且沿平行於X軸的一第一虛擬直線排列於一第一行；該四個物件4a、4b、4c、4d位於該群組區塊4內，且沿平行於X軸的一第二虛擬直線排列於一第二行；該兩個物件6a、6b位於該群組區塊6內，且沿 平行於X軸的一第三虛擬直線排列於一第三行；及該兩個物件8a、8b位於該群組區塊8內，且沿平行於X軸的一第一虛擬直線排列於一第四行。於本揭露實施例中，當兩個物件以上沿著同一行(如：X軸方向)或同一列排列(如：Y軸方向)，且能夠被一虛擬矩形輪廓所包圍且/或能夠被投影在一虛擬直線上而不重疊時，該群組模組14會將同一行或同一列排列的該等物件組成一群組，並對該群組形成一群組區塊，如第3A圖所示。
現請參考第3A圖，於此實施例中，該群組區塊2具有一外框2F，其大致呈矩形，並以下列方式包圍該等物件2a、2b、2c。該外框2F的沿X軸方向之上側邊與下側邊的內側邊緣分別鄰近於該等物件2a、2b、2c三者中的最上側邊與最下側邊(即該物件2a、2b的最上側邊與最下側邊)的外側邊緣，而該外框2F的沿Y軸方向之左側邊與右側邊的內側邊緣分別鄰近於該等物件2a、2b、2c三者中的最左側邊與最右側邊(即該物件2a的最左側邊與該物件2b的最右側邊)的外側邊緣。同樣地，該等群組區塊4、6、8分別具有一外框4F、6F、8F，其大致呈矩形，並以上述相同之方式包圍該等物件4a-4d、6a、6b、8a、8d，在此不加以贅述。
現請參考第3B圖，於另一實施例中，該等群組區塊2、4、6、8的外框2F、4F、6F、8F的沿Y軸方向之左側邊與右側邊的外側邊緣可分別鄰近於該可編程的使用者介面100的左側邊與右側邊的內側邊緣，使得該等外框2F、4F、6F、8F的左側邊與右側邊的內側邊緣與其對應的物件的最左側邊與最右側邊之間分別存在一空白間隔區域。
於上述實施例中，該等外框2F、4F、6F、8F係用以作為表示該等群組區塊2、4、6、8的範圍之輔助框，因此其僅會顯示在位於該編輯顯示區域34中的使用者介面100上供設計師做為參考，其並不屬於該使用者介面100的一部分。另外，當該可編程的使用者介面100顯示在該編輯顯示區域34中做編輯時，該等外框2F、4F、6F、8F可持續顯示於該可編程的使用者介面100上，或者可在該等群組區塊2、4、6、8被選擇做編輯時才顯示於該可編程的使用者介面100上。
現請參考第1圖、第3A圖與第4A圖，該切割模組16係用以分別對該等群組區塊2、4、6、8以下列方式進行切割。在此，先以該群組區塊2為例做說明。首先，該複數個偵測模組20具有一第一偵測模組20a，用以偵測該群組區塊2中的該等物件2a、2b、2c相互之間是否存在間隔。當該第一偵測模組20a偵測到該等物件2a、2b、2c相互之間存在間隔時，該切割模組16可沿著位於該間隔中的至少一路徑，將該群組區塊2切割成至少兩個子區塊。於此實施例中，該第一偵測模組20a偵測到該物件2a與該物件2c之間存在有一第一間隔3a，並偵測到該物件2b與該物件2c之間存在有一第二間隔3b，其中該間隔3a由該物件2a的右側邊緣與該物件2c的左側邊緣所界定，而該間隔3b由該物件2c的右側邊緣與該物件2b的左側邊緣所界定。當該第一偵測模組20a偵測到該第一間隔3a與該第二間隔3b後，該切割模組16可沿著該第一間隔3a兩側分別鄰近於該物件2a的右側邊緣之一路徑與鄰近於該物件2c的左側邊緣之一路徑進行切割，並沿著第二間隔3b兩側分別鄰近於該物件2c的右側邊緣之一路徑與鄰近於該物件2b的左側邊緣之一路徑進行切割，以將該群組 區塊2由左至右切割成一第一子區塊、一第二子區塊、一第三子區塊、一第四子區塊與一第五子區塊，如第4A圖所示，其中該物件2a、該第一間隔3a、該物件2c、該第二間隔3b與該物件2b分別位於該第一子區塊、該第二子區塊、該第三子區塊、該第四子區塊與該第五子區塊內。同樣地，當該第一偵測模組20a偵測到該群組區塊4中的該等物件4a-4c相互之間存在有複數個間隔5a、5b、5c時，該切割模組16會以上述相同之方式將該群組區塊4切割成七個子區塊，如第4A圖所示，其中該物件4a、該間隔5a、該物件4b、該間隔5b、該物件4c、該間隔5c與該物件4d依序分別位於該七個子區塊內。同樣地，當該第一偵測模組20a偵測到該群組區塊6中的該等物件6a、6b相互之間存在有一個間隔7a時，該切割模組16會以上述相同之方式將該群組區塊6切割成三個子區塊，如第4A圖所示，其中該物件6a、該間隔7a與該物件6b依序分別位於該三個子區塊內。同樣地，當該第一偵測模組20a偵測到該群組區塊8中的該等物件8a、8b相互之間存在有一個間隔9a時，該切割模組16會以上述相同之方式將該群組區塊8割成三個子區塊，如第4A圖所示，其中該物件8a、該間隔9a與該物件8b分別位於該三個子區塊內。
現請參考第3B圖與第4B圖，於其他實施例中，當該等群組區塊2、4、6、8的外框2F、4F、6F、8F包圍其對應的物件之兩側的空白間隔區域時，該切割模組16更會沿鄰近於兩側物件的兩外側邊緣(如：該物件2a的左側邊緣與該物件2b的右側邊緣)之路徑進行切割，以對每一群組區塊進一步切割出額外的兩個子區塊，用以分別容納該對應的物件之兩側的空白間隔區域，如第4B圖所示。
在另一實施例中，該偵測模組20a更可用以偵測該等物件間的每一間隔是否大於一預設值(例如：8個邏輯像素的長度)。當所偵測到的間隔小於該預設值時，該切割模組16會沿著該間隔中間的一路徑進行切割。當所偵測到的間隔大於該預設值時，該切割模組16會分別沿著該間隔兩側的兩路徑進行切割。舉例而言，如第4C圖所示，該切割模組16係用以對一群組區塊6與一群組區塊8進行切割。該群組區塊6包括了一物件6a與一物件6b，該物件6a、6b相互之間存在有一個間隔7a，其中該間隔7a的寬度為6個邏輯像素的長度。該群組區塊8包括了一物件8a與一物件8b，該物件8a、8b相互之間存在有一個間隔9a，其中該間隔9a的寬度為12個邏輯像素的長度。該偵測模組20a用以偵測該群組區塊6中的該等物件6a、6b相互之間是否存在該間隔7a。當該第一偵測模組20a偵測到該等物件6a、6b相互之間存在該間隔7a時，該第一偵測模組20a更進一步偵測該間隔7a是否大於一預設值(例如：8個邏輯像素的長度)。當該第一偵測模組20a所偵測到的間隔7a(6個邏輯像素的長度)小於該預設值時，該切割模組16會沿著該間隔7a中間的一路徑進行切割，以將該群組區塊6切割成兩個子區塊。另外，當該第一偵測模組20a偵測到該等物件8a、8b相互之間存在該間隔9a時，該第一偵測模組20a更進一步偵測該間隔9a是否大於該預設值(例如：8個邏輯像素的長度)。當該第一偵測模組20a所偵測到的間隔9a(12個邏輯像素的長度)大於該預設值時，該切割模組16會沿著該間隔9a兩側鄰近於該物件8a的右側邊緣的一路徑進行切割，並沿著該間隔9a兩側鄰近於該物件8b的左側邊緣的一路徑進行切割，以將該群組區塊8切割成三個子區塊。
另外，在其他實施例中，如第5圖所示，當該群組模組14將該可編程的使用者介面100上的複數個物件2a-2c、4a-4d、6a、6b、8a、8b分別組成多個不同的群組後，該顯示模組12更顯示一訊息框50，該訊息框50上提供一確認鍵52，用以讓使用者確認是否對該群組區塊中的物件間進行切割。該複數個偵測模組20更具有一第二偵測模組20b，用以偵測該確認鍵52是否被選擇。當該第二偵測模組20b偵測到該確認鍵52被選擇時，該切割模組16會沿著位於該間隔中的至少一路徑，將該群組區塊切割成多個子區塊，如圖4A所示。
現請參考第1圖、第4A圖與第6圖，該設定模組18係用以對該等群組區塊2、4、6、8內由該切割模組16所切割的每一子區塊之顯示屬性進行設定。於一實施例中，以該群組區塊8為例做說明。於第6圖中，該群組區塊8內包括一物件8a與一物件8b，且該兩物件8a、8b之間存在有一間隔9a。該切割模組16藉由上述之方式將該群組區塊8切割成三個子區塊11a、11b、11c，而該物件8a、該間隔9a與該物件8b係分別位於該三個子區塊11a、11b、11c內。該設定模組18係用以設定該三個子區塊11a、11b、11c的顯示屬性，以確保經設定過後的三個子區塊11a、11b、11c可在各種不同尺寸的顯示器上正常顯示，進而避免物件重疊、物件排列位置不適當與物件尺寸不適當等排版異常情況發生。於此實施例中，該兩物件8a、8b分別為兩個不同的圖片，該設定模組18將該子區塊11a設定為具有一固定顯示屬性，且該顯示模組12顯示一屬性線段13a於該子區塊11a上，該屬性線段13a呈現一第一顏色(如：黃色)，用以表示該子區塊11a的固定顯示屬性。同樣地，該設定模組18將該子區塊11c 設定為具有一固定顯示屬性，且該顯示模組12顯示一屬性線段13c於該子區塊11c上，該屬性線段13c呈現一第一顏色(如：黃色)，用以表示該子區塊11c的固定顯示屬性。另外，該設定模組18將該子區塊11b設定為具有一可延伸顯示屬性，且該顯示模組12顯示一屬性線段13b於該子區塊11b上，該屬性線段13b呈現一第二顏色(如：綠色)，用以表示該子區塊11b的可延伸顯示屬性。
於本揭露之一實施例中，在該設定模組18設定該三個子區塊11a、11b、11c的顯示屬性後，該描述碼產生模組22將可根據該三個子區塊11a、11b、11c的顯示屬性自動產生對應於該三個子區塊11a、11b、11c的描述碼。於本揭露之另一實施例中，該工具列38更包括了一描述碼產生鍵38a，如第2圖所示。在該設定模組18設定該三個子區塊11a、11b、11c的顯示屬性後，當該描述碼產生鍵38a被選擇(如：被點選或被按下)時，該描述碼產生模組22將會根據該三個子區塊11a、11b、11c的顯示屬性產生對應於該三個子區塊11a、11b、11c的描述碼，且該顯示模組12會將該等產生的描述碼顯示在該物件屬性顯示區域36中。於其他實施例中，當該描述碼產生鍵38a被選擇(如：被點選或被按下)時，該描述碼產生模組22可產生對應於該可編程的使用者介面100的描述碼，或可僅產生對應於該可編程的使用者介面100上被選擇的物件、群組區塊、子區塊的描述碼，且該顯示模組12可將該等產生的描述碼全部或部分顯示在該物件屬性顯示區域36中。於本揭露之上述或下述實施例中，所稱的描述碼可以是相容於網頁設計的HTML、React、Vue.js或AngularJS等程式語言的程式碼，或者是相容於應用程式(App)的使用者介面設計的React Native、Flutter、Android XML、iOS Swift等程式語言的程式碼。於本揭露之一些實施例中，該描述碼可以是層疊樣式表單CSS(Cascading style Sheets)程式語言的程式碼。
第7圖為經設定後的群組區塊8分別顯示在兩個不同尺寸的顯示器40、42之局部示意圖。該顯示器40可以例如是一智慧型手機的顯示器，其具有一長度(或寬度)L1，而該顯示器42可以例如是一平板電腦的顯示器，其具有一長度(或寬度)L2，該長度(或寬度)L2大於該長度(或寬度)L1。現請繼續參考第6圖與第7圖，當該設定模組18將該子區塊11a與該子區塊11c皆設定為具有該固定顯示屬性時，該子區塊11a與該子區塊11c的邏輯單位長度為固定，其表示當該可編程的使用者介面100分別在兩個不同尺寸的顯示器40、42(如第7圖所示)上顯示時，該子區塊11a與該子區塊11c的邏輯單位長度不會因該等顯示器40、42的長度大小而改變，亦即該物件8a與該物件8b的邏輯單位長度不會因為該等顯示器40、42的長度L1、L2不同而改變。當該子區塊11b設定為具有該可延伸顯示屬性時，該子區塊11b的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。舉例而言，當該可編程的使用者介面100分別藉由如第7圖所示的顯示器40與顯示器42顯示時，該子區塊11b的邏輯單位長度會根據該顯示器40的長度L1與該顯示器42的長度L2而適應性地改變，其中長度L2大於長度L1，使得該間隔9a在該顯示器42顯示的長度比其在該顯示器40顯示的長度更長。於此實施例中，該邏輯單位長度是指在影像編輯軟體中設計該可編程的使用者介面100時所利用的基本單位長度，其可以例如是以邏輯像素(pixel)或是邏輯點(point)，但並不以 此為限，於其他實施例中，該邏輯單位長度亦可以是以一顯示器的實際像素為單位。一般而言，顯示器在顯示一使用者介面時，其可能會將該使用者介面的邏輯像素乘上一預設倍率，以轉換成實際像素來顯示該使用者介面，使得該使用者介面在顯示器上的字型與圖式大小適合使用者觀看。
現請參考第1圖與第6圖，該複數個偵測模組20更具有一第三偵測模組20c，用以偵測該等屬性線段13a-13b中之至少一者是否被選擇。當該第三偵測模組20c偵測到該等屬性線段13a-13b中之至少一者被選擇時，該設定模組18將改變該被選擇的屬性線段所對應的子區塊之顯示屬性，且該顯示模組12將改變該被選擇到的屬性線段13a-13b中之至少一者所呈現的顏色。舉例而言，如第8A圖與第8B圖所示，當該屬性線段13a被一滑鼠游標15點選時，該第三偵測模組20c會偵測到該屬性線段13a被選擇。當第三偵測模組20c偵測到該屬性線段13a被選擇時，該設定模組18會將該子區塊11a的固定顯示屬性改變成該可延伸顯示屬性，且該顯示模組12會將該被選擇的屬性線段13a所呈現的該第一顏色(如：黃色)改變成該第二顏色(如：綠色)，其中該第二顏色(如：綠色)係用以表示該可延伸顯示屬性。同樣地，當該設定模組18將該子區塊11a的固定顯示屬性改變成可延伸顯示屬性時，該子區塊11a的邏輯單位長度將如同該子區塊11b一樣會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於此實施例中，當該屬性線段13a所呈現的顏色改變成該第二顏色(如：綠色)後(如第8B圖所示)，若該屬性線段13a再被該滑鼠游標15點選時，則該屬性線段13a所呈現的顏色可再改變回該第一顏色(如：黃色)(如第8A圖所示)， 且該設定模組18會將該子區塊11a的可延伸顯示屬性改回成該固定顯示屬性。於其他實施例中，當該屬性線段13a所呈現的顏色改變成該第二顏色(如：綠色)後(如第8B圖所示)，若該屬性線段13a再被該滑鼠游標15點選時，則該屬性線段13a所呈現的顏色可改變成一第三顏色(如：紫色)(未顯示)，且該設定模組18會將該子區塊11a的可延伸顯示屬性改成其他顯示屬性。例如：若該子區塊11a所包含的物件8a為一可輸入字元的方塊時，該設定模組18可將該子區塊11a的可延伸顯示屬性改成另一種固定顯示屬性，如：在該另一種顯示屬性情況下，該子區塊11a的的邏輯單位長度會根據所輸入的字元數量而改變，但並不會根據一顯示器的長度大小而適應性地改變。同樣地，當該屬性線段13a所呈現的顏色改變成該第三顏色(如：紫色)後(未顯示)，若該屬性線段13a再被該滑鼠游標15點選時，則該屬性線段13a所呈現的顏色可再改變回該第一顏色(如：黃色)(如第8A圖所示)，且該設定模組18會將該子區塊11a的顯示屬性改回成原來的固定顯示屬性。另外，當該屬性線段13c同樣被一滑鼠游標點選時，該設定模組18會將該子區塊11c的固定顯示屬性改變成該可延伸顯示屬性，且該顯示模組12會將該被選擇的屬性線段13c所呈現的該第一顏色(如：黃色)改變成該第二顏色(如：綠色)，其中該第二顏色(如：綠色)係用以表示該可延伸顯示屬性。
如第8C圖與第8D圖所示，當該屬性線段13b被一滑鼠游標15點選時，該第三偵測模組20c會偵測到該屬性線段13b被選擇。當第三偵測模組20c偵測到該屬性線段13b被選擇時，該設定模組18會將該子區塊11b的可延伸顯示屬性改變成該固定顯示屬性，且該 顯示模組12會將該被選擇的屬性線段13b所呈現的該第二顏色(如：綠色)(如第8C圖所示)改變成該第一顏色(如：黃色)(如第8D圖所示)，其中該第一顏色(如：黃色)係用以表示該固定顯示屬性。同樣地，當該設定模組18將該子區塊11b的可延伸顯示屬性改變成固定顯示屬性時，該子區塊11b的邏輯單位長度將如同該子區塊11a一樣而固定。於此實施例中，當該屬性線段13b所呈現的顏色改變成該第一顏色(如：黃色)後(如第8D圖所示)，若該屬性線段13b再被該滑鼠游標15點選時，則該屬性線段13b所呈現的顏色可再改變回該第二顏色(如：綠色)(如第8C圖所示)，且該設定模組18會將該子區塊11b的固定顯示屬性改回成該可延伸顯示屬性。同樣地，該屬性線段13c亦可藉由一滑鼠游標15點選，來改變該子區塊11c的顯示屬性，在此不加以贅述。
於上述實施例中，使用者可藉由快速地選擇該等屬性線段13a-13c之方式，達到改變該等子區塊11a-11c的顯示屬性之目的，如第8A圖至第8D圖所示。應了解到，在上述實施例中，該等屬性線段13a-13c係分別顯示於該等子區塊11a-11c上，但並不以此為限，該等屬性線段13a-13c亦可顯示於鄰近該等子區塊11a-11c的側邊上，如第9A圖所示，其同樣可達到改變該等子區塊11a-11c的顯示屬性之目的。另外，在此實施例中，雖然該等屬性線段13a-13c雖為一實線，但並不以此為限，該等屬性線段13a-13c亦可以是一虛線、破折線等線段形式或任何其他非線段形式的屬性元件，用來控制並呈現對應的子區塊之顯示屬性。舉例而言，如第9B圖所示，該等屬性線段13a-13c可以由三個屬性開關17a-17c來取代，藉由該等屬性開關17a-17c的切換來呈現兩種不同的顯示狀態，以進一步 表示該等子區塊11a-11c之不同顯示屬性。另外，上述實施例中所述的屬性元件除了可藉由滑鼠游標點選來選擇外，亦可藉由觸控面板直接點選來選擇，或可藉由鍵盤上的瀏覽鍵來選擇，或可藉由任何其他形式的輸入控制裝置來選擇。
現請參考第1圖、第2圖與第6圖，當該設定模組18將該子區塊11a、11b、11c的顯示屬性分別設定為具有一固定顯示屬性、一可延伸顯示屬性與一固定顯示屬性之後，該描述碼產生模組22會根據該子區塊11a、11b、11c的顯示屬性自動產生對應於該子區塊11a、11b、11c的描述碼，或是會在該描述碼產生鍵38a被選擇(如：被點選或被按下)時，產生對應於該子區塊11a、11b、11c的描述碼。於本揭露之一實施例中，該對應於該子區塊11a、11b、11c的描述碼可以是相容於HTML的程式碼，在此列出部分程式碼如下：
Figure 109128815-A0305-02-0021-1
Figure 109128815-A0305-02-0022-2
於上述描述碼中，<style>與</style>之間的描述碼是CSS語言的排版描述，用以定義該群組8中的該等子區塊11a、11b、11c的顯示屬性，其中「Object_8a」用以表示內含有該物件8a的子區塊11a，而界定在「Object_8a」中的「flex-grow：0」用以表示該子區塊11a不會根據一顯示器之長度大小而適應性地變長，界定在「Object_8a」中的「flex-shrink：0」用以表示該子區塊11a不會根據一顯示器之長度大小而適應性地縮短，亦即表示該子區塊11a的顯示屬性為一固定顯示屬性；「space」用以表示內含有該間隔9a的子區塊11b，而界定在「space」中的「flex-grow：1」用以表示該子區塊11b會根據一顯示器之長度大小而適應性地變長，界定在「space」中的「flex-shrink：1」用以表示該子區塊11b會根據一顯示器之長度大小而適應性地縮短，亦即表示該子區塊11b的顯示屬性為一可延伸顯示屬性；及「Object_8b」用以表示內含有該物件8b的子區塊11c，而界定在「Object_8b」中的「flex-grow：0」用以表示該子區塊11c不會根據一顯示器之長度大小而適應性地變長，界定在「Object_8b」中的「flex-shrink：0」用以表示該子區塊11c不會根據一顯示器之長度大小而適應性地縮短，亦即表示該 子區塊11c的顯示屬性為一固定顯示屬性。另外，<body>與</body>之間的描述碼為HTML的結構描述，此為習知的HTML語言格式，在此不加以贅述。
現請參考第1圖、第2圖、第8A圖與第8B圖，當該子區塊11a的顯示屬性由一固定顯示屬性改變成一可延伸顯示屬性後，該描述碼產生模組22會根據該子區塊11a的顯示屬性自動產生對應於該子區塊11a的描述碼，或是會在該描述碼產生鍵38a被選擇(如：被點選或被按下)時，產生對應於該子區塊11a的描述碼。以上述實施例中的程式碼為例，當該子區塊11a的顯示屬性由一固定顯示屬性改變成一可延伸顯示屬性後，對應於該子區塊11a的描述碼將會改變如下：
Figure 109128815-A0305-02-0023-3
與上述實施例中的程式碼相較，唯一差異在於「Object_8a」中所界定的「flex-grow」與「flex-shrink」後的值皆由“0”變為“1”，即「flex-grow：1」與「flex-shrink：1」，其中「flex-grow：1」用以表示該子區塊11a會根據一顯示器之長度大小而適應性地變長，「flex-shrink：1」用以表示該子區塊11a會根據一顯示器之長度大小而適應性地縮短，亦即表示該子區塊11a的顯示屬性為一可延伸顯示屬性。
同樣地，如第1圖、第2圖、第8C圖與第8D圖所示，當該子區塊11b的顯示屬性由一可延伸顯示屬性改變成一固定顯示屬性後，該描述碼產生模組22會根據該子區塊11b的顯示屬性自動產生對應於該子區塊11b的描述碼，或是會在該描述碼產生鍵38a被選擇(如：被點選或被按下)時，產生對應於該子區塊11b的描述碼。同樣以上述實施例中的程式碼為例，當該子區塊11b的顯示屬性由一可延伸顯示屬性改變成一固定顯示屬性後，該對應於該子區塊11b的描述碼將會改變如下：
Figure 109128815-A0305-02-0024-4
與上述實施例中的程式碼相較，唯一差異在於「space」中所界定的「flex-grow」與「flex-shrink」後的值皆由“1”變為“0”，即「flex-grow：0」與「flex-shrink：0」，其中「flex-grow：0」用以表示該子區塊11b不會根據一顯示器之長度大小而適應性地變長，「flex-shrink：0」用以表示該子區塊11b不會根據一顯示器之長度大小而適應性地縮短，亦即表示該子區塊11b的顯示屬性為一固定顯示屬性。
第10圖為根據本揭露之一實施例的群組區塊80之示意圖。現請參考第1圖、第3A圖與第10圖，該可編程的使用者介面100更包含一物件8c，該物件8c具有一外圍輪廓。該群組區塊8包含了該物件8a與物件8b，且位於該物件8c的外圍輪廓所圍成的一區域內。該複數個偵測模組20更具有一第四偵測模組20d，用以偵測該群組區塊8是否位於該物件8c的外圍輪廓所圍成的該區域內。當該第四 偵測模組20d偵測到該群組區塊8位於該物件8c的外圍輪廓所圍成的該區域內時，該群組模組14會更進一步將該群組區塊8與該物件8c組成一群組區塊80。
第11圖為根據本揭露之一實施例的群組區塊60之示意圖。現請參考第1圖、第3A圖與第11圖，該可編程的使用者介面100更包含一物件8d，該物件8a具有一外圍輪廓。該物件8d位於該物件8a的外圍輪廓所圍成的一區域內。該複數個偵測模組20更具有一第五偵測模組20e，用以偵測該物件8d是否位於該物件8a的外圍輪廓所圍成的該區域內。當該第五偵測模組20e偵測到該物件8d位於該物件8a的外圍輪廓所圍成的該區域內時，該群組模組14會更進一步將該物件8d與該物件8a組成一群組區塊60。
第12圖為根據本揭露之一實施例的多個物件8b、8e、8f之排列示意圖。現請參考第1圖、第3A圖與第12圖，該可編程的使用者介面100更包含一物件8e與一物件8f，該物件8e有部分重疊於該物件8f。該複數個偵測模組20更具有一第六偵測模組20f，用以偵測該物件8e是否重疊於該物件8f。當該第六偵測模組20f偵測到該物件8e重疊於該物件8f時，該群組模組14會更進一步將該物件8e與該物件8f組成該物件8a。
根據本揭露的上述實施例中，在第4A圖、第4B圖與第4C圖中所顯示的該可編程的使用者介面100上的群組區塊2、4、6、8中，該等物件2a-8b及該等物件間的間隔之顯示屬性可以藉由第8A-8D圖與第9A、9B圖中所顯示的各種屬性元件之選擇來快速地完成設定或改變，而且在完成對該等顯示屬性的設定或改變後，本 揭露所揭示的系統10更可根據該等顯示屬性產生對應的描述碼，藉此有效縮短程式開發撰寫的時間。
另外，根據本揭露的系統10更提供一種可快速設定一物件本身的顯示屬性、及該物件與其父圖層之外框間的距離所對應的顯示屬性之方式。現請參考第1圖與第3A圖，該設定模組18可分別設定該物件2a-2c、4a-4d、6a-6b及8a-8b中之任一者的四個側邊與其對應的一父圖層(例如：該群組區塊2、4、6、8)之四個側邊間的距離之顯示屬性，並可分別設定該物件2a-2c、4a-4d、6a-6b及8a-8b的長度與寬度之顯示屬性。以下將以物件2c與其對應的父圖層(例如：該群組區塊2)為例來做說明。
現請參考第13A圖，該設定模組18可將該群組區塊2之外框2F之上側邊與該物件2c之上側邊之間的距離設定為一第一固定顯示屬性，將該外框2F之下側邊與該物件2c之下側邊之間的距離設定為一第一可延伸顯示屬性，將該外框2F之左側邊與該物件2c之左側邊之間的距離設定為一第二固定顯示屬性，以及將該外框2F之右側邊與該物件2c之右側邊之間的距離設定為一第二可延伸顯示屬性。另外，該設定模組18更將該物件2c的上側邊與下側邊之間的距離(即高度)設定為一第三固定顯示屬性，並將該物件2c的左側邊與右側邊之間的距離(即寬度)設定為一第四固定顯示屬性。於此實施例中，當該設定模組18將上述該等距離設定為具有固定顯示屬性時，該等距離的邏輯單位長度為固定，其表示當該可編程的使用者介面100分別在兩個不同尺寸的顯示器上顯示時，該等距離的邏輯單位長度不會因該等顯示器的長度大小而改變。另外，當該設定模組18將上述該等距離設定為具有可延伸顯示屬性時，該等距離的 邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。有關該等固定顯示屬性與該等可延伸顯示屬性的定義與第7圖中的實施例之說明相同，在此不加以贅述。另外，於此實施例中，該群組區塊2為該物件2c的父圖層，但並不以此為限，在其他實施例中，亦可由其他僅包含物件2c，而不包含該物件2a、2b在內的區塊作為父圖層。
現請參考第1圖、第3A圖與第13A圖，該複數個偵測模組20更具有一第七偵測模組20g，用以偵測該物件2c是否被選擇。當該第七偵測模組20g偵測到該物件2c藉由滑鼠游標、觸控面板或鍵盤被選擇時，該顯示模組12會顯示兩條垂直交錯的物件屬性線段70A、70B於該物件2c上，以及四條間距屬性線段71、72、73、74分別位於該物件2c的四個側邊與該群組區塊2之外框2F的四個側邊之間。同時，該顯示模組12會於該物件屬性顯示區域36中顯示一外框圖標200F、一物件高度圖標90A、一物件寬度圖標90B及四個間距圖標91、92、93、94。該外框圖標200F對應於該群組區塊2之外框2F。於此實施例中，該間距屬性線段71呈現一第一顏色(如：淺藍色)，用以表示該第一固定顯示屬性；該間距屬性線段72呈現一第二顏色(如：粉紅色)，用以表示該第一可延伸顯示屬性；該間距屬性線段73呈現該第一顏色(如：淺藍色)，用以表示該第二固定顯示屬性；及該間距屬性線段74呈現該第二顏色(如：粉紅色)，用以表示該第二可延伸顯示屬性。另外，該物件屬性線段70A呈現一第三顏色(如：藍色)，用以表示該第三固定顯示屬性；及該物件屬性線段70B呈現該第三顏色(如：藍色)，用以表示該第四固定顯示屬性。該物件高度圖標90A對應於該物件屬性線段70A，且 其呈現的顏色大致上相同(即相近、相同或屬於同屬色系)於該第三顏色(如：藍色)。該物件寬度圖標90B對應於該物件屬性線段70B，且其呈現的顏色大致上相同(即相近、相同或屬於同屬色系)於該第三顏色(如：藍色)。該間距圖標91對應於該間距屬性線段71，且其呈現的顏色大致上相同(即相近、相同或屬於同屬色系)於該第一顏色(如：淺藍色)。該間距圖標92對應於該間距屬性線段72，且其呈現的顏色大致上相同(即相近、相同或屬於同屬色系)於該第二顏色(如：粉紅色)。該間距圖標93對應於該間距屬性線段73，且其呈現的顏色大致上相同(即相近、相同或屬於同屬色系)於該第一顏色(如：淺藍色)。該間距圖標94對應於該間距屬性線段74，且其呈現的顏色大致上相同(即相近、相同或屬於同屬色系)於該第二顏色(如：粉紅色)。
現請參考第1圖、第2圖與第13A圖，在該設定模組18設定該外框2F之四個側邊與該物件2c之四個側邊之間的四個距離的顯示屬性及該物件2c的長度與寬度之顯示屬性後，該描述碼產生模組22可根據該四個距離的顯示屬性、該長度與該寬度的顯示屬性自動產生其對應的描述碼，或是會在第2圖所示的描述碼產生鍵38a被選擇(如：被點選或被按下)時，產生其對應的描述碼，且該顯示模組12會將該描述碼產生模組22所產生的描述碼顯示在該物件屬性顯示區域36中。於本揭露之一實施例中，該對應於該外框2F之四個側邊與該物件2c之四個側邊之間的四個距離及該物件2c的長度與寬度的描述碼可以是相容於React的程式碼，在此列出部分程式碼如下：
Figure 109128815-A0305-02-0028-6
Figure 109128815-A0305-02-0029-5
於上述描述碼中，第1行至第13行的描述碼是Javascript(JSX in Rcact)語言的結構與排版描述，用以定義該外框2F之四個側邊與該物件2c之四個側邊之間的四個距離的顯示屬性及該物件2c的長度與寬度之顯示屬性，其中第七行的「110px」用以表示該外框2F之左側邊與該物件2c之左側邊之間的距離為110個像素且為一固定顯示屬性，「135px」用以表示該物件2c的左側邊與右側邊之間的距離(即寬度)為135個像素且為一固定顯示屬性，且「96fr」用以表示該外框2F之右側邊與該物件2c之右側邊之間的距離為96個像素且為一可延伸顯示屬性；及第八行的「17px」用以表示該外框2F之上側邊與該物件2c之上側邊之間的距離為17個像素且為一固定顯示屬性，「30px」用以表示該物件2c的上側邊與下側邊之間的距離(即高度)為30個像素且為一固定顯示屬性，且「14fr」用以表示該外框2F之下側邊與該物件2c之下側邊之間的距離為14個像素且為一可延伸顯示屬性。另外，第14行至第19行的描述碼為CSS 語言在Javascript語言中的描述(CSS In JS)，此為習知的語言格式，在此不加以贅述。
現請繼續參考第1圖與第13A圖，該複數個偵測模組20更具有一第八偵測模組20h，用以偵測該物件屬性線段70A、70B與該間距屬性線段71、72、73、74之至少一者是否被選擇。當該第八偵測模組20h偵測到該物件屬性線段70A、70B與該間距屬性線段71、72、73、74之至少一者被選擇時，該設定模組18將改變該被選擇的屬性線段70A、70B、71、72、73、74所對應的距離之顯示屬性，且該顯示模組12將改變該被選擇到的屬性線段70A、70B、71、72、73、74中之至少一者所呈現的顏色。舉例而言，如第13A圖與第13B圖所示，當該間距屬性線段71被一滑鼠游標15點選時，該第八偵測模組20h會偵測到該間距屬性線段71被選擇。當第八偵測模組20h偵測到該間距屬性線段71被選擇時，該設定模組18會將該外框2F之上側邊與該物件2c之上側邊之間的距離之第一固定顯示屬性改變成一可延伸顯示屬性，且該顯示模組12會將該被選擇的間距屬性線段71所呈現的該第一顏色(如：淺藍色)(如第13A圖所示)改變成該第二顏色(如：粉紅色)(如第13B圖所示)，其中該第二顏色(如：粉紅色)係用以表示該可延伸顯示屬性。於此實施例中，當該被選擇的間距屬性線段71所呈現的該第一顏色(如：淺藍色)改變成該第二顏色(如：粉紅色)時，該間距圖標91將對應地由該第一顏色(如：淺藍色)改變成該第二顏色(如：粉紅色)，使得使用者可即時地在該物件屬性顯示區域36中看到該外框2F之上側邊與該物件2c之上側邊之間的距離之顯示屬性的改變。當該設定模組18將該距離的第一固定顯示屬性改變成該可延伸 顯示屬性時，該距離的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於此實施例中，當該間距屬性線段71所呈現的顏色改變成該第二顏色(如：粉紅色)後，若該間距屬性線段71再被該滑鼠游標15點選時，則該間距屬性線段71與該間距圖標91所呈現的顏色可再改變回該第一顏色(如：淺藍色)，且該設定模組18會將該距離的可延伸顯示屬性改回成該第一固定顯示屬性。
於本揭露之一實施例中，當該外框2F之上側邊與該物件2c之上側邊之間的距離的顯示屬性改變成一可延伸顯示屬性之後，該描述碼產生模組22會根據該改變的距離之顯示屬性自動產生對應於該距離的描述碼，或是會在第2圖中的描述碼產生鍵38a被選擇(如：被點選或被按下)時，產生對應於該距離的描述碼。以上述實施例中的程式碼為例，當該外框2F之上側邊與該物件2c之上側邊之間的距離的顯示屬性由該第一固定顯示屬性改變成一可延伸顯示屬性之後，對應於該外框2F之上側邊與該物件2c之上側邊之間的距離的描述碼將會改變如下：y="17fr 30px 14fr"與上述實施例中的程式碼第8行相較，唯一差異在於「y」中用以界定該外框2F之上側邊與該物件2c之上側邊之間的距離之參數已由"17px”變為“17fr"，用以表示該外框2F之上側邊與該物件2c之上側邊之間的距離的顯示屬性已由該第一固定顯示屬性改變為一可延伸顯示屬性。
於另一實施例中，如第14A圖與第14B圖所示，當該間距屬性線段72被一滑鼠游標15點選時，該第八偵測模組20h會偵測到該 間距屬性線段72被選擇。當該第八偵測模組20h偵測到該間距屬性線段72被選擇時，該設定模組18會將該外框2F之下側邊與該物件2c之下側邊之間的距離之第一可延伸顯示屬性改變成一固定顯示屬性，且該顯示模組12會將該被選擇的間距屬性線段72所呈現的該第二顏色(如：粉紅色)(如：第14A圖所示)改變成該第一顏色(如：淺藍色)(如：第14B圖所示)，其中該第一顏色(如：淺藍色)係用以表示該固定顯示屬性。於此實施例中，當該被選擇的間距屬性線段72所呈現的該第二顏色(如：粉紅色)改變成該第一顏色(如：淺藍色)時，該間距圖標92將對應地由該第二顏色(如：粉紅色)改變成該第一顏色(如：淺藍色)，使得使用者可即時地在該物件屬性顯示區域36中看到該外框2F之下側邊與該物件2c之下側邊之間的距離之顯示屬性的改變。當該設定模組18將該距離的第一可延伸顯示屬性改變成該固定顯示屬性時，該距離的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於此實施例中，當該間距屬性線段72所呈現的顏色改變成該第一顏色(如：淺藍色)後，若該間距屬性線段72再被該滑鼠游標15點選時，則該間距屬性線段72與該間距圖標92所呈現的顏色可再改變回該第二顏色(如：粉紅色)，且該設定模組18會將該距離的固定顯示屬性改回成該第一可延伸顯示屬性。
於本揭露之一實施例中，當該外框2F之下側邊與該物件2c之下側邊之間的距離的顯示屬性改變成一固定顯示屬性之後，該描述碼產生模組22會根據該改變的距離之顯示屬性自動產生對應於該距離的描述碼，或是會在第2圖中的描述碼產生鍵38a被選擇 (如：被點選或被按下)時，產生對應於該距離的描述碼。同樣以上述實施例中的程式碼為例，當該外框2F之下側邊與該物件2c之下側邊之間的距離的顯示屬性由該第一可延伸顯示屬性改變成一固定顯示屬性之後，對應於該外框2F之下側邊與該物件2c之下側邊之間的距離的描述碼將會改變如下：y="17px 30px 14px"與上述實施例中的程式碼第8行相較，唯一差異在於「y」中用以界定該外框2F之下側邊與該物件2c之下側邊之間的距離之參數已由“14fr”變為“14px”，用以表示該外框2F之下側邊與該物件2c之下側邊之間的距離的顯示屬性已由該第一可延伸顯示屬性改變成一固定顯示屬性。
於另一實施例中，如第15A圖與第15B圖所示，當該物件屬性線段70A被一滑鼠游標15點選時，該第八偵測模組20h會偵測到該物件屬性線段70A被選擇。當該第八偵測模組20h偵測到該物件屬性線段70A被選擇時，該設定模組18會將該物件2c的上側邊與下側邊之間的距離(即高度)之一第三固定顯示屬性改變成一可延伸顯示屬性，且該顯示模組12會將該被選擇的物件屬性線段70A所呈現的該第三顏色(如：藍色)(如：第15A圖所示)改變成該第二顏色(如：粉紅色)(如：第15B圖所示)，其中該第二顏色(如：粉紅色)係用以表示該可延伸顯示屬性。於此實施例中，當該被選擇的物件屬性線段70A所呈現的該第三顏色(如：藍色)改變成該第二顏色(如：粉紅色)時，該物件高度圖標90A將對應地由該第三顏色(如：藍色)改變成該第二顏色(如：粉紅色)，使得使用者可即時地在該物件屬性顯示區域36中看到該物件2c的上側邊與 下側邊之間的距離(即高度)之顯示屬性的改變。當該設定模組18將該距離的第三固定顯示屬性改變成該可延伸顯示屬性時，該距離的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於此實施例中，當該物件屬性線段70A所呈現的顏色改變成該第二顏色(如：粉紅色)後，若該物件屬性線段70A再被該滑鼠游標15點選時，則該物件屬性線段70A與該物件高度圖標90A所呈現的顏色可再改變回該第一顏色(如：藍色)，且該設定模組18會將該距離的可延伸顯示屬性改回成該第三固定顯示屬性。
於本揭露之一實施例中，當該物件2c的上側邊與下側邊之間的距離(即物件2c的高度)的顯示屬性改變成一可延伸顯示屬性之後，該描述碼產生模組22會根據該改變的距離之顯示屬性自動產生對應於該距離的描述碼，或是會在第2圖中的描述碼產生鍵38a被選擇(如：被點選或被按下)時，產生對應於該距離的描述碼。同樣以上述實施例中的程式碼為例，當該物件2c的上側邊與下側邊之間的距離的顯示屬性由該第三固定顯示屬性改變成一可延伸顯示屬性之後，對應於該物件2c的上側邊與下側邊之間的距離的描述碼將會改變如下：y="17px 30fr 14fr"與上述實施例中的程式碼第8行相較，唯一差異在於「y」中用以界定該物件2c的上側邊與下側邊之間的距離之參數已由“30px”變為“30fr”，用以表示該物件2c的上側邊與下側邊之間的距離的顯示屬性已由該第三固定顯示屬性改變成一可延伸顯示屬性。
於另一實施例中，該設定模組18可將該物件2c的上側邊與下側邊之間的距離(即高度)預設為一可延伸顯示屬性，且該顯示模組12可顯示呈現該第二顏色(如：粉紅色)的物件屬性線段70A，用以表示該可延伸顯示屬性，並顯示呈現該第二顏色(如：粉紅色)的高度圖標90A對應於該物件屬性線段70A(如第15B圖所示)。該物件2c的上側邊與下側邊之間的距離(即高度)之可延伸顯示屬性亦可藉由上述實施例之相同方式改變成一固定顯示屬性，且該物件屬性線段70A與該高度圖標90A所呈現的顏色亦可如同上述實施例之相同方式相對應地做改變，在此將不再贅述。
應瞭解到，上述第13A、13B、14A、14B、15A、15B圖的實施例中係以物件2c及其對應的群組區塊2間的關係為例，來說明設定或改變一物件本身的寬度、高度及其四個側邊與其父圖層的四個側邊之距離的顯示屬性，但本揭露所揭示的系統與方法並不以此為限，第3A圖中的其他物件2a、2b、4a-4d、6a、6b、8a、8b皆可以同樣方式來設定其本身的寬度、高度及其四個側邊與其父圖層的四個側邊之距離的顯示屬性。然而，當一物件的至少一側邊與其父圖層的至少一側邊之間是緊密貼合而無存在距離時，將無法以該屬性線段71、72、73、74呈現，於此情況下，該屬性線段71、72、73、74之至少一者可由其他屬性符號，例如：符號“+”與“-”來作為屬性元件，用以表示兩種不同的顯示屬性，如第16圖所示。
現請參考第1圖、第3A圖與第16圖，該第七偵測模組20g，更用以偵測該物件8a是否被選擇。當該第七偵測模組20g偵測到該物件8a藉由滑鼠游標、觸控面板或鍵盤被選擇時，該顯示模組12會顯示兩條垂直交錯的物件屬性線段70A、70B於該物件8a上、三個 間距屬性符號81、82、83於該物件8a的三個側邊、及一間距屬性線段84位於該物件8a的右側邊與該群組區塊8之外框8F的右側邊之間。該物件8a的父圖層為該群組區塊8，且該群組區塊8之外框8F的上側邊、左側邊與下側邊分別與該物件8a的上側邊、左側邊與下側邊緊密貼合而無存在距離，因此該外框8F的上、左與下側邊與該物件8a的上、左與下側邊間之距離的顯示屬性係分別以符號“-”、“-”、“+”來表示。同樣地，該符號“-”與“+”可經由滑鼠游標點選而被選擇，藉以切換成不同的顯示屬性，例如：該符號“-”可表示一固定顯示屬性，而該符號“+”可表示一可延伸顯示屬性，除此屬性元件差異外，其餘操作方式皆與上述第13A、13B、14A、14B、15A、15B圖的實施例中所揭示者大致相同，在此不加以贅述。
現請參考第1圖、第3A圖與第13A圖，當該第七偵測模組20g偵測到該物件2c藉由滑鼠游標、觸控面板或鍵盤被選擇時，位於該群組區塊2中的該物件2a與該物件2b或其他群組區塊4、6、8中的物件可被暫時隱藏或被改變成其淡化顏色(如：灰色)，以提供一簡潔畫面來讓使用者設定該物件2c其本身的顯示屬性及其相對於該群組區塊2的顯示屬性。
現請參考第1圖、第2圖、第3A圖、第17A圖、與第17B圖。於一實施例中，該工具列38更提供一文字長度壓力測試功能39，用以測試一文字串的一極限長度，該極限長度可由判斷該文字是否過長而重疊於其他物件而決定，或由判斷該文字是否過短而造成過度空白而決定。於此實施例中，該文字長度壓力測試功能39當被選擇時，該顯示模組12會顯示一下拉式選單39a，其包含「文字壓力：關閉」、「最大壓力測試」與「最小壓力測試」等選項，該物件8a是 一字串，而該物件8b是一圖片。當該「最大壓力測試」被選擇時，該調整模組24係用以根據該字串之內容屬性，調整該字串之長度，使該文字串的長度達到最大極限，如第17B圖所示。該複數個偵測模組20更具有一第九偵測模組20i，用以偵測該經調整的字串之長度是否重疊於該物件8b。當該第九偵測模組20i偵測到該經調整長度後的字串重疊於該物件8b時(如第17B圖所示)，該顯示模組12會顯示一對應的訊息或圖標，用以通知一使用者。
應瞭解到，於上述實施例中，該第一偵測模組20a至該第九偵測模組20i，其可以根據設計需求由九個獨立的偵測模組來實現，也可以是由至少兩個以上的偵測模組來實現，或由同一個偵測模組來實現，其皆可達到本揭示文件中所揭露的目的。
現請參考第1圖、第2圖、與第4A圖與第18圖，於本揭露之一實施例中，該比較模組26係用以將未經上述切割步驟之可編程的使用者介面100(如第2圖所示)所對應的一第一影像100a與經切割步驟之可編程的使用者介面100(如第4A圖所示)所對應的一第二影像100b重疊，用以比較該兩影像間的差異性，讓一設計者可瞭解該差異性，並決定是否繼續對該使用者介面100進行編輯或修改工作。於此實施例中，該工具列38更包括一比較按鍵41，當該比較按鍵41被選擇或按下時，該顯示模組12會顯示該第一影像100a與該第二影像100b，以供該設計者參考。
第19圖為根據本揭露之一些實施例之產生使用者介面的描述碼之一方法300之流程圖。該方法300包括步驟S302~S316。在此實施例中，該方法300中的步驟S302~S316並不限於流程圖中所 列順序，其可以是一些步驟同時執行、以不同於所列順序而執行、或者可部分步驟省略而執行，亦可依需求執行額外的步驟。
現請參考第19圖，並配合參考第1圖、第3A圖、第4A圖、第6圖、第8A-8D圖與第9A、9B圖。於步驟S302中，該顯示模組12顯示一可編程的使用者介面100，該可編程的使用者介面100具有一第一物件8a及一第二物件8b。
於步驟S304中，該群組模組14將該使用者介面100的該第一物件8a與該第二物件8b組成一群組，並對該群組形成一群組區塊8，其中該第一物件8a與該第二物件8b位於該群組區塊8內。於一實施例中，該複數個偵測模組20中之至少一者會偵測該群組區塊8是否位於一物件8c的外圍輪廓所圍成的一區域內，如第10圖所示；當該等偵測模組20中之至少一者偵測到該群組區塊8位於該物件8c的外圍輪廓所圍成的該區域內時，該群組模組14將該群組區塊8與該物件8c組成另一群組區塊80。於另一實施例中，該複數個偵測模組20中之至少一者會偵測一物件8d是否位於該第一物件8a的一外圍輪廓所圍成的一區域內，如第11圖所示；當該等偵測模組20中之至少一者偵測到該物件8d位於該第一物件8a的外圍輪廓所圍成的該區域內時，該群組模組14將該物件8d與該第一物件8a組成另一群組區塊60。於其他實施例中，該複數個偵測模組20中之至少一者會偵測一物件8e是否重疊於一物件8f，如第12圖所示；當該等偵測模組20中之至少一者偵測到該物件8e重疊於該物件8f時，該群組模組14會將該第物件8e與該物件8f組成該第一物件8a。於另一其他實施例中，該第一物件8a為一字串，該調整模組24會根據該字串之內容屬性，調整該字串之長度，且該等偵測模組20中之至少一者偵測會偵 測該經調整的字串之長度是否與該第二物件8b重疊，如第17B圖所示；當該等偵測模組20中之至少一者偵測到該經調整長度後的字串重疊於該第二物件8b時，該顯示模組12會顯示一對應的提示訊息。
於步驟S306中，該切割模組16將該群組區塊8切割成一第一子區塊11a與一第二子區塊11c，其中該第一物件8a位於該第一子區塊11a內，且該第二物件8b位於該第二子區塊11c內，如第6圖所示。於一實施例中，該複數個偵測模組20中之至少一者會偵測該第一物件8a與該第二物件8b間是否存在一間隔9a，其中該間隔9a由該第一物件8a的一第一邊緣與該第二物件8b的一第二邊緣所界定。當該等偵測模組20中之至少一者偵測到該第一物件8a與該第二物件8b間存在該間隔9a時，該切割模組16可沿著位於該間隔中的至少一路徑，將該群組區塊8切割成該第一子區塊11a與該第二子區塊11c，如第6圖所示。較佳地，該至少一路徑包括一第一路徑與一第二路徑，該第一路徑鄰近於該第一物件8a的第一邊緣，該第二路徑鄰近於該第二物件8b的第二邊緣，且該切割模組16可沿著該第一路徑與該第二路徑，將該群組區塊8切割成該第一子區塊11a、該第二子區塊11c及一第三子區塊11b，其中該第三子區塊11b位於該第一子區塊11a與該第二子區塊11c之間，如第6圖所示。於另一實施例中，當該等偵測模組20中之至少一者偵測到該第一物件8a與該第二物件8b間存在該間隔9a時，該顯示模組12顯示一確認鍵52(如第5圖所示)。接著，該等偵測模組20中之至少一者更偵測該確認鍵52是否被選擇。當該等偵測模組20中之至少一者偵測到該確認鍵52被選擇時，該切割模組16可沿著位於該間隔9a中的至少一路徑，將該群組區塊8切割成該第一子區塊11a與該第二子區塊11c。
於步驟S308中，該設定模組18將該第一子區塊11a設定為具有一第一顯示屬性。
於步驟S310中，該顯示模組12顯示一第一屬性元件於該可編程的使用者介面100上，其中該第一屬性元件呈現一第一顯示狀態，用以表示該第一顯示屬性。於一實施例中，該第一屬性元件可為一屬性線段13a，位於該第一子區塊11a上，且該第一顯示狀態可為呈現一第一顏色(如：黃色)，如第8A圖所示。於另一實施例中，該第一屬性元件可為一屬性線段13a，位於該第一子區塊11a的一外側邊緣上，且該第一顯示狀態可為呈現一第一顏色(如：黃色)，如第9A圖所示。於其他實施例中，該第一屬性元件可為一屬性開關17a，位於該第一子區塊11a的一外側邊緣上，如第9B圖所示。
於步驟S312中，該複數個偵測模組20中之至少一者偵測該第一屬性元件(如：該屬性線段13a)是否被選擇，如第8A圖所示。當該等偵測模組20中之至少一者未偵測到該第一屬性元件(如：該屬性線段13a)被選擇時，執行步驟S313。當該等偵測模組20中之至少一者偵測到該第一屬性元件(如：該屬性線段13a)被選擇時，執行步驟S314。
於步驟S313中，該描述碼產生模組22根據該第一顯示屬性，產生對應於該第一子區塊11a的一第一描述碼。
於步驟S314中，將該第一子區塊11a的第一顯示屬性改變成一第二顯示屬性，並將該第一屬性元件(如：該屬性線段13a)所呈現的該第一顯示狀態(如：黃色)改變成一第二顯示狀態(如：綠色)，其中該第二顯示狀態係用以表示該第二顯示屬性。於一實施例中，該第一顯示屬性為一固定顯示屬性，且該第二顯示屬性為 一可延伸顯示屬性；當該設定模組18將該第一子區塊11a設定為具有該固定顯示屬性時，該第一子區塊11a的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變；及當該第一子區塊11a的該固定顯示屬性改變成該可延伸顯示屬性時，該第一子區塊11a的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於另一實施例中，該第一顯示屬性為一可延伸顯示屬性，且該第二顯示屬性為一固定顯示屬性；當該設定模組18將該第一子區塊11a設定為具有該可延伸顯示屬性時，該第一子區塊11a的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變；及當該第一子區塊11a的該可延伸顯示屬性改變成該固定顯示屬性時，該第一子區塊11a的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。
於步驟S316中，該描述碼產生模組22根據該第二顯示屬性，產生對應於該第一子區塊11a的一第一描述碼。
現請參考第20圖，於另一實施例中，該方法300可另包括步驟S320~S328，用以產生對應於該第二子區塊11c的描述碼。該等步驟S320~S328可以在步驟S316後執行，或在步驟S316前執行，或部分在步驟S316前執行。
現請參考第20圖，並配合參考第1圖、第3A圖、第4A圖、第6圖、第8A-8D圖與第9A、9B圖。於步驟S320中，該設定模組18將該第二子區塊11c設定為具有一第三顯示屬性。
於步驟S322中，該顯示模組12顯示一第二屬性元件於該可編程的使用者介面100上，其中該第二屬性元件呈現一第三顯示狀態，用以表示該第三顯示屬性。於一實施例中，該第二屬性元件可為一屬性線段13c，位於該第二子區塊11c上，且該第三顯示狀態可為呈現一第一顏色(如：黃色)，如第8A圖所示。於另一實施例中，該第二屬性元件可為一屬性線段13c，位於該第二子區塊11c的一外側邊緣上，且該第三顯示狀態可為呈現一第一顏色(如：黃色)，如第9A圖所示。於其他實施例中，該第二屬性元件可為一屬性開關17c，位於該第二子區塊11c的一外側邊緣上，如第9B圖所示。
於步驟S324中，該複數個偵測模組20中之至少一者偵測該第二屬性元件(如：該屬性線段13c)是否被選擇。當該等偵測模組20中之至少一者未偵測到該第二屬性元件(如：該屬性線段13c)被選擇時，執行步驟S325。當該等偵測模組20中之至少一者偵測到該第二屬性元件(如：該屬性線段13c)被選擇時，執行步驟S326。
於步驟S325中，該描述碼產生模組22根據該第三顯示屬性，產生對應於該第二子區塊11c的一第二描述碼。
於步驟S326中，將該第二子區塊11c的第三顯示屬性改變成一第四顯示屬性，並將該第二屬性元件(如：該屬性線段13c)所呈現的該第三顯示狀態(如：黃色)改變成一第四顯示狀態(如：綠色)，其中該第四顯示狀態係用以表示該第四顯示屬性。於一實施例中，該第三顯示屬性為一固定顯示屬性，且該第四顯示屬性為一可延伸顯示屬性。於另一實施例中，該第三顯示屬性為一可延伸顯示屬性，且該第四顯示屬性為一固定顯示屬性。同樣地，有關該 第二子區塊11c的固定顯示屬性與可延伸顯示屬性之定義與上述該第一子區塊11a所界定者相同，因此在此不加以贅述。
於步驟S328中，該描述碼產生模組22根據該第四顯示屬性，產生對應於該第二子區塊11c的一第二描述碼。
現請參考第21圖，於另一實施例中，該方法300可另包括步驟S330~S339，用以產生對應於一物件的側邊與其對應的群組區塊之外框的側邊之間的距離之顯示屬性的描述碼。該等步驟S330~S339可以在步驟S328後執行，或在步驟S328前執行，或部分在步驟S328前執行。於此實施例中，將以第13A圖與第13B圖中的該物件2c的上側邊與該群組區塊2的外框2F之上側邊之間的距離為例作為說明。
現請參考第21圖，並配合參考第13A圖與第13B圖。於步驟330中，該設定模組18將該群組區塊2的外框2F之上側邊與該物件2c之上側邊之間的一第一距離設定為具有一第五顯示屬性。
於步驟S332，該複數個偵測模組20中之至少一者偵測該物件2c是否被選擇。當該複數個偵測模組20中之至少一者未偵測到該物件2c被選擇時，重覆執行步驟S332。當該複數個偵測模組20中之至少一者偵測到該物件2c被選擇時，執行步驟S334。
於步驟S334中，該顯示模組12顯示一間距屬性線段71於該外框2F之上側邊與該物件2c之上側邊之間，其中該間距屬性線段71呈現一第五顯示狀態(如：淺藍色)，用以表示該第五顯示屬性，如第13A圖所示。
於步驟S336中，該複數個偵測模組20中之至少一者偵測該間距屬性線段71是否被選擇。當該等偵測模組20中之至少一者未偵 測到該間距屬性線段71被選擇時，執行步驟S337。當該等偵測模組20中之至少一者偵測到該間距屬性線段71被選擇時，執行步驟S338。
於步驟S337中，該描述碼產生模組22根據該第五顯示屬性，產生對應於該第一距離的一第三描述碼。
於步驟S338中，將該第一距離的第五顯示屬性改變成一第六顯示屬性，並將該間距屬性線段71所呈現的該第五顯示狀態(如：淺藍色)改變成一第六顯示狀態(如：粉紅色)，其中該第六顯示狀態(如：粉紅色)係用以表示該第六顯示屬性，如第13B圖所示。於一實施例中，該第五顯示屬性為一固定顯示屬性，且該第六顯示屬性為一可延伸顯示屬性；當該設定模組18將該第一距離設定為具有該固定顯示屬性時，該第一距離的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變；及當該第一距離的該固定顯示屬性改變成該可延伸顯示屬性時，該第一距離的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於另一實施例中，該第五顯示屬性為一可延伸顯示屬性，且該第六顯示屬性為一固定顯示屬性；當該設定模組18將該第一距離設定為具有該可延伸顯示屬性時，該第一距離的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變；及當該第一距離的該可延伸顯示屬性改變成該固定顯示屬性時，該第一距離的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於其他實施例中，該第五顯示狀態為一第一顏色(如：淺藍色)，該第六顯示狀 態為一第二顏色(如：粉紅色)，該顯示模組12顯示該可編程的使用者介面100於該編輯顯示區域34，並顯示一間距圖標91於第2圖中的該物件屬性顯示區域36上，其中該間距圖標91對應於該間距屬性線段71，且該間距圖標91呈現一第三顏色(如：淺藍色)，其大致上相同於該第一顏色(如：淺藍色)，及當該間距屬性線段71所呈現的該第一顏色(如：淺藍色)改變成該第二顏色(如：粉紅色)時，該間距圖標91將對應地由該第三顏色(如：淺藍色)改變成一第四顏色(如：粉紅色)，其中該第四顏色(如：粉紅色)大致上相同於該第二顏色(如：粉紅色)。
於步驟S339中，該描述碼產生模組22根據該第六顯示屬性，產生對應於該第一距離的一第三描述碼。
現請參考第22圖，於另一實施例中，該方法300可另包括步驟S340~S349，用以產生對應於一物件的兩對應側邊之間的距離之顯示屬性的描述碼。該等步驟S340~S349可以在步驟S339後執行，或在步驟S339前執行，或部分在步驟S339前執行。於此實施例中，將以第15A圖與第15B圖中的該物件2c的上側邊與下側邊之間的距離為例作為說明。
現請參考第22圖，並配合參考第15A圖與第15B圖。於步驟S340中，該設定模組18將該物件2c之上側邊與下側邊之間的一第二距離設定為具有一第七顯示屬性。
於步驟S342中，該複數個偵測模組20中之至少一者偵測該物件2c是否被選擇。當該複數個偵測模組20中之至少一者未偵測到該物件2c被選擇時，重覆執行步驟S342。當該複數個偵測模組20中之至少一者偵測到該物件2c被選擇時，執行步驟S344。
於步驟S344中，該顯示模組12更顯示一物件屬性線段70A於該物件2c之上側邊與下側邊之間，其中該物件屬性線段70A呈現一第七顯示狀態(如：藍色)，用以表示該第七顯示屬性，如第15A所示。
於步驟S346中，該複數個偵測模組20中之至少一者偵測該物件屬性線段70A是否被選擇。當該等偵測模組20中之至少一者未偵測到該物件屬性線段70A被選擇時，執行步驟S347。當該等偵測模組20中之至少一者偵測到該物件屬性線段70A被選擇時，執行步驟S348。
於步驟S348中，將該第二距離的第七顯示屬性改變成一第八顯示屬性，並將該物件屬性線段70A所呈現的該第七顯示狀態(如：藍色)改變成一第八顯示狀態(如：粉紅色)，其中該第八顯示狀態(如：粉紅色)係用以表示該第八顯示屬性，如第15B圖所示。於一實施例中，該第七顯示屬性為一固定顯示屬性，且該第八顯示屬性為一可延伸顯示屬性；當該設定模組18將該第二距離設定為具有該固定顯示屬性時，該第二距離的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變；及當該第二距離的該固定顯示屬性改變成該可延伸顯示屬性時，該第二距離的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於另一實施例中，該第七顯示屬性為一可延伸顯示屬性，且該第八顯示屬性為一固定顯示屬性；當該設定模組18將該第二距離設定為具有該可延伸顯示屬性時，該第二距離的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變；及當該 第二距離的該可延伸顯示屬性改變成該固定顯示屬性時，該第二距離的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於其他實施例中，該第七顯示狀態為一第一顏色(如：藍色)，該第八顯示狀態為一第二顏色(如：粉紅色)，該顯示模組12顯示該可編程的使用者介面100於該編輯顯示區域34，並顯示一物件高度圖標90A於該物件屬性顯示區域36上，其中該物件高度圖標90A對應於該物件屬性線段70A，且該物件高度圖標90A呈現一第三顏色(如：藍色)，其大致上相同於該第一顏色(如：藍色)；及當該物件屬性線段70A所呈現的該第一顏色(如：藍色)改變成該第二顏色(如：粉紅色)時，該物件高度圖標90A將對應地由該第三顏色(如：藍色)改變成一第四顏色(如：粉紅色)，其中該第四顏色(如：粉紅色)大致上相同於該第二顏色(如：粉紅色)。
於步驟S349中，該描述碼產生模組22根據該第八顯示屬性，產生對應於該第二距離的一第四描述碼。
於本揭露之一實施例中，該方法300更包括一步驟：將未經切割步驟之可編程的使用者介面100所對應的一影像100a與經切割步驟之可編程的使用者介面100所對應的一影像100b重疊，用以比較該兩影像間的差異性，如第18圖所示。
第23圖為根據本揭露之一些實施例之產生使用者介面的描述碼之一方法400之流程圖。該方法400包括步驟S402~S410。在此實施例中，該方法400中的步驟S402~S410並不限於流程圖中所列順序，其可以是一些步驟同時執行、以不同於所列順序而執行、或者可部分步驟省略而執行，亦可依需求執行額外的步驟。於此實 施例中，將以第3A圖、第4A圖與第6圖中的物件8a與物件8b為例作為說明。
現請參考第23圖，並配合參考第1圖、第3A圖、第4A圖與第6圖。於步驟S402中，該顯示模組12顯示一可編程的使用者介面100，該可編程的使用者介面100具有一第一物件8a及一第二物件8b，且該第一物件8a與該第二物件8b間存在一間隔9a。
於步驟S404中，該群組模組14將該第一物件8a與該第二物件8b組成一群組，並對該群組形成一群組區塊8，其中該第一物件8a與該第二物件8b位於該群組區塊8內。
於步驟S406中，該切割模組16將該群組區塊8切割成一子區塊11a、一子區塊11b與一子區塊11c，其中該第一物件8a位於該子區塊11a內，該第二物件8b位於該子區塊11c內，且該間隔9a位於該子區塊11b內，其中該間隔9a由該第一物件8a的一右邊緣與該第二物件8b的一左邊緣所界定，如第6圖所示。於一實施例中，該複數個偵測模組20中之至少一者會偵測該間隔9a之寬度是否大於一預設值。當該等偵測模組20中之至少一者偵測到該間隔9a之寬度大於該預設值時，該切割模組16可沿著位於該間隔中的一第一路徑與一第二路徑，將該群組區塊8切割成該子區塊11a、該子區塊11b與該子區塊11c，其中該第一路徑鄰近於該第一物件8a的右邊緣，且該第二路徑鄰近於該第二物件8b的左邊緣，如第6圖所示。
於步驟S408中，該設定模組18將該子區塊11b設定為具有一第一顯示屬性。於此實施例中，該第一顯示屬性為一可延伸顯示屬性，使得該子區塊11b的邏輯單位長度會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於另一實施 例中，該設定模組18更將該子區塊11a與該子區塊11c皆設定為具有一第二顯示屬性(如：固定顯示屬性)，使得該子區塊11a與該子區塊11c的邏輯單位長度為固定，且不會根據顯示該可編程的使用者介面100的一顯示器之長度大小而適應性地改變。於一其他實施例中，該設定模組18更將該子區塊11a或該子區塊11c設定為具有一第三顯示屬性(如：可延伸顯示屬性)，使得該子區塊11a或該子區塊11c的邏輯單位長度會根據顯示該可編程的使用者介面100的該顯示器之長度大小而適應性地改變。
於步驟S410中，該描述碼產生模組22根據該第一顯示屬性(即該可延伸顯示屬性)，產生對應於該子區塊11b的一第一描述碼。於另一實施例中，該描述碼產生模組22更根據該第二顯示屬性，產生對應於該子區塊11a與該子區塊11c的一第二描述碼。於一其他實施例中，該描述碼產生模組22更根據該第三顯示屬性，產生對應於該子區塊11a或該子區塊11c的一第三描述碼。
本揭露之另一實施例揭示了一種非暫態電腦可讀取儲存媒體，該非暫態電腦可讀取儲存媒體用以儲存至少一個程式，該程式包含複數個指令，當該複數個指令由至少一個電腦執行時產生複數個對應於上述實施例中的方法300與方法400之步驟的操作。
如本文中所使用的用語「第一」、「第二」、「第三」等並非意味著元件或步驟間之順序。簡而言之，在本說明書及後附申請專利範圍中使用諸如「第一」、「第二」、「第三」等的指稱僅作為不同元件或不同步驟的參考用詞，並非用以限定任何功能或限制時間上的順序。
雖然本揭露已以實施例揭露如上，然其並非用以限定本揭露，任何所屬技術領域中具有通常知識者，在不脫離本揭露的精神和範圍內，當可作些許的更動與潤飾，故本揭露的保護範圍當視後附的申請專利範圍所界定者為準。
10:系統
12:顯示模組
14:群組模組
16:切割模組
18:設定模組
20~20i:偵測模組
22:描述碼產生模組
24:調整模組
26:比較模組

Claims (34)

  1. 一種產生使用者介面的描述碼之方法，包括： 顯示一可編程的使用者介面，該可編程的使用者介面具有一第一物件及一第二物件； 將該第一物件與該第二物件組成一群組，並對該群組形成一群組區塊，其中該第一物件與該第二物件位於該群組區塊內； 將該群組區塊切割成一第一子區塊與一第二子區塊，其中該第一物件位於該第一子區塊內，且該第二物件位於該第二子區塊內； 將該第一子區塊設定為具有一第一顯示屬性； 顯示一第一屬性元件於該可編程的使用者介面上，其中該第一屬性元件呈現一第一顯示狀態，用以表示該第一顯示屬性； 偵測該第一屬性元件是否被選擇； 當偵測到該第一屬性元件被選擇時，將該第一子區塊的第一顯示屬性改變成一第二顯示屬性，並將該第一屬性元件所呈現的該第一顯示狀態改變成一第二顯示狀態，其中該第二顯示狀態係用以表示該第二顯示屬性；以及 根據該第二顯示屬性，產生對應於該第一子區塊的一第一描述碼。
  2. 根據申請專利範圍第1項的方法，其中將該群組區塊切割成該第一子區塊與該第二子區塊之步驟更包括： 偵測該第一物件與該第二物件間是否存在一間隔，其中該間隔由該第一物件的一第一邊緣與該第二物件的一第二邊緣所界定；及 當偵測到該第一物件與該第二物件間存在該間隔時，沿著位於該間隔中的至少一路徑，將該群組區塊切割成該第一子區塊與該第二子區塊。
  3. 根據申請專利範圍第2項的方法，其中該至少一路徑包括一第一路徑與一第二路徑，該第一路徑鄰近於該第一物件的第一邊緣，該第二路徑鄰近於該第二物件的第二邊緣，及其中將該群組區塊切割成該第一子區塊與該第二子區塊之步驟更包括： 沿著該第一路徑與該第二路徑，將該群組區塊切割成該第一子區塊、該第二子區塊及一第三子區塊，其中該第三子區塊位於該第一子區塊與該第二子區塊之間。
  4. 根據申請專利範圍第1項的方法，其中將該群組區塊切割成該第一子區塊與該第二子區塊之步驟更包括： 偵測該第一物件與該第二物件間是否存在一間隔，其中該間隔由該第一物件的一第一邊緣與該第二物件的一第二邊緣所界定；及 當偵測到該第一物件與該第二物件間存在該間隔時，顯示一確認鍵； 偵測該確認鍵是否被選擇； 當偵測到該確認鍵被選擇時，沿著位於該間隔中的至少一路徑，將該群組區塊切割成該第一子區塊與該第二子區塊。
  5. 根據申請專利範圍第1項的方法，其中當該第一子區塊設定為具有該第一顯示屬性時，該第一子區塊的邏輯單位長度為固定，及當該第一子區塊的第一顯示屬性改變成該第二顯示屬性時，該第一子區塊的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變；或 當該第一子區塊設定為具有該第一顯示屬性時，該第一子區塊的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變，及當該第一子區塊的第一顯示屬性改變成該第二顯示屬性時，該第一子區塊的邏輯單位長度為固定。
  6. 根據申請專利範圍第5項的方法，其中顯示該第一屬性元件之步驟更包括： 顯示該第一屬性元件於該第一子區塊上，其中該第一顯示狀態為一第一顏色，該第二顯示狀態為一第二顏色。
  7. 根據申請專利範圍第5項的方法，更包括： 將該第二子區塊設定為具有一第三顯示屬性； 顯示一第二屬性元件於該使用者介面上，其中該第二屬性元件呈現一第三顯示狀態，用以表示該第三顯示屬性； 偵測該第二屬性元件是否被選擇； 當偵測到該第二屬性元件被選擇時，將該第二子區塊的第三顯示屬性改變成一第四顯示屬性，並將該第二屬性元件所呈現的該第三顯示狀態改變成一第四顯示狀態，其中該第四顯示狀態係用以表示該第四顯示屬性；以及 根據該第四顯示屬性，產生對應於該第二子區塊之一第二描述碼。
  8. 根據申請專利範圍第7項的方法，其中顯示該第二屬性元件之步驟更包括： 顯示該第二屬性元件於該第二子區塊上，其中該第一顯示狀態為一第一顏色，該第二顯示狀態為一第二顏色，該第三顯示狀態為該第一顏色與該第二顏色中之一者，該第四顯示狀態為該第一顏色與該第二顏色中之另一者。
  9. 根據申請專利範圍第1項的方法，其中該可編程的使用者介面更具有一第三物件，該第三物件具有一外圍輪廓，且該方法更包括： 偵測該群組區塊是否位於該第三物件的外圍輪廓所圍成的一區域內；及 當偵測到該群組區塊位於該第三物件的外圍輪廓所圍成的該區域內時，將該群組區塊與該第三物件組成另一群組。
  10. 根據申請專利範圍第1項的方法，其中該可編程的使用者介面更具有一第三物件，該第一物件具有一外圍輪廓，且該方法更包括： 偵測該第三物件是否位於該第一物件的外圍輪廓所圍成的一區域內；及 當偵測到該第三物件位於該第一物件的外圍輪廓所圍成的該區域內時，將該第三物件與該第一物件組成另一群組。
  11. 根據申請專利範圍第1項的方法，其中該群組區塊具有一外框，且該方法更包括： 將該外框之一第一側邊與該第一物件之一第一側邊之間的一第一距離設定為具有一第五顯示屬性； 偵測該第一物件是否被選擇； 當偵測到該第一物件被選擇時，顯示一第二屬性元件於該外框之第一側邊與該第一物件之第一側邊之間，其中該第二屬性元件呈現一第五顯示狀態，用以表示該第五顯示屬性； 偵測該第二屬性元件是否被選擇； 當偵測到該第二屬性元件被選擇時，將該第一距離的第五顯示屬性改變成一第六顯示屬性，並將該第二屬性元件所呈現的該第五顯示狀態改變成一第六顯示狀態，其中該第六顯示狀態係用以表示該第六顯示屬性；以及 根據該第六顯示屬性，產生對應於該第一距離的一第二描述碼。
  12. 根據申請專利範圍第11項的方法，其中該第五顯示狀態為一第一顏色，該第六顯示狀態為一第二顏色，更包括： 顯示該可編程的使用者介面於一第一顯示區域； 顯示一圖標於一第二顯示區域，其中該圖標對應於該第二屬性元件且呈現一第三顏色，該第三顏色大致上相同於該第一顏色；及 當該第二屬性元件所呈現的該第三顯示狀態改變成該第四顯示狀態時，該圖標將對應地由該第三顏色改變成一第四顏色，其中該第四顏色大致上相同於該第二顏色。
  13. 根據申請專利範圍第11項的方法，其中當該第一距離設定為具有該第五顯示屬性時，該第一距離的邏輯單位長度為固定，及當該第一距離的第五顯示屬性改變成該第六顯示屬性時，該第一距離的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變；或 當該第一距離設定為具有該第五顯示屬性時，該第一距離的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變，及當該第一距離的第五顯示屬性改變成該第六顯示屬性時，該第一距離的邏輯單位長度為固定。
  14. 根據申請專利範圍第13項的方法，更包括： 將該第一物件之該第一側邊與該第一物件之一第二側邊之間的一第二距離設定為具有一第七顯示屬性； 當偵測到該第一物件被選擇時，更顯示一第三屬性元件於該第一物件之第一側邊與該第一物件之第二側邊之間，其中該第三屬性元件呈現一第七顯示狀態，用以表示該第七顯示屬性； 偵測該第三屬性元件是否被選擇； 當偵測到該第三屬性元件被選擇時，將該第二距離的第七顯示屬性改變成一第八顯示屬性，並將該第三屬性元件所呈現的該第七顯示狀態改變成一第八顯示狀態，其中該第八顯示狀態係用以表示該第八顯示屬性；以及 根據該第八顯示屬性，產生對應於該第二距離的一第三描述碼。
  15. 根據申請專利範圍第14項的方法，其中該第七顯示狀態為一第一顏色，該第八顯示狀態為一第二顏色，更包括： 顯示該可編程的使用者介面於一第一顯示區域； 顯示一圖標於一第二顯示區域，其中該圖標對應於該第三屬性元件，其中該圖標呈現一第三顏色，該第三顏色大致上相同於該第一顏色；及 當該第三屬性元件所呈現的該第七顯示狀態改變成該第八顯示狀態時，該圖標將對應地由該第三顏色改變成一第四顏色，其中該第四顏色大致上相同於該第二顏色。
  16. 根據申請專利範圍第14項的方法，其中當該第二距離設定為具有該第七顯示屬性時，該第二距離的邏輯單位長度為固定，及當該第二距離的第七顯示屬性改變成該第八顯示屬性時，該第二距離的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變；或 當該第二距離設定為具有該第七顯示屬性時，該第二距離的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變，及當該第二距離的第七顯示屬性改變成該第八顯示屬性時，該第二距離的邏輯單位長度為固定。
  17. 根據申請專利範圍第1項的方法，其中該第一物件由一第三物件與一第四物件組成，且該方法更包括： 偵測該第三物件是否重疊於該第四物件；及 當偵測到該第三物件重疊於該第四物件時，將該第三物件與該第四物件群組成該第一物件。
  18. 根據申請專利範圍第1項的方法，其中該可編程的使用者介面更具有一第三物件，且該方法更包括： 偵測該第三物件是否被選擇； 當偵測到該第三物件被選擇時，將該第一物件與該第二物件隱藏。
  19. 根據申請專利範圍第1項的方法，其中該第一物件為一字串，且該方法更包括： 根據該字串之內容屬性，調整該字串之長度； 偵測該經調整的字串之長度是否與該第二物件重疊；及 當偵測到該經調整長度後的字串重疊於該第二物件時，顯示一對應的提示訊息。
  20. 根據申請專利範圍第1項的方法，更包括： 將未經切割步驟之可編程的使用者介面所對應的一影像與經切割步驟之可編程的使用者介面所對應的一影像重疊，用以比較該兩影像間的差異性。
  21. 根據申請專利範圍第1項的方法，其中該第一物件與該第二物件間存在一間隔，該方法更包括： 將該群組區塊切割成該第一子區塊、該第二子區塊與一第三子區塊，其中該間隔位於該第三子區塊內； 將該第三子區塊設定為具有一第三顯示屬性，使得該第三子區塊的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變；以及 根據該第三顯示屬性，產生對應於該第三子區塊的一第二描述碼。
  22. 根據申請專利範圍第21項的方法，其中該間隔由該第一物件的一邊緣與該第二物件的一邊緣所界定，且將該群組區塊切割成該第一子區塊、該第二子區塊與該第三子區塊之步驟更包括： 偵測該間隔之寬度是否大於一預設值；及 當該間隔之寬度大於該預設值時，沿著位於該間隔中的一第一路徑與一第二路徑，將該群組區塊切割成該第一子區塊、該第二子區塊與該第三子區塊，其中該第一路徑鄰近於該第一物件的該邊緣，且該第二路徑鄰近於該第二物件的該邊緣。
  23. 一種產生使用者介面的描述碼之系統，包括： 一顯示模組，用以顯示一可編程的使用者介面，該可編程的使用者介面具有一第一物件及一第二物件； 一群組模組，用以將該第一物件與該第二物件組成一群組，並對該群組形成一群組區塊，其中該第一物件與該第二物件位於該群組區塊內； 一切割模組，用以將該群組區塊切割成一第一子區塊與一第二子區塊，其中該第一物件位於該第一子區塊內，且該第二物件位於該第二子區塊內； 一設定模組，用以將該第一子區塊設定為具有一第一顯示屬性，其中該顯示模組更用以顯示一第一屬性元件於該可編程的使用者介面上，並將該第一屬性元件呈現一第一顯示狀態，用以表示該第一顯示屬性； 一第一偵測模組，用以偵測該第一屬性元件是否被選擇，其中當該第一偵測模組偵測到該第一屬性元件被選擇時，該設定模組將該第一子區塊的第一顯示屬性改變成一第二顯示屬性，且該顯示模組將該第一屬性元件所呈現的該第一顯示狀態改變成一第二顯示狀態，其中該第二顯示狀態係用以表示該第二顯示屬性；以及 一描述碼產生模組，用以根據該第二顯示屬性，產生對應於該第一子區塊的一第一描述碼。
  24. 根據申請專利範圍第23項的系統，更包括： 一第二偵測模組，用以偵測該第一物件與該第二物件間是否存在一間隔，其中該間隔由該第一物件的一邊緣與該第二物件的一邊緣所界定； 其中當該第二偵測模組偵測到該第一物件與該第二物件間存在該間隔時，該切割模組更用以沿著位於該間隔中的至少一路徑，將該群組區塊切割成該第一子區塊與該第二子區塊。
  25. 根據申請專利範圍第24項的系統，其中該群組區塊具有一外框，該設定模組更用以將該外框之一第一側邊與該第一物件之一第一側邊之間的一第一距離設定為具有一第三顯示屬性，該系統更包括： 一第三偵測模組，用以偵測該第一物件是否被選擇，其中當該第三偵測模組偵測到該第一物件被選擇時，該顯示模組更用以顯示一第二屬性元件於該外框之第一側邊與該第一物件之第一側邊之間，並將該第二屬性元件呈現一第三顯示狀態，用以表示該第三顯示屬性；以及 一第四偵測模組，用以偵測該第二屬性元件是否被選擇，其中當該第四偵測模組偵測到該第二屬性元件被選擇時，該設定模組將該第一距離的第三顯示屬性改變成一第四顯示屬性，且該顯示模組將該第二屬性元件所呈現的該第三顯示狀態改變成一第四顯示狀態，其中該第四顯示狀態係用以表示該第四顯示屬性； 其中該描述碼產生模組更用以根據該第四顯示屬性，產生對應於該第一距離的一第二描述碼。
  26. 根據申請專利範圍第25項的系統，其中該第三顯示狀態為一第一顏色，且該第四顯示狀態為一第二顏色；及 該顯示模組更用以顯示該可編程的使用者介面於一第一顯示區域； 該顯示模組更用以顯示一圖標於一第二顯示區域，並將該圖標呈現一第三顏色，其中該圖標對應於該第二屬性元件，且該第三顏色大致上相同於該第一顏色；及 當該顯示模組將該第二屬性元件所呈現的該第三顯示狀態改變成該第四顯示狀態時，該顯示模組更用以將該圖標對應地由該第三顏色改變成一第四顏色，其中該第四顏色大致上相同於該第二顏色。
  27. 根據申請專利範圍第23項的系統，其中該第一物件與該第二物件間存在一間隔，且該切割模組更用以將該群組區塊切割成該第一子區塊、該第二子區塊與一第三子區塊，該間隔位於該第三子區塊內；該設定模組更用以將該第三子區塊設定為具有一第三顯示屬性，使得該第三子區塊的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變；及該描述碼產生模組更用以根據該第三顯示屬性，產生對應於該第三子區塊的一第二描述碼。
  28. 根據申請專利範圍第27項的系統，其中該間隔由該第一物件的一邊緣與該第二物件的一邊緣所界定，且該系統更包括： 一第二偵測模組，用以偵測該間隔之寬度是否大於一預設值； 其中當該第二偵測模組偵測到該間隔之寬度大於該預設值時，該切割模組沿著位於該間隔中的一第一路徑與一第二路徑，將該群組區塊切割成該第一子區塊、該第二子區塊與該第三子區塊，其中該第一路徑鄰近於該第一物件的該邊緣，且該第二路徑鄰近於該第二物件的該邊緣。
  29. 一種非暫態電腦可讀取儲存媒體，用以儲存至少一個程式，該程式包含複數個指令，當該複數個指令由至少一個電腦執行時產生複數個操作，該複數個操作包括： 顯示一可編程的使用者介面，該可編程的使用者介面具有一第一物件及一第二物件； 將該第一物件與該第二物件組成一群組，並對該群組形成一群組區塊，其中該第一物件與該第二物件位於該群組區塊內； 將該群組區塊切割成一第一子區塊與一第二子區塊，其中該第一物件位於該第一子區塊內，且該第二物件位於該第二子區塊內； 將該群組區塊切割成一第一子區塊與一第二子區塊，其中該第一物件位於該第一子區塊內，且該第二物件位於該第二子區塊內； 將該第一子區塊設定為具有一第一顯示屬性； 顯示一第一屬性元件於該可編程的使用者介面上，其中該第一屬性元件呈現一第一顯示狀態，用以表示該第一顯示屬性； 偵測該第一屬性元件是否被選擇； 當偵測到該第一屬性元件被選擇時，將該第一子區塊的第一顯示屬性改變成一第二顯示屬性，並將該第一屬性元件所呈現的該第一顯示狀態改變成一第二顯示狀態，其中該第二顯示狀態係用以表示該第二顯示屬性；以及 根據該第二顯示屬性，產生對應於該第一子區塊的一第一描述碼。
  30. 根據申請專利範圍第29項的非暫態電腦可讀取儲存媒體，其中將該群組區塊切割成該第一子區塊與該第二子區塊之操作更包括： 偵測該第一物件與該第二物件間是否存在一間隔，其中該間隔由該第一物件的一邊緣與該第二物件的一邊緣所界定；及 當偵測到該第一物件與該第二物件間存在該間隔時，沿著位於該間隔中的至少一路徑，將該群組區塊切割成該第一子區塊與該第二子區塊。
  31. 根據申請專利範圍第30項的非暫態電腦可讀取儲存媒體，其中該群組區塊具有一外框，且該複數個操作更包括： 將該外框之一第一側邊與該第一物件之一第一側邊之間的一第一距離設定為具有一第三顯示屬性； 偵測該第一物件是否被選擇； 當偵測到該第一物件被選擇時，顯示一第二屬性元件於該外框之第一側邊與該第一物件之第一側邊之間，其中該第二屬性元件呈現一第三顯示狀態，用以表示該第三顯示屬性； 偵測該第二屬性元件是否被選擇； 當偵測到該第二屬性元件被選擇時，將該第一距離的第三顯示屬性改變成一第四顯示屬性，並將該第二屬性元件所呈現的該第三顯示狀態改變成一第四顯示狀態，其中該第四顯示狀態係用以表示該第四顯示屬性；以及 根據該第四顯示屬性，產生對應於該第一距離的一第二描述碼。
  32. 根據申請專利範圍第31項的非暫態電腦可讀取儲存媒體，其中該第三顯示狀態為一第一顏色，該第四顯示狀態為一第二顏色，且該複數個操作更包括： 顯示該可編程的使用者介面於一第一顯示區域； 顯示一圖標於一第二顯示區域，其中該圖標對應於該第二屬性元件且呈現一第三顏色，該第三顏色大致上相同於該第一顏色；及 當該第二屬性元件所呈現的該第三顯示狀態改變成該第四顯示狀態時，該圖標將對應地由該第三顏色改變成一第四顏色，其中該第四顏色大致上相同於該第二顏色。
  33. 根據申請專利範圍第29項的非暫態電腦可讀取儲存媒體，其中該第一物件與該第二物件間存在一間隔，且該複數個操作更包括： 將該群組區塊切割成該第一子區塊、該第二子區塊與一第三子區塊，其中該間隔位於該第三子區塊內； 將該第三子區塊設定為具有一第三顯示屬性，使得該第三子區塊的邏輯單位長度會根據顯示該可編程的使用者介面的一顯示器之長度大小而適應性地改變；以及 根據該第三顯示屬性，產生對應於該第三子區塊的一第二描述碼。
  34. 根據申請專利範圍第33項的非暫態電腦可讀取儲存媒體，其中該間隔由該第一物件的一邊緣與該第二物件的一邊緣所界定，且將該群組區塊切割成該第一子區塊、該第二子區塊與該第三子區塊之操作更包括： 偵測該間隔之寬度是否大於一預設值；及 當該間隔之寬度大於該預設值時，沿著位於該間隔中的一第一路徑與一第二路徑，將該群組區塊切割成該第一子區塊、該第二子區塊與該第三子區塊，其中該第一路徑鄰近於該第一物件的該邊緣，且該第二路徑鄰近於該第二物件的該邊緣。
TW109128815A 2020-08-24 2020-08-24 產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體 TWI776215B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
TW109128815A TWI776215B (zh) 2020-08-24 2020-08-24 產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體
US17/320,411 US11704097B2 (en) 2020-08-24 2021-05-14 Method, system and non-transitory computer-readable storage medium for generating description code of user interface
US18/199,994 US20230289152A1 (en) 2020-08-24 2023-05-22 Method, system and non-transitory computer-readable storage medium for generating description code of user interface

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
TW109128815A TWI776215B (zh) 2020-08-24 2020-08-24 產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體

Publications (2)

Publication Number Publication Date
TW202209087A TW202209087A (zh) 2022-03-01
TWI776215B true TWI776215B (zh) 2022-09-01

Family

ID=80270763

Family Applications (1)

Application Number Title Priority Date Filing Date
TW109128815A TWI776215B (zh) 2020-08-24 2020-08-24 產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體

Country Status (2)

Country Link
US (2) US11704097B2 (zh)
TW (1) TWI776215B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2022164259A (ja) * 2021-04-16 2022-10-27 キヤノン株式会社 情報処理装置、制御方法、およびプログラム
CN114675879B (zh) * 2022-03-04 2022-10-21 慧之安信息技术股份有限公司 基于Cordova与Vue的跨平台应用开发方法
US20240168617A1 (en) * 2022-11-23 2024-05-23 Adobe Inc. Detecting and modifying object attributes

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6819785B1 (en) * 1999-08-09 2004-11-16 Wake Forest University Health Sciences Image reporting method and system
TW200841737A (en) * 2006-09-22 2008-10-16 Objectvideo Inc Video analytics for banking business process monitoring
TWI366105B (en) * 2003-10-24 2012-06-11 Microsoft Corp Programming interface for a computer platform and system and method for programming and application
TWI407425B (zh) * 2007-06-21 2013-09-01 Realtek Semiconductor Corp 產生使用者介面相關之一物件屬性的方法
TWI420338B (zh) * 2008-03-02 2013-12-21 Yahoo Inc 安全之瀏覽器基礎應用程式

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7362311B2 (en) * 2003-04-07 2008-04-22 Microsoft Corporation Single column layout for content pages
JP4012140B2 (ja) * 2003-11-20 2007-11-21 キヤノン株式会社 画像処理装置、情報処理装置及びそれらの制御方法、プログラム
JP2008269363A (ja) * 2007-04-20 2008-11-06 Hitachi Ltd 記憶制御装置および記憶制御方法
JP2012003580A (ja) * 2010-06-18 2012-01-05 Canon Inc 情報処理装置、情報処理装置の制御方法、及びコンピュータプログラム

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6819785B1 (en) * 1999-08-09 2004-11-16 Wake Forest University Health Sciences Image reporting method and system
TWI366105B (en) * 2003-10-24 2012-06-11 Microsoft Corp Programming interface for a computer platform and system and method for programming and application
TW200841737A (en) * 2006-09-22 2008-10-16 Objectvideo Inc Video analytics for banking business process monitoring
TWI407425B (zh) * 2007-06-21 2013-09-01 Realtek Semiconductor Corp 產生使用者介面相關之一物件屬性的方法
TWI420338B (zh) * 2008-03-02 2013-12-21 Yahoo Inc 安全之瀏覽器基礎應用程式

Also Published As

Publication number Publication date
US11704097B2 (en) 2023-07-18
TW202209087A (zh) 2022-03-01
US20220058001A1 (en) 2022-02-24
US20230289152A1 (en) 2023-09-14

Similar Documents

Publication Publication Date Title
TWI776215B (zh) 產生使用者介面的描述碼之方法、系統及非暫態電腦可讀取儲存媒體
US20140250373A1 (en) Systems and methods for a fold preview
US20180059919A1 (en) Responsive Design Controls
JP5527521B2 (ja) 階層構造表示装置、階層構造表示方法および階層構造表示制御プログラム
KR20080098014A (ko) 전자 문서 내의 선택된 객체의 하이라이팅 방법 및 컴퓨터판독 가능 매체
US20100033498A1 (en) Electronic apparatus having display device
JPWO2008044321A1 (ja) 操作支援コンピュータプログラム、操作支援コンピュータシステム
JPWO2004079708A1 (ja) 画像表示方法、画像表示プログラム、及び情報機器
JP2012008686A (ja) 情報処理装置および方法、並びにプログラム
CN103246461A (zh) 一种触摸屏显示方法及应用该方法的电子设备
JP2009271777A (ja) 情報処理装置、テキスト表示プログラム、およびテキスト表示方法
US20110289435A1 (en) Display apparatus displaying web page and displaying method of the same
CN105335154A (zh) 一种面向多终端的自适应网页布局方法及装置
JP2009282827A (ja) 表示装置
JPWO2016157540A1 (ja) オブジェクト調整ツールおよびオブジェクト調整プログラム
KR101601691B1 (ko) 전자문서 상에서 레이어를 이용하는 방법 및 그 장치
JP2009087270A (ja) 画像処理装置及びプログラム
KR100953586B1 (ko) 워드프로세서 기반의 원고 교정기능을 전자화 하는 방법과이 방법을 구현한 프로그램을 기록한 컴퓨터 가독형기록매체
CN112000328B (zh) 一种页面可视化编辑方法、装置及设备
JP5268114B2 (ja) 情報処理装置、テキスト表示プログラム、およびテキスト表示方法
KR20160053545A (ko) 전자 문서 편집기에서의 객체에 대한 편집 명령 입력 방법
US11256411B2 (en) Interface, character input guide method, and program
JP2005094717A (ja) 地図処理システム
KR101522200B1 (ko) 일 이상의 연산 결과 영역에 연산 결과를 표시하는 전자 문서에 표시하는 방법 및 장치
US11650769B2 (en) Automatic print bleed correction systems and methods

Legal Events

Date Code Title Description
GD4A Issue of patent certificate for granted invention patent