当前位置:首页> 2018

UI设计师必读!三分钟弄懂iPhone X 设计尺寸和适配

发布者:乾学教育 发布时间:2018-5-25 107浏览

全世界都在关注着苹果新机,到底iPhone 8好用还是等等iPhone X呢?
只有设计师在寒风中瑟瑟发抖:iPhone X带了个刘海!


图片1.png
是要干死我们这些UI吗?!不用担心,给我3分钟,老司机带你解读iPhone X 设计尺寸和适配,本文由《懂点设计》特邀发布如果对我们推荐的内容感兴趣!话不多说,直接上干货!
图片2.png图片4.png


刚发布的iPhone 8属于常规升级,屏幕与以往的iPhone6、6S、7系列相同。在昨天发布的新机中,只有iPhone X的分辨率发生了变化,但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面,新版的iPhone X与过去我们熟知的iPhone 4.7 、iPhone 5.5 放大模式宽度相同。通俗的说,iPhone X可看做是iPhone 4.7 的加长版。
图片5.png


然而,事情并不是设计图加长这么简单。
图片6.png
过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域Safe Area,而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计,需要设计师对绘图区域做出调整。苹果给出的安全区域如下:
图片7.png
页面内容不能超出安全区域(Safe Area)
图片8.png
避免将触发交互行为的按钮放在屏幕的底部,人们会在屏幕底端使用手势进入主屏或切换应用。(底部横条是Home键)
页面顶部和底部变化如下:
图片9.png
 图片10.png
右上图可以看到为了回避“刘海”和圆角,iPhone X的顶部状态栏和底部菜单栏都进行了增高。

图片11.png
值得注意的是,iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外,Safari底部操作栏也有放大
讲完竖屏,在说横屏。
和竖屏一样,横屏的内容也要放置在Safe Area中:
图片12.png
避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局操作优先于App的操作。如果把功能放在角落里,用户操作起来也很费劲,尽量在用户手指可及区域内设计功能:
图片13.png
最后说下最核心的问题,Safe Area 范围有多大?
下午我比对了官网上所有与iPhone X相关的界面,可以确定,Safe Area区间如下:
图片14.png图片15.png图片16.png
对于习惯用750x1334作图的设计师而言,iPhone X的到来并不会带来太大影响,iPhone X与iPhone 4.7’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异

由于 iPh图片17.pngone X的屏幕比例发生变化,对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响,需要对页面结构进行适当微调。
图片18.png
如果不是特别需要沉浸式体验的界面,如视频、看图片,建议不要隐藏状态栏。


热门文章

南京苏州各大高校寒假时间表新鲜出炉(文章)免费

乾学原创课程26已学习