本發(fā)明屬于Web界面設(shè)計(jì)領(lǐng)域，尤其涉及一種Web應(yīng)用界面換膚的方法和裝置。

背景技術(shù)：

用戶界面(User Interface，UI)是大多數(shù)軟件系統(tǒng)與用戶交互的橋梁。成功的界面方案不僅需要準(zhǔn)確、高效地與用戶交互，還需要考慮用戶對界面外觀的個(gè)性化需求，因此，越來越多的Web應(yīng)用開始在界面上提供“換膚”功能，讓用戶自己決定界面展示風(fēng)格。

目前大多數(shù)Web應(yīng)用中，Web界面的換膚是通過切換層疊樣式表(Cascading Style Sheet，CSS)文件、圖片，甚至HTML結(jié)構(gòu)來實(shí)現(xiàn)。這種方式的優(yōu)點(diǎn)是細(xì)節(jié)控制力強(qiáng)，并且，通過代碼層面的改寫可實(shí)現(xiàn)豐富的細(xì)節(jié)樣式調(diào)整。然而，其也存在如下幾點(diǎn)缺陷：

1)是前期工作量大。需要為每套皮膚開發(fā)獨(dú)立的CSS、圖片，甚至要開發(fā)多套功能頁面。當(dāng)界面結(jié)構(gòu)較復(fù)雜時(shí)，多層元素樣式的重載、繼承使皮膚風(fēng)格的控制變得尤為繁瑣困難；

2)后期維護(hù)難度大。當(dāng)用戶要求提供更多的界面風(fēng)格皮膚以作選擇時(shí)，維護(hù)人員需要重新開發(fā)新的CSS來定義新樣式?，F(xiàn)代Web應(yīng)用界面HTML結(jié)構(gòu)日趨復(fù)雜，極端情況下一個(gè)簡單的列表界面，內(nèi)嵌的HTML結(jié)構(gòu)可能多達(dá)數(shù)十層，而CSS編碼的前提是要對每個(gè)頁面的HTML結(jié)構(gòu)都了解得非常清晰。如果維護(hù)人員和當(dāng)初的開發(fā)人員不是同一批人，幾乎是不可能完成的任務(wù)。

3)處理復(fù)雜，需要由應(yīng)用控制層代碼重新生成HTML標(biāo)簽，引入外部CSS文件后，由瀏覽器重新渲染界面展示層。當(dāng)然如果僅僅是CSS文件的變化，瀏覽器并不會(huì)重新創(chuàng)建整個(gè)DOM結(jié)構(gòu)，但在現(xiàn)代Web系統(tǒng)前端復(fù)雜程度越來越高的情況下，對CSS文件的加載、解析、樣式渲染，依然是一筆不小的開支。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于提供一種Web應(yīng)用界面換膚的方法和裝置，以減少Web應(yīng)用界面換膚前期和后期開發(fā)、運(yùn)維人員的工作量。

本發(fā)明第一方面提供一種Web應(yīng)用界面換膚的方法，所述方法包括：

搭建Web應(yīng)用界面的層次，所述Web應(yīng)用界面的層次包括背景層和所述背景層之上的前景層；

確定所述前景層的透明度效果；

根據(jù)所述前景層的透明度效果，構(gòu)建所述前景層的半透明前景元素；

在收到用戶的換膚請求時(shí)，將當(dāng)前背景層圖片替換為所述換膚請求指向的背景圖片。

本發(fā)明第二方面提供一種Web應(yīng)用界面換膚的裝置，所述裝置包括：

搭建模塊，用于搭建Web應(yīng)用界面的層次，所述Web應(yīng)用界面的層次包括背景層和所述背景層之上的前景層；

透明度確定模塊，用于確定所述前景層的透明度效果；

構(gòu)建模塊，用于根據(jù)所述前景層的透明度效果，構(gòu)建所述前景層的半透明前景元素；

替換模塊，用于在收到用戶的換膚請求時(shí)，將當(dāng)前背景層圖片替換為所述換膚請求指向的背景圖片。

從上述本發(fā)明技術(shù)方案可知，在確定前景層的透明度效果后，可以根據(jù)所述前景層的透明度效果構(gòu)建所述前景層的半透明前景元素，若收到用戶的換膚請求，則將當(dāng)前背景層圖片替換為所述換膚請求指向的背景圖片后，即可實(shí)現(xiàn)Web應(yīng)用界面的換膚。一方面，由于本發(fā)明提供的技術(shù)方案不再需要美術(shù)設(shè)計(jì)師單獨(dú)設(shè)計(jì)多套皮膚，并開發(fā)對應(yīng)的CSS/圖片，在項(xiàng)目后期將大幅度節(jié)約項(xiàng)目資源，解放UI設(shè)計(jì)師和前端工程師的工作量，因此可以大幅度降低開發(fā)工作量；另一方面，由于本發(fā)明提供的技術(shù)方案不需要服務(wù)端參與，完全在客戶端瀏覽器上運(yùn)行，只需切換一張背景圖片即可，不需要對整套CSS規(guī)則進(jìn)行重載和解析，因此，可以提高系統(tǒng)運(yùn)行效率；第三方面，由于采用本發(fā)明提供的技術(shù)方案，使得后期擴(kuò)展皮膚時(shí)只需要提供一張背景圖即可，因此，可以大幅度降低后期維護(hù)工作量。

附圖說明

圖1是本發(fā)明實(shí)施例一提供的Web應(yīng)用界面換膚的方法的實(shí)現(xiàn)流程示意圖；

圖2是本發(fā)明實(shí)施例二提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖；

圖3是本發(fā)明實(shí)施例三提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖；

圖4是本發(fā)明實(shí)施例四提供的Web應(yīng)用界面換膚的的裝置的結(jié)構(gòu)示意圖；

圖5是本發(fā)明實(shí)施例五提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖；

圖6-a是本發(fā)明實(shí)施例六提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖；

圖6-b是本發(fā)明實(shí)施例七提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖；

圖6-c是本發(fā)明實(shí)施例八提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖；

圖6-d是本發(fā)明實(shí)施例九提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為了使本發(fā)明的目的、技術(shù)方案及有益效果更加清楚明白，以下結(jié)合附圖及實(shí)施例，對本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

本發(fā)明實(shí)施例提供一種Web應(yīng)用界面換膚的方法和裝置，所述方法包括：搭建Web應(yīng)用界面的層次，所述Web應(yīng)用界面的層次包括背景層和所述背景層之上的前景層；確定所述前景層的透明度效果；根據(jù)所述前景層的透明度效果，構(gòu)建所述前景層的半透明前景元素；在收到用戶的換膚請求時(shí)，將當(dāng)前背景層圖片替換為所述換膚請求指向的背景圖片。本發(fā)明實(shí)施例還提供相應(yīng)的Web應(yīng)用界面換膚的裝置。以下分別進(jìn)行詳細(xì)說明。

請參閱附圖1，是本發(fā)明實(shí)施例一提供的Web應(yīng)用界面換膚的方法的實(shí)現(xiàn)流程示意圖，主要包括以下步驟S101至步驟S104，詳細(xì)說明如下：

S101，搭建Web應(yīng)用界面的層次。

傳統(tǒng)的美術(shù)設(shè)計(jì)師在進(jìn)行Web應(yīng)用界面設(shè)計(jì)時(shí)，一般會(huì)有意識(shí)地將界面劃分為前景層和背景層兩個(gè)大的層次。界面元素和操作元素即前景元素例如表格、按鈕、輸入框等是呈現(xiàn)在前景層，而為了突出操作元素，背景層一般采用弱化的設(shè)計(jì)，主體基本為大面積的白色、灰色等淺色調(diào)，只在局部如菜單欄、標(biāo)題欄等部位小面積搭配顏色、漸變等效果。

而作為本發(fā)明一個(gè)實(shí)施例，搭建Web應(yīng)用界面的層次可以是：區(qū)分背景層和背景層之上的前景層，挑選背景層圖片置于背景層，并在主工作區(qū)使用半透明層進(jìn)行遮罩。具體地，可以在設(shè)計(jì)工具，例如Photoshop中搭建基本的Web應(yīng)用界面的層次結(jié)構(gòu)，然后挑選或設(shè)計(jì)一批背景層圖片置于背景層上，調(diào)整前景元素的透明度效果，完成界面設(shè)計(jì)。在本發(fā)明實(shí)施例中，背景層圖片可以選擇具有明確色調(diào)、色彩統(tǒng)一協(xié)調(diào)和對比度低的圖片，同時(shí)為了突出主體操作元素，建議在前景元素比較集中的主工作區(qū)使用半透明層進(jìn)行遮罩。

S102，確定前景層的透明度效果。

在本發(fā)明實(shí)施例中，可以根據(jù)需要，將前景層的透明度效果確定為半透明或全透明。

S103，根據(jù)前景層的透明度效果，構(gòu)建前景層的半透明前景元素。

作為本發(fā)明一個(gè)實(shí)施例，根據(jù)前景層的透明度效果，構(gòu)建前景層的半透明前景元素可以通過如下步驟S1031和步驟S1032實(shí)現(xiàn)：

S1031，使用層疊樣式表CSS規(guī)則，對前景層的前景元素進(jìn)行半透明化處理。

在本發(fā)明實(shí)施例中，使用層疊樣式表CSS規(guī)則對Web應(yīng)用界面前景層的前景元素進(jìn)行半透明化處理時(shí)，可采用如下CSS規(guī)則：.myDOm{filter:Alpha(opacity＝50)；opacity:.5；}，其中filter為IE專有屬性，所有的IE瀏覽器都能良好支持，opacity是Web標(biāo)準(zhǔn)屬性，IE6/7/8均無法支持。兩者共同使用，基本可以兼容當(dāng)前市場上的所有瀏覽器。

S1032，將黑白兩種純色的圖片按照需要的透明度進(jìn)行調(diào)整后保存為png格式，并將圖片設(shè)置為容器的背景。

需要說明的是，在使用CSS規(guī)則：.myDOm{filter:Alpha(opacity＝50)；opacity:.5；}即兩個(gè)css屬性后，不僅前景層元素本身被透明化，元素內(nèi)部的內(nèi)容，例如文字也會(huì)被透明化，而絕大多數(shù)時(shí)候，只是希望容器半透明，文字不透明。要解決這個(gè)問題，有兩種可行方案，包括使用CSS3屬性rgba,或者通過CSS hack技術(shù)在rgba,filter,opacity等屬性中切換，前者是CSS3標(biāo)準(zhǔn)，不支持低版本IE，后者樣式定義紛繁復(fù)雜，難以維護(hù)。在本發(fā)明實(shí)施例中，可以使用第三種方案，即，使用半透明圖片和CSS背景平鋪功能來實(shí)現(xiàn)半透明元素，具體地，可以將黑白兩種純色的圖片按照需要的透明度進(jìn)行調(diào)整后保存為png格式，并將所述圖片設(shè)置為容器的背景。為減少資源消耗，可將png格式的圖片設(shè)置為5x5像素，利用背景圖默認(rèn)自動(dòng)平鋪的特點(diǎn)覆蓋整個(gè)容器元素。

需要說明的是，由于png格式的圖片本身尺寸較小，且瀏覽器默認(rèn)會(huì)自動(dòng)緩存圖片，所以上述半透明的png格式的圖片即使在Web應(yīng)用界面中大量使用，也不會(huì)造成加載效率問題。

S104，在收到用戶的換膚請求時(shí)，將當(dāng)前背景層圖片替換為換膚請求指向的背景圖片。

在本發(fā)明實(shí)施例中，將當(dāng)前背景層圖片替換為換膚請求指向的背景圖片可以是通過Javascript操作背景文檔對象模型DOM元素即body或背景DIV改變CSS background屬性，具體實(shí)現(xiàn)時(shí)，以常用Javascript類庫jQuery為例，其代碼如下：

myBgDom.css(‘background’,userSelectedBg)。

在本發(fā)明實(shí)施例中，根據(jù)前景層的透明度效果，構(gòu)建所述前景層的半透明前景元素之后，還可以將構(gòu)建所述前景層的半透明前景元素時(shí)的半透明效果封裝為特定的層疊樣式表CSS類。

上述將構(gòu)建所述前景層的半透明前景元素時(shí)的半透明效果封裝為特定的層疊樣式表CSS類，是基于這些半透明效果可以在HTML中復(fù)用的考慮。例如，假設(shè)根據(jù)前景層的透明度效果，構(gòu)建前景層的半透明前景元素之后，其半透明效果封裝為特定的CSS類如下：

.w50{background:url(../img/white-50.png)；}

.w30{background:url(../img/white-30.png)；}

….

在HTML中復(fù)用時(shí)，如下：

<body>

<div class＝”myDomElement w50”></div>

</body>

從上述附圖1示例的Web應(yīng)用界面換膚的方法可知，在確定前景層的透明度效果后，可以根據(jù)所述前景層的透明度效果構(gòu)建所述前景層的半透明前景元素，若收到用戶的換膚請求，則將當(dāng)前背景層圖片替換為所述換膚請求指向的背景圖片后，即可實(shí)現(xiàn)Web應(yīng)用界面的換膚。一方面，由于本發(fā)明提供的技術(shù)方案不再需要美術(shù)設(shè)計(jì)師單獨(dú)設(shè)計(jì)多套皮膚，并開發(fā)對應(yīng)的CSS/圖片，在項(xiàng)目后期將大幅度節(jié)約項(xiàng)目資源，解放UI設(shè)計(jì)師和前端工程師的工作量，因此可以大幅度降低開發(fā)工作量；另一方面，由于本發(fā)明提供的技術(shù)方案不需要服務(wù)端參與，完全在客戶端瀏覽器上運(yùn)行，只需切換一張背景圖片即可，不需要對整套CSS規(guī)則進(jìn)行重載和解析，因此，可以提高系統(tǒng)運(yùn)行效率；第三方面，由于采用本發(fā)明提供的技術(shù)方案，使得后期擴(kuò)展皮膚時(shí)只需要提供一張背景圖即可，因此，可以大幅度降低后期維護(hù)工作量。

請參閱附圖2，是本發(fā)明實(shí)施例二提供的Web應(yīng)用界面換膚的裝置的結(jié)構(gòu)示意圖。為了便于說明，附圖2僅示出了與本發(fā)明實(shí)施例相關(guān)的部分。附圖2示例的Web應(yīng)用界面換膚的裝置可以是附圖1示例的Web應(yīng)用界面換膚的方法的執(zhí)行主體。附圖2示例的Web應(yīng)用界面換膚的裝置主要包括搭建模塊201、透明度確定模塊202、構(gòu)建模塊203和替換模塊204，其中：

搭建模塊201，用于搭建Web應(yīng)用界面的層次，其中，Web應(yīng)用界面的層次包括背景層和背景層之上的前景層；

透明度確定模塊202，用于確定前景層的透明度效果；

構(gòu)建模塊203，用于根據(jù)前景層的透明度效果，構(gòu)建前景層的半透明前景元素；

替換模塊204，用于在收到用戶的換膚請求時(shí)，將當(dāng)前背景層圖片替換為換膚請求指向的背景圖片。

需要說明的是，以上附圖2示例的Web應(yīng)用界面換膚的裝置的實(shí)施方式中，各功能模塊的劃分僅是舉例說明，實(shí)際應(yīng)用中可以根據(jù)需要，例如相應(yīng)硬件的配置要求或者軟件的實(shí)現(xiàn)的便利考慮，而將上述功能分配由不同的功能模塊完成，即將所述Web應(yīng)用界面換膚的裝置的內(nèi)部結(jié)構(gòu)劃分成不同的功能模塊，以完成以上描述的全部或者部分功能。而且，實(shí)際應(yīng)用中，本實(shí)施例中的相應(yīng)的功能模塊可以是由相應(yīng)的硬件實(shí)現(xiàn)，也可以由相應(yīng)的硬件執(zhí)行相應(yīng)的軟件完成，例如，前述的搭建模塊，可以是具有執(zhí)行前述搭建Web應(yīng)用界面的層次的硬件，例如搭建器，也可以是能夠執(zhí)行相應(yīng)計(jì)算機(jī)程序從而完成前述功能的一般處理器或者其他硬件設(shè)備；再如前述的透明度確定模塊，可以是執(zhí)行確定前景層的透明度效果的硬件，例如透明度確定器，也可以是能夠執(zhí)行相應(yīng)計(jì)算機(jī)程序從而完成前述功能的一般處理器或者其他硬件設(shè)備(本說明書提供的各個(gè)實(shí)施例都可應(yīng)用上述描述原則)。

附圖2示例的搭建模塊201可以包括層次區(qū)分單元301和背景層處理單元302，如附圖3所示本發(fā)明實(shí)施例三提供的Web應(yīng)用界面換膚的裝置，其中：

層次區(qū)分單元301，用于區(qū)分背景層和背景層之上的前景層；

背景層處理單元302，用于挑選背景層圖片置于背景層，并在主工作區(qū)使用半透明層進(jìn)行遮罩。

附圖2示例的構(gòu)建模塊203可以包括半透明化處理單元401和設(shè)置單元402，如附圖4所示本發(fā)明實(shí)施例四提供的Web應(yīng)用界面換膚的裝置，其中：

半透明化處理單元401，用于使用層疊樣式表CSS規(guī)則，對前景層的前景元素進(jìn)行半透明化處理；

設(shè)置單元402，用于將黑白兩種純色的圖片按照需要的透明度進(jìn)行調(diào)整后保存為png格式，并將圖片設(shè)置為容器的背景。

附圖2示例的替換模塊204可以包括屬性變更單元501，如附圖5所示本發(fā)明實(shí)施例五提供的Web應(yīng)用界面換膚的裝置。屬性變更單元501用于通過Javascript操作背景文檔對象模型DOM元素改變CSS background屬性。

附圖2至附圖5任一示例的裝置還可以包括封裝模塊601，如附圖6-a至附圖6-d所示本發(fā)明實(shí)施例六至實(shí)施例九所示的Web應(yīng)用界面換膚的裝置。封裝模塊601用于構(gòu)建模塊203根據(jù)前景層的透明度效果，構(gòu)建前景層的半透明前景元素之后，將構(gòu)建所述前景層的半透明前景元素時(shí)的半透明效果封裝為特定的層疊樣式表CSS類。

需要說明的是，上述裝置各模塊/單元之間的信息交互、執(zhí)行過程等內(nèi)容，由于與本發(fā)明方法實(shí)施例基于同一構(gòu)思，其帶來的技術(shù)效果與本發(fā)明方法實(shí)施例相同，具體內(nèi)容可參見本發(fā)明方法實(shí)施例中的敘述，此處不再贅述。

本領(lǐng)域普通技術(shù)人員可以理解上述實(shí)施例的各種方法中的全部或部分步驟是可以通過程序來指令相關(guān)的硬件來完成，該程序可以存儲(chǔ)于一計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)中，存儲(chǔ)介質(zhì)可以包括：只讀存儲(chǔ)器(ROM，Read Only Memory)、隨機(jī)存取存儲(chǔ)器(RAM，Random Access Memory)、磁盤或光盤等。

以上對本發(fā)明實(shí)施例所提供的Web應(yīng)用界面換膚的方法和裝置進(jìn)行了詳細(xì)介紹，本文中應(yīng)用了具體個(gè)例對本發(fā)明的原理及實(shí)施方式進(jìn)行了闡述，以上實(shí)施例的說明只是用于幫助理解本發(fā)明的方法及其核心思想；同時(shí)，對于本領(lǐng)域的一般技術(shù)人員，依據(jù)本發(fā)明的思想，在具體實(shí)施方式及應(yīng)用范圍上均會(huì)有改變之處，綜上所述，本說明書內(nèi)容不應(yīng)理解為對本發(fā)明的限制。