也許你已經(jīng)發(fā)現(xiàn)了，MacQQ的系統(tǒng)表情有兩次的更換闸英，分別是2.1版本和2.2版本。而更換的主要原因介袜，是由于在2.1版本時(shí)QQ表情的白邊問題甫何，因此我們當(dāng)時(shí)選擇了折中的方式，使用了在Mac端展現(xiàn)并不理想的一套系列表情遇伞。直到2.2版本辙喂，Leo同學(xué)對QQ表情的白邊進(jìn)行了優(yōu)化處理，才使得MacQQ又回到了大家熟悉的經(jīng)典表情鸠珠。這次的處理方法巍耗，也分享給大家，歡迎討論渐排。
因?yàn)镺S端/iOS端retina顯示屏的應(yīng)用炬太，QQ表情的分辨率提升為原來的2倍，這使得我們必須要找出解決目前QQ表情中的白邊和毛邊問題驯耻，這個(gè)是長期以來的詬病亲族。目前在QQ表情的白邊問題上面，由于無法使用PNG/APNG動圖可缚，因此霎迫，目前的QQ類產(chǎn)品大多使用GIF格式，但是GIF格式無法生成具有透明度的像素點(diǎn)帘靡，導(dǎo)致在導(dǎo)出的時(shí)候具有透明度的像素點(diǎn)會實(shí)化知给，并溢出容易生成白邊。通過目前Ulead與PS的去雜邊比照测柠，發(fā)現(xiàn)效果差不多炼鞠，都不盡如人意缘滥。在PS的索引模式下進(jìn)行的GIF制作轰胁，效果與之前的導(dǎo)出方式也沒有太大的不同谒主。那么目前的方法只能在留白邊和生成毛邊中2選1，但在這樣的情況下赃阀，無法適用于各種場景霎肯，而要根據(jù)每種產(chǎn)品特性制作一套表情，每種表情的生成成本會很高榛斯。
以下是白邊與毛邊處理在深色與淺色背景的對照：
通過在不同背景色的情境观游，綜合上面對比可以發(fā)現(xiàn)，淺色背景的帶白邊表情線條勻稱驮俗，看上去感覺舒服懂缕，而且考慮到OS端/iOS端QQ的整體風(fēng)格以及顏色偏向淺色，在聽取了一些同事意見后王凑，個(gè)人認(rèn)為在無法實(shí)現(xiàn)表情PNG格式和GIF不失真的情況下搪柑，表情帶白邊更能夠讓用戶在視覺上接受。
關(guān)于目前OS端/iOS端QQ的表情問題解決方案(治標(biāo)不治本)
MacQQ有一項(xiàng)功能為氣泡對話框的底色切換索烹，這里會有一個(gè)問題工碾，底色的自定義切換會使得底色深淺不一，那么如上面提到的百姓，白邊與雜邊的問題在這里便會出現(xiàn)矛盾渊额。選擇無白邊(毛邊)便需要背景顏色偏深，但是偏深色的背景色并不符合MacQQ整體的視覺設(shè)計(jì)風(fēng)格與設(shè)計(jì)理念垒拢，因此旬迹，選擇留白邊會是一個(gè)相對較好的選擇，也就是說求类，背景色我們可以限定一個(gè)淺色色域舱权，但是這樣會使得用戶的選擇自由程度收到限制，在交互體驗(yàn)中不能滿足用戶的相關(guān)需求仑嗅。為此宴倍，要滿足用戶的體驗(yàn)感受，又不影響視覺風(fēng)格仓技，我們可以在上面的氣泡對話框加入一層具有透明度的明度模板(如圖)那樣鸵贬，不論用戶如何選擇顏色，都在這個(gè)明度范圍內(nèi)脖捻，那么視覺風(fēng)格能夠得到保證阔逼，用戶的需求也能滿足，同時(shí)地沮，表情的白邊問題也能得到解決嗜浮。
以上是提出的解決方案羡亩，具體落實(shí)需要試驗(yàn)。
首先以上面的氣泡框顏色為例子危融，抽出顏色畏铆。當(dāng)只是直接輸出白邊背景為氣泡框顏色的表情效果如上右圖，還是能發(fā)現(xiàn)白邊的痕跡吉殃，白邊的直接輸出是不行的辞居。也就是說，我們不能直接輸出白邊為純白色蛋勺，我們需要找出一個(gè)白色色值瓦灶，使得它能與這些底色接近，使得白邊不明顯突兀抱完。
以這4個(gè)顏色為例子贼陶，假設(shè)找到他們的共同色值也就是平均色值。假設(shè)平均色值為S巧娱，那么我們可以假設(shè)算式為：
根據(jù)色值R：232 G：227 B：234 作為白邊輸出碉怔，背景為氣泡框顏色的表情效果如下：
從效果來看，輸出的色值與背景能較好得融合家卖。
繼續(xù)綜合上面所說眨层，可以推出，只要找出一個(gè)明度范圍內(nèi)的平均色值上荡，那么這個(gè)色值做白邊的輸出能在一定的明度范圍內(nèi)與背景色融合趴樱。
蒙版明度范圍取決于蒙版的透明度與它的自身色值而且這個(gè)色值與白邊的色值接近，因?yàn)榫哂型该鞫壤壹瘢悦鞫让砂娴脑凳且绕鸢走叺纳蹈烈稽c(diǎn)的叁征，也就是說找到白邊色值就能找到明度色值，那么按照數(shù)據(jù)的趨向與以上顏色明度的參照逛薇，得出白邊的色值為：R:230 G:230 B:230捺疼。
明度頂點(diǎn)的色調(diào)為R:255 G:255 B:255 但與對話框的底色相比，取對話框的底色明度R:248 G:248 B:248 更適合永罚。通過上圖啤呼，可以發(fā)現(xiàn)透明度為：80%較好(低于80%透明度的情況下，白邊開始明顯)呢袱。
PS：在PS中的輸出方法官扣。
1.首先，選擇前景色羞福，RGB值各設(shè)為230
2.ctrl+shift+alt+s惕蹄，儲存為web所用格式，然后在雜邊一欄選擇“前景色”，其他設(shè)置如下圖卖陵，然后輸出就可以了遭顶。
具體狀況需要通過retina顯示屏進(jìn)行觀察，嘗試做了下蒙版泪蔫，隨機(jī)點(diǎn)了幾個(gè)色棒旗，在PC上效果如下：
由此觀察大概的效果其實(shí)還是不錯(cuò)的，但是具體的效果則需要通過retina顯示屏下觀察為準(zhǔn)鸥滨。白邊的顏色和明度范圍也還能在斟酌關(guān)于范圍的算法嗦哆，最好研發(fā)部門能夠基于技術(shù)支持谤祖。當(dāng)然婿滓，目前的方法也是治標(biāo)不治本的，要解決根本問題粥喜，還是需要PNG動圖的支持凸主。
Thanks
——Leoring
本文鏈接:http://www.yixieshi.com/12314.html(轉(zhuǎn)載請保留)
