如何一套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~~偷懒啦~~~~


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容