想记录下来一点点的知识,慢慢积累成长;这次的一套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~~偷懒啦~~~~