教你iOS APP设计一稿支持iPhone5/iPhone6/Plus
教你iOS APP设计一稿支持iPhone5/iPhone6/Plus
http://www.uigreat.com/Standard/a165/
第一步,视觉设计阶段,设计师按宽度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等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在水平方向上可以显示更多内容,发挥大屏幕的优势。
相关推荐
Mryiyi 2020-08-07
suweierxing 2020-06-02
hushijiao 2020-05-17
csdnuuu 2020-05-07
xiaoxiaodedu 2020-01-05
中国软件网 2020-01-05
liuxudong00 2020-11-19
章鱼之家 2020-10-29
leitingdulante 2020-10-21
xuegangic 2020-10-17
硬币0 2020-10-15
ZuoYanDeHuangHun 2020-09-18
chsoft 2020-09-17
MatrixHero 2020-08-20
XxZproject 2020-08-10
定格 2020-08-15
ydc0 2020-07-30
yechen00 2020-07-25
孝平 2020-07-18