TW202347108A - 用以編輯介面工具集之方法及電子裝置 - Google Patents

用以編輯介面工具集之方法及電子裝置 Download PDF

Info

Publication number
TW202347108A
TW202347108A TW112114162A TW112114162A TW202347108A TW 202347108 A TW202347108 A TW 202347108A TW 112114162 A TW112114162 A TW 112114162A TW 112114162 A TW112114162 A TW 112114162A TW 202347108 A TW202347108 A TW 202347108A
Authority
TW
Taiwan
Prior art keywords
item
mentioned
template
tool set
interface tool
Prior art date
Application number
TW112114162A
Other languages
English (en)
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 韓商韓領有限公司
Publication of TW202347108A publication Critical patent/TW202347108A/zh

Links

Classifications

    • 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/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/04817—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 using icons
    • 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
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • 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
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/109—Font handling; Temporal or kinetic typography
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • 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/34—Graphical or visual programming
    • 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
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)
  • Telephone Function (AREA)

Abstract

本發明之各種實施例之電子裝置可包括與終端裝置通信連接之一個以上之通信電路、一個以上之資料庫、一個以上之輸入裝置、及一個以上之處理器。各種實施例之一個以上之處理器能夠以如下方式構成：生成用以生成介面工具集之模板之基底模板，設定預先儲存於資料庫中之複數個UI項目中之包括於基底模板之至少一個UI項目，設定包括於至少一個UI項目之資料項目，將至少一個UI項目及資料項目結合至基底模板，藉此生成介面工具集之模板，將介面工具集之模板傳輸至終端裝置。

Description

用以編輯介面工具集之方法及電子裝置
本發明係關於一種用以編輯介面工具集之方法及電子裝置。
先前，於欲簡單地編輯顯示於應用程式之介面工具集之情形時，例如於變更介面工具集中所包括之文本之大小或變更介面工具集內之組件之位置的情形時，亦需修正應用程式。於上述情形時，為了確認及檢查該介面工具集之編輯事項，應用程式需分配於用戶之終端裝置。即，為了編輯介面工具集，需與應用程式之分配週期對應，因此發佈介面工具集需花費較長時間。又，於欲簡單地編輯顯示於網頁(web page)之介面工具集之情形時，亦需於網頁伺服器中修正與欲編輯之介面工具集對應之原始碼。即，為了編輯介面工具集，需修正構成網頁之原始碼，故開發時間較長，需要原始碼之專業知識。
[發明所欲解決之問題]
技術課題可如下：與應用程式之分配無關地僅以生成介面工具集之模板並傳輸之過程來實現介面工具集之編輯事項，藉此對複數個介面工具集實時執行設計實驗。技術課題可如下：於需將UI(User Interface，用戶介面)組件添加至介面工具集之情形時，亦無需分配伺服器而生成介面工具集之模板並傳輸來實現上述情形。 [解決問題之技術手段]
本發明之各種實施例之電子裝置可包括：與終端裝置通信連接之一個以上之通信電路，一個以上之資料庫，一個以上之輸入裝置、及一個以上之處理器。各種實施例之一個以上之處理器能夠以如下方式構成：生成用以生成介面工具集之模板之基底模板，設定預先儲存於上述一個以上之資料庫之複數個UI項目中之包括於上述基底模板的至少一個UI項目，設定包括於上述至少一個UI項目之資料項目，將上述至少一個UI項目及上述資料項目結合至上述基底模板，藉此生成上述介面工具集之模板，將上述介面工具集之模板傳輸至上述終端裝置。
根據各種實施例，上述介面工具集之模板可包括輪播模板、上端網頁標識模板、中端網頁標識模板及下端網頁標識模板中之至少一者。
根據各種實施例，上述介面工具集之模板可為具有Json(JavaScript Object Notation，JavaScript對象標記)格式、XML(Extensible Markup Language，可延伸性標記語言)格式、HTML(Hyper Text Markup Language，超文字標記語言)格式、SGML(Standard Generalized Markup Language，標準通用標記語言)格式、RDF(Resource Description Framework，資源描述框架)格式及YAML(Yet Another Markup Language，仍是一種標記語言)格式中之一者之模板。
各種實施例之一個以上之處理器能夠以如下方式構成：選擇上述複數個UI項目中之包括於上述介面工具集之模板之上位構造的至少一個上位UI項目，選擇上述複數個UI項目中之包括於上述至少一個上位UI項目之至少一個下位UI項目，設定上述至少一個上位UI項目及上述至少一個下位UI項目之屬性。
根據各種實施例，上述複數個UI項目可包括水平堆疊容器、垂直堆疊容器、重疊堆疊容器、影像、標籤及評分項目中之至少一者。
根據各種實施例，上述至少一個上位UI項目及上述至少一個下位UI項目之屬性可包括UI項目之大小、填充區域、邊距區域、交界線、邊角半徑、文本、背景顏色、值、滾動與否、排列及超連結中之至少一者。
根據各種實施例，上述資料項目可包括預先儲存於上述一個以上之資料庫中之與上述介面工具集相關之資訊。
各種實施例之上述一個以上之處理器能夠以如下方式構成：選擇包括於上述至少一個UI項目之資料項目，自上述一個以上之資料庫提取與所選擇之上述資料項目對應之介面工具集之資訊，將與所提取之上述介面工具集相關之資訊應用於上述至少一個UI項目。
與各種實施例之上述介面工具集相關之資訊可包括與上述介面工具集相關之商品的名稱、價格、評分、折扣資訊、配送資訊、上述商品之影像及超連結中之至少一者。
各種實施例之電子裝置可進而包括顯示器，上述一個以上之處理器能夠以如下方式構成：藉由上述顯示器而顯示展現上述基底模板之當前狀態之預覽畫面。
於本發明之各種實施例之電子裝置中編輯介面工具集之方法包括：生成用以生成上述介面工具集之模板之基底模板之動作；設定上述電子裝置之一個以上之資料庫中預先儲存之複數個UI項目中之包括於上述基底模板之至少一個UI項目的動作；設定包括於上述至少一個UI項目中之資料項目之動作；將上述至少一個UI項目及上述資料項目結合至上述基底模板，藉此生成上述介面工具集之模板之動作；及將上述介面工具集之模板傳輸至終端裝置之動作。
各種實施例之上述介面工具集之模板可包括輪播模板、上端網頁標識模板、中端網頁標識模板及下端網頁標識模板中之至少一者。
各種實施例之上述介面工具集之模板可為具有Json格式、XML格式、HTML格式、SGML格式、RDF格式及YAML格式中之一者之模板。
各種實施例之設定上述至少一個UI項目之動作可包括：選擇上述複數個UI項目中之包括於上述介面工具集之模板之上位構造之至少一個上位UI項目的動作；選擇上述複數個UI項目中之包括於上述至少一個上位UI項目之下位構造之至少一個下位UI項目的動作；及設定上述至少一個上位UI項目與上述至少一個下位UI項目之屬性之動作。
各種實施例之上述複數個UI項目可包括水平堆疊容器、垂直堆疊容器、重疊堆疊容器、影像、標籤及評分項目中之至少一者。
各種實施例之上述至少一個上位UI項目及上述至少一個下位UI項目之屬性可包括UI項目之大小、填充區域、邊距區域、交界線、邊角半徑、文本、背景顏色、值、滾動與否、排列及超連結中之至少一者。
各種實施例之上述資料項目可包括預先儲存於上述一個以上之資料庫中之與上述介面工具集相關之資訊。
各種實施例之設定上述資料項目之動作可包括：選擇包括於上述至少一個UI項目中之資料項目之動作；自上述一個以上之資料庫提取與所選擇之上述資料項目對應之介面工具集之資訊的動作；及將與所提取之上述介面工具集相關之資訊應用於上述至少一個UI項目之動作。
各種實施例之與上述介面工具集相關之資訊可包括：與上述介面工具集相關之商品之名稱、價格、評分、折扣資訊、配送資訊、上述商品之影像及超連結中之至少一者。
各種實施例之編輯介面工具集之方法可進而包括如下動作：藉由上述電子裝置之顯示器而顯示展現上述基底模板之當前狀態之預覽畫面。 [發明之效果]
根據本發明之各種實施例，藉由將複數個UI項目及複數個資料項目定義成可編輯而可將至少一個UI項目及資料項目結合至一個基底模板，因此除開發者以外之普通人(例如，設計師、銷售者)亦可簡單且容易地編輯介面工具集，可利用與介面工具集相關之一個模板來製作於各種操作系統(例如，安卓、iOS)及各種網頁瀏覽器中相容之介面工具集。例如，若實現於特定操作系統中進行動作之用以渲染之SDK(software development kit，軟體開發套件)，則於上述特定操作系統中亦可接收介面工具集之模板而製作介面工具集，因此可擴張至各種操作系統。
根據本發明之各種實施例，可將至少一個UI項目及資料項目結合至一個基底模板，將結合有至少一個UI項目及複數個資料項目之模板傳輸至用戶之各種終端裝置(例如，基於安卓或iOS之終端裝置)，藉此可於各種終端裝置中簡單且容易地確認所編輯之介面工具集。
根據本發明之各種實施例，無需用戶端之或後端之修正，即使不分配應用程式與伺服器，亦可編輯介面工具集。於用戶之終端裝置中，即使不分配應用程式，亦可接收結合有UI項目及資料屬性之模板而利用SDK(software development kit)中定義之剖析規則來渲染至應用程式。
本發明之實施例係以對本發明之技術思想進行說明為目的而例示。本發明之權利範圍並不限定為以下所提出之實施例或該等實施例之具體說明。
若無其他定義，則本發明中使用之所有技術用語及科學用語具有本發明所屬技術領域中具有常識者普遍理解之含義。本發明中使用之所有用語係以更加明確地說明本發明為目的而選擇，並非係為了限制本發明之權利範圍而選擇。
關於本發明中使用之如“包括”、“具備”、“具有”等之表述，除非於包含相應表述之語句或文章中另有提及，否則應理解為具有包含其他實施例之可能性之開放型用語(open-ended terms)。
除非另有提及，否則本發明中描述之單數型表述可包括複數型之含義，這同樣適用於發明申請專利範圍中記載之單數型表述。
本發明中使用之“第1”、“第2”等表述用以相互區分複數個構成要素，並非用以限定該等構成要素之順序或重要度。
本發明中使用之用語“部”係指軟體、或如FPGA(field-programmable gate array，場可程式化閘陣列)、ASIC(application specific integrated circuit，特殊應用積體電路)之硬體構成要素。然而，“部”並不限定於硬體及軟體。“部”可構成為處於可尋址之儲存媒體中，亦可構成為播放一個或一個以上之處理器。因此，作為一例，“部”包括如軟體構成要素、面向對象之軟體構成要素、類構成要素及任務構成要素之構成要素、處理器、函數、屬性、程序、次常式、程式編碼之片段、驅動器、固件、微碼、電路、資料、資料庫、資料構造、表、陣列及變量。構成要素與“部”內提供之功能可由更少數量之構成要素及“部”結合，亦可進而分離成另外之構成要素及“部”。
本發明中使用之所謂“基於～”之表述用以描述包含該表述之語句或文章中描述的對決定、判斷之行為或動作產生影響之一個以上之因素，該表述不排除對決定、判斷行為或動作產生影響之另外之因素。
於本發明中，在提到某個構成要素“連接”或“連結”於其他構成要素之情形時，應理解為上述某個構成要素可直接連接或連結於上述其他構成要素，或者能夠以新的其他構成要素為介質連接或連結於上述其他構成要素。
以下，參照隨附圖式，對本發明之實施例進行說明。於隨附圖式中，對相同或對應之構成要素賦予相同之參照符號。又，於以下實施例之說明中，可省略對相同或對應之構成要素之重複描述。然而，即使省略有關構成要素之描述，亦並不意味此種構成要素不包括於某一實施例中。
圖1係表示本發明之各種實施例之動態地編輯介面工具集之方法的圖。
各種實施例之電子裝置110可生成介面工具集之模板120，可將生成之介面工具集之模板120傳輸至終端裝置130。介面工具集可為顯示於應用程式或網頁且具有特定形式之用戶介面。例如，介面工具集可為顯示特定商品之廣告資訊之廣告項目(advertising item或creative)。介面工具集之模板120可為具有Json格式、XML格式、HTML格式、SGML格式、RDF格式及YAML格式中之一者之模板。於本文中，為了便於說明，將介面工具集假設為廣告項目，將介面工具集之模板120假設為具有Json格式之模板來進行說明，但介面工具集之種類及模板之種類並不限定於此。
各種實施例之電子裝置110可藉由將至少一個UI項目及資料項目結合至基底模板而生成介面工具集之模板120。基底模板可包括與介面工具集相關之資訊。包括與介面工具集相關之各種資訊之基底模板例如可稱為T站模板(Tstation Template)。
各種實施例之介面工具集之模板120可為結合有至少一個UI項目及資料項目之模板。UI項目及資料項目可指以可由用戶編輯之方式定義(或編碼)之構成單元。例如，於本文中，UI項目可指用以構成介面工具集之模板120的版面配置之UI形式的構成單元。例如，於本文中，資料項目可指包括(或應用)於UI項目中之各種資訊。
電子裝置110可基於複數個用戶輸入而生成基底模板，設置預先儲存於一個以上之資料庫之複數個UI項目中之包括於基底模板的至少一個UI項目，設置包括於至少一個UI項目中之資料項目。電子裝置110可藉由將至少一個UI項目及資料項目結合(或系結)至基底模板而生成介面工具集之模板120。介面工具集之模板120例如可稱為系結模板(Binding Template)。於下文中敍述生成介面工具集之模板120之具體方法。
各種實施例之電子裝置110可將介面工具集之模板120傳輸至終端裝置130。終端裝置130可利用SDK131中定義之剖析規則來將結合有至少一個UI項目及複數個資料項目之介面工具集之模板120渲染至應用程式或網頁。即，終端裝置130可利用相應之操作系統之SDK131中定義之剖析規則來渲染介面工具集。例如，使用A操作系統之終端裝置130a可利用A操作系統之SDK131a中定義之剖析規則來將該介面工具集渲染至應用程式，使用B操作系統之終端裝置130b可利用B操作系統之SDK131b中定義之剖析規則來將該介面工具集渲染至應用程式。使用C操作系統之終端裝置130c可利用C操作系統之SDK131c中定義之剖析規則來將該介面工具集渲染至網頁。根據本文所揭示之實施例，即使複數個終端裝置130使用不同之操作系統，亦可利用一個介面工具集之模板120來將介面工具集渲染至各終端裝置130。
圖2係本發明之各種實施例之電子裝置110之方塊圖。參照圖2，各種實施例之電子裝置110可包括處理器111、資料庫113、通信電路115、顯示器117及輸入裝置119。即使省略或替換圖2所示之構成中之一部分，亦不會對實現本文所揭示之各種實施例產生影響。
根據各種實施例，電子裝置110之一個以上之處理器111可為如下構成：可執行與電子裝置110之各構成要素之控制及/或通信相關之運算或資料處理。一個以上之處理器111例如可與電子裝置110之構成要素作動地連接。一個以上之處理器111可將自電子裝置110之其他構成要素接收之命令或資料加載(load)至記憶體(未圖示)，對儲存於記憶體之命令或資料進行處理，儲存結果資料。於本發明中，一個以上之處理器111可表述為處理器111。若未於上下文中明確地進行不同表述，則處理器111之表述可指一個或一個以上之處理器111之集合。各種實施例之記憶體可儲存針對如上所述之處理器111之動作之指令。
各種實施例之電子裝置110之一個以上之資料庫113可儲存各種資訊。一個以上之資料庫113可儲存基底模板或介面工具集之模板。介面工具集之模板例如可包括輪播(carousel)模板或網頁標識(banner)模板。輪播模板作為以輪播方式顯示之模板，可為以滑動選單顯示之方式之模板。網頁標識模板可包括上端(top)網頁標識模板、中端(mid)網頁標識模板及底部(bottom)網頁標識模板中之至少一者。網頁標識形式之模板可藉由變更露出頁面來變更顯示之位置(例如，頂部、中端、底部)。介面工具集之模板可為具有Json格式、XML格式、HTML格式、SGML格式、RDF格式及YAML格式中之一者之模板。
基底模板可包括與介面工具集相關之資訊。即，可包括構成介面工具集之模板所需之各種資訊。與介面工具集相關之資訊例如可包括與介面工具集相關之商品之名稱、價格、評分、折扣資訊、配送資訊、商品之影像及商品之超連結中之至少一者。商品之影像可包括商品之縮略圖影像、至少一個圖標及至少一個識別證影像中之至少一者。至少一個圖標可包括移動圖標、廣告圖標、購物袋圖標及點贊圖標。商品之價格例如可包括商品之成本、商品之折扣價格、商品之最終價格中之至少一者。配送資訊例如可包括到達保證日期、是否免費配送資訊及是否定期配送資訊中之至少一者。
根據各種實施例，電子裝置110之一個以上之通信電路115可與外部裝置(例如，終端裝置130)建立通信通道，與外部裝置收發各種資料。根據各種實施例，一個以上之通信電路115能夠以如下方式構成：包括蜂窩通信模組而連接於蜂窩網路(例如，3G(3rd Generation，第三代移動通信)、LTE(Long Term Evolution，長期演進)、5G(5rd Generation，第五代移動通信)、Wibro(Wireless Broadband，無線寬頻)或Wimax(Worldwide Interoperability for Microwave Access，微波存取全球互通))。根據各種實施例，一個以上之通信電路115可包括短距離通信模組而利用短距離通信(例如，Wi-Fi(Wireless Fidelity，無線保真)、Bluetooth(藍牙)、Bluetooth Low Energy(BLE，藍牙低能量)、UWB(Ultra Wide Band，超寬頻))來與外部裝置進行資料收發，但並不限制於此。於本文中，一個以上之通信電路115可表述為通信電路115。若未於上下文中明確地進行其他表述，則通信電路115之表述可指一個或一個以上之通信電路115之集合。
根據各種實施例，電子裝置110之顯示器117可基於處理器111之控制而顯示各種畫面。顯示器117能夠以辨識各種外部對象之接觸或靠近(例如，懸停)之觸控感測器面板(touch sensor panel，TSP)之形態實現。顯示器117可包括靜電電容感測器，以感知各種外部對象之接觸或靠近。靜電電容感測器可包含複數個電容器(capacitor)，靜電電容感測器可對電容器施加電信號。電容器可與電信號之施加對應地進行充電及放電。若電信號施加至電容器，則可根據電信號之電壓之大小而對電容器充電。顯示器117可基於靜電電容感測器收集之信號而接收觸控輸入。各種實施例之顯示器117可實時顯示可編輯介面工具集之管理工具(management tool或administration tool)。顯示器117可顯示展現基底模板之當前狀態之預覽畫面。例如，顯示器117可於完成介面工具集之模板前，顯示展現當前基底模板之編輯狀態之預覽畫面。
各種實施例之管理工具可為能夠以軟體形態實現之程式。管理工具儲存於記憶體，可由處理器111實行。管理工具可為能夠生成、編輯或刪除顯示於應用程式或網頁之各種介面工具集之程式。管理工具可預先定義複數個UI項目及複數個資料項目，以便用戶可自由地構成介面工具集。因此，使用管理工具之用戶即使缺乏編碼知識，亦可利用複數個UI項目及複數個資料項目來編輯介面工具集。於下文中敍述編輯介面工具集之具體方法。
各種實施例之電子裝置110之一個以上之輸入裝置119可自電子裝置110之外部(例如，用戶)接收使用於電子裝置110之構成要素之命令或資料。一個以上之輸入裝置119例如可包括麥克風、滑鼠或鍵盤。於本發明中，一個以上之輸入裝置119可表述為輸入裝置119。若未於上下文中明確地進行其他表述，則輸入裝置119之表述可指一個或一個以上之輸入裝置119之集合。
圖3係本發明之各種實施例之電子裝置110之動作流程圖。省略與圖1及圖2中說明之內容重複之內容。
參照動作流程圖300，於動作310中，各種實施例之電子裝置110之處理器111可生成用以生成介面工具集之模板之基底模板。基底模板可指結合UI項目及資料項目前之模板。資料庫113可儲存與介面工具集相關之各種資訊。或者，可於基底模板中包括與介面工具集相關之資訊。
於動作320中，各種實施例之處理器111可設定預先儲存於資料庫113之複數個UI項目中之包括於基底模板的至少一個UI項目。例如，處理器111可基於複數個用戶輸入而設定用以構成模板之版面配置之至少一個UI項目。複數個UI項目可包括水平堆疊容器(H_stack)、垂直堆疊容器(V_stack)、重疊堆疊容器(Z_stack)、影像(image)、標籤(label)及評分項目(star rating item)中之至少一者。複數個UI項目可進而包括水平輪播堆疊容器(H_Carousel_stack)或視訊(video)。水平堆疊容器可為水平堆放項目之容器(container)。垂直堆疊容器可為垂直堆放項目之容器。重疊堆疊容器可為能夠彼此重疊而堆放項目之容器。標籤可為能夠包括文本之項目。評分項目可為能夠包括表示商品之評分之評分影像、評分數值或評論數量之項目。水平輪播堆疊容器可為能夠以滑動選單顯示項目之容器。
各種實施例之處理器111可基於複數個用戶輸入而設定至少一個UI項目之屬性。例如，處理器111可基於複數個用戶輸入而設定UI項目之各屬性，亦可設定一部分UI項目之屬性。於該情形時，未直接設定屬性之UI項目之屬性可確定為默認值。UI項目之屬性可包括大小(size)、填充區域(padding)、邊距區域(margin)、交界線(border)、邊角半徑(corner radius)、文本(text)、背景顏色(background color)、文字顏色(text color)、重力(gravity)、值(value)、滾動(scroll)與否、排列(align)及超連結(hyperlink)中之至少一者。UI項目之大小可包括寬度(width)及高度(height)。UI項目之邊距區域可指與構成介面工具集之模板之其他元件之外部空白。UI項目之交界線可指UI項目之交界線。UI項目之填充區域可指UI項目之內部區域至交界線之內部空白。UI項目之滾動與否可指是否能夠橫向滾動或縱向滾動。超連結例如可指藉由選擇(點擊)UI項目而產生之行動(action)。
例如，用戶能夠以如下方式進行選擇：於基底模板中包括一個水平堆疊容器作為UI項目，於上述一個水平堆疊容器內包括一個影像及一個垂直堆疊容器。用戶可藉由輸入裝置119而以如下方式設定：使水平堆疊容器位於基底模板之整個空間，使影像位於上述水平堆疊容器之左側空間，使垂直堆疊容器位於右側空間。於該情形時，處理器111可藉由顯示器117而顯示展現基底模板之當前狀態之預覽畫面。例如，處理器111可藉由預覽畫面而以虛線顯示UI項目之版面配置。即，用戶可選擇包括於基底模板中之至少一個UI項目而添加，以生成介面工具集之模板。
於動作330中，各種實施例之處理器111可設定包括於至少一個UI項目中之資料項目。資料項目可預先儲存於電子裝置110之資料庫113。複數個資料項目可包括介面工具集之資訊。此處，基底模板可為包括與介面工具集相關之資訊之模板。例如，基底模板可為包括與特定商品相關之資訊之T站模板。
根據一實施例，於用戶藉由輸入裝置119而選擇包括於UI項目之特定資料項目之情形時，處理器111可自資料庫113提取與上述特定資料項目對應之介面工具集之資訊，可將提取之資訊包括於上述特定UI項目。例如，於基於用戶輸入而選擇縮略圖影像作為包括於與影像對應之UI項目中之資料項目之情形時，處理器111可自資料庫113之結果提取該商品之縮略圖影像。例如，可提取包括於該商品之基底模板中之該商品之縮略圖影像。此後，處理器111可於與影像對應之UI項目中包括該商品之縮略圖影像。作為相似之方法，於基於用戶輸入而選擇商品之名稱、配送資訊、評分及折扣資訊作為包括於與垂直堆疊容器對應之UI項目中之資料項目之情形時，處理器111可自資料庫113提取該商品之名稱、配送資訊、評分及折扣資訊。例如，可提取包括於該商品之基底模板中之該商品之名稱、配送資訊、評分及折扣資訊。此後，處理器111可在與垂直堆疊容器對應之UI項目中包括該商品之名稱、配送資訊、評分及折扣資訊。由於是垂直堆疊容器，因此可垂直堆放該商品之名稱、配送資訊、評分及折扣資訊。
根據一實施例，用戶亦可藉由輸入裝置119而輸入包括於UI項目之特定資料項目。例如，於選擇定製文本(custom text)作為包括於與垂直堆疊容器對應之UI項目之資料屬性之情形時，用戶可藉由輸入裝置119而直接輸入或修正相應之介面工具集之標題。
根據一實施例，UI項目可包括資料項目，亦可不包括資料項目。例如，用戶能夠以於一部分UI項目中包括資料項目之方式設定，亦能夠以不於另一部分之UI項目中包括資料項目之方式設定。可包括於UI項目中之資料項目可為0個或1個。
於動作340中，各種實施例之處理器111可藉由將至少一個UI項目與資料項目結合至基底模板而生成介面工具集之模板。處理器111可藉由於運行時將資料項目系結至包括於基底模板中之至少一個UI項目而生成介面工具集之模板。於基底模板中結合有至少一個UI項目及資料項目之形態之介面工具集之模板可為系結模板。
於動作350中，各種實施例之處理器111可將介面工具集之模板傳輸至終端裝置。終端裝置可接收結合有至少一個UI項目與資料項目之介面工具集之模板，利用SDK中定義之剖析規則將上述介面工具集之模板渲染至應用程式或網頁。
圖4係本發明之各種實施例之電子裝置之動作流程圖。省略與圖3中說明之內容重複之內容。
參照動作流程圖400，於動作410中，各種實施例之電子裝置110之處理器111可基於用戶輸入而生成基底模板。
於動作420中，各種實施例之處理器111可選擇預先儲存於資料庫113之複數個UI項目中之包括於介面工具集之上位構造的至少一個上位UI項目。為了構成介面工具集之模板之版面配置，可選擇預先儲存之複數個UI項目中之包括於基底模板之至少一個上位UI項目。用戶可藉由輸入裝置119而選擇複數個UI項目中之至少一個上位UI項目。例如，用戶可選擇水平堆疊容器作為UI項目。
於動作430中，各種實施例之處理器111可包括複數個UI項目中之包括於至少一個上位UI項目之至少一個下位UI項目。例如，用戶可選擇影像及垂直堆疊容器作為上位UI項目即包括於水平堆疊容器內部之下位UI項目。
作為與此相似之方式，亦可進而添加包含於垂直堆疊容器之下位UI項目。例如，處理器111可選擇2個標籤、1個影像及1個評分項目作為包括於垂直堆疊容器之下位UI項目。藉由上述方式，處理器111可生成具有層次構造之介面工具集之模板。
於動作440中，各種實施例之處理器111可設定所選擇之上述UI項目之屬性。處理器111可設定所選擇之至少一個上位UI項目及至少一個下位UI項目之屬性。所選擇之UI項目之屬性可包括UI項目之大小、填充區域、邊距區域、交界線、邊角半徑、文本、背景顏色、文字顏色、重力、值、滾動與否、排列及超連結中之至少一者。
根據一實施例，於選擇水平堆疊容器作為上位UI項目，選擇影像及垂直堆疊容器作為下位UI項目之情形時，用戶可於基底模板內設定水平堆疊容器之大小及位置。又，用戶可設定水平堆疊容器內之上述影像之大小及位置。又，用戶可於基底模板內設定垂直堆疊容器之大小、位置及背景顏色。例如，用戶能夠以如下方式設定屬性：選為上位UI項目之水平堆疊容器位於模板之整個區域，選為下位UI項目之影像位於水平堆疊容器之左側區域，同樣地，選為下位UI項目之垂直堆疊容器位於水平堆疊容器之右側區域。用戶未單獨設定之屬性可設定為默認(default)值。即，用戶可不進行複雜之過程而選擇欲包括於基底模板之UI項目，自由地變更所選擇之UI項目之屬性。
於動作450中，各種實施例之處理器111可選擇包括於上述至少一個UI項目之資料項目。處理器111可基於藉由輸入裝置119輸入之用戶輸入而選擇分別包括於至少一個UI項目之資料項目。例如，於選擇影像作為UI項目之情形時，處理器111可選擇包括於影像中之一個資料項目。例如，處理器111可選擇縮略圖影像及品牌標誌中之一者作為包括於影像之資料項目。
於動作460中，各種實施例之處理器111可提取與具有層次構造之複數個UI項目及包括於其中之各資料項目對應之介面工具集相關之資訊。各資料項目可包括與介面工具集相關之商品資訊，可預先儲存於資料庫113。於該情形時，處理器111可自資料庫113提取與所選擇之複數個資料項目分別對應之與介面工具集相關之資訊。例如，處理器111可自資料庫113提取該商品之縮略圖影像，提取該商品之名稱、配送相關識別證、評分影像、評分數值及優惠券識別證。
或者，與介面工具集相關之資訊可包括於基底模板。於該情形時，處理器111亦可自基底模板提取與所選擇之複數個資料項目分別對應之與介面工具集相關之資訊。
於動作470中，各種實施例之處理器111可將提取之與介面工具集相關之資訊應用於至少一個UI項目。例如，處理器111可將提取之縮略圖影像應用於與影像對應之UI項目，將提取之名稱、配送相關識別證、評分影像、評分數值及優惠券識別證應用於包括在垂直堆疊容器之下位UI項目。
於動作480中，各種實施例之處理器111可藉由將至少一個UI項目及資料項目結合至所選擇之基底模板而生成介面工具集之模板。上述介面工具集之模板作為系結模板，可為具有Json格式之模板。介面工具集之模板亦可為除Json格式以外，具有XML格式、HTML格式、SGML格式、RDF格式及YAML格式中之一者之模板。於動作490中，各種實施例之處理器111可將介面工具集之模板傳輸至終端裝置。
圖5、圖6a、圖6b及圖6c係表示本發明之各種實施例之編輯介面工具集之方法的圖。於該等圖中，為了便於說明，將介面工具集假設為顯示特定商品廣告資訊之廣告項目進行說明，但介面工具集之種類並不限定於此。
參考圖5，各種實施例之電子裝置110之處理器111可基於用戶輸入而生成使用於介面工具集之基底模板500。
各種實施例之處理器111可選擇預先儲存之複數個UI項目中之包括於基底模板500之至少一個UI項目，以構成基底模板500之版面配置。例如，如圖5所示，處理器111可基於用戶輸入而優先選擇水平堆疊容器(H_STACK)505作為包覆最外側之UI項目後，選擇影像(IMAGE)510及垂直堆疊容器(V_STACK)520作為上述水平堆疊容器505之下位UI項目。於該情形時，能夠以虛線表示水平堆疊容器505、影像510及垂直堆疊容器520之版面配置。又，處理器111可基於用戶輸入而選擇包括於垂直堆疊容器520之至少一個UI項目。例如，處理器111可選擇2個標籤521、523、1個影像525及一個評分項目527作為包括於垂直堆疊容器520之下位UI項目。垂直堆疊容器520中包括之下位UI項目之版面配置亦能夠以虛線顯示。
各種實施例之處理器111可基於用戶輸入而設定至少一個UI項目之屬性。例如，處理器111能夠以如下方式設定：水平堆疊容器505具有位於基底模板500之整個區域之大小。處理器111能夠以如下方式設定：影像510位於水平堆疊容器505之左側且具有特定大小(即，特定寬度及特定高度)。即，與UI項目對應之影像510為可添加特定商品之影像之UI項目。又，處理器111能夠以垂直堆疊容器520位於水平堆疊容器505之右側之方式設定。例如，處理器111可基於用戶輸入而以如下方式設定：於上述垂直堆疊容器520中包括2個標籤521、523、1個影像525及1個評分項目527，可垂直地堆疊其等來顯示。垂直堆疊容器520中包括之UI項目之數量僅為例示，用戶可自由地進行變更。進而，圖5所示之UI項目之屬性(例如，UI項目之數量、配置位置)僅為例示，用戶當然可自由地進行變更。
參照圖6a及圖6b，各種實施例之處理器111可於至少一個UI項目中設定資料項目。處理器111可自資料庫113提取與屬於複數個UI項目之資料項目分別對應之介面工具集之資訊。於圖6a中，處理器111可基於用戶輸入而以將該商品之縮略圖影像610包括於與影像510對應之UI項目之方式設定。例如，用戶能夠以包括與該商品相關之複數個影像中之縮略圖影像610之方式設定。與該商品相關之複數個影像預先儲存於資料庫113，於資料提取及系結過程中不存於與該資料項目對應之資訊之情形時，可自基底模板去除該UI項目。於該情形時，處理器111可基於選擇該商品之縮略圖影像610之用戶輸入，將自資料庫113提取之該商品之縮略圖影像610添加至與影像510對應之UI項目。
於圖6b中，處理器111可設定包括於垂直堆疊容器620中所包括之複數個下位UI項目之複數個資料項目。用戶能夠以如下方式設定：垂直堆疊容器620中所包括之複數個下位UI項目可顯示商品之名稱621、配送資訊623、折扣資訊625及評分627。例如，處理器111可基於用戶輸入而以如下方式設定：於垂直堆疊容器520之第1標籤521中添加商品之名稱621，於第2標籤523中添加配送資訊623，於影像525中包括折扣資訊625，且於評分項目527中添加評分627。如圖6b所示，於設定為在第1標籤521中添加該商品之名稱之情形時，處理器111可自資料庫113提取該商品之名稱即“酸櫻桃原液果汁”，將其添加至垂直堆疊容器620之第1標籤521。作為同樣之方法，處理器111可自資料庫113提取配送資訊即“預計1/18送達”而添加至垂直堆疊容器620之第2標籤523，可自資料庫113提取優惠券識別證之影像而添加至垂直堆疊容器620之影像525，可自資料庫113提取評分影像及評分數值而添加至垂直堆疊容器620之評分項目527。
參考圖6c，各種實施例之處理器111可藉由將至少一個UI項目及資料項目結合至基底模板而生成介面工具集之模板600。此後，處理器111可將生成之介面工具集之模板600傳輸至終端裝置。
圖7a及圖7b係表示本發明之各種實施例之介面工具集之模板的圖。根據如上所述之方法，用戶可利用複數個UI項目及複數個資料項目來容易且直觀地編輯介面工具集。即，介面工具集之構成可由用戶自由地編輯。根據一實施例，如圖7a所示之模板710，處理器111可基於用戶輸入而選擇中端網頁標識模板作為顯示介面工具集之模板之位置，以於該模板中包括影像、垂直堆疊容器及標籤作為UI項目之方式設定。於該情形時，影像包括該商品之縮略圖影像，垂直堆疊容器中所包括之下位UI項目包括評分、商品之說明及配送資訊，於選擇(點擊)標籤時，可包括移動行為。
根據一實施例，如圖7b所示之模板720，處理器111可基於用戶輸入而選擇上端網頁標識模板作為顯示介面工具集之模板之位置，以於該UI項目中包括影像及水平堆疊容器作為UI項目之方式設定。於該情形時，影像可包括該商品之正面照片，水平堆疊容器可包括商品之名稱。
圖8a及圖8b係表示本發明之各種實施例之管理工具之使用畫面的圖。
參照圖8a，各種實施例之管理工具可動態地編輯介面工具集。各種實施例之處理器111可生成使用於介面工具集之基底模板，設定預先儲存之複數個UI項目中之包括於基底模板之至少一個UI項目，設定包括於至少一個UI項目之資料項目。例如，用戶可選擇顯示於區域810內之複數個UI項目中之欲添加至基底模板之至少一個UI項目。此後，用戶可利用區域820設定包括於所選擇之至少一個UI項目之資料項目。例如，於用戶選擇添加商品之名稱之情形時，處理器111可自資料庫113提取該商品之名稱而應用於該UI項目。根據另一實施例，用戶亦可於選擇在區域820內包括該商品名稱之圖標“PRODUCT_TITLE”後，直接輸入商品之名稱。作為與此相似之方法，可於至少一個UI項目中選擇並應用各種資料項目。圖標830可為用以確認當前模板之編碼之圖標。
參照圖8b，可於管理工具之區域840內顯示完成前之當前模板之層次構造。用戶可藉由層次構造而一眼確認模板之整體構造，亦可直接編輯。可於管理工具之區域850內顯示展現基底模板之當前狀態之預覽畫面(preview)。藉此，可實時確認用戶之模板之版面配置是否以所期望之方式構成。
圖9係本發明之各種實施例之終端裝置130之動作流程圖。
參照動作流程圖900，於動作910中，各種實施例之終端裝置130可自電子裝置110接收介面工具集之模板。接收之介面工具集之模板例如可為具有Json格式之模板。根據另一實施例，介面工具集之模板亦可為除Json格式以外，具有XML格式、HTML格式、SGML格式、RDF格式及YAML格式中之一者之模板。
於動作920中，各種實施例之終端裝置130可利用SDK中定義之剖析規則來將介面工具集之模板渲染至應用程式或網頁。終端裝置130利用該操作系統之SDK中定義之剖析規則來剖析接收之介面工具集之模板，藉此可動態地構成介面工具集之版面配置。於動作930中，各種實施例之終端裝置130可將所渲染之介面工具集顯示於應用程式或網頁。
終端裝置130係與應用程式之分配無關地自電子裝置110接收介面工具集之模板，所接收之模板為複數個資料屬性結合於至少一個UI項目之形態之模板。即，即使不存在用戶端之修正或後端之修正，亦將編輯之介面工具集作為Json格式之模板而傳輸至用戶之終端裝置130，故可實時反應及確認介面工具集之編輯事項。
於圖3、圖4及圖9所示之流程圖中，依序對流程步驟、方法步驟、演算法等進行了說明，但該等流程、方法、演算法能夠以按照任一適合之順序作動之方式構成。換言之，本發明之各種實施例中說明之流程、方法及演算法之步驟無需按照本發明中所描述之順序執行。又，即使將一部分步驟說明為非同步地執行，於其他實施例中，亦可同時執行此種一部分之步驟。又，圖中所述之流程之示例並不意味著排除所示例之流程之其他變化及修正，並不意味著所示例之流程或其步驟中之任一者為本發明之各種實施例中之一個以上之實施例中必需者，且並不意味著所示例之流程為較佳者。
藉由特定實施例而對上述方法進行了說明，但上述方法亦可實現為可由電腦讀取之記錄媒體中之可由電腦讀取之編碼。可由電腦讀取之記錄媒體包括儲存可由電腦讀取之資料之所有類型之記錄裝置。作為可由電腦讀取之記錄媒體之示例，可包括ROM(Read Only Memory，唯讀記憶體)、RAM(Random Access Memory，隨機存取記憶體)、CD-ROM(Compact Disc-Read Only Memory，光碟-唯讀記憶體)、磁帶、軟碟、光資料儲存裝置等。又，可由電腦讀取之記錄媒體分散於藉由網路連接之電腦系統，從而能夠以分散方式儲存可由電腦讀取之編碼並實行。並且，用以實現上述實施例之功能性(functional)程式、編碼及碼段可由本發明所屬技術領域之程式設計師容易地推測出。
110:電子裝置 111:處理器 113:資料庫 115:通信電路 117:顯示器 119:輸入裝置 120:模板 130:終端裝置 130a:使用A操作系統之終端裝置 130b:使用B操作系統之終端裝置 130c:使用C操作系統之終端裝置 131:軟體開發套件 131a:利用A操作系統之SDK 131b:利用B操作系統之SDK 131c:利用C操作系統之SDK 300:動作流程圖 310:動作 320:動作 330:動作 340:動作 350:動作 410:動作 420:動作 430:動作 440:動作 450:動作 460:動作 470:動作 480:動作 490:動作 500:基底模板 505:水平堆疊容器 510:影像 520:垂直堆疊容器 521:第1標籤 523:第2標籤 525:影像 527:評分項目 600:介面工具集之相關模板 610:縮略圖影像 620:垂直堆疊容器 621:商品之名稱 623:配送資訊 625:折扣資訊 627:評分 710:模板 720:模板 810:區域 820:區域 830:圖標 840:管理工具之區域 850:管理工具之區域 900:動作流程圖 910:動作 920:動作 930:動作
圖1係表示本發明之各種實施例之動態地編輯介面工具集之方法的圖。 圖2係本發明之各種實施例之電子裝置之方塊圖。 圖3係本發明之各種實施例之電子裝置之動作流程圖。 圖4係本發明之各種實施例之電子裝置之動作流程圖。 圖5、圖6a、圖6b及圖6c係表示本發明之各種實施例之編輯介面工具集之方法的圖。 圖7a及圖7b係表示本發明之各種實施例之介面工具集之模板的圖。 圖8a及圖8b係表示本發明之各種實施例之管理工具之使用畫面的圖。 圖9係本發明之各種實施例之終端裝置之動作流程圖。
110:電子裝置
120:模板
130:終端裝置
130a:使用A操作系統之終端裝置
130b:使用B操作系統之終端裝置
130c:使用C操作系統之終端裝置
131:SDK
131a:利用A操作系統之SDK
131b:利用B操作系統之SDK
131c:利用C操作系統之SDK

Claims (20)

  1. 一種電子裝置，其係用以編輯介面工具集者，其包括： 之一個以上之通信電路，其與終端裝置通信連接； 一個以上之資料庫； 一個以上之輸入裝置；及 一個以上之處理器；且 上述一個以上之處理器以如下方式構成： 生成用以生成上述介面工具集之模板之基底模板， 設定預先儲存於上述一個以上之資料庫之複數個UI項目中之包括於上述基底模板之至少一個UI項目， 設定包括於上述至少一個UI項目之資料項目， 藉由將上述至少一個UI項目及上述資料項目結合至上述基底模板而生成上述介面工具集之模板， 將上述介面工具集之模板傳輸至上述終端裝置。
  2. 如請求項1之電子裝置，其中上述介面工具集之模板包括輪播模板、上端網頁標識模板、中端網頁標識模板及下端網頁標識模板中之至少一者。
  3. 如請求項2之電子裝置，其中上述介面工具集之模板為具有Json格式、XML格式、HTML格式、SGML格式、RDF格式及YAML格式中之一者之模板。
  4. 如請求項1之電子裝置，其中上述一個以上之處理器以如下方式構成： 選擇上述複數個UI項目中之包括於上述介面工具集之模板之上位構造之至少一個上位UI項目， 選擇上述複數個UI項目中之包括於上述至少一個上位UI項目之至少一個下位UI項目， 設定上述至少一個上位UI項目及上述至少一個下位UI項目之屬性。
  5. 如請求項4之電子裝置，其中上述複數個UI項目包括水平堆疊容器、垂直堆疊容器、重疊堆疊容器、影像、標籤及評分項目中之至少一者。
  6. 如請求項4之電子裝置，其中上述至少一個上位UI項目及上述至少一個下位UI項目之屬性包括UI項目之大小、填充區域、邊距區域、交界線、邊角半徑、文本、背景顏色、文字顏色、值、滾動與否、排列及超連結中之至少一者。
  7. 如請求項1之電子裝置，其中上述資料項目包括預先儲存於上述一個以上之資料庫中之與上述介面工具集相關之資訊。
  8. 如請求項7之電子裝置，其中上述一個以上之處理器以如下方式構成： 選擇包括於上述至少一個UI項目之資料項目， 自上述一個以上之資料庫提取與所選擇之上述資料項目對應之介面工具集之資訊， 將與所提取之上述介面工具集相關之資訊應用於上述至少一個UI項目。
  9. 如請求項7之電子裝置，其中上述介面工具集之相關資訊包括與上述介面工具集相關之商品之名稱、價格、評分、折扣資訊、配送資訊、上述商品之影像及超連結中之至少一者。
  10. 如請求項1之電子裝置，其進而包括顯示器， 上述一個以上之處理器以藉由上述顯示器顯示展現上述基底模板之當前狀態之預覽畫面之方式構成。
  11. 一種方法，其係於電子裝置中編輯介面工具集者，其包括： 生成用以生成上述介面工具集之模板之基底模板之動作； 設定預選儲存於上述電子裝置之一個以上之資料庫之複數個UI項目中之包括於上述基底模板之至少一個UI項目的動作； 設定包括於上述至少一個UI項目之資料項目之動作； 藉由將上述至少一個UI項目及上述資料項目結合至上述基底模板而生成上述介面工具集之模板之動作；及 將上述介面工具集之模板傳輸至終端裝置之動作。
  12. 如請求項11之方法，其中上述介面工具集之模板包括輪播模板、上端網頁標識模板、中端網頁標識模板及下端網頁標識模板中至少一個。
  13. 如請求項12之方法，其中上述介面工具集之模板為具有Json格式、XML格式、HTML格式、SGML格式、RDF格式及YAML格式中之一者之模板。
  14. 如請求項11之方法，其中設定上述至少一個UI項目之動作包括： 選擇上述複數個UI項目中之包括於上述介面工具集之模板之上位構造之至少一個上位UI項目的動作； 選擇上述複數個UI項目中之包括於上述至少一個上位UI項目之下位構造之至少一個下位UI項目的動作；及 設定上述至少一個上位UI項目及上述至少一個下位UI項目之屬性之動作。
  15. 如請求項14之方法，其中上述複數個UI項目包括水平堆疊容器、垂直堆疊容器、重疊堆疊容器、影像、標籤及評分項目中之至少一者。
  16. 如請求項14之方法，其中上述至少一個上位UI項目及上述至少一個下位UI項目之屬性包括UI項目之大小、填充區域、邊距區域、交界線、邊角半徑、文本、背景顏色、文字顏色、值、滾動與否、排列及超連結中之至少一者。
  17. 如請求項11之方法，其中上述資料項目包括預先儲存於上述一個以上之資料庫中之與上述介面工具集相關之資訊。
  18. 如請求項17之方法，其中設定上述資料項目之動作包括： 選擇包括於上述至少一個UI項目之資料項目之動作； 自上述一個以上之資料庫提取與所選擇之上述資料項目對應之介面工具集之資訊的動作；及 將與所提取之上述介面工具集相關之資訊應用於上述至少一個UI項目之動作。
  19. 如請求項17之方法，其中與上述介面工具集相關之資訊包括與上述介面工具集相關之商品之名稱、價格、評分、折扣資訊、配送資訊、上述商品之影像及超連結中之至少一者。
  20. 如請求項11之方法，其進而包括藉由上述電子裝置之顯示器而顯示展現基底模板之當前狀態之預覽畫面的動作。
TW112114162A 2022-05-27 2023-04-17 用以編輯介面工具集之方法及電子裝置 TW202347108A (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
KR1020220065334A KR20230165506A (ko) 2022-05-27 2022-05-27 위젯을 편집하기 위한 방법 및 전자 장치
KR10-2022-0065334 2022-05-27

Publications (1)

Publication Number Publication Date
TW202347108A true TW202347108A (zh) 2023-12-01

Family

ID=88919536

Family Applications (1)

Application Number Title Priority Date Filing Date
TW112114162A TW202347108A (zh) 2022-05-27 2023-04-17 用以編輯介面工具集之方法及電子裝置

Country Status (3)

Country Link
KR (1) KR20230165506A (zh)
TW (1) TW202347108A (zh)
WO (1) WO2023229087A1 (zh)

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102067661B1 (ko) * 2013-05-23 2020-01-17 에스케이플래닛 주식회사 위젯 저작 시스템 및 방법
KR20200088152A (ko) * 2019-01-14 2020-07-22 주식회사위즈위그 템플릿을 이용한 반응형 웹 구현 장치 및 방법
KR102246537B1 (ko) * 2019-03-22 2021-04-30 카페24 주식회사 온라인 쇼핑몰 배너 디자인 자동 생성 방법 및 장치
KR20210130368A (ko) * 2020-04-22 2021-11-01 주식회사 이래요스튜디오 디자인 커스터마이징 장치 및 방법
KR102395026B1 (ko) * 2021-10-22 2022-05-09 쿠팡 주식회사 페이지 정보 제공을 위한 동작 방법 및 이를 지원하는 전자 장치

Also Published As

Publication number Publication date
WO2023229087A1 (ko) 2023-11-30
KR20230165506A (ko) 2023-12-05

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
US10235349B2 (en) Systems and methods for automated content generation
US10832630B2 (en) Providing a display based electronic survey
RU2662632C2 (ru) Представление документов фиксированного формата в формате с измененной компоновкой
US8479092B1 (en) Content layout for an electronic document
CN102073502B (zh) 一种利用web原生布局进行页面渲染的方法及装置
US9111007B2 (en) Adaptive rendering of a webpage on an electronic display device
CN101523336B (zh) 终端装置、内容显示方法
CN101308489B (zh) 电子表单中的声明式尺寸可变列表
CN102819560A (zh) 一种网页中图片的显示方法和装置
JP2013080321A (ja) 情報処理装置および方法、並びにプログラム
CN104216691A (zh) 一种创建应用的方法及装置
CN108268262A (zh) 实现将html转换为微信小程序的方法、装置及系统
WO2004107212A1 (ja) ウェブ対応電子機器装置、ウェブページ処理方法およびプログラム
US20100083129A1 (en) User Interface for Internet Advertisement
CN108681454A (zh) 一种网页可视化构件开发方法
CN105760401A (zh) 基于移动终端的报表数据交互方法和系统
CN107066244B (zh) 一种移动终端应用界面的生成方法和装置
US20100031176A1 (en) Method of defining focus movement order and moving focus, and computer readable recording medium for executing the method
US11205207B2 (en) Automated digital catalog generation
US20160322029A1 (en) Rendering graphical assets natively on multiple screens of electronic devices
CN103049430A (zh) 一种基于idf格式文件的页面显示方法
CN105027028A (zh) 为消费者设备动态地重新布置网络内容
CN113094144A (zh) 显示屏界面控制方法及电子设备
US9024954B2 (en) Displaying partial logos