如何一套App设计应用于两个平台～

想记录下来一点点的知识，慢慢积累成长；这次的一套ios设计输出要运用在两个平台上，但又没有时间去单独搞一遍（有时间也不想搞），因为图片的事情也折腾好久。踩过来的坑，慢慢填上。

近期搞版本迭代，开发上线完成后再放出来~

IOS

1. 关于设计尺寸

我自己的话用sketch作图，这个软件大家应该都知道了。设计尺寸750*1334，不过一开始的时候也要去问一下开发他的开发尺寸。太小屏幕的尺寸现在使用用户数量也很少，忽略不计。

另外，设计尺寸最好为偶数倍，这样缩放图片适配的时候就不会出现半像素的虚边。

① 640*960/1136（iphone4/5/5S，引导页切图提供尺寸）

② 750*1334（iphone6，用这个尺寸作图，导出1x原图大小，命名为@2x）

③ 1080*1920（iphone6s，导出1.5x原图大小，命名为@3x）

倍率：以750宽为基础，1.5x(切图倍率)=1080（其他屏宽）/750（设计稿宽），这样大致换算一下就知道要导出多大倍率的图了。

标题栏导航栏尺寸如下

2. 给开发提交的文件

① 设计稿html,当然在用sketch的情况下，直接导出；（要注意这里，有的开发会一一点击查看尺寸，当然也有看着图不想点击看元素属性，重要的地方还是需要标注一下）

② JPG设计稿图片；以及把所有页面放在一张画板上的总图，方便后面开发完成后自行核对。

③ Png/jpg/svg图；

a.png/jpg;按照设计图直接导出1x/1,5x,命名为xdpi/xxhdpi就是安卓使用的后缀名。

b.svg;

3.一次性导出@2x;@3x

选中icon/png/jpg后，在sketch内添加，如下图，直接导出即可。用ps作图的小伙伴可以用cutterman直接导出；

Android

1.关于设计尺寸

安卓的常用设计尺寸是720*1280，但是并不想在单独调一套图啊喂，这里就要跟安卓的开发工程师友好的讲一下了，工程师需要根据你的ios的750*1334的设计尺寸去开发安卓。

开发要求提供一份xxxhdpi的图，他自行去缩放，但是这个要跟开发商量好。

①. 720*1280（xhdpi，这边我直接把ios的设计尺寸图导出1x，命名为xhapi）

②. 1080*1920(xxhdpi=xhdpi*1.5,由sketch直接导出也1.5x，命名为xxhapi)

③. 1440*2560（xxxhdpi＝xhdpi*2,略）

2.给开发提交的文件

①.设计稿html,（我这里偷懒，直接给的ios设计稿）

②.JPG图片；以及把所有页面放在一张画板上的总图，方便后面开发完成后自行核对。

③.Png/jpg/svg图；

a.png/jpg;按照设计图直接导出1x/1,5x/2x,命名为xdpi/xxhdpi/xxxhdpi,就是安卓使用的后缀名。

b.svg;(简而言之，就是让开发把svg的icon图上传到iconmoon，通过字体的格式把图标引进来，即iconfont；iconfont学习地址: https://jingyan.baidu.com/article/14bd256e4bd36bbb6c26126e.html)

总之，没看明白的小伙伴，我画了个图～安卓的直接把@2x命名为xhdpi,把@3x命名为xxhdpi~~偷懒啦～～～～