你的iPhone XS/XS Max/XR 适配尺寸已上线

用户头像
北京/UI设计师/7年前/9971浏览
你的iPhone XS/XS Max/XR 适配尺寸已上线

高效率适配新机型

新机型一发布,设计师们就要考虑适配问题。关于适配的文章看了几篇了? 眼花缭乱否? 不如看一篇简单直接的!


首先,我们来看下这三款机型的屏幕参数。

           

iPhone XS 


1125 X 2436px 分辨率, 458 ppi


iPhone XS Max


1242 x 2688px 分辨率,458 ppi


iPhone XR


828 X 1792px 分辨率,326ppi



从ppi看,万幸,一切都是熟悉的,也就是说切图倍数没有改变。iPhone XS, XS Max 和 iPhone X 一致,都是 458 ppi,因此还是3倍切图@3x就好了! iPhone XR 和 iPhone 6/7/8 一致,都是 326ppi,因此采用2倍切图@2x 。


切图方面没有什么麻烦,现在看下新尺寸对设计布局的影响。



首先我们看下新机型的逻辑像素(pt)尺寸(即密度无关像素尺寸)


iPhone XS:分辨率/3,即 375 x 812pt,因此跟iPhone X 的布局完全一致;


iPhone XS Max: 分辨率/3, 即 414 x 896pt;


iPhone XR:分辨率/2,即 414 x  896pt。


也就是说,相当于只增加了一个尺寸 414 x 896pt,而且 XS Max 和 XR 都是全面屏需要留出安全区域。



因此如果你是以 iPhone 8 (375x667pt) 为基准做 XS Max 和 XR 的设计稿,那么就是拉宽拉高尺寸到 414 x 896, 然后状态栏由20pt变为44pt,添加底部主页指示器34pt。


      




如果你是以 iPhone X (375x812) 为基准做 XS Max 和 XR 的设计稿,只需要拉宽拉高尺寸到 414 x 896,状态栏和底部主页指示器均不用更改。

      



而后续的图片等元素的适配,就需要从视觉角度灵活调整了。


不过,对于尺寸计算和安全区域,现在完全不需要你手动操作,墨刀已经率先火速为大家新出了 XS/ XS Max 和 XR的适配,一键创建 XS/ MAX/ XR项目就可以!状态栏和底部主页指示器已经默默地躺在那里给你们用了!


      创建项目时,直接选择“iPhone XS Max 和 XR”的尺寸



不管是从Sketch导入基准设计稿稍作调整,还是在墨刀完成新设计,


点击”预览“,便能 show 出 XS/ XS Max 和 XR 的展示效果了! 


 墨刀的一个iPhone XS Max 原型范例      


124
举报
|
305
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
平面插画情侣/矢量
牛奶乳液层次梯田平铺平面
平面书法字手写
金色颗粒质地的平面
城市园林平面布局航拍
中国传统纹样创新图案设计
金色颗粒质地的平面
金色颗粒质地的平面
平面人物插画
倒计时,海报,平面
古风平面仕女与瓷器
空的平台平面和自然景观
金色颗粒质地的平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
城市园林平面布局航拍
海底世界插画
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面设计 吊牌设计
“知识宅急送”外卖,快递,平面,海报,素材,教育
城市园林平面布局航拍
平面风格黄绿色系花朵装饰
玄关入门地毯印花图案红地毯
城市园林平面布局航拍
平面插画设计女孩喝咖啡
平面男孩喝咖啡插画设计
你可能喜欢
大家都在看
登录注册