提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
app界面适配不同机型,手机尺寸,排版详解。
随着时代的发展,大屏化时代的到来,手机,iPad,屏幕尺寸是越来越大,分辨率也越来越高。各种品牌根据手机功能和特色,屏幕的尺寸比例也各不相同,为了顺应发展的趋势,各种app的界面设计就要在保持内容一致的情况下适配到各种品牌各种型号的手机,以满足大众的需求!
【敲黑板,重点来了】今天我就带着我的一个作品,来谈谈关于各类手机适配问题。由于ios尺寸固定,数量少(主要是型号大家都明了),所以一般情况下我都是先做ios端,再去适配安卓端;其次适配要根据受众人群着重考虑适配方向(例如:适合老人使用的app,就会考虑字体略大),常规的适配会选择居中型号,再去适配小的和大的。
临摹原图:
【1】iPhone6/6s 尺寸:750*1334px 状态栏40px 导航栏88px 标签栏98px
【2】iPhone5/5c/5s 尺寸:640*1136px 状态栏40px 导航栏88px 标签栏98px
【3】iPhone4/4s 尺寸:640*960px 状态栏40px 导航栏88px 标签栏98px
【4】iPhone6plus/6splus 尺寸:1080*1920px(设计尺寸:1242*2208px) 状态栏60px 导航栏132px 标签栏146px
接着从ios适配到安卓,要说明的是安卓品牌多尺寸多,所以我们在这里只做两个大小,学会即可,但如果真正的项目就不要偷懒啦。
【5】Android 尺寸:720*1280px 状态栏50px 导航栏88px 标签栏96px(我是从ip6进行适配的)
【6】Android 尺寸:1080*1920px 状态栏50px 导航栏88px 标签栏96px(我是从ip6p进行适配的)
在这些适配中我们不难发现几个规律:1.内容相同,要做到一个界面给所有人能够获取的信息是相同的。2.由于尺寸大小的不同,我们需要通过控制间距,文字折行,图片放大缩小,字体大小等进行消化。3.如果可以向下滑动,则可以通过这种方式向下排版,例如ip5与ip4宽度相同高度不同,最简单的方式就是将多出来的部分放到下一页,通过向上翻动进行查看。
适配问题其实就是简单的排版,具体尺寸给到大家,希望能够给予大家帮助,么么哒。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册