一个产品从构思到落地,需要以下环节:
发现商机 - 市场调研 - 头脑风暴 - 产品策划/功能设计 - 原型绘制 - 交互设计 - 项目立项 - 流向图绘制 - 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设计师必懂的知识之一,且要求设计师有着细腻、严谨的态度对待这份工作