所以现在做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要考虑 用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还 是切44px大小，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会 比较困难，会很不灵敏。 ⑥图片图标的不同状态 每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出。
比如X宝购物车页面的小图标，实际切图要比图标大（88PX） 这种类型的图标需要标注图标点击区域大小，图标距离屏幕最左最右以及上下的距离。 至于图标的间距，因为有些时候可能 设计师不能完全做到1px不差，所以基本不用标，交 给工程师让他们去处理，其实等距排列的图标不需要标间距，因为工程师还要动态适应不同 的屏幕，标了间距也是白标（适当也要做沟通）
图标的提交尺寸 IOS系统可以自动把图片裁剪为圆角，所以提交图标的时候，你只需要提交正方形的PNG图片 即可。 因为需要的图标非常多，不可能全部加进去，只能选择最好的尺寸，我们的工程师要求我提供 以下图标尺寸： 1024*1024 Retina APP Icon for APP Store(高清屏的APP Store) 512*512 APP Icon for APP Store（普通屏幕的APP Store） 120*120 6的主屏幕尺寸 114*114 5/4s/4的主屏幕图标尺寸 57*57 3GS的主屏幕图标尺寸 58*58 Retina Settings图标尺寸 29*29 Settings图标尺寸 提交的图标尺寸不是固定的，所以，去找和你搭档的工程师，让他给你出一份需要提交的图标 尺寸文档。 差不多用的到的就这些，有时间可以去查看一下苹果的IOS人机指导手册或者开发文档，上面 有更加详细的数据说明。 但实际工作中需要的并不像手册上提供的尺寸那么多，所以工作之中，和你的工程师搭档去沟 通，你要知道的是你们公司开发所用的数据，而不是苹果提供给你的数据。
最小点击区域问题：
IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，在设备上1 point等 于1像素，所以转换成像素就是44*44像素，换算成物理尺寸大概是7mm左右吧（人机工效 学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，范围在9mm 左右合适)。
home
图标准则
图标规范
像素对齐
图标风格
NEXT
图标流程
图标案例
图标案例
在项目设计之初，就该进行项目归档整理。（项目名称+版本序列） 标注工具：Mark man、Pc Cook等 切图工具： Cutterman 一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS 版本要求比较高。
整的还原设计稿，很大一部分取决于标注。 不需要每一张效果图都进行标注，你标注的页面能保证工程师开发每个页面的时候 都能顺利进行即可。
④切片的输出格式 文件→存储为Web所用格式
图格式：PNG 24，PNG 8，JPG 在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大 小相差很大，使用JPG。 欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用 PNG 8；
⑤图标的点击区域
4.模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。 5.图片+文字：这个应该比较常见，只标注一个单位(图+文)就可以了。 图片需要标注宽高，因为工程师要设置图片区域，从后台调取，可以这么说，软 件里除了横屏撑满的图，基本上所有的图片都要标注宽高。 图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文 字以及说明文字，需要单独标出。 Tab Bar： 这个位置其实比较特殊，你可以单独标注图标大小+文字大小；还可以图标文字 算作一个控件，整个切出来； 有些单位的工程师的习惯是用整个的，也就是图标+文字算作一个ICON，所以 这种情况就基本不怎么标注单独的图标(这里可以和你的搭档去沟通一下，看他 是什么开发习惯)。
Tab bar(底部栏) 说说Tab bar这里，因为比较特殊。 如果单纯的只有图标，自然是只切图标就好了； 和工程师沟通，这里该怎么切，工程师给的建议是 图标+文字的模式，图标最好单独切，文字后面程序加上去。 另外记住，同一模块的图标切片大小保持一致，下图的四个图标本身尺寸并不相同，但是切图的 时候你需要切出相同尺寸的阴影大小，便于工程师开发使用。
标注区域： 所有元素统一距离屏幕最左24px(全局性的数据可以直接和工程师沟通，也可以标注，推荐标 注出来) 1.标题栏：背景色，标题栏文字大小，文字颜色(不再赘述)； 2.Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了; 3.菜单图标： 图标的大小和图标的可点击区域不一定一致 也就是说，图标可以做的很小，但是为了保证点击的准确性和流畅性，工程师可以把可点击 区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的 也是可点击区域的大小，也就是用透明区域去补上，否则图片会模糊。
切片资源的输出 全局性的切图常见问题 ① 你的所有设计尺寸，包括图形效果，应该尽量使用偶数。 技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边 就是设置为12px； 所以标注的时候务必使用偶数，为了保证最佳的设计效果，像素对齐设置。
② 切图尺寸应该提供几套？
理论上，为了达到最好的视觉效果，应该输出三套尺寸，推荐输出三种尺寸的切片 资源。 但有的公司要求给两套尺寸就可以，也就是@1x @2x的两种尺寸， ③共用资源的图片，输出一张就可以，如下图
图标准则
图标分类
图标规范
切图及标注
图标案例
图标风格
图标欣赏
项目立项
home
图标准则
完善的公司会把项目相关人员聚集起来，产品经理会把产品详细的用原型展示出来， 包括产品定位，市场需求，主打卖点，产品性质以及各模块具体功能，逻辑跳转演 示一下。 通常在最后，会建立如下文件夹
图标规范
像素对齐
图标风格
2
图标流程
颜色标注：建议标注颜色时，两种色值表达都标上(16进制&RGB)。 标注内容： 1.文字需要提供：字体大小(px),字体颜色； 2.顶部标题栏的背景色值，透明度； 3.标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值； 4.内容显示区域的背景色(如果是全部页面白色，那就和工程师沟通)； 5.底部Tab bar的背景色值。
切片的命名规则 命名并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，但 是大致还是有迹可循的，一般是： 切片种类+功能+图片描述（可有可无）+状态.png 名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划 线进行连接。 举个例子：一个首页的处于正常状态的确定按钮 btn_sure_nor.png btn_sure_nor@2x.png 切片种类是按钮（btn）；功能是确定(sure)；状态是normal(正常) 我通常是以这种命名方式进行命名，如果公司有设计文档，去看看之前留下的命名规范，如 果没有，那就去问工程师。
列表页类型的标注问题
普通的列表有两种方法： 1.标出行高，行内元素居中； 2.标出行内元素，元素上下间距，确定行高； 每种元素的位置如何确定： 通常标注的都是元素距离屏幕最左侧的距离，比如上图的图标元素距离左侧24px，文字元 素距离左侧100px。 标注这个东西没有固定的方法，工程师的开发习惯不同，标注方法也不同。 所有的页面标注总结起来就是：标文字，标图片，标间距，标区域；