切图外包过程揭秘

• 一个产品从构思到落地，需要以下环节：

发现商机 - 市场调研 - 头脑风暴 - 产品策划/功能设计 - 原型绘制 - 交互设计 - 项目立项 - 流向图绘制 - UI设计 - 切图标注 - 技术研发 - 产品测试 - 项目上线

• 切图作为连接设计与技术两者的工作模块，缺其不可。合格的、严谨的切图可以大大减少技术人员开发返工率，减少技术人员的开发工期，提升开发流畅度，从而减少项目人力成本。

一、切图介绍

• 切图是指将设计稿切成便于制作开发的图片素材，供给工程师们在产品开发中使用，最终开发出有利于交互，拥有良好视觉感的产品。

• 互联网企业基本执行团队由产品部门、设计部门、技术部门（APP组、Web组、java组）组成，与非互联网企业团队存在着部分相同的执行人员，因此非互联网企业在开发产品时需要将一部分工作外包出去，切图便是其中一项工作。

二、切图前期准备

• 准备好PSD源文件
• 文件最好按页面为单位，一个页面分成一个psd，或者一个页面一个组；删除隐藏、废弃的图层。
• 页面命名（关键），一个常规产品均60页+，设计师们需要根据页面命名设置切图命名，页面命名可以防止设计师漏切页面，也可以提高工程师们在开发中使用切图查缺补漏的效率。

三、切图需要用到的工具

• 设计软件 Photoshop——俗称“PS”，设计师用来绘制产品设计稿用到的图像处理软件
• 切图插件 Cutterman—— Photoshop软件里的切图插件，可在 Cutterman官网上下载安装。

四、设计稿尺寸对切图的影响

切图师需要在正确的设计稿尺寸下进行切图，切图素材才能正常供给开发人员使用。否则产品开发落地后会出现图标变形，像素低下的情况。

五、手机端常用的几种设计尺寸：

• APP-iOS端：750x1334px 640x1136px

• APP-Android端： 720x1080px 640x960px

• iOS：一般采用750x1334的来设计，切图直接适配750x1334 分辨率的机型，并向上向下适配主流分辨率（@2x/@3x）

• Android：一般采用720 x 1280来设计，切图直接适配720 x 1280分辨率的机型，并向上向下适配主流分辨率（xhdpi）

六、切图格式与大小

• 格式：PNG
• 内存：大素材或者图片进行压缩，常用的工具有ppduck，业内较优秀图片压缩工具，压缩出来既保持了清晰度又减小的K值。

七 切图命名

• 模块_类别_功能_状态@2x.png
• 举例：mail_icon_search_pressed@2x.png（对应的中文为：邮件_图标_搜索_默认@2x.png）

八 打包交付

• 有了以上7个步骤的切图后，剩下就是与项目一起查缺补漏，整合出完整的切图文件夹，最好打包完成。

切图虽然是产品落地过程中非核心环节，但它却肩负着设计稿顺利交棒到技术生产线的使命，已经成为UI设计师必懂的知识之一，且要求设计师有着细腻、严谨的态度对待这份工作。广州芦苇信息科技有限公司成立于2015年，是一家综合性软件与信息服务企业。我们以专业，可信赖为服务理念，提供从咨询、解决方案、外包服务到IT人才培养的“端到端”软件及信息服务，业务已覆盖地产、快消、高科技、金融与银行、电信、公共服务等多个领域！