基本思路：
1、选择一种尺寸作为设计和开发基准；
2、定义一套适配规则，自动适配剩下两种尺寸；
3、特殊适配效果给出设计效果。
一、界面设计阶段：
1、设计稿：设计师使用iPhone6（750x1334）的尺寸做设计稿；
2、矢量图层：除了图片以外的设计元素全部做成矢量；
3、标注稿：直接在iPhone6的设计稿上做标注；
4、切图：方法a，先在iPhone6的设计稿上切图，生成@2x（二倍图），再将设计稿等比放大1.5倍，切图生成@3x（三倍图）；方法b，安装插件cutterman，命名好图层，一键切图！（强烈推荐）
二、界面输出阶段
交付输出文档给开发工程师，文档包括：1.设计稿；2.标注稿；3.切图（包括@3x和@2x）
ps：文档整理最好按照页面或者模块分成几部分，不要全部放在同一个文件夹（当一个文件夹里面成千上万的切图，估计程序员会疯掉）。
三、适配调试阶段
界面开发出来后，针对实际效果向上向下调试iPhone6 plus和iPhone5s的界面效果
几个注意事项：
1，图片图层要处理成智能对象，保证放大1.5倍不失真
2，做标注的时候，要考虑界面的代码实现逻辑
网友评论