專利名稱：一種自定義用戶界面的皮膚的方法
技術(shù)領(lǐng)域：
本發(fā)明屬于計算機(jī)領(lǐng)域，具體地說，涉及一種自定義用戶界面的皮膚的方法。
背景技術(shù)：
如今，在用戶終端上安裝有各種各樣的客戶端軟件，每種客戶端軟件都有各自的用戶界面，通過用戶界面完成客戶端軟件與用戶的交互，可以說用戶界面就是客戶端軟件的門戶。軟件廠家通常都會為用戶界面設(shè)計皮膚，皮膚的設(shè)計在考慮美觀的同時，還要兼顧用戶界面上皮膚組件擺放布局的合理使用。設(shè)計者在設(shè)計皮膚時，往往首先會設(shè)計出適合用戶界面的皮膚圖片；之后再針對皮膚圖片編寫一個數(shù)據(jù)文件，這個數(shù)據(jù)文件中會以代碼或者數(shù)據(jù)表格的形式記錄在皮膚圖片上所有皮膚組件擺放的位置坐標(biāo)以及尺寸、形狀的參數(shù)，這個數(shù)據(jù)文件和皮膚圖片可以認(rèn)為構(gòu)成了最基本的皮膚。這個數(shù)據(jù)文件對于普通用戶來說是很難看懂的，但是電腦程序可以識別，要將所屬皮膚加載到用戶界面時，由電腦程序讀取數(shù)據(jù)文件獲知皮膚圖片上的皮膚組件布局情況，然后在皮膚圖片上進(jìn)行擺放，最終就形成了用戶界面?？梢钥吹剑瑪?shù)據(jù)文件的編寫在皮膚設(shè)計中是絕對的核心操作，但是其編寫的復(fù)雜程度可想而知，而且所編寫的數(shù)據(jù)非常繁瑣，導(dǎo)致容易出現(xiàn)錯誤，為皮膚設(shè)計帶來了很大的難度。從另一方面考慮，如果用戶希望通過自定義的方式來自己設(shè)計皮膚，數(shù)據(jù)文件的編寫這種過于專業(yè)性的操作，導(dǎo)致用戶自定義模式基本上不可實現(xiàn)。因此需要提供一種方式，能使皮膚設(shè)計變得簡單高效，尤其是使數(shù)據(jù)文件的編寫這種專業(yè)操作變得相對友好、直觀，對于任何人而言，無論是普通用戶還是專業(yè)設(shè)計人員都不需要專業(yè)技術(shù)就可以進(jìn)行皮膚設(shè)計，使得用戶自定義的皮膚設(shè)計變得可行。

發(fā)明內(nèi)容
有鑒于此，本發(fā)明所要解決的技術(shù)問題是提供了一種自定義用戶界面的皮膚的方法，可視化標(biāo)識直接由圖片攜帶，以此替代數(shù)據(jù)文件，極大地方便了使用，而標(biāo)注繪制的操作本身相對編寫數(shù)據(jù)文件更為簡單，顯示效果更為直觀。為了解決上述技術(shù)問題，本發(fā)明公開了一種自定義用戶界面的皮膚的方法，包括 在皮膚圖片上根據(jù)用戶指示通過用于標(biāo)識皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置。進(jìn)一步地，所述可視化標(biāo)識，包括所述皮膚圖片上所占用面積小于一閾值的顏色和/或透明度；所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件。進(jìn)一步地，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置的步驟，包括識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件的仿真圖片放置在所述組件布局的相應(yīng)位置從而生成一效果圖，所述效果圖用于模擬加載了所述皮膚后的用戶界面。進(jìn)一步地，所述皮膚組件的仿真圖片放置后覆蓋所述皮膚圖片的可視化標(biāo)識。進(jìn)一步地，所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件的仿真圖片；讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的位置，依據(jù)所述顏色和/或透明度選擇對應(yīng)的皮膚組件的仿真圖片放置在所述皮膚組件的位置上，并使所述皮膚組件的仿真圖片與其所在位置的形狀和/或大小適應(yīng)。進(jìn)一步地，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置的步驟，包括識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置從而生成用戶界面，所述用戶界面為加載所述皮膚圖片后的用戶界面。進(jìn)一步地，所述皮膚組件放置后覆蓋所述皮膚圖片的可視化標(biāo)識。進(jìn)一步地，所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件；讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的位置，依據(jù)所述顏色和/或透明度選擇對應(yīng)的皮膚組件放置在所述皮膚組件的位置上，并使所述皮膚組件與其所在位置的形狀和/或大小適應(yīng)。進(jìn)一步地，所述組件布局，包括所述用戶界面上各皮膚組件的擺放位置、以及各皮膚組件的形狀和/或大小。進(jìn)一步地，所述皮膚圖片為一背景透明的圖片。進(jìn)一步地，在皮膚圖片上根據(jù)用戶指示通過用于標(biāo)識皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局的步驟，包括在所述背景透明的圖片上通過所述可視化標(biāo)識繪制皮膚的組件布局，從而得到一布局模板，所述布局模板為背景透明、組件布局用可視化標(biāo)識標(biāo)出的布局框架圖片。進(jìn)一步地，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置的步驟，包括依據(jù)所述布局框架圖片上的可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置，加載適配的存在畫面設(shè)計的皮膚圖片從而將皮膚加載到用戶界面。與現(xiàn)有的方案相比，本發(fā)明所獲得的技術(shù)效果1)可視化標(biāo)識直接由圖片攜帶，以此替代數(shù)據(jù)文件，極大地方便了使用，而可視化標(biāo)識作為一種信息可讀性極強(qiáng)，對于用戶容易識別，對于電腦程序識別也是非常方便的。2)標(biāo)注繪制的操作本身相對編寫數(shù)據(jù)文件更為簡單，顯示效果更為直觀，用戶可以輕松了解組件布局在皮膚上的反映。3)應(yīng)用可視化標(biāo)識直接在圖片上進(jìn)行標(biāo)明，使得繪制組件布局變得簡單直觀，因此便于專業(yè)設(shè)計，有利于普通用戶的自定義設(shè)計。4)所以仿真圖片或者皮膚組件放置后會覆蓋所述皮膚圖片的可視化標(biāo)識，保證皮膚圖片不會被破壞。5)通過可視化標(biāo)識生成布局模板的方式可以通過非常形象直觀的手段對組件布局進(jìn)行標(biāo)準(zhǔn)化加工，使用標(biāo)準(zhǔn)化的模板來對皮膚圖片生成皮膚非常容易操作，而且實現(xiàn)起來簡便高效。


圖1為本發(fā)明整體方案的方法流程圖；圖2為本發(fā)明細(xì)部操作的方法流程圖。
具體實施例方式以下將配合圖式及實施例來詳細(xì)說明本發(fā)明的實施方式，藉此對本發(fā)明如何應(yīng)用技術(shù)手段來解決技術(shù)問題并達(dá)成技術(shù)功效的實現(xiàn)過程能充分理解并據(jù)以實施。本發(fā)明的核心構(gòu)思在于使用皮膚圖片攜帶可視化標(biāo)識，以此替代數(shù)據(jù)文件。所述可視化標(biāo)識，包括所述皮膚圖片上所占用面積小于一閾值的顏色和/或透明度，優(yōu)選采用皮膚圖片上沒有出現(xiàn)的顏色和/或透明度，即閾值取0。可視化標(biāo)識更直觀簡單，對于電腦程序和普通用戶來說都是可讀的。具體來說，在皮膚圖片上根據(jù)用戶指示通過用于標(biāo)識皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置。所述組件布局，包括所述用戶界面上各皮膚組件的擺放位置、以及各皮膚組件的形狀和/或大小。所述皮膚組件，包括菜單條、工具欄、地址欄、工具箱、狀態(tài)欄、滾動條、標(biāo)簽位、單選/復(fù)選框、列表框和/或按鈕等。以下以一實施例對本發(fā)明的整體方案進(jìn)行說明。如圖1所示，執(zhí)行如下操作步驟10，在皮膚圖片上根據(jù)用戶指示通過用于標(biāo)識皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；所述可視化標(biāo)識還用于標(biāo)示各皮膚組件的形狀和/或大??；所述組件布局一般來說，主要包括各皮膚組件的位置、以及各皮膚組件的形狀和/或大??；即三種情況1)各皮膚組件的位置、形狀和大?。?)各皮膚組件的位置以及形狀；3)各皮膚組件的位置以及大??；所述可視化標(biāo)識，包括所述皮膚圖片上所占面積小于一閾值的顏色和/或透明度；在實際使用中，可以使用色塊、色條或者帶有顏色的線段、帶有透明度的框塊、條狀、線段等來標(biāo)出各皮膚組件的位置、形狀、大小；這里需要說明的是，可視化標(biāo)識是使用可視化手段進(jìn)行標(biāo)注的標(biāo)識。1)在極端情況下，可以肉眼不可讀而電腦程序可讀(用肉眼不可識別的色差或者透明度差別標(biāo)識，或者肉眼不可識別的尺寸標(biāo)出)，但是一般是用作特殊用途，但是標(biāo)注繪制這個操作本身相對編寫數(shù)據(jù)文件是非常簡單直觀；2)但是一般來說它對于肉眼和電腦程序都可讀，這樣不僅標(biāo)注繪制這個操作本身相對編寫數(shù)據(jù)文件是非常簡單直觀，顯示效果上就更為直觀了，用戶可以輕松了解組件布局在皮膚上的反映。用戶可以指普通用戶，也可以是專業(yè)設(shè)計人員，而因為應(yīng)用可視化標(biāo)識直接在圖片上進(jìn)行標(biāo)明，使得繪制組件布局變得簡單直觀，因此便于專業(yè)設(shè)計，有利于普通用戶的自定義設(shè)計。步驟20，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置；皮膚圖片的樣子就是帶有顏色、透明度標(biāo)出組件位置大小形狀的圖片，整個圖片看起來像打著很多“補(bǔ)丁”的圖片；這些“補(bǔ)丁”就是皮膚組件的位置，“補(bǔ)丁”的尺寸和形狀就是皮膚組件適應(yīng)的形狀和大??；這些可視化標(biāo)識直接由圖片攜帶，直觀方便，而可視化標(biāo)識作為一種信息可讀性極強(qiáng)，對于用戶容易識別，對于電腦程序識別也是非常方便的。以下再以一實施例對本發(fā)明的整體方案另一種應(yīng)用進(jìn)行說明。原始皮膚圖片可以是具有畫面設(shè)計的圖片，也可以是背景透明的圖片。當(dāng)皮膚圖片是背景透明的圖片時，步驟10中通過可視化標(biāo)識繪制后皮膚圖片就成為了所述布局模板為背景透明、組件布局用可視化標(biāo)識標(biāo)出的布局框架圖片；布局框架圖片看起來像打著很多“補(bǔ)丁”的透明圖片；這些“補(bǔ)丁”就是皮膚組件的位置，“補(bǔ)丁”的尺寸和形狀就是皮膚組件適應(yīng)的形狀和大小。步驟20中依據(jù)所述布局框架圖片上的可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置，就可以搭出用戶界面的架子，然后再將任意與布局框架圖片適配的原始未處理的皮膚圖片加載到這個搭好的架子里就可以將皮膚加載到用戶界面了。所述布局框架圖片適配皮膚圖片的意義在于，很多皮膚圖片上都有非常美觀的畫面設(shè)計，所以組件布局應(yīng)該盡量回避破壞這些畫面的位置，例如皮膚圖片上畫有一個人物形象，那組件布局應(yīng)該盡量不要占用人物形象的位置，否則會破壞皮膚圖片的整體美感；因此，布局框架圖片上標(biāo)出的組件布局應(yīng)該適配對應(yīng)的皮膚圖片的構(gòu)圖設(shè)計。通過上述可視化標(biāo)識生成布局模板的方式可以通過非常形象直觀的手段對組件布局進(jìn)行標(biāo)準(zhǔn)化加工，使用標(biāo)準(zhǔn)化的模板來對皮膚圖片生成皮膚非常容易操作，而且實現(xiàn)起來簡便高效。步驟20具體來說，可以包括以下兩個層面的操作1)預(yù)覽效果圖識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件的仿真圖片放置在所述組件布局的相應(yīng)位置從而生成一效果圖，所述效果圖用于模擬加載了所述皮膚后的用戶界面；皮膚組件的仿真圖片是模擬皮膚組件的樣子創(chuàng)建的圖片，將這些圖片放置到可視化標(biāo)識標(biāo)出的組建的位置，模擬出加載所述皮膚后的用戶界面的效果圖，讓用戶直觀地瀏覽；因為可視化標(biāo)識所繪制的皮膚組件的大小形狀與所述皮膚組件的仿真圖片相適應(yīng)，所以仿真圖片放置后覆蓋所述皮膚圖片的可視化標(biāo)識，保證皮膚圖片不會被破壞。2)直接加載皮膚到用戶界面接收用戶對效果圖的確認(rèn)后，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置從而生成用戶界面，所述用戶界面為加載所述皮膚圖片后的用戶界面；因為可視化標(biāo)識所繪制的皮膚組件的大小形狀與所述皮膚組件的相適應(yīng)，所以皮膚組件放置后覆蓋所述皮膚圖片的可視化標(biāo)識，保證皮膚圖片不會被破壞。以上需要說明的是，以上兩個層面的處理可以都執(zhí)行，先生成效果圖供用戶預(yù)覽， 然后根據(jù)用戶確認(rèn)在加載皮膚到用戶界面。當(dāng)然，也可以不生成效果圖，直接加載皮膚到用戶界面。另外，也可以生成效果圖預(yù)覽，但是最終不加載皮膚到用戶界面。
以下再以一實施例對上述“根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置”進(jìn)行說明。如圖2所示，執(zhí)行如下操作步驟400，讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的
位置；預(yù)先保存所述顏色和/或透明度，電腦程序讀取到所述顏色和/或透明度就可以認(rèn)為碰到了皮膚組件的擺放設(shè)置。步驟401，依據(jù)所述顏色和/或透明度查找對應(yīng)的皮膚組件；不同的皮膚組件使用不同的顏色和/或不同的透明度進(jìn)行區(qū)別；電腦程序內(nèi)保存有不同的顏色和/或不同的透明度與皮膚組件的對應(yīng)關(guān)系，依據(jù)這個對應(yīng)關(guān)系來查找皮膚組件；當(dāng)然，在最初使用可視化標(biāo)識進(jìn)行繪制皮膚組件布局時，用戶也要按照預(yù)想放置的皮膚組件布局來使用相應(yīng)的顏色和/或透明度來繪制。步驟402，將找到的皮膚組件放置在所述皮膚組件的位置上，并使所述皮膚組件與其所在位置的形狀和/或大小適應(yīng)；這樣所述皮膚組件放置后正好就覆蓋了所述皮膚圖片的可視化標(biāo)識，保證圖片的完整、沒有被破壞。以下再以一實施例對上述“預(yù)覽效果圖”進(jìn)行說明，可以參考上述流程，區(qū)別在于 不同的皮膚組件的仿真圖片可以使用不同的顏色和/或不同的透明度進(jìn)行區(qū)別；查找放置對象變?yōu)榉抡鎴D片，其他操作相同，不再贅述。上述說明示出并描述了本發(fā)明的若干優(yōu)選實施例，但如前所述，應(yīng)當(dāng)理解本發(fā)明并非局限于本文所披露的形式，不應(yīng)看作是對其他實施例的排除，而可用于各種其他組合、 修改和環(huán)境，并能夠在本文所述發(fā)明構(gòu)想范圍內(nèi)，通過上述教導(dǎo)或相關(guān)領(lǐng)域的技術(shù)或知識進(jìn)行改動。而本領(lǐng)域人員所進(jìn)行的改動和變化不脫離本發(fā)明的精神和范圍，則都應(yīng)在本發(fā)明所附權(quán)利要求的保護(hù)范圍內(nèi)。
權(quán)利要求
1.一種自定義用戶界面的皮膚的方法，其特征在于，包括在皮膚圖片上根據(jù)用戶指示通過用于標(biāo)識皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置。
2.如權(quán)利要求1所述的方法，其特征在于，所述可視化標(biāo)識，包括所述皮膚圖片上所占用面積小于一閾值的顏色和/或透明度；所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件。
3.如權(quán)利要求1所述的方法，其特征在于，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置的步驟，進(jìn)一步包括識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件的仿真圖片放置在所述組件布局的相應(yīng)位置從而生成一效果圖，所述效果圖用于模擬加載了所述皮膚后的用戶界面。
4.如權(quán)利要求3所述的方法，其特征在于，所述皮膚組件的仿真圖片放置在組件布局的相應(yīng)位置后覆蓋所述皮膚圖片的可視化標(biāo)識。
5.如權(quán)利要求3所述的方法，其特征在于，所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件的仿真圖片；讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的位置，依據(jù)所述顏色和/或透明度選擇對應(yīng)的皮膚組件的仿真圖片放置在所述皮膚組件的位置上，并使所述皮膚組件的仿真圖片與其所在位置的形狀和/或大小適應(yīng)。
6.如權(quán)利要求1所述的方法，其特征在于，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置的步驟，進(jìn)一步包括識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置從而生成用戶界面，所述用戶界面為加載所述皮膚圖片后的用戶界面。
7.如權(quán)利要求6所述的方法，其特征在于，所述皮膚組件放置在組件布局的相應(yīng)位置后覆蓋所述皮膚圖片的可視化標(biāo)識。
8.如權(quán)利要求6所述的方法，其特征在于，所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件；讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的位置，依據(jù)所述顏色和/或透明度選擇對應(yīng)的皮膚組件放置在所述皮膚組件的位置上，并使所述皮膚組件與其所在位置的形狀和/或大小適應(yīng)。
9.如權(quán)利要求1所述的方法，其特征在于，所述可視化標(biāo)識還用于標(biāo)示各皮膚組件的形狀和/或大小。
10.如權(quán)利要求1所述的方法，其特征在于，所述皮膚圖片為一背景透明的圖片。
11.如權(quán)利要求10所述的方法，其特征在于，在皮膚圖片上根據(jù)用戶指示通過用于標(biāo)識皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局的步驟，進(jìn)一步包括在所述背景透明的圖片上通過所述可視化標(biāo)識繪制皮膚的組件布局，從而得到一布局模板，所述布局模板為背景透明、組件布局用可視化標(biāo)識標(biāo)出的布局框架圖片。
12.如權(quán)利要求11所述的方法，其特征在于，識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置的步驟，進(jìn)一步包括依據(jù)所述布局框架圖片上的可視化標(biāo)識將各皮膚組件放置在所述組件布局的相應(yīng)位置，加載適配的存在畫面設(shè)計的皮膚圖片從而將皮膚加載到用戶界面。
全文摘要
本發(fā)明公開了一種自定義用戶界面的皮膚的方法，包括在皮膚圖片上根據(jù)用戶指示通過用于標(biāo)識皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；識別所述皮膚圖片的可視化標(biāo)識，并根據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置。本發(fā)明的可視化標(biāo)識直接由圖片攜帶，以此替代數(shù)據(jù)文件，極大地方便了使用，而標(biāo)注繪制的操作本身相對編寫數(shù)據(jù)文件更為簡單，顯示效果更為直觀。
文檔編號G06F9/44GK102436374SQ201110305018
公開日2012年5月2日 申請日期2011年9月29日 優(yōu)先權(quán)日2011年9月29日
發(fā)明者萬立新 申請人:奇智軟件(北京)有限公司