恭喜你成为UI中国推荐设计师 (详情)

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

三分钟弄懂iPhone X 设计尺寸和适配

原创文章 分类: 教程 版权: 举报
217386 1914 2697 72
更新于:2018-11-26
757.5
首页推荐

Image title

Image title

Image title


被iPhone X刷了一天屏,到下午实在受不了各种假帖。标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子,与设计图无关的内容通通不提


Image title


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


Image title


然而,事情并不是设计图加长这么简单。


Image title


过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域Safe Area,而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计,需要设计师对绘图区域做出调整。苹果给出的安全区域如下


Image title


页面内容不能超出安全区域(Safe Area)


Image title


避免将触发交互行为的按钮放在屏幕的底部,人们会在屏幕底端使用手势进入主屏或切换应用。(底部横条是Home键)


页面顶部和底部变化如下


Image title

Image title


右上图可以看到为了回避“刘海”和圆角,iPhone X的顶部状态栏和底部菜单栏都进行了增高。


Image title


值得注意的是,iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外,Safari底部操作栏也有放大


讲完竖屏,在说横屏。

和竖屏一样,横屏的内容也要放置在Safe Area中


Image title


避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局操作优先于App的操作。如果把功能放在角落里,用户操作起来也很费劲,尽量在用户手指可及区域内设计功能


Image title


最后说下最核心的问题,Safe Area 范围有多大?

下午我比对了官网上所有与iPhone X相关的界面,可以确定,Safe Area区间如下:


Image title

Image title

Image title


对于习惯用750x1334作图的设计师而言,iPhone X的到来并不会带来太大影响,iPhone X与iPhone 4.7’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异


Image title

Image title


iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point(134 px,@2x)


对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。


Image title


由于 iPhone X的屏幕比例发生变化,对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响,需要对页面结构进行适当微调。


Image title


最后,如果应用程序需要隐藏状态栏,请重新考虑iPhone X上的布局。iPhone X的显示高度相对于iPhone 4.7''提供了更多的内容高度,状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。


Image title


如果不是特别需要沉浸式体验的界面,如视频、看图片,建议不要隐藏状态栏。






Image title


微信公众号:海边来的设计师

推荐人:

UI中国

海边来的设计师

出版《最好的UI设计师》

9409粉丝/6关注

“劳模勋章”之锄头勋章人气明星活雷锋老马识途首页达人
细节提升:用渐变巧妙提升产品质感!iOS 13 隐秘的细节③:原生APP的细节变化·下
3
gareiz

越来越觉得android的底部导航栏是非常明智的做法,特别是在流行大屏幕的现在,底部有个返回键真的是比ios好用太多

精彩!

你确定要举报三分钟弄懂iPhone X 设计尺寸和适配

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2017年09月14日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

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

海边来的设计师

TA已经获得16枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

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

  • 经验

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

  • 活跃

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

  • 拓展

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

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

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