切图外包过程揭秘

一个产品从构思到落地,需要以下环节:

发现商机 - 市场调研 -  头脑风暴 - 产品策划/功能设计 - 原型绘制 - 交互设计 - 项目立项 - 流向图绘制 - 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

- 举例:[email protected](对应的中文为:邮件_图标_搜索_默认@2x.png)

### 八 打包交付

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

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

你可能感兴趣的:(切图外包过程揭秘)