APP设计师必读,快速适配iPhone6及Plus的诀窍
不知道小伙伴们是否观看了半夜直播的苹果新品发布会,静电实在熬不住了,所以只有第二天起床浏览铺天盖地的消息了. 这次苹果发布了新款手机iphone6及iphone6 Plus,作为果粉,看着实在眼馋啊.不过摸摸自己那发酸的腰………额,还是养养再说吧。
作为设计师,我们肯定想知道,新款的iphone对我们目前的设计开发有多少影响。适配要多少工作量?工作量大的话,赶工期的小伙伴们会不会哭晕在厕所里?嗯嗯,那么先来看看这次苹果发布的新机型的参数。
iPhone各机型分辨率解析
我们先来看看新款iphone的分辨率和ppi
使用何种尺寸来做设计稿?
由上边的分析,我们知道, 如果要适配iPhone6 Plus的图片资源,做到真正的高清,我们必须要将现有的@2x的图片资源的宽高各放大1.5倍。
由于现在大部分设计师都采用photoshop等位图软件来设计,大家知道,对于位图,从大尺寸到小尺寸的缩放没问题,但从小尺寸到大尺寸的放大,问题可就没那么简单了,没错,糊了!所以静电建议大家,直接使用1080-1920的分辨率来设计,生成@3x尺寸的图片资源,然后再批量缩小为@2x。其实说到这里,静电也挺纠结的,因为现在大部分显示器还是全高清的1080p显示器,如果用这么大的尺寸来作图,我们的显示器尺寸就捉襟见肘了。所以,静电只能默默期待有一天,显示器的分辨率能进一步提高,高清显示器的价格进一步下降,否则,设计师估计要哭死了。
如何在这个阶段来过渡呢?如果我们的设计稿已经全部位图化,那么很苦逼,你需要将所有图标重绘扩大。 如果你有幸还保存着设计源文件,切源文件里大部分都是矢量化的图片,那么还好还好,简单拉大再导出就好了。不过怎么说都是一件费时费力的工作,静电只能说,免不了,大家辛苦了。
制作矢量化的设计稿-高清重绘无障碍
sketch在之前静电的设计教室已经讲过(小伙伴可以直接访问静电的主页查看sketch教程),相信小伙伴已经渐渐的开始用这款神器来做设计了。这个时候,用sketch做设计的好处慢慢的展现出来,全矢量的图标,想导出多大就导出多大,是不是方便很多?(当然,我们不能用位图图标哦,否则也是会虚的。)全矢量化的设计,在以后相当长的一段时间,应该会慢慢变成主流。
最后的总结
1.简单粗暴的适配iPhone6plus的原理,直接将现有图标的长宽分别放大1.5倍即可,也就是从@2x到@3x。 强烈建议使用1080分辨率来设计,然后等比缩放(长宽各缩放2/3)
2.鉴于iphone5/5s/6/plus的长宽比均为9:16.所以比例问题设计在这个阶段可以不用考虑。 至于plus所说的横版显示的适配,则需要重新设计应用。
3.此方法经静电与cocoachina网友在xcode GM版本中验证,但由于手头缺少真机(买不起,没的买),因此你懂的。此后可能根据实际情况有些许变化,大家可以静观其变,也可以多多跟身边工程师交流和探讨,争取尽快适配新的iphone机型。
4.使用基于矢量的sketch来做设计稿有助于减少重绘工作量,提高工作效率。
作者:jingdesign 公众号: jingdesign91
-
微信创始人张小龙首次公开演讲(官方无删减版)
微信创始人张小龙首次公开演讲(官方无删减版) -
如何通过APP看到产品战略层面
产品经理拿到一款产品的时候,不能只能看到表面信息,而是要能看到产品背后的信息。 -
基于用户的“真需求”创新产品
产品创新是保证企业在竞争激烈的市场上长久生存的关键,今天,我们就围绕产品创新和用户研究分享一些看法。 -
有一种交互设计研究验证叫“设计走查”
如何在最短的时间内对自己的产品做出检验,确保其在定位、设计、营销计划等多个环节,在可视范围内是正确的,需要一套比较科学、完善的方法去做出检测。 -
你为什么离不开微信?
张小龙说用完即走,你却爱不释手; 到底是什么让你离不开微信? -
移动互联时代APP的发展方向
现在我们已经走上了移动互联网时代,无论是企业还是公司,都会经过网络竞争中争取有利的优势,较为传统的产品竞争逐渐向互联网竞争转型,出现了很多数据云大数据等等 -
AI 时代产品经理的机遇和挑战
AI 时代产品经理的机遇和挑战 -
前1%与前10%的产品经理差距在哪?
前1%与前10%的产品经理差距在哪? -
你有哪些策略应对不断的需求变更?
你有哪些策略应对不断的需求变更? -
如何运营天猫【十亿俱乐部】商家页面?
如何运营天猫【十亿俱乐部】商家页面?

