关于OS端/iOS端QQ表情白边处理方案

转自:http://www.yixieshi.com/ucd/12314.html

也许你已经发现了，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