如何用一份设计稿支持多个尺寸(iOS)

2016-09-29  本文已影响0人  书粥

基本思路:

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,做标注的时候,要考虑界面的代码实现逻辑

上一篇下一篇

猜你喜欢

热点阅读