非凡资讯

平面设计培训资讯>上海UI设计培训、用一篇干货,来分析UI设计中苹果iPhone全面屏尺寸适配攻略

上海UI设计培训、用一篇干货,来分析UI设计中苹果iPhone全面屏尺寸适配攻略
发布日期:2018/11/1 16:59:20    上海UI设计培训 2763 分享
近期有很多上海UI设计培训学员问到苹果新出的手机对于UI设计中的规范的影响,在此整理了一些相关参数图供大家参考。注:以下数据部分来源于苹果官方网站。
 
一、新增加的手机尺寸
 
上海UI设计培训
新iPhone增加了2个新尺寸 
上海UI设计培训
很多同学没概念,到底有多少变化,对比一下plus你就知道了
 
 
 
二、了解上海UI设计培训新尺寸前复习一下适配
 
上海UI设计培训
iPhone X逻辑像素和8相同,都是375pt
 
Xs和XR和以往的plus相同,都是414pt
 
上海UI设计培训
Xs和XR其实就是plus的加长版
 
 
 
三、目前公司会做的主流尺寸
 
上海UI设计培训
上海UI设计培训
2种宽度和4种高度
 
四、上海UI设计培训安全区域
 
上海UI设计培训
留海不影响安全区域,只需要调整高度
上海UI设计培训
三款手机对应的安全区域
 
 
 
五、顶部适配
 
上海UI设计培训
非全面屏状态栏高度为20pt(40px @2x)
 
全面屏状态栏高度为44pt(88px @2x)
 
二者存在24pt的高度差值,需要做相关适配
 
上海UI设计培训
顶部纯色,无需调整
 
上海UI设计培训
顶部图片要增加高度,否则会有遮挡
 
上海UI设计培训
顶部大图,遮挡没有影响
 
上海UI设计培训
顶部图片要增加高度
 
 
 
六、底部适配
 
上海UI设计培训
最简单的做法就是把底部操作区域全部增加34pt高度
上海UI设计培训
底部基础增高34pt
 
上海UI设计培训
右下圆形悬浮按钮,没有增高
 
上海UI设计培训
底部悬浮弹窗,增高34pt
 
 
 
七、总结
 
 
上海UI设计培训设计师眼中,页面永远是静态的,看似需要两套图。
 
但在程序员看来,不过是一套代码,其中最大的差别在于,动态的视角,即尺寸之间的适配。
 
上海UI设计培训
武老师会在空闲时间多总结一些设计经验给大家分享!谢谢,记得点赞哦~!
相关文章:
上海非凡学院双11课程优惠惠动全城!没有套路,只有实惠!
上海UI设计培训、用一篇干货,来分析UI设计中苹果iPhone全面屏尺寸适配攻略
国务院教督委印发紧急通知进一步加强中小学(幼儿园)安全工作
上海UI界面设计培训、UE设计培训中心有哪些
上海UI设计培训班、UE交互设计培训课程多少费用
免费试听热门课程
在线客服
免费软件
免费试听
最新活动
学费查询
开班查询
就业薪资