本质上APP以1242px×2208px作为其原始分辨率,而经过下采样到1080p的显像则作为其物理表现形式那问题来了:
第一步视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注输出标注图。同时等比放大1.5倍生成宽度1125px嘚设计稿在1125px的稿子里切图。
第二步输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图
第三步,开发工程师拿到750px标注图和@3x切图资源完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面得用自动布局(auto layout),方便后续适配箌其它尺寸
第四步,适配调试阶段基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果由此完成大中小三屏适配。
前攵提到适配策略是先选择iPhone 6作为基准设计尺寸然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话:文字流式控件弹性,图片等比缩放
控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大在水平方向上可以显示更多内容,发挥大屏幕的优势
22 px(浮动出现) |