动手试试!手把手教你如何适配 iPhone X

2017/09/27 17925

编者按:基于很多文章都只是翻译了官方的原文,并没有加入自己的想法和见解,所以我决定自己试着适配 iPhone X,如果出现了失误或者问题,请多指教。毕竟写文章的初衷是为了跟大家一起进步和探讨呢~

熟悉 iPhone X

这里用 iPhone 6 举例子是因为大部分设计师都用 iPhone 6 来做设计稿,方便大家理解,其实 iPhone 8也是这个分辨率。

iPhone 6 :750×1334px(375×667px @2x)

iPhone X :1125×2436px (375×812px @3x)

在逻辑像素上 iPhone X 的宽度和 iPhone 6 保持一致,只是高度高了145px(812-667),如果是用@1x做设计稿,那么在适配 iPhone X 的时候会方便很多,因为只需要增加高度就能得到 iPhone X 的大小,所有的 Symbol 基本不变,只是复制几个苹果爸爸的Symbol 到你的Symbol 里面,用来做 iPhone X 的设计稿。但是如果用@2x 来做设计稿会稍微麻烦些,毕竟Sketch UI Kit 都是基于@1x 来做设计稿的,所以只能把 symbol 重新解散,然后做成@2x大小的尺寸。

虽然它们的逻辑像素宽度一致,但是他们的像素分辨率是不一样的,iPhone 6 采用@2x切图,iPhone X 采用@3x 切图。有人会用@2x 做设计稿,那怎么适配 iPhone X 设计稿,难道要缩放? iPhone 6 (750×1334px)尺寸到 iPhone X(1125×2436px),虽然两者的宽度关系是1.5倍,但是通过缩放做 iPhone X 也是相当麻烦,因为你的 Sketch 设计稿里面可能存在 Symbol,所以这样的做法是行不通的。但如果你的团队都是用@2x 来做设计稿的话,也没什么问题,接下来就提供一个更简单的方法解决 iPhone X 的适配问题。

iPhone X 适配

我列出了 iPhone X 的三种分辨率的尺寸:375×812px(@1x),750×1624px(@2x),1125×2436px(@3x)

如果你的团队使用的是750×1334px(@2x)的设计稿,你在适配 iPhone X 的时候可以采用 iPhone X @2x的图来适配,这样就省去了缩放这一步骤,而且开发使用的是逻辑像素即375pt×812px来做 iPhone X 的设计还原的,所以这样设计 iPhone X 是不会影响开发的,因为750×1624px(@2x)还原到@1x 还是375×812px,相信你已经明白了。

1.iPhone X安全区域问题

如果你用@1x 来做设计稿:iPhone X 安全区域是375×734px。

如果你用@2x 来做设计稿:iPhone X 安全区域是750×1468px。

2.如何计算 iPhone X 安全区域

@1x 的 iPhone X 安全区域:

安全区域=812px—Status Bar (44px) +Home Indicator(34px)

@2x 的 iPhone X 安全区域:

安全区域=1624px—Status Bar (88px) +Home Indicator(68px)

iPhone X 实际案例适配

在开始之前,我们先看一下其他App怎么适配之前的 iOS 设备的,我们可以知道头部区域采用了等比例的方法来适配,因为只有这样才能保证640×1136px上面能够放得下相应的内容。其他的只需要放置相应的切图即可。

一开始以为头部适配很简单,我们也采用了等比例适配,后来发现没有必要,因为 640×1136px基本可以显示完全。然后我们就开始适配 iPhone X 了,后来开发通过 Xcode 模拟出 iPhone X 的适配结果,我发现问题出现了。和我们的用药助手 iOS 开发讨论了以后,发现原来导航栏的高度不是简单的200px 解决的,这里我们采用的是固定高度的做法而不是采用等比例的做法。一般这块区域可以有2种做法:等比例和固定高度,观察你的页面构成,如果页面内容较少可以采用固定高度的做法。不然的话可能在小屏幕手机有些内容放不下。

在没有 iPhone X 之前,固定高度做法:整体蓝色区域高度给200px 解决问题,不用考虑导航栏问题。

但是 iPhone X 出来了,这样的做法就会行不通,因为 iPhone X 的导航栏高度是44px+44px=88px,比 iPhone 6的导航栏(64px)高了24px,所以正确适配 iPhone X 的做法应该是导航栏区域高度(88px)+(200px-64px)=224px,其实就是 Status Bar 高度多了24px,所以224px 比200px 大了24px。

最后总结

  • 这里只是讲解了iPhone X 一小部分和 iOS 适配问题,还有其他适配的经验希望大家在工作中去积累总结,我这里就不一一讲解了。
  • 由于 iPhone X的屏幕比例发生变化,对于长期靠「等比缩放」完成适配的H5活动页而言也有不小的影响,需要对页面结构进行适当微调。(注意缩放的时候不要把主体裁切了,注意页面的布局在 iPhone X 上面的变化)
  • 如果你的App有全屏尺寸的活动图,没有导航栏,这个时候应该给开发 @2x(750×1334px) 和 @3x(1125×2001) 图,然后 iPhone X 上的图会使用@3x的图按照高度铺满,然后裁切两边。(注意两侧被裁切区域不要包含重要内容)

欢迎关注作者的知乎:https://www.zhihu.com/people/olafchou/activities

「干货十足!最全面的iPhoneX学习资源」

【优设网 原创文章 投稿邮箱:yuan@什么时时彩平台好 07783.shishicai925.cn】

================明星栏目推荐================

优优教程网 UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.什么时时彩平台好 07783.shishicai925.cn

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:/a/adaptive-iphone-x

平面设计 界面设计 好文 交互设计师 UI 转场动效 设计流程 设计师 设计师专访 排版布局 扁平化设计 用户体验设计 素材下载 职场 视觉设计 配色 设计规范 web前端开发 产品设计 海报设计 设计趋势 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

山西快乐十分前三 幸运农场开奖结果查询 中华石油化工网 pk10历史开奖走势图 天涯论坛
云南快乐十分开奖结果 黑龙江快乐十分彩控 太湖明珠 博客中国 百道网