您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

iPhone XR、XS、XS Max发布后,UI设计师如何

原创文章 分类: 经验/观点 版权:
2104 49 15 0
更新于:2018-12-11
14.5
编辑推荐

iPhone XR、XS、XS Max发布后,UI设计师如何做适配?

北京时间9月13日凌晨1点,苹果在美国加利福尼亚州的Apple Park园区召开了2018年苹果秋季新品发布会;发布的三款新iPhone包括两款OLED屏幕的iPhone XS和iPhone XS Max,屏幕尺寸分别为5.8英寸和6.5英寸,和iPhone XR,配备6.1英寸LCD液晶屏。


新机型的发布,必然会对UI设计师的适配产生一些影响,下面U妹带大家一起来看看都有哪些变化?


一、 屏幕尺寸与分辨率

Image title

Image title



二、如何进行适配?


手机适配采用几倍图与PPI是有关系的,也就是所谓的像素密度,现在,我们都是以750x1334px的尺寸作为设计稿进行设计,以@2x为基准做设计稿,有一种情况现在非常普遍,那就是一稿两用;设计师都是做IOS版本的设计稿,同时适配安卓,这样既节省了开发时间和并减少了项目成本。


1、对于iPhone XS


新发布iPhone XS(458ppi),5.8英寸,分辨率为1125x2436px,与iPhone X(三倍图)是一致的,所以我们可以得出iPhone XS也是使用的三倍图@3x。 


2、对于iPhone XS Max

Image title


iPhone XS Max(458ppi),6.5英寸,分辨率为1242*2688px,而iPhone8 Plus(三倍图,401ppi),分辨率为1242x2208px,iPhoneXS Max比iPhone8 Plus的PPI仅多了50多,跟iPhoneX(三倍图)的PPI一致,可以看出iPhoneXs Max使用的同样是三倍图@3x

Image title


从屏幕宽高比例来看:


iPhone XS Max宽度1242/3=414pt,iPhone8 Plus宽度1242/3=414pt,两者的宽度一致


iPhone XS Max高度2688/3=896pt,iPhone8 Plus高度2208/3=736pt;

iPhone XS Max比iPhone8 Plus长一截,多了160pt。


我们发现,iPhone XS Max的适配,和去年设计师适配iPhoneX差不了多少。


3、对于iPhone XR


iPhone XR(326ppi),6.1英寸,分辨率为828x1792px,可以看到iPhone XR与iOS二倍图的PPI(326ppi)一致,可以看出iPhone XR使用的是二倍图@2x

Image title


从屏幕宽高比例来看:


iPhone XR宽度828/2=414pt,iPhone XS Max宽度1242/3=414pt;

iPhone XR高度1792/2=896pt,iPhone XS Max高度2688/3=896pt;


对比发现,iPhone XR与iPhone XS Max宽高比是一致的!这意味着 UI设计者做完iPhone XS Max的适配后,直接进行等比例缩放2/3就可以得到iPhone XR了,不用重新进行修改布局(也可以先做iPhone XR的适配,再等比例缩放到iPhone XS Max)。 


三、布局与安全区域


在为iPhone X做设计时,由于之前的直角屏幕变为了圆角,所以我们必须确保布局覆盖到整个屏幕,不会被设备屏幕上的圆角、传感器和指示灯所遮蔽。

Image title


对于应用程序中大多数使用标准化的、系统提供的UI元素(如导航栏、表格等)会自动适配iPhone X。背景延伸到显示器边缘。

Image title


以上是官方提供的布局指南,这个布局有助于内容的定位,对齐和间距安全区域可以防止内容覆盖状态栏,导航栏,工具栏和标签栏。


竖直时的安全区可延伸至萤幕左右两侧,上部留44pt给状态栏;布局边距通常左右再内缩15pt。


横向时的安全区左右两侧皆内缩44pt;布局边距通常左右再内缩15pt。


需要特别注意的是,将手机横向展示时,需要注意“刘海”区域,做设计时尽可能左右对称内缩,可达成体验的一致性。


四、总结


对于新发布的3种机型,我们还是以750x1334px为设计稿尺寸,切图资源正常输出@2X、@3X为切图资源,设计稿尺寸不变,在适配上,iPhone XR使用的是二倍图@2x切图资源,iPhone XS、iPhone XS Max使用的是三倍图@3x切图资源

Image title



微信公众号:UI严选

UI严选

微信公众号:UI严选

4145粉丝/14关注

身经百战人气明星助人为乐分享帝lv.1砖家
2017-2018年度个人总结合集2019年设计师「成长」的Flag清单

扫描二维码
去手机端查看海报

UI严选

TA已经获得16枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN