为什么会有这么多应用在iPhoneX里面适配不行
为什么会有这么多应用在iPhoneX里面适配不行
为了尽可能满足人们对iPhone X的高需求，苹果现在尽一切努力加强供应。不少预订的果粉发现到货日期已经提前，也有人提前拿到了新机器。不用说，他们的体验一定会很令人愉快。
iPhone X 拥有 5.8 英寸的 OLED 全面屏，这是它身上最大的卖点之一。我们过去从未在 iPhone 上得到这样的体验，所以这给我们的新鲜感也最大。相信大家在把玩新机的时候，肯定也会想要到处看看，过去的那些界面在新的屏幕下会是一个什么效果吧。
然而，一旦你尝试这种方式，我们很快就发现了问题：应用程序的一个相当大的部分，它的界面是完全没有针对iPhone X进行优化的。反映在具体的视觉效果，即在屏幕上方，两个大的圆形空间不被使用，显示的是黑色的，和原来深感摄像头合为一体。
如果是这样的话，更严重的是应用程序画面也可能被挤压在屏幕中间，在大黑周围留下一个圆圈。这种情况，在游戏应用中最为常见。许多人的热情，突然被倒入一大盆冷水。iPhone X已经发布几个月了，为什么开发者还没有准备好呢？
人们因此开始担忧，生怕开发者对 iPhone X 带来的变化其实是持抵触情绪的。如果开发者们不配合，那么就注定 iPhone X 的实际体验不会好了。
开发者的无奈
用户关心的是，其实开发商是无奈的。iPhone X中的许多应用程序都是这样的，因为开发人员并没有很好地适配。不过，这倒不是开发者们对 iPhone X 有什么很大的不满。虽然从iPhone X在今年九月宣布，到目前为止，许多应用程序不能很好的适应新的机器，这有点不寻常，但事实上它仍然是情有可原的。
据了解，开发者们之所以今年动作那么慢，很大一部分原因是 iPhone X 和过去的机型相比，实在是太不一样了。对开发者们来说，iPhone X 可以说带来了“至今为止 iPhone 界面上最让人震惊的变动”。尽管开发者已经表示，iPhone X 的适配在技术层面上并不困难，但在设计层面上，要解决的难题太多了。
简单来说，既然 iPhone X 带来了界面上的变化，那就意味着开发者们就必须重新设计他们的应用的界面。特别是对于那些正在同时进行着多个项目的独立开发者们来说，这些改变无疑会增加大量的成本。不仅是已经发布的应用要更新，已经制作到一半的项目也得修改。很多时候究竟是改换风格，还是重新来过，开发者需要在这些“度”上面找到平衡。
根据苹果公开的操作界面指南，iPhone X 的屏幕宽度和 iPhone 8 一致，但要更高，使得多出了 20% 的空间。对开发者来说，他们却不能简单地将应用界面向上延展，因为屏幕顶部的是两个圆角设计。苹果表示，如果不去利用这两个圆角，就会让应用界面显得特别狭小局促。但是怎么去利用呢？开发者仍然在找最佳的方案。
正如我们刚才所说的，游戏应用在这方面尤为吃亏。手机游戏作为图形密集，界面复杂的应用，如果要进行交互的重新设计，工作量太大了。还有一点很重要，那就是绝大多数游戏都采用的是 16：9 比例，要适配 iPhone X 新的长宽比，同样不简单。再加上 iPhone X 的分辨率甚至要比 Plus 系的 iPhone 要大不少，黑边现象也就不可避免了。
即使是普通的应用，如果没有进行合理的适配，也同样会出现黑边、错位、不稳定的现象。总的来说，这个现象还是蛮普遍的。
一位业内人士不久前表示，现在还不是着急入手 iPhone X 的时机，再等几个月，等待大多数开发者们都做好适配工作了，再买也不迟。虽说我们倒也不需要这样，但他确实说出了开发者们现在面临的处境。
好在那些常用的应用，其适配基本上是已经做好了的，这一点可以放心。
iPhone X 自发售至今一直都表现强势，苹果也在积极保证供货。可以想见，iPhone X 的用户群体不会小的。因此，开发者必须要进行 iPhone X 的优化，以满足需求，否则就会招致不满。
所以即使iPhone X现在给人的观感不是太好，也无需担心因为开发商还在准备，他们需要更多的时间。那么现在已经入手 iPhone X 的朋友，现在你可以做的是耐心等待。我们不妨期待一下，在这些应用程序和游戏之后适应iPhone X屏幕，他们将如何使用额外的屏幕空间，以及两个圆角？内容字号：
段落设置：
字体设置：
精准搜索请尝试：
适配苹果iPhone X，这些App做得并不走心
来源：作者：Picca责编：小侃
对于iPhone一张脸用了三年这件事，最开心的大概就是那些手机APP设计者，毕竟一个模板可以用三年以上，并且不用再为那些长短不一的屏幕去不断地更改自己的设计方案，简直是一劳永逸。但iPhone X的出现却打破了他们的平静，那块小刘海不仅折磨疯了一大票强迫症患者，更是让程序员们抓耳挠腮，而现在距离iPhone X上市已经过去了两周的时间，可以看到绝大多数我们常用的APP都已经针对异形屏完成了适配，但其中有些新的设计好像也并没有那么走心。bilibili：日语不过N1也敢看B站？就适配速度而言，B站绝对算得上是国内众APP中的第一梯队，在iPhone X发售后的第三天便完成了更新，但是现在两周时间过去了，之前那些没解决的问题也依然还没解决。bilibili的首页完完整整的填满了整个屏幕，但大概是为了能在标准排版下尽可能多的显示首页内容，顶端菜单栏的空间设计十分紧促，所有标签全都如胶似漆的与小刘海贴了个严丝合缝，如果说专栏标签可以通过左右滑动页面来进行切换的话，那么一旁的搜索键便几乎没有了可操作的空间，普通的点按手势几乎完全无法准确的开启搜索功能，多次尝试后才终于得以在极小的可识别空间内打开搜索栏。而现在已经两周过去，B站依然没有对此进行修复，每次使用搜索功能都让我想到了之前小心翼翼的抠电阻屏按键的手感。而作为bilibili的主营业务，在引进类的原声动画播放时，却出现了自制字幕被Home Indicator，也就是屏幕下方的那根长条遮挡的现象，看来日语不过N1，英语没有专八简直没有办法在B站看原声剧了。其实这一问题理应非常容易解决，比如B站自行加入画面上下颠倒的功能，因为如果使用苹果自带的屏幕重力感应来翻转屏幕，那么下方那根长条也会跟随屏幕翻转而移动。或者像隔壁的优酷一样，将自制字幕设计到避开Home Indicator的位置。总之这是一个非常容易解决并且确实已经影响到了观看体验的问题，但是bilibili却并没有做出应对。▲bilibili播放日番《阿松》▲优酷播放日番《阿松》《王者荣耀》：花钱，你也不会变更强《王者荣耀》对于iPhone X的适配速度并不算快，但它确实针对“小刘海”做出了很多设计上的改动，例如将好友栏以及道具购买按键向屏幕中心平移以避开异形屏的黑边。但本以为适配后iPhone X可以像Galaxy Note8一样获得相比其他手机更大的视野，结果企鹅明显没有想让你获得这一特权。在《王者荣耀》的游戏战斗场景中，腾讯将屏幕两侧加入了渐变黑边，来遮挡多出的可显示面积，所以在进行游戏时相比iPhone 7 Plus或者iPhone 8 Plus这类手机，iPhone X不会获得更多的可视面积，花了更多的钱却没让我变更强，这真是太不符合腾讯的作风了。同时大多数的侧边菜单栏都为避开屏幕“刘海”做了拉长处理，但仔细翻阅，还是能找到部分未能进行适配的菜单，不知道《王者荣耀》何时会进行修复。《阴阳师》：那些消失的队友《阴阳师》的适配速度并不算快，它在iPhone X上市第三周周五的日常维护中才加入了对于异形屏的适配，作为一个对视野和侧边功能键没有太多需求的游戏，《阴阳师》其实也只需要简单的将显示面积拉大，占满整个屏幕即可。但在某些细节之处却能看到，《阴阳师》并没有做到尽善尽美。比如在与世界服务器玩家组队时，左侧的队友栏被完全遮盖，但在一部分其他组队功能中，左侧的队友栏又会如同《王者荣耀》一样避开“刘海”，不知道网易是否遗漏了某部分需要进行改动的设计。Chrome：令人窒息的额头大部分APP为了适配iPhone X，都会选择直接将额头处留白，让手机的“刘海”自行填充留白处，而Google的Chorme浏览器也正是这么做的。但问题在于，当横置手机时，页面的额头却依然保留了下来，在屏幕顶端留下了大约1cm的空白，最令人发指的是它并不会随着网址输入栏的隐藏而消失。要知道原本在将屏幕横置后，页面的高度就不会特别理想，而Chrome的留白进一步压榨了可视面积，让页面的可显示内容进一步缩水，而隔壁的Firefox在这方面的处理就要更好一些。▲Chrome横置页面打开网页▲Firefox横置页面打开网页支付宝：面部支付仍未加入支付宝对于iPhone X的适配速度还算令人满意，而且这样一个功能性APP，我大概每天只会用它来扫二维码，所以屏幕的适配与否并没对我的日常使用造成什么影响。但苹果手机家族中，iPhone X独有的Face ID已经过去了两周还未能应用在支付宝中，没有对比就没有伤害，隔壁主营网络通讯顺带做了支付功能的微信，几乎是第一时间便支持了面容支付。据说支付宝正在内测Face ID的应用支持，但不知何时才能上线呢？建设银行：泪流满面的更新速度建设银行APP的更新是令我始料未及的，作为曾经的iPhone 6 Plus第一批次用户，建设银行用了一年多的时间才完成了对大屏iPhone手机的适配，所以此次对于新手机的支持速度简直让人泪流满面。不过在新版建设银行APP中，虽然没有对我的使用造成什么困扰，但APP首页顶端怎么看都像是把小屏版本界面加了同色调的额头而已，底部处理则更为直接，看上去如同未进行适配后直接嵌入的设计。但在其他部分界面的设计下，却又让我确确实实的感受到我是在使用一台没有下巴的iPhone X，使用体验十分多变。不过无论如何我还是要给建设银行点个赞，因为它是目前相关APP中，少数几个完成对iPhone X适配的。隔壁的工、农、商三行再加上12306，目前还都只是嵌入小屏幕模板的设计，按照他们一贯的更新速度，想要完成适配大概也要等到明年了。其实从各家APP的适配速度来看，能明显感受到iPhone X的小刘海确实给那些设计师和程序员们造成了不小的困扰，也许大部分APP只需要拉长额头并以相同的颜色进行顶部填充即可，但还有一部分APP却需要更细心的调整，甚至是定制化的改动，而在这部分调整中，难免会出现种种细节方面的问题。但现在距离iPhone X面世已经过去了超过两周时间，一部分APP出现的问题早已暴露，甚至还暴露的非常明显，不知道想要完美适配新手机，这些APP们还要让我们等多久呢？
软媒旗下软件：
IT之家，软媒旗下科技门户网站 - 爱科技，爱这里。
Copyright (C) , All Rights Reserved.76被浏览92,471分享邀请回答513 条评论分享收藏感谢收起255 条评论分享收藏感谢收起十分钟快速掌握 iPhone X UI 界面适配技巧-ZAKER新闻
静电说：iPhone X 已经发售了有一周时间了，不少小伙伴也已经拿到了真机，目前还没有适配 iPhone X 的应用相信都在加班加点适配呢，否则那效果可真是惨不忍睹。11 月 6 号的晚上八点半，静电也在 SketchChina 的 Live！中直播了 iPhone X 的上手操作和 UI 设计师需要注意的适配要点。不过有一些小伙伴可能加班没有看到，没关系，直播回顾视频静电已经压制上传完成啦！戳下面的地址就可以看了。 另外有些小伙伴可能不方便看视频版，静电也特意整理了文字版的内容放在本文中，是不是很贴心？不想看视频的小伙伴，那么最快速的适配 iPhone X 的要点来啦，只要你掌握了这几点，公司的 APP 适配工作肯定不在话下了。如果不想看详细分析，大家可以直接拉到末尾看静电的总结。分辨率对比首先我们来看看 iPhone X 和其它 iPhone 的对比，这样才好做设计，来看看屏幕密度方面，iPhone 6/7/8 不存在逻辑分辨率，但 Plus 机型和 iPhone X 都存在逻辑分辨率。请大家注意！机型实际大小对比别看 iPhone X 是 5.8 英寸的屏幕，但是真正的手感却比 Plus 小了好多，且只比 iPhone 7 大了那么一点点的，像静电这种特别讨厌大屏幕的人使用 iPhone X 也没有任何问题，妈妈再也不用担心在床上看手机时啪一下砸脸上啦！分辨率产生的设计差异虽然我们看起来 iPhone X 只是长了不少，但别小瞧长出来的那 145pt，其实差别还是很大的。iPhone X 的物理分辨率为 ，那么一倍图是多少呢？375-812pt，那么看起来屏幕的宽度好像没有变化，这样设计师小伙伴们就舒了一口气了。适配成本和难度都降低了不少。但是别着急，我们还没有算密度，密度才是决定手机适配困难程度的一个很大指标，大家还记得密度计算的公式吗？对，就是下面这个，PPI（Pixels Per Inch），就是横向平方 + 纵向平方然后开根号的。我们看到， 逻辑分辨率下，iPhone X 的屏幕密度比 Plus 要大，分别为 444 和 401，但是真实密度，iPhone X 比 Plus 要小，分别是 458 和 489。这个时候，我们根据屏幕密度，就可以知道，其实他们都是 @3x，也就是三倍图的出图了。所以，从 plus 过渡到 iPhone X，适配成本大部分会交给工程师。设计师要做的 - 注意安全区域如果说屏幕两侧的安全区域是任何手机都需要注意的话（也就是左右两边留出适当的空白，避免误触，也可以保证视觉效果，具体的留白多少由你的设计稿确定，苹果并没有具体规定是多少）。那么在 iPhone X 上，我们还要注意另两个重要的安全区域，就是屏幕上下的两块内容：上部为 " 刘海 " 区域，只能放一些系统状态之类的内容，并且刘海区域需要在设计稿中体现出来。那么屏幕下方，则是很多设计师都会忽略的内容，就是一个虚拟控制条，这跟神奇的条起到了 home 键的作用，因此我们不能让内容和这个条产生冲突，因此你会发现标准的适配过的应用，屏幕下方都留了不少空间。接下来我们看看世面上的现在已经号称适配过的应用，哪些做的是对的，哪些做的有问题呢？很明显，左边的淘宝有点夸张，中间的微信适配的不错，而最右边那个，好吧，压根没有适配过。另外我们也可以在这个截图中得知，截图是没有刘海出现的哈。安全区域的尺寸？在一倍图设计模式下，上方的 Status bar 的高度为 44pt，下方的控制条，请至少留出 34pt 的高度，注意我说的是一倍图设计模式下，单位是 pt 而非像素。有同学可能会问，那换算成像素怎么换算呢？毕竟 iPhone X 是三倍图，那就乘以 3 就得到实际像素了。现在，大部分的适配工作已经完成，其实我们只需要根据之前的设计稿做一些小小的改动就好了，是不是很简单？设计师要做的 - 修改全屏图片的大小由于 iPhone X 长出来一截，因此之前全屏比例的图片在 iPhone X 上就会变形，如下图所示，因此开发工程师可能为了适配，将原有的图片拉大，充满整个屏幕，如果不拉大，那么就会出现下图第一排最右边图的效果，上下白边非常难看。另一种情况，你的图片可能会挤压变形，那就是第二排图片的样子了。因此，设计师要根据 iPhone X 的分辨率为启动界面，闪屏图片，以及一些全屏浮动的提示框设计一套图片，好吧，我们的工作量又增大了。设计师要做的 - 注意色彩空间iPhone X 的显示屏幕使用 P3 色彩空间，相比较传统的 sRGB 色彩空间，它显示的色彩会更加丰富，更加真实，因此设计师的老问题就来了 " 为什么我在 Sketch 中导出的图片 " 放到手机上颜色不一样呢？答案就在这里了。不过，静电觉得这个问题我们是无解的，毕竟色彩空间是跟随显示介质走的，比如你的显示器是一种色彩空间，手机又是另一种，因此这种隐形的色彩差异，咱们就忽略了吧。设计师要做的 - 注意视频的展示方式说到这里你一定会吐槽这个大刘海，毕竟遮住了一部分的影片内容，但你也可以选择将他们缩小显示一下，也是个好主意，刘海部分就不要放什么东西了。以下是苹果的建议，咱们看看就好。什么？你说王者农药啥样？来！看下图，其实不适配挺好的。设计师要做的 - 交互的改变交互的改变在 iPhone X 上非常明显，比如通过底部控制条上滑返回桌面等等。大家可以看看本文开头的视频展示，静电详细的为大家做了介绍。总之，不管你是否拥有新手机，一定要尽快适配它哈，至于人脸识别之类的黑科技，静电体验过觉得它太赞了！识别速度和指纹识别是不相上下的，甚至更流畅，像静电这样的大汗手，真是福利呀。不想看长文？那直接看总结！1. 务必注意 iPhone X 的安全区域，并不是把设计稿直接拉长就可以2. 注意全屏图片和视频的适配3. 一倍图下你可以用 375-812px 来设计，这个兼容 iPhone plus，也就是说，三倍图要成为主流了？4. 上 Status bar 区域 44pt 高，下控制条区域至少 34pt 高（一倍图情况下）5. 注意交互方式的改变所带来的影响。思考问题的小提示：请注意静电分析问题的方式，遇到一件新事物，比如新手机，你可以从它的分辨率，尺寸入手，进而推算出其屏幕密度，这样你可以立马知道它的一些设计规则是否跟老的机型有区别。思考问题的方式至关重要，大家要尝试从这方面去分析，比如分析静电的文章，而不是只想要一个最后的结果。因为过程其实很重要，对于设计师来说更是这样一个道理。版权声明本文部分图片来自苹果官网本文欢迎转载，但请注明以下信息本文来自公众号 " 静 Design"，作者：静电最后欢迎大家通过微信关注静 Design微信公众号（ID：jingdesign91），静 Design 交流 ( 1 ) 群：静 Design 交流 ( 2 ) 群：喜欢本文就在下方点个赞吧！
相关标签：
原网页已经由 ZAKER 转码排版
蜂鸟网21分钟前
爱稀奇2小时前
摄影之友6小时前
人民攻摄4小时前
一介4小时前
胶片的味道4小时前
一介4小时前
艺术云图6小时前
京内网7小时前
优设3小时前
摄影之友10小时前
站酷画报9小时前
大卫传奇艺术9小时前
烩设计9小时前
大卫传奇艺术9小时前