UI 设计师在给 iOS 或 Android 开发者提供资源图的时候需要注意哪些细节?

41

郭嘉琦，第2147483648号用户

41 票，来自 apin、睢琳、YOYO 更多

移动平台上只做过 iOS 开发。

关于尺寸和坐标：

在实际的工程中用多大尺寸，就出多大尺寸的图，绝对不要让工程师去 resize 图片！（当然 @2x 转非 retina 分辨率除外，他们有脚本可以帮他们。）设计师最好开一个与屏幕分辨率相同的 psd 文件用来调整大小出图。
@2x 的图要给偶数分辨率，大小应当是整数（@Bill Cheng 在有些情况下视图设置成浮点数的 frame 会导致自定义字体发虚）。
同类资源（比如一排按钮图标）的大小要相同，因为工程师很可能会用循环创建那些视图。可能有人会问为什么大小会不一样？最常见的是因为阴影等原因导致有几个像素的偏差。还有些时候我也不知道为什么，但是碰上不专业的美工就是会把同一个按钮出的每次都不一样大。
同类元素的资源，不管大小相不相同，那么它们的内容相对于 (0, 0) 点也要是对齐的。比如——圆的圆心对齐，人物的脚要在同一水平线上。至于 (0, 0) 点是左下还是左上，不同的操作系统规定得不一样，在 iOS 中是左上。

关于留白：

让图片尽可能小。
但不要截断阴影、外发光等。不要用眼睛判断，多用 PS 的“按透明像素裁切”功能。
有些具有对称中心的元素，当四周的内容不对称时，应该加多余的留白让元素的中心位于画布中心。这并不是一句废话，有时你的按钮向右、向下投影，当按透明像素裁切后，按钮的中心就会相对与画布中心偏左、偏上。一般情况下不用这么严格，但是如果你想给按钮加个选中光晕，这张光晕的图肯定比按钮的图要大，按钮再不是中心对齐的话，程序员会十分痛苦。

关于切图：

用来播动画的帧图片，导出时运动图层和静止背景分开，减少运行时系统资源的耗费。
可变尺寸的，或是大尺寸、四角特殊但四边简单的资源——比如微信的消息气泡，可以导出最小可用的大小，工程师利用 iOS 的 resizableImageWithCapInsets: API 来生成所需大小的图。参见 http://geeklu.com/2012/06/image-slicing-for-ios-app/ 。
有些资源不应出整张图，而要根据工程师的需要切散，比如 Tab 背景图不能带着当前激活的 Tab 出图，虽然它们很可能是被一起画出来的。当你觉得工程师使用这张资源可能会有潜在的麻烦时，与他们沟通。

关于透明度：

简单地说，该透明的地方透明，不该透明的地方不要透明。有时设计师为了得到一些减淡了的颜色或者混合色而在 PS 中设置了填充的透明度，之后忘记了，等到出图时也看不出区别。但是在实际程序中，这些半透明的地方可能会表现出怪异的行为。对于一个填充到底应不应该是半透明的，取决于设计师所要模拟的真实物体是不是半透明的。比如，现实中的阴影往往认为是不透明的。如果你给工程师一张具有半透明阴影的图，并且两个视图都使用了这张图，一旦它们重叠，那么重叠部分的阴影就会加深。

关于文件名：

如果文档里包括组件的命名，就按文档来。
否则，自己起文件名时注意逻辑分层、语义正交、适当的前缀后缀。
是否使用单词缩写、多级文件名正序还是倒序等问题，多了解工程师的个人喜好。
不要用拼音！
多级文件名的不同部分之间使用“-”还是“_”连接，会影响到程序员的自动补全和一些操作（比如"btn-cancel-highlighted.png"中的每个词可以单独双击选中以便修改，但"btn_cancel_highlighted.png"双击则会选中整个词，大家可以试试看）。

2013-01-09 4 条评论感谢分享收藏

1

王聪，robaggio 网易北京移动开发

1 票，来自广伟

现在我们做iOS应用，美术基本都忽略非Retina的iPhone了，还用iPhone3GS的用户已经比较少了，单独切普通图也许从人力和安装包大小上都会不划算。

2013-01-09 添加评论感谢分享收藏

1

Bill Cheng，移动开发者，从Android到iOS到WP

1 票，来自郑文

Android：
如果开发者比较牛，最好请提供矢量图，矢量UI图哦
如果美工比较牛，最好请提供9patch的png
如果不追求全屏幕尺寸匹配的话，请给需要适配的分辨率一样准备一张UI，资源图元素分离，按照适配屏幕像素，要是能提供每个尺寸下每个元素的位置px就更好了

iOS：
iOS有5种分辨率——iPhone 480，iPhone 960，iPhone 1136，iPad 768，iPad 1536——要做几个，记得提供几个的UI图
全部图的坐标做好都是按照非Retina算（可以使用Float值）
资源图需要准备普通的和Retina的图

通用：
所有资源图最好标注层次，应为都是PNG所以透明部分也要特殊标注出来
再一个就是交互设计和美工要把界面切换时候的顺序标注出来
还有一个就是字体，如果是特殊字体，元素图最好就把字给嵌上去，程序为了几个字加字体资源很浪费空间的，再一个版权的问题……
最后一个就是如果有动画的话，最好提供Gif参考，或者其他动画参考，方便最后程序检查实现效果

========体内酒精含量：0.4%==========
以上都是我在开发的时候和美工各种交流之后得出的要点，不过我的项目都不大，可能各位做开发的时候还会碰上别的问题
碰上了别说我没提到……只是我没碰到而已……
最后打个广告：《Hacker Pulse》隆重登陆App Store，欢迎各位下载使用。
PS：泻药

2012-12-06 5 条评论感谢分享收藏