设计外包专题 I 切图外包过程揭秘

2019-02-21658

切图外包过程揭秘

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

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

七 切图命名

八 打包交付

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

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

分享
点赞0
打赏
上一篇:浅谈瓶颈期
下一篇:每周产品体验 | 多闪 APP & 喜马拉雅 APP