也許你已經發現了，MacQQ的系統表情有兩次的更換，分別是2.1版本和2.2版本。而更換的主要原因，是由于在2.1版本時QQ表情的白邊問題，因此我們當時選擇了折中的方式，使用了在Mac端展現并不理想的一套系列表情。直到2.2版本，Leo同學對QQ表情的白邊進行了優化處理，才使得MacQQ又回到了大家熟悉的經典表情。這次的處理方法，也分享給大家，歡迎討論。
因為OS端/iOS端retina顯示屏的應用，QQ表情的分辨率提升為原來的2倍，這使得我們必須要找出解決目前QQ表情中的白邊和毛邊問題，這個是長期以來的詬病。目前在QQ表情的白邊問題上面，由于無法使用PNG/APNG動圖，因此，目前的QQ類產品大多使用GIF格式，但是GIF格式無法生成具有透明度的像素點，導致在導出的時候具有透明度的像素點會實化，并溢出容易生成白邊。通過目前Ulead與PS的去雜邊比照，發現效果差不多，都不盡如人意。在PS的索引模式下進行的GIF制作，效果與之前的導出方式也沒有太大的不同。那么目前的方法只能在留白邊和生成毛邊中2選1，但在這樣的情況下，無法適用于各種場景，而要根據每種產品特性制作一套表情，每種表情的生成成本會很高。
以下是白邊與毛邊處理在深色與淺色背景的對照：
通過在不同背景色的情境，綜合上面對比可以發現，淺色背景的帶白邊表情線條勻稱，看上去感覺舒服，而且考慮到OS端/iOS端QQ的整體風格以及顏色偏向淺色，在聽取了一些同事意見后，個人認為在無法實現表情PNG格式和GIF不失真的情況下，表情帶白邊更能夠讓用戶在視覺上接受。
關于目前OS端/iOS端QQ的表情問題解決方案(治標不治本)
MacQQ有一項功能為氣泡對話框的底色切換，這里會有一個問題，底色的自定義切換會使得底色深淺不一，那么如上面提到的，白邊與雜邊的問題在這里便會出現矛盾。選擇無白邊(毛邊)便需要背景顏色偏深，但是偏深色的背景色并不符合MacQQ整體的視覺設計風格與設計理念，因此，選擇留白邊會是一個相對較好的選擇，也就是說，背景色我們可以限定一個淺色色域，但是這樣會使得用戶的選擇自由程度收到限制，在交互體驗中不能滿足用戶的相關需求。為此，要滿足用戶的體驗感受，又不影響視覺風格，我們可以在上面的氣泡對話框加入一層具有透明度的明度模板(如圖)那樣，不論用戶如何選擇顏色，都在這個明度范圍內，那么視覺風格能夠得到保證，用戶的需求也能滿足，同時，表情的白邊問題也能得到解決。
以上是提出的解決方案，具體落實需要試驗。
首先以上面的氣泡框顏色為例子，抽出顏色。當只是直接輸出白邊背景為氣泡框顏色的表情效果如上右圖，還是能發現白邊的痕跡，白邊的直接輸出是不行的。也就是說，我們不能直接輸出白邊為純白色，我們需要找出一個白色色值，使得它能與這些底色接近，使得白邊不明顯突兀。
以這4個顏色為例子，假設找到他們的共同色值也就是平均色值。假設平均色值為S，那么我們可以假設算式為：
根據色值R：232 G：227 B：234 作為白邊輸出，背景為氣泡框顏色的表情效果如下：
從效果來看，輸出的色值與背景能較好得融合。
繼續綜合上面所說，可以推出，只要找出一個明度范圍內的平均色值，那么這個色值做白邊的輸出能在一定的明度范圍內與背景色融合。
蒙版明度范圍取決于蒙版的透明度與它的自身色值而且這個色值與白邊的色值接近，因為具有透明度，所以明度蒙版的原色值是要比起白邊的色值更亮一點的，也就是說找到白邊色值就能找到明度色值，那么按照數據的趨向與以上顏色明度的參照，得出白邊的色值為：R:230 G:230 B:230。
明度頂點的色調為R:255 G:255 B:255 但與對話框的底色相比，取對話框的底色明度R:248 G:248 B:248 更適合。通過上圖，可以發現透明度為：80%較好(低于80%透明度的情況下，白邊開始明顯)。
PS：在PS中的輸出方法。
1.首先，選擇前景色，RGB值各設為230
2.ctrl+shift+alt+s，儲存為web所用格式，然后在雜邊一欄選擇“前景色”，其他設置如下圖，然后輸出就可以了。
具體狀況需要通過retina顯示屏進行觀察，嘗試做了下蒙版，隨機點了幾個色，在PC上效果如下：
由此觀察大概的效果其實還是不錯的，但是具體的效果則需要通過retina顯示屏下觀察為準。白邊的顏色和明度范圍也還能在斟酌關于范圍的算法，最好研發部門能夠基于技術支持。當然，目前的方法也是治標不治本的，要解決根本問題，還是需要PNG動圖的支持。
Thanks
——Leoring
本文鏈接:http://www.yixieshi.com/12314.html(轉載請保留)
