请选择 进入手机版 | 继续访问电脑版

移动设计联盟 | UI设计平台 - MobileUI莫贝网

登录  |  注册

QQ登录

只需一步,快速开始

搜索
返回列表
查看: 4046|回复: 3

APP设计师必读-快速适配iPhone6及plus的诀窍

[复制链接]

31

主题

45

帖子

236

积分

版主

Rank: 7Rank: 7Rank: 7

积分
236

突出贡献优秀版主

QQ
发表于 2014-9-10 22:22:20 | 显示全部楼层 |阅读模式
cv_3.jpg
iPhone6来了,设计师哭了.....吗?


001.fw_r2_c1.jpg


不知道小伙伴们是否观看了半夜直播的苹果新品发布会,静电实在熬不住了,所以只有第二天起床浏览铺天盖地的消息了. 这次苹果发布了新款手机iphone6及iphone6 Plus,作为果粉,看着实在眼馋啊.不过摸摸自己那发酸的腰.........额,还是养养再说吧。

作为设计师,我们肯定想知道,新款的iphone对我们目前的设计开发有多少影响。适配要多少工作量?工作量大的话,赶工期的小伙伴们会不会哭晕在厕所里?嗯嗯,那么先来看看这次苹果发布的新机型的参数。

iPhone各机型分辨率解析

我们先来看看新款iphone的分辨率和ppi


001.fw_r4_c1.jpg
qt00001.jpg


使用何种尺寸来做设计稿?

由上边的分析,我们知道, 如果要适配iPhone6 Plus的图片资源,做到真正的高清,我们必须要将现有的@2x的图片资源的宽高各放大1.5倍。
由于现在大部分设计师都采用photoshop等位图软件来设计,大家知道,对于位图,从大尺寸到小尺寸的缩放没问题,但从小尺寸到大尺寸的放大,问题可就没那么简单了,没错,糊了

1920还是2208高?是个问题

静电在iphone6发布后推测使用1920-1080的分辨率来做设计稿,默认使用位图的情况下,生成@3x尺寸的图片资源,然后再批量缩小为@2x。但其后在新版本的xcode中,这种推测却被颠覆,iphone6 plus模拟器使用了1242 - 2208这样的分辨率,然后在通过某种插值算法,缩小到物理分辨率为1920-1080。具体原理可以参考下面的图(图片来源:paintcode)

002.fw_r2_c2.jpg

静电也挺纠结的,因为现在大部分显示器还是全高清的1080p显示器,如果用这么大的尺寸来作图,我们的显示器尺寸就捉襟见肘了。所以,静电只能默默期待有一天,显示器的分辨率能进一步提高,高清显示器的价格进一步下降,否则,设计师估计要哭死了。

如何在这个阶段来过渡呢?如果我们的设计稿已经全部位图化,那么很苦逼,你需要将所有图标重绘扩大。 如果你有幸还保存着设计源文件,切源文件里大部分都是矢量化的图片,那么还好还好,简单拉大再导出就好了。不过怎么说都是一件费时费力的工作,静电只能说,免不了,大家辛苦了。


002.fw_r4_c2.jpg

一套图片资源搞定?! SVG矢量资源来啦!
如果还单纯的以为,ios还在使用位图,那就弱爆了! 直到昨天,静电得知,苹果在开发环境中引入了矢量图片资源.也就是说SVG,PDF等格式可以直接作为图片素材导入到xcode中进行调用.这是一个非常激动人心的举动.
也就是说,以后我们可以直接在ios的开发中使用矢量素材了.这意味着,只有一套图就能解决问题!

静电在版本为(6.1 6A1027)的xcode中已进行过验证.



制作矢量化的设计稿-高清重绘无障碍

sketch在之前静电的设计教室已经讲过(小伙伴可以直接访问静电的站酷主页查看sketch教程),相信小伙伴已经渐渐的开始用这款神器来做设计了。这个时候,用sketch做设计的好处慢慢的展现出来,全矢量的图标,想导出多大就导出多大,同时也支持导出SVG矢量格式. 是不是方便很多?全矢量化的设计,在以后相当长的一段时间,应该会慢慢变成主流。哦不,其实已经是主流,因为苹果已经开始使用了.

最后的总结

1.简单粗暴的适配iPhone6plus的原理,如果继续使用位图,直接将现有图标的长宽分别放大1.5倍即可,也就是从@2x到@3x。 强烈建议使用2208-1242分辨率来设计,然后等比缩放(长宽各缩放2/3)
2.在新的开发环境中,使用矢量化的图片素材(但位图不可避免,所以静电建议根据实际情况选择合适的图片格式)
3.由于iphone6发布后信息比较少,静电的文章在发布后存在着错误,在这个过程中有不少小伙伴指正和加入探讨研究,在此感谢所有朋友.
4.以上内容已在2014年9月13日进行了重新的修改.以上内容可能根据实际情况有些许变化,大家可以静观其变,也可以多多跟身边工程师交流和探讨,争取尽快适配新的iphone机型。


本文由jingdesign原创,转载请注明作者和出处.谢谢.


查看更多静design的干货, 请扫描下方二维码关注公众号: jingdesign91





回复

使用道具 举报

2

主题

15

帖子

49

积分

新手上路

Rank: 1

积分
49
发表于 2014-9-11 19:00:39 | 显示全部楼层
这么快就有iphone6的资料了,32赞......
回复 支持 反对

使用道具 举报

31

主题

45

帖子

236

积分

版主

Rank: 7Rank: 7Rank: 7

积分
236

突出贡献优秀版主

QQ
 楼主| 发表于 2014-9-13 12:30:54 | 显示全部楼层
文章已在九月十三日进行了修正,感谢大家指导.
回复 支持 反对

使用道具 举报

176

主题

181

帖子

1704

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1704
发表于 2014-9-13 13:43:23 | 显示全部楼层
静电 发表于 2014-9-13 12:30
文章已在九月十三日进行了修正,感谢大家指导.

本帖已推荐到 http://www.guimobile.net/rapid-a ... -and-plus-tips.html ,辛苦了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表