想记录下来一点点的知识，慢慢积累成长；这次的一套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~~偷懒啦～～～～
网友评论