專利名稱：一種更換用戶界面的皮膚的方法
技術(shù)領(lǐng)域：
本發(fā)明屬于計算機領(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ù)文件獲知皮膚圖片上的皮膚組件布局情況，然后在皮膚圖片上進行擺放，最終就形成了用戶界面?？梢钥吹?，數(shù)據(jù)文件的編寫在皮膚設(shè)計中是絕對的核心操作，但是其編寫的復(fù)雜程度可想而知，而且所編寫的數(shù)據(jù)非常繁瑣，導(dǎo)致容易出現(xiàn)錯誤，為皮膚設(shè)計帶來了很大的難度。因此需要提供一種方式，能使皮膚設(shè)計變得簡單，尤其是使數(shù)據(jù)文件的編寫這種專業(yè)操作變得相對友好、直觀。另外，因為對于皮膚中很多都是采用相同的組件布局而使用不同的皮膚圖片來實現(xiàn)的，而這一類皮膚往往屬于同一款的皮膚，如果能夠?qū)ζつw分款預(yù)先制作更具需要推薦給用戶會帶來非常好的用戶感受。因此還需要提供一種方式，可以給用戶提供標(biāo)準(zhǔn)化的用戶界面的組件布局，并依據(jù)組件布局快速高效地提供多種標(biāo)準(zhǔn)化的皮膚，給予用戶更多的選擇。

發(fā)明內(nèi)容
有鑒于此，本發(fā)明所要解決的技術(shù)問題是提供了一種更換用戶界面的皮膚的方法，結(jié)合可視化標(biāo)識預(yù)先制作好適當(dāng)?shù)钠つw圖片，根據(jù)本地的組件布局提供各種適合的皮膚的預(yù)覽，給于用戶多種選擇進行換膚。為了解決上述技術(shù)問題，本發(fā)明公開了一種更換用戶界面的皮膚的方法，包括在云端建立皮膚圖片與皮膚的組件布局的對應(yīng)關(guān)系，所述皮膚圖片通過用于標(biāo)示皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；識別本地的用戶界面當(dāng)前使用的組件布局，根據(jù)所述組件布局查找對應(yīng)的一幅或多幅皮膚圖片推薦到本地；在本地針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置。進一步地，所述一幅皮膚圖片攜帶用于繪制一種皮膚的組件布局的可視化標(biāo)識。
進一步地，所述可視化標(biāo)識，包括所述皮膚圖片上所占用面積小于一閾值的顏色和/或透明度。進一步地，識別本地的用戶界面當(dāng)前使用的組件布局，根據(jù)所述組件布局在云端查找對應(yīng)的一幅或多幅皮膚圖片推薦到本地的步驟，包括在本地通過識別所述用戶界面當(dāng)前的組件布局得到布局模板并上報到云端，所述布局模板用于承載通過可視化標(biāo)識繪制出的組件布局；在云端根據(jù)所述上報的布局模板獲取組件布局，結(jié)合皮膚圖片與皮膚的組件布局的對應(yīng)關(guān)系查找對應(yīng)的一幅或多幅皮膚圖片推薦到本地。進一步地，在本地針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置的步驟，包括針對每幅皮膚圖片，分別識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置從而生成預(yù)覽并展現(xiàn)給用戶供其選擇。進一步地，在本地針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置的步驟，進一步包括針對一幅或多幅皮膚圖片中用戶選中的皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置從而將所述皮膚圖片加載到用戶界面。進一步地，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置的步驟，包括所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件；讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的位置，依據(jù)所述顏色和/或透明度選擇對應(yīng)的皮膚組件放置在所述皮膚組件的位置上， 并使所述皮膚組件與其所在位置的形狀和/或大小適應(yīng)。進一步地，所述皮膚組件放置在組件布局的相應(yīng)位置后覆蓋所述皮膚圖片的可視化標(biāo)識。進一步地，所述可視化標(biāo)識還用于標(biāo)示各皮膚組件的形狀和/或大小。進一步地，所述皮膚組件，包括菜單條、工具欄、地址欄、工具箱、狀態(tài)欄、滾動條、 標(biāo)簽位、單選/復(fù)選框、列表框和/或按鈕。與現(xiàn)有的方案相比，本發(fā)明所獲得的技術(shù)效果1)結(jié)合可視化標(biāo)識預(yù)先制作好適當(dāng)?shù)钠つw圖片，根據(jù)本地的組件布局提供各種適合的皮膚的預(yù)覽，給于用戶多種選擇進行換膚；2)可視化標(biāo)識直接由圖片攜帶，以此替代數(shù)據(jù)文件，極大地方便了使用，而可視化標(biāo)識作為一種信息可讀性極強，對于用戶容易識別，對于電腦程序識別也是非常方便的。3)標(biāo)注繪制的操作本身相對編寫數(shù)據(jù)文件更為簡單，顯示效果更為直觀，用戶可以輕松了解組件布局在皮膚上的反映。4)應(yīng)用可視化標(biāo)識直接在圖片上進行標(biāo)明，使得繪制組件布局變得簡單直觀，因此便于專業(yè)設(shè)計，有利于普通用戶的自定義設(shè)計。5)所以仿真圖片或者皮膚組件放置后會覆蓋所述皮膚圖片的可視化標(biāo)識，保證皮膚圖片不會被破壞。


圖1為本發(fā)明整體方案的方法流程圖2為本發(fā)明步驟200的方法流程圖；圖3為本發(fā)明步驟300的方法流程圖。
具體實施例方式以下將配合圖式及實施例來詳細說明本發(fā)明的實施方式，藉此對本發(fā)明如何應(yīng)用技術(shù)手段來解決技術(shù)問題并達成技術(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ā)明的整體方案進行說明。如圖1所示，執(zhí)行如下操作步驟100，建立皮膚圖片與皮膚的組件布局的對應(yīng)關(guān)系，所述皮膚圖片通過用于標(biāo)示皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；所述可視化標(biāo)識還用于標(biāo)示各皮膚組件的形狀和/或大?。槐静襟E一般發(fā)生在云端，由云端收集所有的皮膚圖片及組件布局，并建立維護這種對應(yīng)關(guān)系，并由云端在所述皮膚圖片上通過可視化標(biāo)識繪制皮膚的組件布局；所述一幅皮膚圖片攜帶用于繪制一種皮膚的組件布局的可視化標(biāo)識；所述皮膚的組件布局與皮膚圖片對應(yīng)的意義在于，很多皮膚圖片上都有非常美觀的畫面設(shè)計，所以組件布局應(yīng)該盡量回避破壞這些畫面的位置，例如皮膚圖片上畫有一個人物形象，那組件布局應(yīng)該盡量不要占用人物形象的位置，否則會破壞皮膚圖片的整體美感；因此，組件布局應(yīng)該適配對應(yīng)的皮膚圖片的構(gòu)圖設(shè)計；所述組件布局一般來說，主要包括各皮膚組件的位置、以及各皮膚組件的形狀和/或大??；即三種情況1)各皮膚組件的位置、形狀和大?。?)各皮膚組件的位置以及形狀；3)各皮膚組件的位置以及大??；所述可視化標(biāo)識，包括所述皮膚圖片上所占面積小于一閾值的顏色和/或透明度；在實際使用中，可以使用色塊、色條或者帶有顏色的線段、帶有透明度的框塊、條狀、線段等來標(biāo)出各皮膚組件的位置、形狀、大?。贿@里需要說明的是，可視化標(biāo)識是使用可視化手段進行標(biāo)注的標(biāo)識。1)在極端情況下，可以肉眼不可讀而電腦程序可讀(用肉眼不可識別的色差或者透明度差別標(biāo)識，或者肉眼不可識別的尺寸標(biāo)出)，但是一般是用作特殊用途，但是標(biāo)注繪制這個操作本身相對編寫數(shù)據(jù)文件是非常簡單直觀；2)但是一般來說它對于肉眼和電腦程序都可讀，這樣不僅標(biāo)注繪制這個操作本身相對編寫數(shù)據(jù)文件是非常簡單直觀，顯示效果上就更為直觀了，用戶可以輕松了解組件布局在皮膚上的反映。
步驟200，識別本地的所述用戶界面當(dāng)前使用的組件布局，根據(jù)所述組件布局查找對應(yīng)的一幅或多幅皮膚圖片；本步驟可以發(fā)生在云端，云端接受本地識別出的所述用戶界面當(dāng)前使用的組件布局，在云端維護的對應(yīng)關(guān)系中查找對應(yīng)的一幅或多幅皮膚圖片下發(fā)到本地；本步驟也可以發(fā)生在本地，由云端將所述對應(yīng)關(guān)系下發(fā)到本地，本地識別出的所述用戶界面當(dāng)前使用的組件布局，并根據(jù)下發(fā)到本地的對應(yīng)關(guān)系查找對應(yīng)的一幅或多幅皮膚圖片并向云端請求所述皮膚圖片；此步驟的查找到的皮膚圖片的樣子就是帶有顏色、透明度標(biāo)出組件位置大小形狀的圖片，整個圖片看起來像打著很多“補丁”的圖片；這些“補丁”就是皮膚組件的位置，“補丁”的尺寸和形狀就是皮膚組件適應(yīng)的形狀和大小；這些可視化標(biāo)識直接由圖片攜帶，直觀方便，而可視化標(biāo)識作為一種信息可讀性極強，對于用戶容易識別，對于電腦程序識別也是非常方便的。步驟300，針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置；本步驟一般發(fā)生在本地，包括先后兩步處理第一步，提供預(yù)覽本地針對查找到的并由云端獲取的一幅或多幅的皮膚圖片中的每一幅，分別識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置都生成用戶界面的預(yù)覽并一起展現(xiàn)給用戶，供用戶在這些預(yù)覽中選擇；第二步，加載皮膚針對一幅或多幅皮膚圖片中用戶選中的皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置從而將所述皮膚圖片加載到用戶界面。以下再以一實施例對上述步驟200進行說明。如圖2所示，執(zhí)行如下操作步驟201，在本地通過識別所述用戶界面當(dāng)前的組件布局，從而得到所使用的布局模板上報到云端；所述布局模板用于承載通過可視化標(biāo)識繪制出的組件布局；布局模板在實際實現(xiàn)中可以是一主體透明的布局框架圖片；步驟202，云端根據(jù)所述上報的布局模板獲取組件布局；在云端保存布局模板與組件布局的對應(yīng)關(guān)系，根據(jù)布局模板獲取對應(yīng)的組件布局的標(biāo)識；步驟203，云端根據(jù)所述組件布局，結(jié)合皮膚圖片與皮膚的組件布局的對應(yīng)關(guān)系查找對應(yīng)的皮膚圖片推薦到本地，可能找到一幅或多幅適合的皮膚圖片。以下再以一實施例對上述步驟300中“依據(jù)所述可視化標(biāo)識放置皮膚組件”的操作進行說明。如圖3所示，執(zhí)行如下操作步驟301，讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的位置；預(yù)先保存所述顏色和/或透明度，電腦程序讀取到所述顏色和/或透明度就可以認(rèn)為碰到了皮膚組件的擺放設(shè)置。
步驟302，依據(jù)所述顏色和/或透明度查找對應(yīng)的皮膚組件；不同的皮膚組件使用不同的顏色和/或不同的透明度進行區(qū)別；電腦程序內(nèi)保存有不同的顏色和/或不同的透明度與皮膚組件的對應(yīng)關(guān)系，依據(jù)這個對應(yīng)關(guān)系來查找皮膚組件；當(dāng)然，在最初使用可視化標(biāo)識進行繪制皮膚組件布局時，用戶也要按照預(yù)想放置的皮膚組件布局來使用相應(yīng)的顏色和/或透明度來繪制。步驟303，將找到的皮膚組件放置在所述皮膚組件的位置上，并使所述皮膚組件與其所在位置的形狀和/或大小適應(yīng)；這樣所述皮膚組件放置后正好就覆蓋了所述皮膚圖片的可視化標(biāo)識，保證圖片的完整、沒有被破壞。上述說明示出并描述了本發(fā)明的若干優(yōu)選實施例，但如前所述，應(yīng)當(dāng)理解本發(fā)明并非局限于本文所披露的形式，不應(yīng)看作是對其他實施例的排除，而可用于各種其他組合、 修改和環(huán)境，并能夠在本文所述發(fā)明構(gòu)想范圍內(nèi)，通過上述教導(dǎo)或相關(guān)領(lǐng)域的技術(shù)或知識進行改動。而本領(lǐng)域人員所進行的改動和變化不脫離本發(fā)明的精神和范圍，則都應(yīng)在本發(fā)明所附權(quán)利要求的保護范圍內(nèi)。
權(quán)利要求
1.一種更換用戶界面的皮膚的方法，其特征在于，包括在云端建立皮膚圖片與皮膚的組件布局的對應(yīng)關(guān)系，所述皮膚圖片通過用于標(biāo)示皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；識別本地的用戶界面當(dāng)前使用的組件布局，根據(jù)所述組件布局查找對應(yīng)的一幅或多幅皮膚圖片推薦到本地；在本地針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置。
2.如權(quán)利要求1所述的方法，其特征在于，所述一幅皮膚圖片攜帶用于繪制一種皮膚的組件布局的可視化標(biāo)識。
3.如權(quán)利要求1所述的方法，其特征在于，所述可視化標(biāo)識，包括所述皮膚圖片上所占用面積小于一閾值的顏色和/或透明度。
4.如權(quán)利要求1所述的方法，其特征在于，識別本地的用戶界面當(dāng)前使用的組件布局， 根據(jù)所述組件布局在云端查找對應(yīng)的一幅或多幅皮膚圖片推薦到本地的步驟，進一步包括在本地通過識別所述用戶界面當(dāng)前的組件布局得到布局模板并上報到云端，所述布局模板用于承載通過可視化標(biāo)識繪制出的組件布局；在云端根據(jù)所述上報的布局模板獲取組件布局，結(jié)合皮膚圖片與皮膚的組件布局的對應(yīng)關(guān)系查找對應(yīng)的一幅或多幅皮膚圖片推薦到本地。
5.如權(quán)利要求1所述的方法，其特征在于，在本地針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置的步驟，進一步包括針對每幅皮膚圖片，分別識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置從而生成預(yù)覽并展現(xiàn)給用戶供其選擇。
6.如權(quán)利要求1所述的方法，其特征在于，在本地針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置的步驟，進一步包括針對一幅或多幅皮膚圖片中用戶選中的皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置從而將所述皮膚圖片加載到用戶界
7.如權(quán)利要求5或6所述的方法，其特征在于，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置的步驟，進一步包括所述可視化標(biāo)識使用不同的顏色和/或不同的透明度來區(qū)別不同的皮膚組件； 讀取所述可視化標(biāo)識的顏色和/或透明度獲取所繪制的一皮膚組件的位置，依據(jù)所述顏色和/或透明度選擇對應(yīng)的皮膚組件放置在所述皮膚組件的位置上，并使所述皮膚組件與其所在位置的形狀和/或大小適應(yīng)。
8.如權(quán)利要求1所述的方法，其特征在于，所述皮膚組件放置在組件布局的相應(yīng)位置后覆蓋所述皮膚圖片的可視化標(biāo)識。
9.如權(quán)利要求1所述的方法，其特征在于，所述可視化標(biāo)識還用于標(biāo)示各皮膚組件的形狀和/或大小。
10.如權(quán)利要求1所述的方法，其特征在于，所述皮膚組件，包括菜單條、工具欄、地址欄、工具箱、狀態(tài)欄、滾動條、標(biāo)簽位、單選/ 復(fù)選框、列表框和/或按鈕。
全文摘要
本發(fā)明公開了一種更換用戶界面的皮膚的方法，包括在云端建立皮膚圖片與皮膚的組件布局的對應(yīng)關(guān)系，所述皮膚圖片通過用于標(biāo)示皮膚組件位置的可視化標(biāo)識繪制皮膚的組件布局；識別本地的用戶界面當(dāng)前使用的組件布局，根據(jù)所述組件布局查找對應(yīng)的一幅或多幅皮膚圖片推薦到本地；在本地針對一幅或多幅皮膚圖片，識別其中的可視化標(biāo)識并依據(jù)所述可視化標(biāo)識將各皮膚組件放置在組件布局的相應(yīng)位置。本發(fā)明結(jié)合可視化標(biāo)識預(yù)先制作好適當(dāng)?shù)钠つw圖片，根據(jù)本地的組件布局提供各種適合的皮膚的預(yù)覽，給于用戶多種選擇進行換膚。
文檔編號G06F9/44GK102360293SQ20111030501
公開日2012年2月22日 申請日期2011年9月29日 優(yōu)先權(quán)日2011年9月29日
發(fā)明者萬立新 申請人:奇智軟件(北京)有限公司