BY:京京 小白

第一次着手做网页游戏的UI，我们发现制定的视觉规范基本在输出后普遍存在偏差。可能有时候这种几个像素的位置偏移并不被大多数用户在意，但是对我们而言，视觉规范就会成为只是设计师自我参考的数据，而不是实际线上产品的最终效果，这令人感到相当恼火。

我们的设计过程，基本是从PS里开始，在FLASH里输出，最后前端直接提取FLASH里的文件信息制作上线。常理来说，只要控制到FLASH输出与PS效果一致，基本在线上就可以完全实现。

那我们就把精力投放到检查PS与FLASH里对位置的问题上。
FLASH游戏UI对位置的基础原理：

这里拿最近参与的一个游戏的主界面为例，解释下我们游戏的对位关系。前端程序就是以整个主界面的最左上角顶点为（0,0）坐标。直接在FLASH中提取各个界面的左上坐标，来定位的。
——也就是说，关键在于“找到精确的（X，Y）坐标”。

浮层、TOOLTIP是在单独的元件里定位最左上角顶点为（0,0）坐标，寻找这个坐标相对的（X,Y）

另：由于FLASH里，坐标都是带小数点的，而PS里像素没有小数点，所以数据都要确保整数。

正常标注：

视觉稿                                 规范稿

根据以上标注，直接加加减减丢入FLASH后，出现如下错位问题：

红色为PS设定的正确行距，比较后偏差1-3个像素不等，累积偏差极大，整个页面大了一圈。

1． FLASH的文本定位基点：

打开FLASH，输入一段文本，会发现FLASH的整个文本框比实际的可视字体范围往各个方向各扩展2像素。

即坐标计算的起始点，原（x,y）的坐标，会变为（x-2,y-2）的坐标。

2.PS的文本：以PS14号字体为例，输入后，可见其字体本身并不是14PX高，仅13PX。（以此类推，每个字号-1是它实际高度），因为最下面空着一行看不见的像素：下划线预留位置。

（全角半角中英文在14号文本框内的位置比对）

结论：当FLASH里重新构架界面的时候，可视字的尺寸在导入FLASH后，实际尺寸是向左向右各扩展2像素，向下扩展3像素。也就是在PS里，当我们测量一个字在场景中的位置的时候，所得的X,Y坐标要各减去2像素，才是输入FLASH的正确坐标。而遇到文本框与文本框的间距时，PS里测量出来的可视间距，要减2+2+1=5个像素（不可视但存在），才是FLASH里文本框和文本框的间距（2像素是FLASH文本框上下各扩展的像素，1像素是因为PS文本里看不见的下划线）

3. 九宫格/自适应

解决了2个软件文本的差异性问题，也未必都能对准。这是因为界面元素里有的底图是位图，有的是FLASH直接制作的元件。其中FLASH自己制作的元件底图，必须打散，确保每个文件的（0,0）起始坐标确实在它应该在的位置上，否则后面的坐标全体会出现偏差。

4.BUG

当上述结论都确认无误后，我们输出文件并截图再做对比，发现除了文本框以外，其他图素的边缘都有点模糊，仔细比较发现，边缘都出现1个像素的透明度模糊化，扩展。对于要求画面很锐的界面来说，这也是不希望发生的事情。数据本身都无问题，就是输出后自动变态了。难道这是天灾人祸不可抗拒因素？我们所有的坐标都没有小数点，怎么还会出问题？

经前辈友人指点，据说这是FLASH的一个BUG,保持所有长宽为整数的同时，除文本框以外，一切X,Y轴坐标都在原来数字上加0.5。于是，最终100%达成从PS到FLASH输出的完美实现。

修改前                                           修改后

5.前端的一些反馈

到上面这个部分，FLASH完成输出校对。应该来说，程序那边直接提取文件和数据，不会有什么问题。但是秉持着UED的精神，还是让前端生成了一套测试文件把大致会遇到的各种图形文本九宫格的排列情况做了一下最终测试。确实发现了还有一个小麻烦。

隔行文本会出现1PX误差

这是因为行距在PS里有4个像素，但是根据文本差异的调整，减5后，在FLASH里，行距为-1像素。而-1在前端实现的时候，默认压到的那行会移一个像素。如果是-2，隔行会移动2个像素。不过移动的只是文字视觉位置，而非文本框。所以对我们标注XY轴并无影响。而这个问题，如果遇到（仅在行距为负数发生），则有前端修改处理即可，我们只需向前端标记调整需求。

总结

1.标注根据步骤2的结论进行标注。

2.底图是AI FLASH文件，记得打散。

3.除文本框以外，所有元件坐标尾数+0.5。

4.有负数行距，标注给前端。

PS视觉尺寸与FLASH之间的文本对算公式：

PS文本（可视）  上+2PX  下+3px     =    FLASH文本计算框

例如：PS文本（面板） 12号字15行距 = 3像素行距 = FLASH里 -1行距（FLASH面板里为行距：-1点）

PS的段落与FLASH文本框对应关系：

小TIP：PS里12号字12行距=0像素间隔=FLASH里行距点数为0（但实际视觉上两行看上去有1PX间隔，那是下划线的位置）

以上是目前的小结，FLASH游戏才刚刚接触，多有不足，发上来和大家一起探讨，共同进步。

合作人：京京

来源：http://uedc.163.com/3023.html