一般页面你需要标注这些地方：

所有元素统一距离屏幕最左24px（全局性的数据可以直接和工程师沟通，也可以标注，推荐标注出来）

1、标题栏：背景色，标题栏文字大小，文字颜色（不再赘述）；

2、Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了；

3、菜单图标：

图标的大小和图标的可点击区域不一定一致

也就是说，图标可以做的很小，但是为了保证点击的准确性和流畅性，工程师可以把可点击区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上，否则图片会模糊。

在设计的时候就要考虑可点击区域的范围，比如X宝购物车页面左侧的小圈，可点击区域要比实际小圈尺寸大很多。

这种类型的图标需要标注图标点击区域大小，图标距离屏幕最左最右以及上下的距离。至于图标的间距，因为有些时候可能 设计师不能完全做到1px不差，所以我基本不标，交给工程师让他们去处理，其实等距排列的图标不需要标间距，因为工程师还要动态适应不同的屏幕，标了间距也是白标（还是要和你的搭档沟通怎么去标注）；

4、模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。

5、图片+文字：这个应该比较常见，只标注一个单位（图+文）就可以了。

图片需要标注宽高，因为工程师要设置图片区域，从后台调取，可以这么说，软件里除了横屏撑满的图，基本上所有的图片都要标注宽高。

图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，需要单独标出。

Tab Bar：

这个位置其实比较特殊，你可以单独标注图标大小+文字大小；还可以图标文字算作一个控件，整个切出来；

我们工程师的习惯是用整个的，也就是图标+文字算作一个ICON，所以我基本不怎么标注单独的图标（这里可以和你的搭档去沟通一下，看他是什么开发习惯）。

关于列表页类型的标注问题

普通的列表有两种方法（去问你的搭档，他喜欢用什么方法）：

标出行高，行内元素居中； 标出行内元素，元素上下间距，确定行高；

每种元素的位置如何确定：

通常标注的都是元素距离屏幕最左侧的距离，比如上图的图标元素距离左侧24px，文字元素距离左侧100px。

标注这个东西没有固定的方法，工程师的开发习惯不同，标注方法也不同。

该怎么标注虽然可以在网上找到方法，但那不一定适合你，一定和自己的搭档勤沟通，方法是死的，人是活的……

所有的页面标注总结起来就是：标文字，标图片，标间距，标区域；

（上述图标出现了45px的单数，因为软件自动吸附上去了显示了图标本身的尺寸，切图的时候记得输出个偶数尺寸的切片）

Part 4 切片资源的输出

切之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发。

全局性的切图常见问题

① 你的所有设计尺寸，包括图形效果，应该尽量使用偶数。

技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边就是设置为12px；

所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5像素的虚边。

② 切图尺寸应该提供几套？

ico_car.png IPhone2G，3G，3GS使用（好像没人用这手机了吧）

ico_car@2x.png IPhone4，5，6优先加载此尺寸图片（不是必须使用这个尺寸，是优先加载调用这个尺寸）

ico_car@3x.png IPhone6 plus使用的尺寸

可以简单的理解为倍数关系（其实是为了满足不同分辨率，我觉得不用过于深究），如果你使用IPhone 6尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。

理论上，为了达到最好的视觉效果，你应该输出三套尺寸，推荐输出三种尺寸的切片资源。

我的工程师搭档要求我给两套尺寸就可以，也就是@1x @2x的两种尺寸，因为我们没有6 plus的测试机，所以看不到效果，据他说应该不会太失真，但是为了保证效果，我还是给三套尺寸。

另外现在几乎看不到3GS了，所以需不需要提供一倍图，还是要和工程师讨论一下~

@1x @2x @3x是开发工具Xcode软件需要的UI资源，命好名称后，IOS设备会自动的选取合适尺寸。

③共用资源的图片，输出一张就可以

类似这种重复的按钮之类的，只要提供一张共用的资源就可以了；上面的文字是技术写上去的。

理论上按照最佳视觉效果，你应该提供多尺寸的图片；但通常我只提供最大尺寸的一张图片即可，这一点要和你的搭档沟通好，却问他需要什么方式。

④切片的输出格式

文件→存储为Web所用格式

(责任编辑：admin)