听说你想上天？？

那你可得跟上喽

↓

↓

↓

↓

切图篇

     切图是指在设计稿里整理出技术开发所需要的素材或图片。合格的、严谨的切图可以大大减少技术人员开发的返工率，减少技术人员的开发工期，提升开发流畅度，从而减少项目人力成本，最终开发出有利于交互，拥有良好视觉感的产品。

     切图标注作为连接 UI 设计到技术开发两者的工作模块，是不可或缺的。到底哪些是要切的呢？总之一句话——前端写不出来的都要切。切记：多于与你的开发沟通，这会节省你大量时间。

一、切图基础规范

   ⚬  切图的尺寸必须为偶数

   ⚬  同一模块内，切图大小应保持一致

   ⚬  如果有背景，尽量用平铺的背景图案来设计（减少程序体积）

   ⚬  可点击的部件要把相关状态都切图输出，比如：正常状态、点击状态、不可点击状态

   ⚬  输出的切图应当尽可能的压缩大小，以降低 APP 的总大小，提升用户使用时的加载速度

   ⚬  所有的变形字体把它当成 icon 来切

   ⚬  切图输出格式：png-24

   ⚬  重复的东西只切一个

二、设计稿尺寸与切图倍数

  UI 设计师需要在正确的设计稿尺寸下进行切图，切图素材才能正常供给开发人员使用。否则产品开发落地后会出现图标变形，像素低等情况。应该尽量使用偶数，避免出现0.5像素的虚边。

手机端常用的设计尺寸与它们对应的切图倍数

IOS：采用 750×1334 来设计，@2x 切图直接适配 750×1334 分辨率的机型，并向上向下适配主流分辨率（@2x/@3x）。

设计稿750x1334px——切图倍数iOS@2x，iOS@3x 两种

Android：采用 720×1280 来设计，XHDPI 切图直接适配 720×1280 分辨率的机型，并向上向下适配主流分辨率（XHDPI/XXHDPI）。

设计稿720x1280px——切图倍数XHDPI，XXHDPI 两种

微信小程序：（它的单位都是以i6的750px为划分点）。

设计稿750x1334px——png24

手机端网页、公众号等（与微信小程序统一使用i6，方便做单位转化）。

设计稿750x1334px——png24

关于Android & iOS设计尺寸规范这里不做过多介绍，过两天补上。

三、切图格式与大小

PNG切图：PNG 24，PNG 8

在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；

欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8；

切图格式常用 PNG，这是因为 PNG 体积小（K值），最大程度减少安装包大小；无损压缩，保持素材清晰度；支持透明效果，只保留图层内容本身。

svg切图：

①基础格式同png切图，但由于svg格式为矢量切图，可由代码控制颜色及大小，所以无(_状态)，以及输出时无倍率(@2x、@3x)后缀。

②装饰性svg切图,同样式不同尺寸颜色，提供其中一个基础的以(_功能名称)命名的svg即可; (大小、 颜色可由开发自行控制)

③设计提供svg切图时，需同时提供图标切图的色值变化规范。

注意事项：

1.内存大小：

    为了方便用户使用产品时快速加载页面，需要对大素材或者图片进行压缩，常用的工具有Tinypng(熊猫压图)，都是业内较优秀的图片压缩工具，压缩出来的图片既保证了清晰度又减小的K值。

2.双数像素切图：

    750x1334px 与 1080x1920px 的切图资源大小都必须为双数像素，才能保证开发时素材被高清显示。因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远。(单像素切图会出现模糊)

3.同一模块内，切图大小应保持一致(CSS盒模型)：

    盒子模型是网页开发中经常用到的CSS技术思维模型，模型具有内容（content）、内边距（padding）、边框（border）、外边距（margin）4 个属性。所有的控件和信息都需要在每一个盒子里完成多状态展示，所以可以理解为工程师们在搭建页面时先在页面上画一个又一个的格子（盒子），它们都是矩形格子，与我们的切图矩形相匹配，同一种控件的格子大小一模一样，就像复制粘贴一样。

    所以同一类型的控件与它们所有状态的切图都需要统一尺寸。

    直接切图导出的图标大小可能不一致，如果前端工程师对这些图标大小使用同样的CSS规格，那最后界面还原度可能会很低；为了视觉统一，保证还原度，所以我们在同一模块内，切图的大小应保持一致。

4.效果图与实际切图(面图标)：

    桌面图标/应用icon 会被运用在不同的位置，比如手机桌面，产品平台，手机系统列表……因此在输出桌面图标切图素材时，不需要对桌面图标切图进行圆角处理。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

5.点击区域大小(空白像素补充)：

    IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，是在iphone 3 (320×480px）普通显示屏下制定出来的，换算成物理尺寸大概是7mm左右吧（人机工效学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，范围在9mm左右合适)。这个数据自然要与时俱进。在iphone7 （750*1334px）的Retina 显示屏下44px点击区域就变为了88px。但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px，换算成物理尺寸后大致是在7mm-9mm之间。据说这个尺寸下，不容易出现误操作，误点击；小于这个尺寸，点击就会变的有些不太准确，一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的……

    所以现在做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还是切44px大小，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会比较困难，会很不灵敏。

6.图片、图标不同状态：

    每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出。

    比如按钮有正常(normal)，按下(pressed)，选中(selected)，禁用(disabled)等多种状态，最常出现的就是normal→pressed→normal；某些特定按钮控件会出现选中状态，具体情况具体分析。这里显示的是你要知道按钮可能有几种状态……

四、切图输出类型

1.切什么？

2.启动页尺寸

    启动页不能适配，因此需要单独出设计图，iOS共需提供6套尺寸（目前5以下的适配基本淘汰），Android共需提供5套尺寸，当然也支持视频形式。

3.全屏类、局部类切图

    主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大，在切图过程中需要控制切图文件的大小。

4.点九图——后缀名是「.9.png」  (Andriod)

    点9图可以保证图片在不模糊变形的前提下做到自适应。点9图的出现是安卓机为了适配不同的手机分辨率的解决方案。让切图局部拉伸，而不是整体拉伸。iOS只需提供图片质量较高的切图，拉伸效果可由代码控制。

5.动效切图gif

    动效实现原理是由若干张图片连续播放，从而形成视觉影像，这若干张图片就是需要提供给工程师实现动效的序列切图。img_anim_loading01 (loading帧动画第一帧)

正确的切图标注示例

以上是早期整理的一些资料

发出来一是总结并加深记忆，且放便自己查阅

二是交流，错误及未完善提及的内容可在评论区留言

我会更新的，谢谢你们！