QQ透明皮膚：多層算法 一鍵適配各種背景

　　那些流連過的風景，那個長存於心的人，那些一心向往的美好，或是那句曾讓人恍然的話語。動人的畫面，我們不止想要印在腦海，更希望它們躍然屏幕。當QQ變為生活的一部分，特別的皮膚也可以是記憶的指針，希望的燈塔，點亮心情的陽光。透明皮膚：透一下，心悠揚。

　　1. 什麼是透明皮膚

　　透明皮膚，顧名思義就是實現QQ主要窗口皮膚的透明化，使得主面板和會話窗口的可以完全展現皮膚的圖像，提升QQ的視覺效果，滿足用戶個性需求。

　　2. 需求背景

　　a) 來自70萬的用戶呼聲

　　根據後台數據監測(忽略無法監測到版本用戶不計)顯示，有70萬QQ用戶使用網友制作的補丁修改QQ配置文件，以實現透明皮膚的美化效果。

　　b) 透明皮膚補丁的用戶分析

　　我們對通過70萬用戶的分析，發現使用透明皮膚補丁的用戶主要是網絡活躍度高、追求獨特個性和渴望表達自我的青少年。他們要麼追逐潮流：喜愛裝扮、迷戀明星、酷愛自拍;要麼有著強烈的自我意識：叛逆、情緒化、特立獨行。透明皮膚不僅具有趣味性，更能夠彰顯個性，表達自己。

　　c) 補丁的3大弊端

　　弊端1：補丁的視覺效果粗糙。網友通過修改配置文件，直接刪除了QQ主面板和會話窗口的白色質感層，無法很好滿足用戶的審美需求，無法提供對白色質感層透明度的性調節。

　　弊端2：無法適應各種背景。網友制作的補丁只可以全透，不可以調節透明度。當選擇的背景顏色偏重時，主面板和會話窗口的文字將無法閱讀。

　　弊端3：使用補丁存在安全隱患，給用戶帶來潛在的危害。

　　所以，基於用戶需求的考慮，我們實現了這一需求，並在多個方面實現了功能的創新突破。特別是開發技術上，我們巧妙的運用了分層控制的算法，不僅實現了各控件視覺效果的特定優化，並解決了設置極值時出現黑色色帶的難題。

　　3. 技術創新

　　(圖2 分層技術說明)

　　a) 分層繪制窗口及各控件

　　現有QQ各主要窗口是通過背景層、質感層和內容層進行分別繪制。背景層上修改皮膚的圖像，質感層透明度的調節決定背景透明效果，而內容層上顯示內容的透明度亦可調節。

　　如果細致考量美化效果，會發現窗口和各控件的透明要求其實並不一致。窗口追求高透效果以實現背景的完全展示;而部分控件，如Tab區需要相對低透，使用戶在操時作清晰易辨。

　　細化到單個控件，各部分的透明變化也不一致，以滾動條為例，前景(滾動條拉桿、按鈕)應盡量不透明，用戶可辨識;而背景則盡量透明，提升美化效果。

　　為了追求最佳的透明效果，我們創新地將窗口的質感和各控件的質感分開繪制，為窗口和不同控件設置特定的變化率。使得用戶僅需調節一個設置項，便能的任意調節整體透明度，並始終保證窗口和各控件的優化顯示。

　　b) 分層繪制的邏輯算法

　　通過修改質感層的Alpha值來實現透明效果的調節，並分開控制窗口及各控件的質感層：在轉換過程中增加一個控制參數dbPercent(與透明度變化率成正比)，主要窗體采用默認值，特定控件賦予各部分不同數值，使得窗體及各控件實現不同變化率。為突出特殊控件(如滾動條)的顯示，我們也對內容層的Alpha參數進行了修改。統一公式為：

　　realAlpha(真實應用質感透明度) =

　　255 - ( 255 – MaterialAlpha(全局質感透明度) ) * dbPercent

　　注：dbPercent默認等於 1

　　其中，窗口及各控件特定參數設置如下：

窗口/控件

dbPercent （=）

會話窗口主體(aio、會話區、輸入區)

默認

主面板主體

默認

會話窗口>小工具欄

0.8

主面板>Tab區前景（icon）

0.3

主面板>Tab區背景

0.5

滾動條前景（拉桿、按鈕）

0.08

滾動條背景

0.9

　　(圖3 圖示說明)

　　c) RichEdit黑色色帶修復算法

　　RichEdit的TxDraw接口未返回Alpha通道，所以采用三遍繪制的方式確定Alpha通道。但在ClearType開啟的情況下，這種方法會無法准確獲取Alpha通道，所以會有花屏的狀況出現。

　　為了解決此問題，我們在RichEdit繪制結束後強制用一個畫刷，把所有像素點的Alpha通道打成255，此方法的後遺症是當窗口背景較黑的時候，RichEdit部分會較其他控件部分顯黑，出現黑色色帶。

　　為追求極致的美化效果，必須克服這個後遺症。於是在窗口質感層之前，增加了一層純白色的混合層，這層質感層的Alpha計算公式為：

　　revertAlpha = sqrt(255 * 255 – MaterialAlph * MaterialAlpha)

　　從而將RichEdit的背景色維持在一個較白的效果，較好修復RichEdit黑色色帶。

　　(圖4修復前後效果對比)

　　d) 好的算法帶來的效果突破

　　對比網友補本版粗暴地去掉質感層，不僅造成透明程度不可調節，各部分顯示不協調，某些區域辨識度低，甚至還出現黑顯，美化效果並不理想。由於用戶無法對各窗體進行分開調節，盲目地將透明效果推廣到各個窗體，反而會影響美觀。而如果增加個窗體的分開調節，會大大增加用戶的精力成本，降低功能的易用性。所以，我們利用技術上的創新，實現了效果上的突破。效果美化：搜索框的黑顯消;Tab區、滾動條、會話窗口等操作區的顯示清晰，不影響用戶操作。

　　(圖5 網友版透明皮膚) (圖6 QQ2012beta2 透明皮膚效果)

　　4. 操作便捷，一鍵適配各種背景

　　雖然為了實現了透明皮膚，我們對技術作了很多的改造，但是呈現出來的東西卻是最簡單操作：用戶僅需調整一個設置項，即可實現上述所說的各部分透明度協調變化。如果用戶同時使用毛玻璃效果，將會增加透明皮膚的可玩性。

　　(圖7 QQ2012beta2設置透明皮膚入口)

　　之所以將透明皮膚設置為可調節透明度的交互設計，是為了可以給用戶可以調節白色質感層的控制權利，可以根據不一樣的背景，調節到最適合的透明度。

　　(圖8背景顏色較影響文字閱讀時將透明度調20%透明)

　　(圖9背景顏色不影響文字閱讀時將透明度調100%全透明)

　　5. 驚喜發現：用戶擴展，潛力無限

　　透明皮膚其實具有龐大的潛在用戶群。上線後，我們發現透明皮膚的用戶群其實不止局限於我們預想的青少年群體，已擴展到大量QQ活躍用戶中去。根據觀察同事們的使用情況，看到攝影發燒友換上了自己的得意之作，已為人父母的家長換上了寶貝的可愛照片。每個人都有追求趣味、美觀和個性的客觀需求。用戶的普遍肯定也更加堅定了團隊迎接新挑戰的信心。

　　(圖10用戶微博反饋)

　　文章來源：騰訊大講堂