一種自定義用戶界面的皮膚的方法
2023-05-10 04:36:11
專利名稱：一種自定義用戶界面的皮膚的方法
技術領域：
本發明屬於計算機領域，具體地說，涉及一種自定義用戶界面的皮膚的方法。
背景技術：
如今，在用戶終端上安裝有各種各樣的客戶端軟體，每種客戶端軟體都有各自的用戶界面，通過用戶界面完成客戶端軟體與用戶的交互，可以說用戶界面就是客戶端軟體的門戶。軟體廠家通常都會為用戶界面設計皮膚，皮膚的設計在考慮美觀的同時，還要兼顧用戶界面上皮膚組件擺放布局的合理使用。設計者在設計皮膚時，往往首先會設計出適合用戶界面的皮膚圖片；之後再針對皮膚圖片編寫一個數據文件，這個數據文件中會以代碼或者數據表格的形式記錄在皮膚圖片上所有皮膚組件擺放的位置坐標以及尺寸、形狀的參數，這個數據文件和皮膚圖片可以認為構成了最基本的皮膚。這個數據文件對於普通用戶來說是很難看懂的，但是電腦程式可以識別，要將所屬皮膚加載到用戶界面時，由電腦程式讀取數據文件獲知皮膚圖片上的皮膚組件布局情況，然後在皮膚圖片上進行擺放，最終就形成了用戶界面。可以看到，數據文件的編寫在皮膚設計中是絕對的核心操作，但是其編寫的複雜程度可想而知，而且所編寫的數據非常繁瑣，導致容易出現錯誤，為皮膚設計帶來了很大的難度。從另一方面考慮，如果用戶希望通過自定義的方式來自己設計皮膚，數據文件的編寫這種過於專業性的操作，導致用戶自定義模式基本上不可實現。因此需要提供一種方式，能使皮膚設計變得簡單高效，尤其是使數據文件的編寫這種專業操作變得相對友好、直觀，對於任何人而言，無論是普通用戶還是專業設計人員都不需要專業技術就可以進行皮膚設計，使得用戶自定義的皮膚設計變得可行。
發明內容
有鑑於此，本發明所要解決的技術問題是提供了一種自定義用戶界面的皮膚的方法，可視化標識直接由圖片攜帶，以此替代數據文件，極大地方便了使用，而標註繪製的操作本身相對編寫數據文件更為簡單，顯示效果更為直觀。為了解決上述技術問題，本發明公開了一種自定義用戶界面的皮膚的方法，包括 在皮膚圖片上根據用戶指示通過用於標識皮膚組件位置的可視化標識繪製皮膚的組件布局；識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置。進一步地，所述可視化標識，包括所述皮膚圖片上所佔用面積小於一閾值的顏色和/或透明度；所述可視化標識使用不同的顏色和/或不同的透明度來區別不同的皮膚組件。進一步地，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置的步驟，包括識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件的仿真圖片放置在所述組件布局的相應位置從而生成一效果圖，所述效果圖用於模擬加載了所述皮膚後的用戶界面。進一步地，所述皮膚組件的仿真圖片放置後覆蓋所述皮膚圖片的可視化標識。進一步地，所述可視化標識使用不同的顏色和/或不同的透明度來區別不同的皮膚組件的仿真圖片；讀取所述可視化標識的顏色和/或透明度獲取所繪製的一皮膚組件的位置，依據所述顏色和/或透明度選擇對應的皮膚組件的仿真圖片放置在所述皮膚組件的位置上，並使所述皮膚組件的仿真圖片與其所在位置的形狀和/或大小適應。進一步地，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置的步驟，包括識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置從而生成用戶界面，所述用戶界面為加載所述皮膚圖片後的用戶界面。進一步地，所述皮膚組件放置後覆蓋所述皮膚圖片的可視化標識。進一步地，所述可視化標識使用不同的顏色和/或不同的透明度來區別不同的皮膚組件；讀取所述可視化標識的顏色和/或透明度獲取所繪製的一皮膚組件的位置，依據所述顏色和/或透明度選擇對應的皮膚組件放置在所述皮膚組件的位置上，並使所述皮膚組件與其所在位置的形狀和/或大小適應。進一步地，所述組件布局，包括所述用戶界面上各皮膚組件的擺放位置、以及各皮膚組件的形狀和/或大小。進一步地，所述皮膚圖片為一背景透明的圖片。進一步地，在皮膚圖片上根據用戶指示通過用於標識皮膚組件位置的可視化標識繪製皮膚的組件布局的步驟，包括在所述背景透明的圖片上通過所述可視化標識繪製皮膚的組件布局，從而得到一布局模板，所述布局模板為背景透明、組件布局用可視化標識標出的布局框架圖片。進一步地，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置的步驟，包括依據所述布局框架圖片上的可視化標識將各皮膚組件放置在所述組件布局的相應位置，加載適配的存在畫面設計的皮膚圖片從而將皮膚加載到用戶界面。與現有的方案相比，本發明所獲得的技術效果1)可視化標識直接由圖片攜帶，以此替代數據文件，極大地方便了使用，而可視化標識作為一種信息可讀性極強，對於用戶容易識別，對於電腦程式識別也是非常方便的。2)標註繪製的操作本身相對編寫數據文件更為簡單，顯示效果更為直觀，用戶可以輕鬆了解組件布局在皮膚上的反映。3)應用可視化標識直接在圖片上進行標明，使得繪製組件布局變得簡單直觀，因此便於專業設計，有利於普通用戶的自定義設計。4)所以仿真圖片或者皮膚組件放置後會覆蓋所述皮膚圖片的可視化標識，保證皮膚圖片不會被破壞。5)通過可視化標識生成布局模板的方式可以通過非常形象直觀的手段對組件布局進行標準化加工，使用標準化的模板來對皮膚圖片生成皮膚非常容易操作，而且實現起來簡便高效。
圖1為本發明整體方案的方法流程圖；圖2為本發明細部操作的方法流程圖。
具體實施例方式以下將配合圖式及實施例來詳細說明本發明的實施方式，藉此對本發明如何應用技術手段來解決技術問題並達成技術功效的實現過程能充分理解並據以實施。本發明的核心構思在於使用皮膚圖片攜帶可視化標識，以此替代數據文件。所述可視化標識，包括所述皮膚圖片上所佔用面積小於一閾值的顏色和/或透明度，優選採用皮膚圖片上沒有出現的顏色和/或透明度，即閾值取0。可視化標識更直觀簡單，對於電腦程式和普通用戶來說都是可讀的。具體來說，在皮膚圖片上根據用戶指示通過用於標識皮膚組件位置的可視化標識繪製皮膚的組件布局；識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置。所述組件布局，包括所述用戶界面上各皮膚組件的擺放位置、以及各皮膚組件的形狀和/或大小。所述皮膚組件，包括菜單條、工具欄、地址欄、工具箱、狀態欄、滾動條、標籤位、單選/複選框、列表框和/或按鈕等。以下以一實施例對本發明的整體方案進行說明。如圖1所示，執行如下操作步驟10，在皮膚圖片上根據用戶指示通過用於標識皮膚組件位置的可視化標識繪製皮膚的組件布局；所述可視化標識還用於標示各皮膚組件的形狀和/或大小；所述組件布局一般來說，主要包括各皮膚組件的位置、以及各皮膚組件的形狀和/或大小；即三種情況1)各皮膚組件的位置、形狀和大小；2)各皮膚組件的位置以及形狀；3)各皮膚組件的位置以及大小；所述可視化標識，包括所述皮膚圖片上所佔面積小於一閾值的顏色和/或透明度；在實際使用中，可以使用色塊、色條或者帶有顏色的線段、帶有透明度的框塊、條狀、線段等來標出各皮膚組件的位置、形狀、大小；這裡需要說明的是，可視化標識是使用可視化手段進行標註的標識。1)在極端情況下，可以肉眼不可讀而電腦程式可讀(用肉眼不可識別的色差或者透明度差別標識，或者肉眼不可識別的尺寸標出)，但是一般是用作特殊用途，但是標註繪製這個操作本身相對編寫數據文件是非常簡單直觀；2)但是一般來說它對於肉眼和電腦程式都可讀，這樣不僅標註繪製這個操作本身相對編寫數據文件是非常簡單直觀，顯示效果上就更為直觀了，用戶可以輕鬆了解組件布局在皮膚上的反映。用戶可以指普通用戶，也可以是專業設計人員，而因為應用可視化標識直接在圖片上進行標明，使得繪製組件布局變得簡單直觀，因此便於專業設計，有利於普通用戶的自定義設計。步驟20，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置；皮膚圖片的樣子就是帶有顏色、透明度標出組件位置大小形狀的圖片，整個圖片看起來像打著很多「補丁」的圖片；這些「補丁」就是皮膚組件的位置，「補丁」的尺寸和形狀就是皮膚組件適應的形狀和大小；這些可視化標識直接由圖片攜帶，直觀方便，而可視化標識作為一種信息可讀性極強，對於用戶容易識別，對於電腦程式識別也是非常方便的。以下再以一實施例對本發明的整體方案另一種應用進行說明。原始皮膚圖片可以是具有畫面設計的圖片，也可以是背景透明的圖片。當皮膚圖片是背景透明的圖片時，步驟10中通過可視化標識繪製後皮膚圖片就成為了所述布局模板為背景透明、組件布局用可視化標識標出的布局框架圖片；布局框架圖片看起來像打著很多「補丁」的透明圖片；這些「補丁」就是皮膚組件的位置，「補丁」的尺寸和形狀就是皮膚組件適應的形狀和大小。步驟20中依據所述布局框架圖片上的可視化標識將各皮膚組件放置在所述組件布局的相應位置，就可以搭出用戶界面的架子，然後再將任意與布局框架圖片適配的原始未處理的皮膚圖片加載到這個搭好的架子裡就可以將皮膚加載到用戶界面了。所述布局框架圖片適配皮膚圖片的意義在於，很多皮膚圖片上都有非常美觀的畫面設計，所以組件布局應該儘量迴避破壞這些畫面的位置，例如皮膚圖片上畫有一個人物形象，那組件布局應該儘量不要佔用人物形象的位置，否則會破壞皮膚圖片的整體美感；因此，布局框架圖片上標出的組件布局應該適配對應的皮膚圖片的構圖設計。通過上述可視化標識生成布局模板的方式可以通過非常形象直觀的手段對組件布局進行標準化加工，使用標準化的模板來對皮膚圖片生成皮膚非常容易操作，而且實現起來簡便高效。步驟20具體來說，可以包括以下兩個層面的操作1)預覽效果圖識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件的仿真圖片放置在所述組件布局的相應位置從而生成一效果圖，所述效果圖用於模擬加載了所述皮膚後的用戶界面；皮膚組件的仿真圖片是模擬皮膚組件的樣子創建的圖片，將這些圖片放置到可視化標識標出的組建的位置，模擬出加載所述皮膚後的用戶界面的效果圖，讓用戶直觀地瀏覽；因為可視化標識所繪製的皮膚組件的大小形狀與所述皮膚組件的仿真圖片相適應，所以仿真圖片放置後覆蓋所述皮膚圖片的可視化標識，保證皮膚圖片不會被破壞。2)直接加載皮膚到用戶界面接收用戶對效果圖的確認後，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置從而生成用戶界面，所述用戶界面為加載所述皮膚圖片後的用戶界面；因為可視化標識所繪製的皮膚組件的大小形狀與所述皮膚組件的相適應，所以皮膚組件放置後覆蓋所述皮膚圖片的可視化標識，保證皮膚圖片不會被破壞。以上需要說明的是，以上兩個層面的處理可以都執行，先生成效果圖供用戶預覽， 然後根據用戶確認在加載皮膚到用戶界面。當然，也可以不生成效果圖，直接加載皮膚到用戶界面。另外，也可以生成效果圖預覽，但是最終不加載皮膚到用戶界面。
以下再以一實施例對上述「根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置」進行說明。如圖2所示，執行如下操作步驟400，讀取所述可視化標識的顏色和/或透明度獲取所繪製的一皮膚組件的
位置；預先保存所述顏色和/或透明度，電腦程式讀取到所述顏色和/或透明度就可以認為碰到了皮膚組件的擺放設置。步驟401，依據所述顏色和/或透明度查找對應的皮膚組件；不同的皮膚組件使用不同的顏色和/或不同的透明度進行區別；電腦程式內保存有不同的顏色和/或不同的透明度與皮膚組件的對應關係，依據這個對應關係來查找皮膚組件；當然，在最初使用可視化標識進行繪製皮膚組件布局時，用戶也要按照預想放置的皮膚組件布局來使用相應的顏色和/或透明度來繪製。步驟402，將找到的皮膚組件放置在所述皮膚組件的位置上，並使所述皮膚組件與其所在位置的形狀和/或大小適應；這樣所述皮膚組件放置後正好就覆蓋了所述皮膚圖片的可視化標識，保證圖片的完整、沒有被破壞。以下再以一實施例對上述「預覽效果圖」進行說明，可以參考上述流程，區別在於 不同的皮膚組件的仿真圖片可以使用不同的顏色和/或不同的透明度進行區別；查找放置對象變為仿真圖片，其他操作相同，不再贅述。上述說明示出並描述了本發明的若干優選實施例，但如前所述，應當理解本發明並非局限於本文所披露的形式，不應看作是對其他實施例的排除，而可用於各種其他組合、 修改和環境，並能夠在本文所述發明構想範圍內，通過上述教導或相關領域的技術或知識進行改動。而本領域人員所進行的改動和變化不脫離本發明的精神和範圍，則都應在本發明所附權利要求的保護範圍內。
權利要求
1.一種自定義用戶界面的皮膚的方法，其特徵在於，包括在皮膚圖片上根據用戶指示通過用於標識皮膚組件位置的可視化標識繪製皮膚的組件布局；識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置。
2.如權利要求1所述的方法，其特徵在於，所述可視化標識，包括所述皮膚圖片上所佔用面積小於一閾值的顏色和/或透明度；所述可視化標識使用不同的顏色和/或不同的透明度來區別不同的皮膚組件。
3.如權利要求1所述的方法，其特徵在於，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置的步驟，進一步包括識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件的仿真圖片放置在所述組件布局的相應位置從而生成一效果圖，所述效果圖用於模擬加載了所述皮膚後的用戶界面。
4.如權利要求3所述的方法，其特徵在於，所述皮膚組件的仿真圖片放置在組件布局的相應位置後覆蓋所述皮膚圖片的可視化標識。
5.如權利要求3所述的方法，其特徵在於，所述可視化標識使用不同的顏色和/或不同的透明度來區別不同的皮膚組件的仿真圖片；讀取所述可視化標識的顏色和/或透明度獲取所繪製的一皮膚組件的位置，依據所述顏色和/或透明度選擇對應的皮膚組件的仿真圖片放置在所述皮膚組件的位置上，並使所述皮膚組件的仿真圖片與其所在位置的形狀和/或大小適應。
6.如權利要求1所述的方法，其特徵在於，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置的步驟，進一步包括識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置從而生成用戶界面，所述用戶界面為加載所述皮膚圖片後的用戶界面。
7.如權利要求6所述的方法，其特徵在於，所述皮膚組件放置在組件布局的相應位置後覆蓋所述皮膚圖片的可視化標識。
8.如權利要求6所述的方法，其特徵在於，所述可視化標識使用不同的顏色和/或不同的透明度來區別不同的皮膚組件；讀取所述可視化標識的顏色和/或透明度獲取所繪製的一皮膚組件的位置，依據所述顏色和/或透明度選擇對應的皮膚組件放置在所述皮膚組件的位置上，並使所述皮膚組件與其所在位置的形狀和/或大小適應。
9.如權利要求1所述的方法，其特徵在於，所述可視化標識還用於標示各皮膚組件的形狀和/或大小。
10.如權利要求1所述的方法，其特徵在於，所述皮膚圖片為一背景透明的圖片。
11.如權利要求10所述的方法，其特徵在於，在皮膚圖片上根據用戶指示通過用於標識皮膚組件位置的可視化標識繪製皮膚的組件布局的步驟，進一步包括在所述背景透明的圖片上通過所述可視化標識繪製皮膚的組件布局，從而得到一布局模板，所述布局模板為背景透明、組件布局用可視化標識標出的布局框架圖片。
12.如權利要求11所述的方法，其特徵在於，識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在所述組件布局的相應位置的步驟，進一步包括依據所述布局框架圖片上的可視化標識將各皮膚組件放置在所述組件布局的相應位置，加載適配的存在畫面設計的皮膚圖片從而將皮膚加載到用戶界面。
全文摘要
本發明公開了一種自定義用戶界面的皮膚的方法，包括在皮膚圖片上根據用戶指示通過用於標識皮膚組件位置的可視化標識繪製皮膚的組件布局；識別所述皮膚圖片的可視化標識，並根據所述可視化標識將各皮膚組件放置在組件布局的相應位置。本發明的可視化標識直接由圖片攜帶，以此替代數據文件，極大地方便了使用，而標註繪製的操作本身相對編寫數據文件更為簡單，顯示效果更為直觀。
文檔編號G06F9/44GK102436374SQ201110305018
公開日2012年5月2日 申請日期2011年9月29日 優先權日2011年9月29日
發明者萬立新 申請人:奇智軟體(北京)有限公司